rtasis copy.vue

<template>
  <div class="customgroup-wrapper">
    <h3 class="asis-table-header">
      <span class="asis-table-download" @click="exportDataHandle('rtChart', residenceTimeTitle, 'customerfeature_residence')">
        {{ $t('allPages.load') }}
      </span>
    </h3>
    <div class="asis-table-content" v-loading="loading">
      <mix-charts
        chartId="rtChart"
        class="gender-wrapper residence-time-chart"
        :chartData="residenceTimeChart"
        :chartType="chartType"
      />
      <el-table
        class="asis-table"
        id="domResidenceTime"
        :data="residenceTimeTable"
        header-row-class-name="asis-table-head"
        :span-method="arraySpanMethod"
        style="width: 100%">
        <el-table-column
          :prop="item.prop"
          :label="item.label"
          align="center"
          v-for="item in residenceTimeThead"
          :key="item.prop"
          min-width="100"
        >
        </el-table-column>
      </el-table>
      
    </div>
    <export-data-dialog ref="exportDialog" />
  </div>
</template>

<script>
import ExportDataDialog from '@/views/public/exportData'

export default {
  props: {
    propparam: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      emitData: {},
      loading: true,
      tableIds: '',
      tableKeyToId: {},
      optionRadio: '',
      residenceTimeTitle: '',
      residenceTimeChart: {},
      residenceTimeTable: [],
      residenceTimeThead: [],
      chartType: ''
    }
  },
  components: {
    ExportDataDialog
  },
  watch: {
    propparam: {
      handler: 'refreshHandle',
      immediate: true
    }
  },
  mounted() {
  },
  methods: {
    refreshHandle(param) {
      if (param.dateType !== '/residencetime/rtasis') return
      this.emitData = param.data
      this.chartType = param.data.asis_date === 'day' ? 'LineBar' : 'Line'
      this.loading = true
      if (this.tableIds && JSON.stringify(this.tableKeyToId) !== '{}') {
        this.getTableData(this.tableIds)
      } else {
        this.getTableId()
      }
    },
    getTableId() {
      this.tableKeyToId = {}
      this.tableIds = ''
      let chartKeysList = ['customerfeature_residence', 'customerfeature_residence_table']
      this.$api.baseReport.reportChart({
        report: 'residence'
      })
        .then(res => {
          let tableItem = res.data;
          tableItem.data.forEach((item, index) => {
            if (chartKeysList.includes(item.key)) {
              this.tableKeyToId[item.key] = item.id
              if (index == tableItem.data.length - 1) {
                this.tableIds += item.id
              } else {
                this.tableIds += item.id + ','
              }
            }
          })
          this.getTableData()
        })
    },
    getTableData() {
      this.residenceTimeChart = {}
      this.residenceTimeTable = []
      this.residenceTimeThead = []
      let
        {
          emitData: {
            asis_org, asis_date, asis_time, asis_stage
          },
          tableIds
        } = this,
        { startTime, endTime } = this.newDateFormat(asis_date, asis_time),
        params = {
          orgIds: asis_org,
          startDate: startTime,
          endDate: endTime,
          ResidenceStage: asis_stage,
          chartIds: tableIds
        }

      this.$api.customerReport.residenceReport(params)
        .then(res => {
          let result = res.data
          let {
            customerfeature_residence = {},
            customerfeature_residence_table = {}
          } = result.data.body
          this.residenceTimeTitle = customerfeature_residence.title
          // table
          this.residenceTimeThead = this.autoComplateHead(customerfeature_residence_table.xaxis.data)
          let tableData = this.dealTableData(this.residenceTimeThead, customerfeature_residence_table.series)
          if (asis_date === 'day') {
            if (tableData.length) {
              let temp = {}
              this.residenceTimeThead.forEach((item, index) => {
                if (index === 0) {
                  temp[item.prop] = this.$t('asisTab.comprehensive')
                } else {
                  temp[item.prop] = customerfeature_residence_table.chartKey + this.$t('format.minutesUnit')
                }
              })
              tableData.push(temp)
            }
            // chart
            customerfeature_residence.otherConf = {
              _color: ['#3BB8FF', '#87D14B', '#FFC62E'],
              grid: { top: 30, right: 60, bottom: 52, left: 60 },
              legendBottom: 6,
              yAxisName: [this.$t('format.perNum'), '%'],
              seriesText: 'personNum'
            }
          } else {
            customerfeature_residence.otherConf = {
              _color: ['#3BB8FF'],
              grid: { top: 30, right: 26, bottom: 52, left: 60 },
              legendBottom: 6,
              yAxisName: this.$t('format.minutesUnit'),
              seriesText: 'dwelltime'
            }
          }
          this.residenceTimeTable = tableData
          this.residenceTimeChart = customerfeature_residence
          this.loading = false
        })
        .catch(err => {
          this.catchErrorHandle(err)
          this.loading = false
        })
    },
    autoComplateHead(headData) {
      return headData.map((k, index) => {
        return {
          prop: 'defaultOrg' + index,
          label: k
        }
      })
    },
    dealTableData(headData, data) {
      let temp = {}
        , result = []

      data.forEach((item) => {
        temp = {}
        item.data.forEach((dataItem, i) => {
          if (i === 2) {
            temp[headData[i].prop] = (item.data[i] || item.data[i] == 0)
              ? item.data[i] + (this.emitData.asis_date === 'day' ? '%' : this.$t('format.minutesUnit'))
              : '--'
          } else {
            temp[headData[i].prop] = (item.data[i] || item.data[i] == 0) ? item.data[i] : '--'
          }
        })
        result.push(temp)
      })
      return result
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === this.residenceTimeTable.length - 1 && this.emitData.asis_date === 'day') {
        if (columnIndex === 0) {
          return [1, 1]
        } else if (columnIndex === 1) {
          return [1, 2]
        } else {
          return [0, 0]
        }
      }
    },
    exportDataHandle(domId, title, chartKey) {
      let
        {
          emitData: {
            asis_org, asis_date, asis_time, asis_stage
          },
        } = this,
        { startTime, endTime } = this.newDateFormat(asis_date, asis_time),
        chartId = this.tableKeyToId[chartKey],
        exportNeed = {
          domId: domId,
          title: title,
          data: {
            url: '/report/residence/mall/' + chartId + '/excel',
            params: `orgIds=${asis_org}&startDate=${startTime}&endDate=${endTime}&ResidenceStage=${asis_stage}`
          }
        }
      this.$refs.exportDialog.dialogInit(exportNeed)
    }
  }
}
</script>

<style scoped>
.customgroup-wrapper {
  padding: 12px 16px;
  margin-bottom: 12px;
  background-color: #fff;
}
.residence-time-chart {
  margin-bottom: 12px;
}
</style>