trafficStat.vue

<template>
  <div class="customgroup-wrapper">
    <el-header height="70px">
      <span class="behavior-title">{{ repTitle }} {{ $t('Behavior.trafficstat') }}</span>
      <span class="more-option-wrapper" @click="showCollapse">
        <span class="more-option-text">{{$t('Behavior.moreOp')}}</span>
        <i :class="['el-icon-arrow-down', 'more-option-arrow', { 'more-option-up': !moreOptVisible }]"></i>
      </span>
    </el-header>
    <more-option ref="conditionOpt" v-show="moreOptVisible" @reportTime="reportHandler" @initData="initTab" />
    <div class="element-main behavior-main">
      <!-- 人脸统计详情 -->
      <div class="asis-table-wrapper">
        <!-- <ul class="legend-container" v-if="!isTabChart">
          <li class="legend-item" v-for="(item, index) in checkedMallList" :key="item.id" @click="checkLegend(item.id)">
            <span class="el-icon-circle-check legend-circle" :style="{ color: checkedMall === item.id ? '#409EFF' : '#e5e5e5' }">
            </span>
            <span class="legend-text">{{ item.name }}</span>
          </li>
        </ul> -->
        <h3 class="asis-table-header">
          <span class="asis-table-title">{{ i18nFormatter(effData_title) }}</span>
          <span class="asis-table-download" @click="exportDataHandle(isTabChart ? 'domNewOldCustomer' : 'newOldCustomerChart', i18nFormatter(effData_title))">{{$t('allPages.load')}}</span>
          <!-- <span class="report-type-box">
            <span :class="['report-item', 'bar-report', { 'report-item-bar': !isTabChart }]" @click="selReport('bar')"></span>
            <span :class="['report-item', { 'report-item-tab': isTabChart }]" @click="selReport('table')"></span>
          </span> -->
        </h3>
        <div class="asis-table-content newoldCustomer-chart-wrapper" v-loading="loading">
          <!-- :span-method="collapsedColumn" -->
          <el-table
            id="domNewOldCustomer"
            :data="tableData"
            :max-height="tableHeight"
            style="width: 100%;"
            header-row-class-name="manage-tab-head"
            row-class-name="manage-row"
            tooltip-effect="light"
            v-if="isTabChart">
            <comp-col v-for="(item, index) in columnData" :key="index" :col="item" />
          </el-table>
          <!-- x: 人数 y: 日期 -->
          <mix-charts v-else chartId="newOldCustomerChart" class="newoldCustomer-line-chart" :style="{ height: chartHeight + 'px' }" :chartData="chartData" chartType="NormalStackBar" />
        </div>
      </div>
    </div>
    <export-dialog ref="exportDialog" />
  </div>
</template>

<script>
import MoreOption from './common/option/trafficStatOps'
import CompCol from '@/views/public/myColum'
import ExportDialog from '@/views/public/exportData'
import { param } from '@/utils'

