passenger-retention.vue

<template>
  <div class="base-analysis">
    <el-header height="70px">
      <span class="asis-title">{{ asisName }}&nbsp;{{ $t('asis.PassengerRetention') }}</span>
      <span class="more-option-wrapper" @click="showCollapse">
        <span class="more-option-text">{{$t('asis.moreOp')}}</span>
        <i :class="['el-icon-arrow-down', 'more-option-arrow', { 'more-option-up': !moreOptVisible }]"></i>
      </span>
    </el-header>
    <!-- :mallData="mallData"  -->
    <more-option v-show="moreOptVisible" ref="init" @reportTime="reportHandler" @initData="initTab" />
    <div class="element-main rank-main">
      <!-- 小时分钟合并 -->
      <div class="asis-table-wrapper">
        <h3 class="asis-table-header">
          <span class="asis-table-download" @click="exportDataHandle(isTabChart ? 'domRetention' : 'retentionChart', retentionTitle)">
            {{ $t('allPages.load') }}
          </span>
          <span class="report-type-box">
            <span class="report-item line-report" :class="!isTabChart ? 'report-item-line' : ''" @click="selReport('line')"></span>
            <span class="report-item" :class="isTabChart ? 'report-item-tab' : ''" @click="selReport('table')"></span>
          </span>
        </h3>
        <div class="date-radio-wrapper tf-ratio-group single-ratio-group">
          <el-radio-group v-model="optionRadio" size="mini" fill="#0069FF" @change="handleRadioChange(optionRadio)">
            <el-radio-button label="TAB_MINUTE" border>
              {{ $t('button.min') }}
            </el-radio-button>
            <el-radio-button label="TAB_HOUR" border>
              {{ $t('button.hour') }}
            </el-radio-button>
          </el-radio-group>
        </div>
        <div class="asis-table-content" v-loading="loading">
          <el-table
            v-if="isTabChart"
            class="asis-table"
            id="domRetention"
            :data="retentionTable"
            header-row-class-name="asis-table-head"
            style="width: 100%"
            :max-height="tableHeight">
            <el-table-column :prop="item.prop" :label="item.label" align="center" v-for="item in retentionHead" :key="item.prop" min-width="100">
            </el-table-column>
          </el-table>
          <!-- 折线图 -->
          <mix-charts v-else chartId="retentionChart" class="retention-chart-box" :chartData="retentionChartData" chartType="Line" :style="{ height: tableHeight + 'px' }" />
        </div>
      </div>
    </div>
    <export-data-dialog ref="exportDialog" />
  </div>
</template>

<script>
import ExportDataDialog from '@/views/public/exportData'
import MoreOption from '../common/option/retentionMoreOption'

