customerClerkStatistics.vue

<template>
  <div class="customgroup-wrapper">
    <el-header>
      <span class="behavior-title">{{ repTitle }} {{$t('format.customTrend')}}</span>
    </el-header>
    <more-option ref="conditionOpt" @reportTime="reportHandler" @initData="initTab" />
    <div class="element-main behavior-main" style="margin-top: 100px">
      <div class="asis-table-wrapper">
        <h3 class="asis-table-header">
          <div class="date-radio-wrapper tf-ratio-group single-ratio-group">
            <el-radio-group
              v-model="radioVal"
              size="mini"
              fill="#0069FF"
              @change='radioChange'
            >
              <el-radio-button label="TAB_DAY" border>{{ $t('button.dayLevel') }}</el-radio-button>
              <el-radio-button label="TAB_HOUR" border>{{ $t('button.hour') }}</el-radio-button>
            </el-radio-group>
          </div>
          <!-- <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">
          <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">
            <el-table-column align="center" :label="$t('table.date')" prop="countdate"></el-table-column>
            <el-table-column align="center" :label="$t('moreSetting.PassengerFlow')" prop="customCount"></el-table-column>
            <el-table-column align="center" :label="$t('table.customerVisits')" prop="customMantime"></el-table-column>
            <el-table-column align="center" :label="$t('head.clerkNum')" prop="staffMantime"></el-table-column>
          </el-table>
          <div v-else>
            <div id="newOldCustomerChart" class="newoldCustomer-line-chart" :style="{ height: chartHeight + 'px' }"></div>
          </div>
          <!-- <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/customerClerkStatistics.vue'
import CompCol from '@/views/public/myColum'
import ExportDialog from '@/views/public/exportData'
import { param } from '@/utils'
import echarts from 'echarts'
export default {
  components: { MoreOption, CompCol, ExportDialog },
  data() {
    return {
      radioVal:'TAB_DAY',
      repTitle: '',
      isTabChart: true,
      loading: true,
      tableHeight: 0,
      chartHeight: 0,
      effData_title: 'effectiveflow',
      tableData: [],
      columnData: [],
      allChartData: {},
      chartData: {},
      checkedMallList: [],
      checkedMall: null,
      emitData: {},
      myChart:'',
      option:{
          color: ['#5470C6', '#91CC75', '#EE6666'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            },
            formatter: function (params) {
              let res = ''
                for (var i = 0; i < params.length; i++) {
                  if (params[i].seriesName === '顾客人数') {
                    res += params[i].marker + '顾客人数: ' + params[i].data + '人'
                  }
                  if (params[i].seriesName === '顾客人次') {
                    res += '<br>' + params[i].marker + '顾客人次: ' + params[i].data + '次'
                  }
                  if (params[i].seriesName === '店员人次') {
                    res += '<br>' + params[i].marker + '店员人次: ' + params[i].data + '次'
                  }
                }
                return res
            }
          },
          grid: {
            right: '6%',
            left: '6%'
          },
          legend: {
            data: ['顾客人数', '顾客人次', '店员人次']
          },
          xAxis: [
            {
              type: 'category',
              data: []
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '人数',
              position: 'right',
              alignTicks: true
            },
            {
              type: 'value',
              name: '人次',
              position: 'left',
              alignTicks: true,
            }
          ],
          series: [
            {
              name: '顾客人数',
              type: 'bar',
              data: []
            },
            {
              name: '顾客人次',
              type: 'line',
              yAxisIndex: 1,
              data: []
            },
            {
              name: '店员人次',
              type: 'line',
              yAxisIndex: 1,
              data: []
            }
          ]
      }
      // spanTemp: {}
    }
  },
  created() {
    const winH = this.computedWinH()
    this.chartHeight = winH - 90
    this.tableHeight = winH
    window.addEventListener('resize', () => {
      this.tableHeight = winH
    })
  },
  mounted() {
    this.getMallOpt()
  },
  methods: {
    getMallOpt() {
      this.getCommonMalls()
        .then(resolveData => {
          let { mallData, localMallId, titleName } = resolveData
          let refMallId = {
            'mallId': localMallId
          }
          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()
    },
    radioChange(val){
      this.getData()
    },
    dataFetch() {
      return new Promise((resolve, reject) => {
        const {
          emitData, $api, isTabChart
        } = this
        const {
          asis_date,
          asis_time,
          asis_org,
          asis_gender,
          asis_age
        } = emitData
        const { startTime, endTime } = this.newDateFormat(asis_date, asis_time)
        const parameter = {
          mallId: asis_org,
          startDate: startTime,
          endDate: endTime,
          ageStage: asis_age,
          gender: asis_gender
        }
        if(this.radioVal=='TAB_DAY'){
          $api.flowReport.customTrend(parameter)
            .then(res => {
              resolve(res.data)
            })
            .catch(err => {
              this.$message({
                type: 'error',
                message: err
              })
            })
        }else{
          $api.flowReport.customTrendHour(parameter)
            .then(res => {
              resolve(res.data)
            })
            .catch(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.tableData = result.data
          }else{
            this.performanceChart(result.data)
          }
        }
      } 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()
        }
      }
    },
    performanceChart(data) {
      console.log(data)
      let xAxisData = [],yAxisData1 = [],yAxisData2 = [],yAxisData3 = [];
      data.forEach(item=>{
        xAxisData.push(item.countdate)
        yAxisData1.push(item.customCount) //顾客人数
        yAxisData2.push(item.customMantime) //顾客人次
        yAxisData3.push(item.staffMantime)//店员人次
      })
      this.option.xAxis[0].data = xAxisData;
      this.option.series[0].data = yAxisData1;
      this.option.series[1].data = yAxisData2;
      this.option.series[2].data = yAxisData3;
      this.myChart = echarts.init(document.getElementById('newOldCustomerChart'))
      this.myChart.setOption(this.option)
    },
    exportDataHandle(domId, title) {
      const { emitData } = this
      const {
        asis_date,
        asis_time,
        asis_org,
        asis_gender,
        asis_age
      } = emitData
      const { startTime, endTime } = this.newDateFormat(asis_date, asis_time)
      const parameter = {
        mallId: asis_org,
        startDate: startTime,
        endDate: endTime,
        ageStage: asis_age,
        gender: asis_gender
      }
      let Url =''
      if(this.radioVal = 'TAB_DAY'){
        Url = window._vionConfig.apiUrl + "/d-mall-day-face-recognition-sta/trend/export?";
      }else{
        Url = window._vionConfig.apiUrl + "/d-mall-hour-face-recognition-sta/trend/export?";
      }
      let dowloadUrl =`${Url}mallId=${parameter.mallId}&startDate=${parameter.startDate}&endDate=${parameter.endDate}&ageStage=${parameter.ageStage}&gender=${parameter.gender}&authorization=${this.$cookie.get("atoken")}`
      window.open(dowloadUrl);
    },
  }
}
</script>

<style scoped>
.customgroup-wrapper {
  width: 100%;
  height: calc(100% - 183px);
}

.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>