export default {
  components: { MoreOption, CompCol, ExportDialog },
  data() {
    return {
      repTitle: '',
      moreOptVisible: false,
      isTabChart: true,
      loading: true,
      tableHeight: 0,
      chartHeight: 0,
      effData_title: 'effectiveflow',
      tableData: [],
      columnData: [],
      allChartData: {},
      chartData: {},
      checkedMallList: [],
      checkedMall: null,
      emitData: {},
      // spanTemp: {}
    }
  },
  created() {
    const winH = this.computedWinH()
    this.chartHeight = winH - 90
    this.tableHeight = winH
    window.addEventListener('resize', () => {
      this.tableHeight = winH
      this.moreOptVisible = false
      this.showCollapse()
    })
  },
  mounted() {
    this.getMallOpt()
    this.showCollapse()
  },
  methods: {
    showCollapse() {
      // 获取上面元素的高度
      let headerH = '', titleH = '', collapseH = '', mt = '';
      headerH = this.getStyleFn('.el-header', 'height');
      titleH = this.getStyleFn('.customgroup-wrapper .el-header', 'height');
      if (this.moreOptVisible) {
        this.moreOptVisible = false;
        mt = headerH + titleH + 8 + 'px';
        $('.behavior-main').animate({ marginTop: mt });
      } else {
        this.moreOptVisible = true;
        setTimeout(() => {
          if (document.documentMode) {
            collapseH = this.getStyleFn('.analysis-option-wrapper', 'height');
            collapseH = collapseH + this.getStyleFn('.analysis-option-wrapper', 'paddingTop') + this.getStyleFn('.analysis-option-wrapper', 'paddingBottom')
          } else {
            collapseH = this.getStyleFn('.analysis-option-wrapper', 'height');
          }
          mt = headerH + titleH + collapseH + 8 + 'px';
          $('.behavior-main').animate({ marginTop: mt });
        }, 100);
      }
    },
    getMallOpt() {
      this.getCommonMalls()
        .then(resolveData => {
          let { mallData, localMallId, titleName, multiMallId } = resolveData
          let refMallId = {
            'mallId': localMallId,
            'multiMallId': multiMallId
          }
          this.$refs.conditionOpt.initAsis(refMallId, mallData)
        }, rejectData => {})
    },
    initTab(data) {
      this.emitData = data
      this.repTitle = data.asis_tit
      this.getData()
    },
    reportHandler(data) {
      this.emitData = data
      this.repTitle = data.asis_tit
      this.getData()
    },
    dataFetch() {
      return new Promise((resolve, reject) => {
        const {
          emitData, $api, isTabChart
        } = this
        const {
          asis_level,
          asis_date,
          asis_time,
          asis_org,
          asis_gender,
          asis_age
        } = emitData
        const { startTime, endTime } = this.newDateFormat(asis_date, asis_time)
        const parameter = {
          orgIds: asis_org,
          startDate: startTime,
          endDate: endTime,
          ageStage: asis_age,
          gender: asis_gender
        }
        $api.flowReport.mallDayEffective(parameter)
          .then(res => {
            resolve(res.data)
          })
          .catch(err => {
            console.error(err)
            this.$message({
              type: 'error',
              message: err
            })
          })
      })
    },
    async getData() {
      this.loading = true
      try {
        let result = await this.dataFetch()
        if (result.code === 200) {
          const {
            isTabChart,
            autoComplateHead,
            dealData
          } = this 
          if (isTabChart) {
            this.columnData = autoComplateHead('table', result.data.xaxis.data)
            this.tableData = dealData(result.data.series, this.columnData)
          }
        }
      } catch(err) {
        this.catchErrorHandle(err)
      }
      this.effData_title = 'EffTrafficStat'
      this.loading = false
    },
    dateFormatter(row, column, cellValue) {
      let dateStr = '';
      if (cellValue) {
        if (cellValue.split(' ').length > 0) {
          dateStr = cellValue.split(' ')[0];
        } else {
          dateStr = '--';
        }
      }
      return dateStr;
    },
    selReport(iconType) {
      if (iconType === 'bar') {
        if (this.isTabChart) {
          this.isTabChart = false
          this.getData()
        }
      } else {
        if (!this.isTabChart) {
          this.isTabChart = true
          this.getData()
        }
      }
    },
    // checkLegend(id) {
    //   this.checkedMall = id
    //   this.performanceChart()
    // },
    performanceChart() {
      this.chartData = {}
      let isBigData = this.emitData.activeDate === 'year'
      let _otherConf = {
        yAxisName: this.$t('format.perNum'),
        _grid: isBigData
          ? {
            top: 26,
            left: 50,
            bottom: 66,
            right: 26
          } 
          : {
            top: 26,
            left: 50,
            bottom: 50,
            right: 26
          },
        legendBottom: isBigData ? 10 : '0',
        isAllSelected: true,
        _color: ['#3BB8FF', '#FFC62E', '#FF9631', '#4396ec'],
        isVisibleZoom: isBigData,
        seriesText: 'personNum'
      }
      if (Object.keys(this.allChartData).length > 0 && this.allChartData[this.checkedMall]) {
        let moreHistoryArriveCount = this.allChartData[this.checkedMall]
        moreHistoryArriveCount.otherConf = _otherConf
        this.chartData = moreHistoryArriveCount
      } else {
        this.chartData.otherConf = _otherConf
      }
    },
    // collapsedColumn({ row, column, rowIndex, columnIndex }) {
    //     // 取第一列
    //     if (columnIndex === 0) {
    //         if (this.spanTemp[rowIndex] && this.spanTemp[rowIndex] != 1) {
    //             return {
    //                 rowspan: this.spanTemp[rowIndex],
    //                 colspan: 1
    //             }
    //         } else {
    //             return {
    //                 rowspan: 0,
    //                 colspan: 0
    //             }
    //         }
    //     }
    // },
    exportDataHandle(domId, title) {
      const {
        emitData,
        isTabChart,
        dealExport,
        effData_title,
        columnData,
        tableData
      } = this
      const {
        asis_level,
        asis_date,
        asis_time,
        asis_org,
        asis_gender,
        asis_age
      } = emitData
      // const { startTime, endTime } = this.newDateFormat(asis_date, asis_time)
      // const parameter = {
      //   orgIds: asis_org,
      //   startDate: startTime,
      //   endDate: endTime,
      //   ageStage: asis_age,
      //   gender: asis_gender
      // }
      // console.log('parameter:', param(parameter))
      // const exportNeed = {
      //   domId: domId,
      //   title: title,
      //   data: {
      //     url: '/newAndRegularAnalysis/mall/tableChart/excel',
      //     params: param(parameter)
      //   }
      // }

      // if (isTabChart) {
        const header = columnData.length > 0 && columnData.map(item => item.label) || []
        const data = tableData.map(item => Object.keys(item).map(k => item[k] ) )
        import('@/utils/Export2Excel').then(excel => {
          excel.export_json_to_excel({
            header,
            data,
            filename: this.i18nFormatter(effData_title),
            autoWidth: true,
            bookType: 'xlsx'
          })
        })
      // } else {
      //   // this.$refs.exportDialog.dialogInit(exportNeed)
      // }
    },
  }
}
</script>

<style scoped>
.customgroup-wrapper {
  width: 100%;
}

.behavior-thead th {
  height: 80px !important;
}

.manage-row {
  height: 20px;
}

.legend-container:after,
.legend-container:before {
  content: '';
  display: table;
}

.legend-container:after {
  clear: both;
}

.legend-container {
  padding: 10px 0 15px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(170, 170, 170, .2);
}

.legend-item {
  float: left;
  text-align: left;
  cursor: pointer;
  margin-right: 10px;
}

.legend-circle {
	margin-right: 5px;
  font-size: 18px;
}

.legend-text {
	position: relative;
	font-size: 14px;
	top: -2px;
}

.bar-report {
  background: url(~@/assets/img/asis/bar_icon.svg) no-repeat;
  background-size: 100% 100%;
}

.report-item-bar {
  background: url(~@/assets/img/asis/active_bar_icon.svg) no-repeat;
  background-size: 100% 100%;
}
</style>