export default {
  components: {
    MoreOption, ExportDataDialog
  },
  data() {
    return {
      moreOptVisible: false,
      asisName: '',
      asisLevel: '',
      emitData: {},
      tableHeight: 0,
      loading: true,
      // mallData: [],
      isTabChart: false,
      optionRadio: 'TAB_MINUTE',
      chartKeyToId: {},
      chartIds: '',
      retentionTitle: '',
      retentionTable: [],
      retentionHead: [],
      retentionChartData: {}
    }
  },
  created() {
    let winH = $(window).height(), scale = 0.28
    if (winH <= 720) {
      scale = 0.35
    } else if (winH <= 768) {
      scale = 0.33
    } else if (winH <= 900) {
      scale = 0.28
    } else if (winH <= 1080) {
      scale = 0.31
    }
    this.tableHeight = winH - winH * scale
    this.getMallOpt();
  },
  mounted() {
    this.showCollapse()
  },
  methods: {
    i18n(value) {
      let name = 'format.' + value;
      return this.$t(name)
    },
    showCollapse() {
      // 获取上面元素的高度
      let headerH = '', titleH = '', collapseH = '', mt = ''

      headerH = this.getStyleFn('.el-header', 'height')
      titleH = this.getStyleFn('.analysis-wrapper .el-header', 'height')
      if (this.moreOptVisible) {
        this.moreOptVisible = false
        mt = headerH + titleH + 8 + 'px'
        $('.rank-main').animate({ marginTop: mt })
      } else {
        this.moreOptVisible = true
        setTimeout(() => {
          collapseH = this.getStyleFn('.analysis-option-wrapper', 'height')
          mt = headerH + titleH + collapseH + 8 + 'px'
          $('.rank-main').animate({ marginTop: mt })
        }, 100);
      }
    },
    getMallOpt() {
      this.getCommonMalls().then(resolveData => {
        let {mallData,localMallId,titleName,multiMallId} = resolveData;
        let refMallId = {
            'mallId': localMallId,
            'multiMallId': multiMallId
        }
        this.$refs.init.initAsis(refMallId, mallData);
      },(rejectData) => {
      })
      // this.$api.base.mall({
      //   accountId: this.$cookie.get('accountId'),
      //   status: 1,
      // }).then(res => {
      //   let titleName = '', refMallId = null;
      //   if (res.data.data.length >= 1) {
      //     let localMallId = window.sessionStorage.getItem('mallId');
      //     localMallId ? Number(localMallId) : false;
      //     res.data.data.forEach((item, index) => {
      //       this.mallData.push(item);
      //       if (localMallId) {
      //         if (item.id == localMallId) {
      //           titleName = item.name;
      //         }

      //       }
      //     });
      //     refMallId = localMallId ? Number(localMallId) : res.data.data[0].id;
      //     this.$refs.init.initAsis(refMallId);
      //   }
      // })
    },
    initTab(data) {
      this.emitData = data
      this.asisName = data.asis_tit
      this.chartKeyToId = {}
      this.chartIds = ''
      this.getchartKey()
    },
    getchartKey() {
      let 
        {
          getTableData,
          isTabChart,
          emitData: { asis_level }
        } = this,
        chartKeyList = ['retentionInAndOutLine', 'retentionInAndOutTable']

      this.$api.baseReport.reportChart({
        report: 'retentionInAndOut',
      })
        .then(res => {
          let { data } = res.data
          data.forEach(item => {
            if (chartKeyList.includes(item.key)) {
              this.chartKeyToId[item.key] = item.id
            }
          })
          this.chartIds = this.isTabChart
            ? this.chartKeyToId['retentionInAndOutTable']
            : this.chartKeyToId['retentionInAndOutLine']
          this.getTableData()
        })
        .catch(err => { this.$throw(err) })
    },
    getTableData() {
      // retentionInAndOut
      let
        {
          isTabChart,
          $cookie,
          getChart,
          emitData: {
            asis_org, asis_date, asis_time, asis_level
          }
        } = this,
        param = {}

      this.retentionTitle = ''
      this.retentionChartData = {}
      this.retentionHead = []
      this.retentionTable = []

      // 时间处理
      let { startTime, endTime } = this.newDateFormat(asis_date, asis_time)
      param = {
        orgIds: asis_org,
        chartIds: this.chartIds,
        option: this.optionRadio,
        date: startTime
      }

      this.$api.analysisReport.retentionInAndOut(param)
        .then(res => {
          if (res.data.code !== 200) {
            this.$message.error('error!!')
            return
          }
          let 
            {
              data: {
                body: {
                  retentionInAndOutLine = {},
                  retentionInAndOutTable = {}
                }
              }
            } = res.data
          if (isTabChart) {
            this.retentionTitle = retentionInAndOutTable.title
            // table
            this.retentionHead = this.autoComplateHead(retentionInAndOutTable.xaxis.data)
            this.retentionTable = this.dealTableData(this.retentionHead, retentionInAndOutTable.series)
          } else {
            this.retentionTitle = retentionInAndOutLine.title
            retentionInAndOutLine.otherConf = {
              _color: ['#33bafe', '#6e6fc1', '#fec62b', '#ff9c01', '#38d4be', '#79ce4c'],
              grid: {
                top: 10,
                right: 26,
                left: 40,
                bottom: 52
              },
              seriesText: 'personNum'
            }
            this.retentionChartData = retentionInAndOutLine
          }
          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) => {
          temp[headData[i].prop] = (item.data[i] || item.data[i] == 0) ? item.data[i] : '--'
        })
        result.push(temp)
      })
      return result
    },
    handleRadioChange(val) {
      this.getTableData()
    },
    selReport(reportChart) {
      let
        {
          chartKeyToId, emitData: { asis_level }, getTableData
        } = this

      if (reportChart === 'table') {
        if (this.isTabChart) return
        this.isTabChart = true
        this.chartIds = this.chartKeyToId['retentionInAndOutTable']
      } else {
        if (!this.isTabChart) return
        this.isTabChart = false
        this.chartIds = this.chartKeyToId['retentionInAndOutLine']
      }
      this.loading = true
      getTableData()
    },
    reportHandler(data) {
      this.emitData = data
      this.asisName = data.asis_tit
      this.loading = true
      // 默认table表格 
      if (this.chartIds) {
        this.getTableData()
      } else {
        this.getchartKey()
      }
    },
    exportDataHandle(domId, title) {
      let
        {
          $cookie,
          isTabChart,
          emitData: { asis_org, asis_date, asis_time },
          chartIds,
          optionRadio
        } = this,
        { startTime, endTime } = this.newDateFormat(asis_date, asis_time),
        exportDate = asis_date === 'day' ? `date=${startTime}` : `startDate=${startTime}&endDate=${endTime}`,
        exportNeed = {
          domId: domId,
          title: title,
          data: {
            url: `/report/retentionInAndOut/mall/${chartIds}/excel`,
            params: `orgIds=${asis_org}&${exportDate}&option=${optionRadio}`
          }
        }
      if (isTabChart) {
        this.dealExport(domId, title)
      }
      else {
        this.$refs.exportDialog.dialogInit(exportNeed)
      }
    }
  }
}
</script>