diantou/src_product/iam/audit/operationLog/xm-operation-statistics.vue

<template>
  <div>
    <a-col :span="20" style="z-index:100">
      <a-form-model v-bind="{ wrapperCol: { span: 24 } }">
        <a-form-model-item>
          统计时间:
          <a-date-picker
            v-model="startDate"
            :default-value="startDate"
            placeholder="开始时间"
            @change="dateChange"
          />
          ~
          <a-date-picker
            v-model="endDate"
            :default-value="endDate"
            placeholder="结束时间"
            @change="dateChange"
          />
          {{ tip }}
          &nbsp;&nbsp;&nbsp;&nbsp;
          <a-button @click="changDate('day', -7)">近七天</a-button>
          <a-button @click="changDate('month', -1)">近一个月</a-button>
          <a-button @click="changDate('month', -3)">近三个月</a-button>
        </a-form-model-item>
      </a-form-model>
    </a-col>
    <sd-data-table
      ref="dataTable"
      :columns="columns"
      :data-url="'api/xcoa-mobile/v1/operation-log/statistics'"
      :process-req="processReq"
      :defultpagination-pagesize="100"
      :process-res="processRes"
      :row-key="'menuId'"
      :change-param="changeParam"
    >
    </sd-data-table>
  </div>
</template>

<script>
import moment from 'moment'
import components from './_import-components/xm-operation-log-list-import'
export default {
  name: 'XmOperatorStatisticsList',
  metaInfo: {
    title: '用户操作统计',
  },
  components,
  data() {
    return {
      startDate: '2024-01-11',
      endDate: '2024-01-11',
      tip: '',
      data: [],
      columns: [],
    }
  },
  computed: {},
  mounted() {
    this.columns.push({ title: '模块', dataIndex: 'menuName' })
    this.columns.push({ title: '点击次数', dataIndex: 'count' })
    this.changDate('day', -7)
  },
  methods: {
    dateChange(data) {
      this.$refs.dataTable.refresh()
      this.tip = ''
    },
    changDate(type, amount) {
      if (type === 'day') {
        const d1 = new Date()
        d1.setDate(d1.getDate() + amount)
        this.startDate = moment(d1.getTime()).format('YYYY-MM-DD')
        this.endDate = moment(new Date().getTime()).format('YYYY-MM-DD')
        this.tip = '近' + Math.abs(amount) + '天'
      }
      if (type === 'month') {
        const d2 = new Date()
        d2.setMonth(d2.getMonth() + amount)
        this.startDate = moment(d2.getTime()).format('YYYY-MM-DD')
        this.endDate = moment(new Date().getTime()).format('YYYY-MM-DD')
        this.tip = '近' + Math.abs(amount) + '个月'
      }
      this.$refs.dataTable.refresh()
    },
    changeParam(param) {
      console.log(param)
      param.startDateRange = this.startDate
      param.endDateRange = this.endDate
    },
    processRes(res) {
      return res
    },
    processReq(req) {
      if (req.data.pageSize === undefined) {
        req.data.pageSize = 10
      }
      return req
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
</style>