index.vue

<template>
  <div class="base-analysis">
    <el-header height="70px">
      <span class="asis-title">{{ asisName }}&nbsp;{{$t('asis.DurationTime')}}</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>
    <duration-time-option v-show="moreOptVisible" ref="init" @reportTime="reportHandler" @initData="initTab" />
    <div class="element-main rank-main">
      <!-- 小时分钟合并 -->
      <div class="asis-table-wrapper dt-content-wrapper">
        <h3 class="asis-table-header">
          <span class="asis-table-title">{{ i18nFormatter(durationTimeTitle) }}</span>
          <span class="asis-table-download" @click="exportDataHandle(isTabChart ? 'domDurationTimeTable' : 'domDurationTimeChart', i18nFormatter(durationTimeTitle))">{{$t('allPages.load')}}</span>
          <span class="report-type-box">
            <span :class="['report-item', 'line-report', { 'report-item-line': !isTabChart }]" @click="selReport('bar')"></span>
            <span :class="['report-item', { 'report-item-tab': isTabChart }]" @click="selReport('table')"></span>
          </span>
        </h3>
        <div class="asis-table-content" v-loading="loading">
          <el-table
            v-if="isTabChart"
            class="asis-table"
            id="domDurationTimeTable"
            :data="tableData"
            header-row-class-name="asis-table-head"
            style="width: 100%"
            :max-height="tableHeight">
            <comp-col v-for="(item, index) in columnData" :key="index" :col="item" />
          </el-table>
          <!-- chart -->
          <mix-charts v-else chartId="domDurationTimeChart" class="duration-time-chart" :style="{ height: tableHeight + 'px' }" :chartData="chartData" chartType="Line" />
        </div>
      </div>
    </div>
    <export-dialog ref="exportDialog" />
  </div>
</template>

