Frequency.vue

<template>
  <div class="customgroup-wrapper">
    <el-header height="70px">
      <span class="behavior-title">{{ repTitle }}{{$t('Behavior.frequency')}}</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>
    <frequency-option v-show="moreOptVisible" @emitParams="getPatams" ref="searchRef" />
    <div class="element-main behavior-main">
      <!-- 人脸统计详情 -->
      <div class="asis-table-wrapper">
        <!-- <component-simple :analysisList="analysisList" :asisLevel.sync="asisLevel" /> -->
         <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(frequency_title) }}</span>
          <span class="asis-table-download" @click="exportDataHandle(isTabChart ? 'domFrequency' : 'frequencyChart', i18nFormatter(frequency_title))">{{$t('allPages.load')}}</span>
          <span class="report-type-box">
            <span :class="['report-item', 'line-report', { 'report-item-line': !isTabChart }]" @click="selReport('line')"></span>
            <span :class="['report-item', { 'report-item-tab': isTabChart }]" @click="selReport('table')"></span>
          </span>
        </h3>
        <div class="asis-table-content frequency-chart-wrapper" v-loading="loading">
           <el-table
            id="domFrequency"
            :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-column v-for="(item, index) in columnData" :key="index" :col="item"></comp-column>
          </el-table>
          <!-- x: 人数 y: 日期 -->
          <mix-charts v-else chartId="frequencyChart" class="frequency-line-chart" :style="{ height: chartHeight + 'px' }" :chartData="chartData" chartType="Line" />
        </div>
      </div>
    </div>
    <export-data-dialog ref="exportDialog"></export-data-dialog>
  </div>
</template>

<script>
import moreOption from './common/option/frequencyOps'
import CompCol from '@/views/public/myColum'
import exportData from '@/views/public/exportData'
// import ComponentSimple from '@/components/Condition-render/ComponentSimple'
export default {
  components: {
    'frequency-option': moreOption,
    'export-data-dialog': exportData,
    'comp-column': CompCol,
    // ComponentSimple
  },
  data() {
    return {
      repTitle: '',
      moreOptVisible: false,
      isTabChart: false,
      loading: true,
      tableHeight: 0,
      chartHeight: 0,
      radioDate: 'historyArriveCountLine',
      frequency_title: '',
      tableData: [],
      columnData: [],
      allChartData: {},
      chartData: {},
      checkedMallList: [],
      checkedMall: null,
      emitData: {},
      // analysisList: {
      //   'mall': [
      //     { name: 'mall', isMulti: true },
      //   ],
      //   'floor': [
      //     { name: 'mall' },
      //     { name: 'floor', isMulti: true }
      //   ],
      //   'zone': [
      //     { name: 'mall' },
      //     { name: 'floor' },
      //     { name: 'zone', isMulti: true }
      //   ]
      // },
      // asisLevel: 'mall'
    }
  },
  created() {
    this.chartHeight = this.computedWinH() - 90;
    this.tableHeight = this.computedWinH();
    window.addEventListener('resize', () => {
      this.tableHeight = this.computedWinH();
      this.moreOptVisible = false;
      this.showCollapse();
    })
  },
  mounted() {
    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('.behavior-more-option', 'height');
            collapseH = collapseH + this.getStyleFn('.behavior-more-option', 'paddingTop') + this.getStyleFn('.behavior-more-option', 'paddingBottom')
          } else {
            collapseH = this.getStyleFn('.behavior-more-option', 'height');
          }
          mt = headerH + titleH + collapseH + 8 + 'px';
          $('.behavior-main').animate({ marginTop: mt });
        }, 100);
      }
    },
    dataFetch() {
      return new Promise((resolve, reject) => {
        let
          { 
            emitData: {
              mallId, startDate, endDate
            },
            $api: {
              flowReport: { mallDayHistoryArriveCounts }
            },
            // tableIds,
            isTabChart
          } = this,
          parameter = {
            orgIds: mallId,//260,//
            startDate: startDate,//'2019-09-01',//
            endDate: endDate,//'2019-09-02',//
            // chartIds: tableIds
          }
        
        mallDayHistoryArriveCounts(isTabChart ? 'tableChart' : 'lineChart', parameter)
          .then(res => {
            resolve(res.data)
          })
          .catch(err => {
            this.catchErrorHandle(err)
          })
      })
    },
    async getData() {
      this.loading = true
      let result = await this.dataFetch()
      this.frequency_title = 'frequencyStatistics'
      if (result.code === 200) {
        let
          // {
          //   data: {
          //     body: {
          //       historyArriveCountReport,
          //       historyArriveCountLine = {},
          //       moreHistoryArriveCountLine = {}
          //     }
          //   }
          // } = result,
          {
            radioDate,
            autoComplateHead,
            dealData
          } = this

        if (this.isTabChart) {
          // 渲染表格
          this.tableData = []
          // if (historyArriveCountReport) {
            this.columnData = autoComplateHead('table', result.data.xaxis.data)
            this.tableData = dealData(result.data.series, this.columnData)
          // }
        }
        else {
          // 渲染图表
          this.allChartData = result.data
          this.performanceChart()
        }
      }
      this.loading = false
    },
    dateFormatter(row, column, cellValue) {
      let dateStr = '';
      if (cellValue) {
        if (cellValue.split(' ').length > 0) {
          dateStr = cellValue.split(' ')[0];
        } else {
          dateStr = '--';
        }
      }
      return dateStr;
    },
    getPatams(param) {
      this.emitData = param;
      this.repTitle = param.title;
      if (!this.isTabChart) {
        this.checkedMallList = param.checkedMallList
        const localMallId = window.sessionStorage.getItem('mallId')
        if (param.checkedMallList.length) {
          if (localMallId && param.checkedMallList.find(item => item.id === (localMallId - 0))) {
            this.checkedMall = localMallId - 0
          } else {
            this.checkedMall = param.checkedMallList[0].id
          }
        }
        // param.checkedMallList.length && (this.checkedMall = param.checkedMallList[0].id)
      }
      this.getData()
    },
    selReport(iconType) {
      if(iconType === 'line') {
        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 _otherConf = {
        yAxisName: this.$t('format.perNum'),
        grid: {
          top: 32,
          left: 50,
          bottom: 50,
          right: 26
        },
        legendBottom: 0,
        isAllSelected: true,
        _color: ['#3BB8FF', '#FFC62E', '#FF9631', '#4396ec'],
        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
      }
    },
    exportDataHandle(domId, title) {
      let
        {
          emitData: {
            mallId, startDate, endDate
          },
          isTabChart,
          // tableIds,
          dealExport
        } = this,
        exportNeed = {
          domId: domId,
          title: title,
          data: {
            url: '/mallDayHistoryArriveCounts/tableChart/excel',
            params: `orgIds=${mallId}&startDate=${startDate}&endDate=${endDate}`
          }
        }

      if (isTabChart) {
        dealExport(domId, title)
      }
      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;
}
</style>