<script>
import exportDialog from '@/views/public/exportData'
import durationTimeOption from '../common/option/durationTimeOption'
import CompCol from '@/views/public/myColum'
export default {
  components: {
    durationTimeOption,
    exportDialog,
    CompCol
  },
  data() {
    return {
      moreOptVisible: false,
      asisName: '',
      emitData: {},
      chartKeyToId: {},
      chartIds: '',
      durationTimeTitle: '', //今日新增客流报表
      loading: false,
      isTabChart: false,
      // tableHeight: 0,
      tableData: [],
      columnData: [],
      chartData: {}
    }
  },
  computed: {
    tableHeight() {
      const windowHeight = window.innerHeight
      const scale = windowHeight <= 720
        ? 0.35
        : windowHeight <= 768
          ? 0.33
          : windowHeight <= 900
            ? 0.28
            : windowHeight <= 1080
              ? 0.31
              : 0.28
      return windowHeight - windowHeight * scale
    }
  },
  created() {
    this.getMallOpt();
  },
  mounted() {
    this.showCollapse()
  },
  methods: {
    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;
        this.$refs.init.initAsis(localMallId, mallData)
        },(rejectData) => {
        })
    },
    initTab(data) {
      this.loading = true
      this.asisName = data.asis_tit;
      this.emitData = data;
      this.tableKeyToId = {};
      this.tableIds = '';
      this.getChartKey();
    },
    getChartKey() {
      this.$api.baseReport.reportChart({
        report: 'residenceTime',
      })
        .then(res => {
          let tableItem = res.data.data;
          tableItem.forEach((item, index) => {
            this.tableKeyToId[item.key] = item.id;
            if (item.key === 'residenceTimeChart') {
              this.chartIds = item.id
            }
          })
          this.getData()
        })
        .catch(err => { this.$throw(err) })
    },
    dataFetch() {
      return new Promise((resolve, reject) => {
        let
          {
            chartIds,
            isTabChart,
            emitData: {
              asis_org, asis_level, asis_date, asis_time
            },
            advanceTime
          } = this,
          {
            startTime, endTime
          } = this.newDateFormat(asis_date, asis_time)
        
        
        if (asis_date === 'month') {
          endTime.split('-')[0] == new Date().getFullYear()
            && endTime.split('-')[1] == new Date().getMonth() + 1
            && endTime.split('-')[2] == new Date().getDate()
            && (endTime = advanceTime(endTime))
        }
        let parameter = {
            orgIds: asis_org,
            startDate: startTime,
            endDate: endTime,
            chartIds: chartIds,
            option: isTabChart ? 'TAB_TABLE' : 'TAB_CHART'
          }

        this.$api.analysisReport.residenceTime(asis_level, parameter)
          .then(res => {
            let { data } = res.data
            resolve(data)
          })
          .catch(err => {
            this.catchErrorHandle(err)
          })
      })
    },
    async getData() {
      if (!this.chartIds) return
      let result = await this.dataFetch()
      this.durationTimeTitle = 'residenceTimeStatistics'
      let
        {
          isTabChart,
          autoComplateHead,
          dealData,
          emitData: {
            asis_date
          }
        } = this,
        { residenceTimeChart } = result.body

      this.columnData = []
      this.tableData = []
      this.chartData = {}
      if (residenceTimeChart) {
        if (isTabChart) {
          this.columnData = autoComplateHead('table', residenceTimeChart.xaxis.data)
          this.tableData = dealData(residenceTimeChart.series, this.columnData)
        }
        else {
          let _otherConf = {
            _color: ['#3BB8FF', '#FFC62E', '#FF9631', '#4396ec', '#f39c38', '#4054af', '#d83965', '#e35241', '#9036aa', '#6041b0', '#4fb9d1', '#3f9488', '#97c05c', '#154bee'],
            yAxisName: this.$t('format.minutesUnit'),
            seriesText: 'dwelltime',
            isYear: asis_date === 'year',
            grid: { top: 28, right: 21, bottom: 66, left: 50 },
            legendBottom: 12
          }
          if (asis_date === 'year') {
            _otherConf = Object.assign({}, _otherConf, {
              grid: { top: 28, right: 21, bottom: 66, left: 50 },
              legendBottom: 8
            })
          }
          residenceTimeChart.otherConf = _otherConf
          this.chartData = residenceTimeChart
        }
      }
      this.loading = false
    },
    selReport(reportChart) {
      if (reportChart === 'table') {
        if (this.isTabChart) return
        this.isTabChart = true
      } else {
        if (!this.isTabChart) return
        this.isTabChart = false
      }
      this.getData()
    },
    reportHandler(emitData) {
      this.loading = true
      this.emitData = emitData
      this.asisName = emitData.asis_tit
      if (this.chartIds) {
        this.getData()
      } else {
        this.getChartKey()
      }
    },
    // 提前一天, 当天没有统计完
    advanceTime(timeStr) {
      let strToDate

      if (typeof timeStr === 'string') {
        strToDate = new Date(timeStr.replace(/\-/g, '/'))
        return dateUnit.dateFormat(new Date(Date.parse(strToDate) - 24 * 60 * 60 * 1000), 'yyyy-MM-dd')
      }
      return timeStr
    },
    exportDataHandle(domId, title) {
      let
        {
          chartIds,
          isTabChart,
          emitData: {
            asis_org, asis_level, asis_date, asis_time
          },
          dealExport,
          advanceTime
        } = this,
        {
          startTime, endTime
        } = this.newDateFormat(asis_date, asis_time)

      asis_date === 'month'
        && endTime.split('-')[0] == new Date().getFullYear()
        && endTime.split('-')[1] == new Date().getMonth() + 1
        && endTime.split('-')[2] == new Date().getDate()
        && (endTime = advanceTime(endTime))
      let exportNeed = {
          domId: domId,
          title: title,
          data: {
            url: `/residenceTime/${asis_level}/${chartIds}/excel`,
            params: `orgIds=${asis_org}&startDate=${startTime}&endDate=${endTime}&option=${isTabChart ? 'TAB_TABLE' : 'TAB_CHART'}`
          }
        }

      if (isTabChart) {
        dealExport(domId, title)
      }
      else {
        this.$refs.exportDialog.dialogInit(exportNeed)
      }
    },
  },
}
</script>
<style scoped>
.rank-table-wrapper {
  position: relative;
  padding: 0;
}

.dt-content-wrapper {
  padding-bottom: 0;
}
</style>