yearly.vue

<template>
  <div class="yearly" style="marign-top: 112px">
     <div class="headBox" id="headBox">
      <div class="daily-content" id="daily-content">
       <el-row :gutter="12" class="head-box-row">    
        <el-col :span="8">
          <div :class="{showBox:true}">
           <div class="jm-head-showBoxNum">
             <div class="head-left">
               <div class="jm-title">{{activecard.title}}
                  <el-tooltip class="activetip" effect="light" :content="activecard.info" placement="right">
                     <span class="el-icon-warning-outline"></span>
                  </el-tooltip>
                 </div>
               <div class="jm-content" v-html="activecard.contenthtml"></div>
               <div class="jm-other" v-html="activecard.otherhtml"></div>
             </div>
             <div class="head-right">
               <div class="right-content">
                <div class="title-row" v-for="(item,index) in activecard.exponent" :key="index" v-html="item"></div>
               </div>
             </div>
            </div>
          </div>
        </el-col>
        <el-col :span="16" class="right-card-box">
           <el-col class="tabcard">
          <div :class="{showBox:true,showisactive:active=='mallData'}"  @click="headerCardDetail('mallData')">
            <div class="jm-showBoxNum">
              <div class="number">{{headerData.mallData.YEAR}}<span class="unit">{{headerData.mallData.unit}}</span></div>
              <div class="box-title"><span>{{headerData.mallData.title}}</span></div>
            </div>
          </div>
          <div :class="{showBox:true,showisactive:active=='mallRetention'}" @click="headerCardDetail('mallRetention')">
            <div class="jm-showBoxNum">
              <div class="number">{{headerData.mallRetention.YEAR}}<span class="unit">{{headerData.mallRetention.unit}}</span></div>
              <div class="box-title"><span>{{headerData.mallRetention.title}}</span></div>
            </div>
          </div>
        </el-col>
        <el-col class="tabcard">
          <div :class="{showBox:true,showisactive:active=='zoneData'}" @click="headerCardDetail('zoneData')">
            <div class="jm-showBoxNum">
              <div class="number">{{headerData.zoneData.YEAR}}<span class="unit">{{headerData.zoneData.unit}}</span></div>
              <div class="box-title"><span>{{headerData.zoneData.title}}</span></div>
            </div>
          </div>
          <div :class="{showBox:true,showisactive:active=='zoneRetention'}" @click="headerCardDetail('zoneRetention')">
            <div class="jm-showBoxNum">
               <div class="number" >{{headerData.zoneRetention.YEAR}}</div>
              <div class="box-title"><span>{{headerData.zoneRetention.title}}</span></div>
            </div>
          </div>
        </el-col>
        <el-col class="tabcard">
            <div :class="{showBox:true,showisactive:active=='zoneRatio'}" @click="headerCardDetail('zoneRatio')">
            <div class="jm-showBoxNum">
               <div class="number">{{headerData.zoneRatio.YEAR}}<span class="unit">{{headerData.zoneRatio.unit}}</span></div>
              <div class="box-title"><span>{{headerData.zoneRatio.title}}</span></div>
            </div>
          </div>
           <div :class="{showBox:true,showisactive:active=='aveFloor'}" @click="headerCardDetail('aveFloor')">
            <div class="jm-showBoxNum">
              <div class="number">{{headerData.aveFloor.YEAR}}<span class="unit">{{headerData.aveFloor.unit}}</span></div>
              <div class="box-title"><span>{{headerData.aveFloor.title}}</span></div>
            </div>
          </div>
        </el-col>
        <el-col class="tabcard">
           <div :class="{showBox:true,showisactive:active=='userGroup'}" @click="headerCardDetail('userGroup')">
            <div class="jm-showBoxNum ">
               <div class="number" v-if="headerData.userGroup.unit">{{headerData.userGroup.YEAR}}<span class="unit">{{headerData.userGroup.unit}}</span></div>
              <div class="box-title"><span>{{headerData.userGroup.title}}</span></div>
            </div>
           </div>
           <div :class="{showBox:true,showisactive:active=='aveZone'}" @click="headerCardDetail('aveZone')">
            <div class="jm-showBoxNum">
               <div class="number" v-if="headerData.aveZone.unit">{{headerData.aveZone.YEAR}}<span class="unit">{{headerData.aveZone.unit}}</span></div>
              <div class="box-title"><span>{{headerData.aveZone.title}}</span></div>
            </div>
          </div>
        </el-col>
        <el-col class="tabcard">
          <div :class="{showBox:true,showisactive:active=='tidailv'}"  @click="headerCardDetail('tidailv')">
            <div class="jm-showBoxNum">
              <div class="number">{{headerData.tidailv.YEAR}}<span class="unit">{{headerData.tidailv.unit}}</span></div>
              <div class="box-title"><span>{{headerData.tidailv.title}}</span></div>
            </div>
          </div>
          <div :class="{showBox:true,showisactive:active=='kedanjia'}" @click="headerCardDetail('kedanjia')">
            <div class="jm-showBoxNum">
              <div class="number">{{headerData.kedanjia.YEAR}}<span class="unit">{{headerData.kedanjia.unit}}</span></div>
              <div class="box-title"><span>{{headerData.kedanjia.title}}</span></div>
            </div>
          </div>
        </el-col>
        </el-col>
       
      </el-row>
    </div>
    </div>
    <!-- headBox end -->
    <div class="content" style="padding-bottom: 50px">
      <el-row class="chartRow" :gutter="12">
        <el-col :span="24" class="selectChart">
          <div class="date-radio-wrapper">
            <el-radio-group v-model="radioDate" size="mini" fill="#0069FF" @change="changeChartSelect('mallYearTrend',radioDate,'YearTrend')">
              <el-radio-button label="trafficAndSaleDayTrend" border>{{$t('asisTab.day')}}</el-radio-button>
              <el-radio-button label="trafficAndSaleWeekTrend" border>{{$t('asisTab.week')}}</el-radio-button>
              <el-radio-button label="trafficAndSaleMonthTrend" border>{{$t('asisTab.month')}}</el-radio-button>
            </el-radio-group>
          </div>
          <!-- 商场趋势 -->
          <mix-charts chartId="mallYearTrend" class="trend-chart-box dchart" :chartData="mallYearTrend_ops" chartType="AreaLine" />
          <span class="ehcarts-title">{{ i18n(Daytrend_title) }}</span>
          <span class="download-text" @click="exportDataHandle('mallYearTrend',i18n(Daytrend_title),'trafficAndSaleTrend')">{{$t('allPages.load')}}</span>
        </el-col>
      </el-row>
      <el-row :gutter="12" class="chartRow" >
          <!--  顾客年龄分布 -->
          <el-col :span="14" class="download-parent">
              <mix-charts chartId="mallDayAge" class="small-pie-chart-box dchart" :chartData="mallYearAge_ops" chartType="StackBar" />   
            <span class="download-text" @click="exportDataHandle('mallDayAge',mallYearAge_ops.title.text,'customerfeature_age')">{{$t('allPages.load')}}</span>
          </el-col>
          <!-- 性别分布 -->
          <el-col :span="10">
            <mix-charts chartId="mallDenger" class="small-pie-chart-box dchart" :chartData="mall_denger_ops" chartType="Pie" />   
            <!-- <span class="download-text" @click="exportDataHandle('mallDayAge','','customerfeature_age')">{{$t('allPages.load')}}</span> -->
          </el-col>
        </el-row>
      <el-row class="chartRow" :gutter="12" v-if="$Project === 'mall'">
         <el-col :span="12" class="download-parent">
          <!--  业态客流情况 -->
          <my-chart id="mallWfloorFlow" chartType="Rank" :options="mallYformatRank_ops" class="small-rank-chart-box dchart"></my-chart>
          <span class="ehcarts-title">业态客流排行</span>
          <span class="download-text spe-download-text" @click="exportDataHandle('mallWfloorFlow','业态客流排行','triffic_ranking')">{{$t('allPages.load')}}</span>
        </el-col>
        <!-- 店铺客流排行 -->
        <el-col :span="12" class="download-parent">
          <div class="small-rank-chart-box" style="overflow:hidden">
            <div>
              <flow-sort :tableData="trafficRanking" v-if="isTabChart" style="margin-top:50px"></flow-sort>
            </div>
            <mix-charts v-if="!isTabChart" chartId="trafficRankIo" class="small-rank-chart-box dchart" :chartData="trafficRankingChart" chartType="Rank" />
          </div>
          <span class="ehcarts-title">店铺客流排行</span>
          <!-- <span class="download-text" @click="exportDataHandle('trafficRankIo','店铺客流排行','customercounting')">{{$t('allPages.load')}}</span> -->
          <span class="mall-report-type-box">
              <span :class="barLineIcon" @click="selReport('bar')"></span>
              <span :class="isTabChart ? 'report-item report-item-tab' : 'report-item'" @click="selReport('table')"></span>
          </span>
        </el-col>
      </el-row>
      <el-row class="chartRow" :gutter="12" v-if="$Project === 'mall'">
        <el-col :span="12" class="download-parent">
          <!--  出入口客流排行 -->
          <mix-charts chartId="mallYmainIo" class="small-rank-chart-box dchart" :chartData="mallYmainIo_ops" chartType="Rank" />
          <span class="ehcarts-title">{{ i18n(Daygate_title) }}</span>
          <span class="download-text spe-download-text" @click="exportDataHandle('mallYmainIo',i18n(Daygate_title),'gate_triffic')">{{$t('allPages.load')}}</span>
        </el-col>
        <el-col :span="12" class="download-parent"> 
      <!--  楼层客流排行 -->
         <my-chart id="mallYfloorFlow" chartType="mallRank" :options="mallYfloorFlow_ops" class="small-rank-chart-box dchart"></my-chart> 
         <span class="ehcarts-title">楼层客流排行</span>
          <span class="download-text" @click="exportDataHandle('mallYfloorFlow', i18n(Dayfloor_title),'floor_triffic')">{{$t('allPages.load')}}</span>
          </el-col>
      </el-row>
    <!-- 关联情况 -->
      <el-row :gutter="12" class="chartRow">
        <!-- 业态关联情况 -->
        <el-col :span="12" class="download-parent">
          <enter-chart chartId="entermonthHeatmap2" ref="enterchart" class="small-rank-chart-box dchart" :chartData="format_ops" chartType="Heatmap" />
          <!-- <span class="ehcarts-title">{{ i18n(customeradd_title) }}</span> -->
          <span class="ehcarts-title">业态关联</span>
          <!-- <span class="download-text" @click="exportDataHandle('entermonthHeatmap','店铺关联情况','customeradd')">{{$t('allPages.load')}}</span> -->
        </el-col>
        <!-- 店铺关联情况 -->
        <el-col :span="12" class="download-parent">
          <enter-chart chartId="enterZoneYearhHeatmap" ref="enterchart" class="small-rank-chart-box dchart" :chartData="zone_ops" chartType="Heatmap" />
          <!-- <span class="ehcarts-title">{{ i18n(customeradd_title) }}</span> -->
          <span class="ehcarts-title">店铺关联</span>
          <!-- <span class="download-text" @click="exportDataHandle('entermonthHeatmap','店铺关联情况','customeradd')">{{$t('allPages.load')}}</span> -->
        </el-col>
      </el-row>
      <!-- <el-row :gutter="12">
                  <el-col :span="12" class="download-parent"> -->
      <!--  楼层客流排行 -->
      <!-- <my-chart id="mallYfloorFlow" chartType="mallRank" :options="mallYfloorFlow_ops" class="small-rank-chart-box"></my-chart> 
                      <span class="download-text" @click="exportDataHandle('mallYfloorFlow','',floor_triffic')">{{$t('allPages.load')}}</span>
                  </el-col>
                  <el-col :span="12" class="selectChart">
                      <el-select v-model="formatRankValue" size="mini" class="select-box" @change="changeChartSelect('mallYformatRank',formatRankValue,'Rank')" :placeholder="$t('pholder.select')">
                          <el-option v-for="item in formatRankOptions" :key="item.value" :label="item.label" :value="item.value">
                          </el-option>
                      </el-select> -->
      <!-- 全国业态排名 -->
      <!-- <my-chart id="mallYformatRank" chartType="Rank" :options="mallYformatRank_ops" class="rank-chart-box"></my-chart>
                      <span class="download-text" @click="exportDataHandle('mallYformatRank','',formatRankValue)">{{$t('allPages.load')}}</span>
                  </el-col>
              </el-row> -->
       <el-row :gutter="12" class="chartRow">
        <el-col :span="12" class="download-parent">
            <div
              class="small-rank-chart-box dchart"
            >
            <!-- cahrt站位 -->
            </div>
            <span class="ehcarts-title">{{  }}</span>
            <span
              class="download-text spe-download-text"
              @click="
                exportDataHandle(
                  'mallMainIo',
                  i18n(Daygate_title),
                  'gate_triffic'
                )
              "
              >{{ $t("allPages.load") }}</span
            >
          </el-col>
          <el-col :span="12" class="download-parent">
            <!--  出入口进客流量 -->
            <mix-charts
              chartId="mallMainIo1"
              chartType="Pie"
              :chartData="mall_pass_ops"
              class="small-rank-chart-box dchart"
            ></mix-charts>
            <span class="ehcarts-title">客流来源</span>
             <span
              class="download-text spe-download-text"
              @click="
                exportDataHandle(
                  'mallMainIo1','客流来源',
                  'gateSource'
                )
              "
              >{{ $t("allPages.load") }}</span
            >
          </el-col>
        </el-row>
    </div>
    <div class="downloadbox" id="downloadbox">
        <div id="downheader" class="headBox"></div>
        <div id="downchartbox">
          <div v-for="(item, index) in chartList" :key="index">
            <div
              class="chartitem"
              :style="{
                top: item.top + 'px',
                left: item.left + 'px',
                width: item.width + 'px',
                height: item.height + 'px',
              }"
            >
              <div class="title" style="position:absolute;">{{ item.title }}</div>
              <div class="chartimg">
                <img :src="item.src" alt="" />
              </div>
            </div>
          </div>
        </div>
      </div>
    <export-data-dialog ref="exportDialog"></export-data-dialog>
  </div>
</template>

<script>
import Bus from '../public/eventBus'
import myChart from '../public/mapChart'
import genderChart from '../public/genderChart'
import genderCompare from '../public/genderCompare'
import enterChart from "./common/enterChart";
import flowSort from "./common/pflowsort"
 import {mixin} from './common/download'
export default {
    props: {
        orgId: [String, Number],
        propparam: Object
    },
     mixins:[mixin],
    data() {
        return {
               headerData: {
        mallData: {
          TODAY: null,
          unit: "",
          title: "",
        },
        zoneData: {
          TODAY: null,
          unit: "",
          title: "",
        },
        zoneRatio: {
          TODAY: null,
          unit: "",
          title: "",
        },
        userGroup: {
          TODAY: null,
          unit: "",
          title: "",
        },
        aveFloor: {
          TODAY: null,
          unit: "",
          title: "",
        },
        aveZone: {
          TODAY: null,
          unit: "",
          title: "",
        },
        userGroup: {
          TODAY: null,
          unit: "",
          title: "",
        },
        mallRetention: {
          TODAY: null,
          unit: "",
          title: "",
        },
        zoneRetention: {
          TODAY: null,
          unit: "",
          title: "",
        },
        tidailv: {
          TODAY: null,
          unit: "",
          title: "",
        },
        kedanjia: {
          TODAY: null,
          unit: "",
          title: "",
        },
      },
      activecard:{},
      active: "mallData",
            mallYearSex_ops: {
                maleRatio: '0%',
                femaleRatio: '0%'
            },  // 性别分布
            mallYearAge_ops: {},  // 年龄分布 

            format_ops: {},
            zone_ops:{},
            // mallYearIoCustomer_ops: {},  // 新老客户分布
            mallYearTrend_ops: {},  // 商场近期趋势
            mallYmainRank_ops: {},   // 主力店铺排行
            mallYformatRank_ops: {}, // 全国业态排行
            mallYmainIo_ops: {}, // 出入口客流排行
            mallYfloorFlow_ops: {},  // 楼层客流排行
            trafficRankingChart:{},//店铺客流情况
            mall_pass_ops:{},//出入口排行
             mall_denger_ops:{},//性别分布
            trafficRanking:[],//店铺客流表格
            mainMallVal: 'costomer_ranking',    // 主力店铺下拉菜单值
            formatRankValue: 'triffic_ranking',
            radioDate: 'trafficAndSaleDayTrend',
            mainMallOptions: [{
                value: 'costomer_ranking',
                label: 'TRAFFIC'
            }, {
                value: 'mall_sale_ranking',
                label: 'SALES'
            }, {
                value: 'perTransactionRank',
                label: 'PREPRICE'
            }, {
                value: 'turnoverRank',
                label: 'VOLUME'
            }, {
                value: 'handbagRateRank',
                label: 'BAGRATE'
            }, {
                value: 'entering_ranking',
                label: 'ENTERINGRATE'
            }, {
                value: 'perSquareMeterRank',
                label: 'PERAREAVALUE'
            }, {
                value: 'durationTimeRank',
                label: 'DURATIONTIME'
            }],
            formatRankOptions: [{
                value: 'triffic_ranking',
                label: '客流量'
            }, {
                value: 'format_sale_ranking',
                label: '销售额'
            }],
            chartIds: '',
            start_time: '',
            end_time: '',
            isDayTrend: true,
            isTabChart:false,
            Daytrend_title: '',
            Daygate_title: '',
            Shopranking_title: '',
            Dayfloor_title: '',
            lastyearImg: Boolean,
            lastyearClass: '',
            showGender: true,
        }
    },
    components: {
        'my-chart': myChart,
        'gender-chart': genderChart,
         "enter-chart": enterChart,
        "flow-sort": flowSort,
        genderCompare
    },
    created() {
        this.activeSimple = '1';
    },
    watch: {
        // propparam: {
        //     handler: 'refreshHandle',
        //     immediate: false
        // }
        propparam(val, old) {
          if (val.dateType === '/mall/yearly') {
            this.refreshHandle(val);
          }
        },
    },
    computed: {
        getMallLength() {
            let count = 0;
            for (let i in this.cityMallList) {
                count++;
            }
            return count;
        },
        barLineIcon() {
        if (this.isTabChart) {
          return "report-item bar-report";
        } else {
          return "report-item bar-report report-item-bar";
        }
      },
    },
    mounted() {
        this.getGatesFace();
        this.refreshHandle(this.propparam);
    },
    methods: {
        i18nFormatter(label) {
            let languageLabel = 'format.' + label;
            return this.$t(languageLabel)
        },
        i18n(title){
            if(title){
                let languageTitle = 'echartsTitle.' + title;
                return this.$t(languageTitle)
            }
        },
        refreshHandle(param) {
            let secondCheck = this.getSessionLocal('path');
            if(param.dateType !== '/mall/yearly' && secondCheck !== '/mall') return;
            if(param.timeVal) {
                if(typeof param.timeVal === 'string') {
                    param.timeVal = new Date(Date.parse(param.timeVal.replace(/\-/g, '/')));
                } else {
                    param.timeVal = param.timeVal;
                }
                if(param.timeVal.getFullYear() === new Date().getFullYear()) {
                    this.end_time = dateUnit.dateFormat(param.timeVal, 'yyyy-MM-dd');
                    this.start_time = dateUnit.dateFormat(new Date(Date.parse(param.timeVal.getFullYear() + '/01/01')), 'yyyy-MM-dd');
                    if(this.start_time == this.end_time) {
                        this.end_time = dateUnit.dateFormat(new Date(), 'yyyy-MM-dd');
                    }
                } else {
                    const fullyear = param.timeVal.getFullYear()
                    const fullDays = (fullyear % 4 == 0 && fullyear % 100 != 0) || (fullyear % 100 == 0 && fullyear % 400 == 0) ? 366 : 365;
                    this.start_time = param.timeVal;
                    this.end_time = new Date(Date.parse(this.dayAdd(param.timeVal, fullDays).replace(/\-/, '/')));
                    let formatTime = this.unitTime(this.start_time, this.end_time, 'year');
                    this.start_time = formatTime.startTime;
                    this.end_time = formatTime.endTime;
                }
            }
            if(this.chartIds) {
                this.getChartData();
            } else {
                this.getChartId();
            }
        },
        emptyChart() {
            this.mallYearSex_ops = {
                maleRatio: '0%',
                femaleRatio: '0%'
            };
            this.mallYearAge_ops = {};
            this.mallYearTrend_ops = {};
            this.mallYmainRank_ops = {};
            this.mallYformatRank_ops = {};
            this.mallYmainIo_ops = {};
            this.mallYfloorFlow_ops = {};
            this.format_ops = {};
            this.zone_ops = {};
            this.mall_denger_ops = {};
        },
        //获取chartID
        getChartId() {
            // this.costomfeature_age_ops = {};
            this.chartKeyToId = {};
            this.chartIds = '';
            this.$api.baseReport.reportChart({
                report: 'MallYear',
                // _t: Date.parse(new Date()) / 1000
            })
            .then(res => {
                let chartItem = res.data.data;
                if(chartItem.length == 0) return;
                // 通过 key 获取 ID
                chartItem.forEach((item, index, arr) => {
                    this.chartKeyToId[item.key] = item.id;
                    // trifficRank: 全国商场排行 
                    if (item.key === 'customerfeature_denger' || item.key === 'customerfeature_age' || item.key === 'customerfeature_NAO' || item.key === 'trafficAndSaleTrend' || item.key === 'costomer_ranking' || item.key === 'triffic_ranking' || item.key === 'gate_triffic' || item.key === 'floor_triffic' || item.key === 'zone_traffic' ||  item.key === 'zone_association' || item.key === 'format_association' || item.key === 'gateSource') {
                        if (index == chartItem.length - 1) {
                            this.chartIds += item.id
                        } else {
                            this.chartIds += item.id + ','
                        }
                    }
                });
                this.getChartData();
            })
            .catch((error) => { })
        },
        getChartData() {
            // if(!this.orgId) {
            //     this.orgId = this.$cookie.get('orgId');
            // }
            this.radioDate = 'trafficAndSaleDayTrend';
            this.emptyChart();
            let _st = '', _et = '';
            if(!this.start_time && !this.end_time) {
                _et = dateUnit.dateFormat(new Date(), 'yyyy-MM-dd');
                _st = dateUnit.dateFormat(new Date(Date.parse(new Date().getFullYear() + '/01/01')), 'yyyy-MM-dd');
            } else {
                _et = this.end_time;
                _st = this.start_time;
            }
            this.$api.baseReport.mallReport('year', {
                kpiType:'TRAFFIC', 
                orgIds: this.$cookie.get('orgId'),
                startDate: _st,
                endDate: _et,
                chartIds: this.chartIds,
                // _t: Date.parse(new Date()) / 1000
            })
            .then(res => {
                let report = 'MallYear'
                    , {
                        customerfeature_age = {}
                        , trafficAndSaleTrend = {}
                        , costomer_ranking = {}
                        , triffic_ranking = {}
                        , gate_triffic = {}
                        , floor_triffic = {}
                        , customerfeature_denger = {}
                        ,zone_association = {}
                        ,format_association = {}
                        ,zone_traffic={},
                        gateSource = {}
                    } = res.data.data.body
                // 年龄分布
                customerfeature_age['otherConf'] = {
                  _color: ['#3BB8FF', '#FFC62E']
                }
                this.mallYearAge_ops = customerfeature_age
                //性别分布
                customerfeature_denger["color"] = ["#0069FF", "#4BBEFF", "#87D14B", "#FFC62E", "#FF9631"];
                this.mall_denger_ops = customerfeature_denger;
                // 商场近期趋势
                this.Daytrend_title = report + 'trafficAndSaleTrend'
                trafficAndSaleTrend['otherConf'] = {
                  _color: ["#0069FF", "#4BBEFF", "#87D14B", "#FFC62E", "#FF9631"],
                  hasYaxisName: false
                }
                if (this.isDayTrend) {
                  trafficAndSaleTrend['otherConf']['isYear'] = true
                }

                this.mallYearTrend_ops = trafficAndSaleTrend
                // 主力店铺排行
                this.Shopranking_title = report + 'costomer_ranking'
                // costomer_ranking['seriesText'] = 'costomer_ranking'
                costomer_ranking['otherConf'] = {
                  'seriesText': 'traffic'
                }
                this.mallYmainRank_ops = costomer_ranking
                // 全国业态排行
                // triffic_ranking['seriesText'] = 'triffic_ranking'
                triffic_ranking['otherConf'] = {
                  'seriesText': 'traffic'
                }
                this.mallYformatRank_ops = triffic_ranking
                // 出入口客流排行
                this.Daygate_title = report + 'gate_triffic'
                // gate_triffic['seriesText'] = 'trifficRank'
                gate_triffic['otherConf'] = {
                  'seriesText': 'traffic'
                }
                this.mallYmainIo_ops = gate_triffic
                
                //店铺客流排行
                this.trafficRanking = zone_traffic.series[0].data;

                //店铺关联热力图数据
                this.zone_ops = zone_association;
                //业态关联热力图数据
                this.format_ops = format_association;
                // 楼层客流排行
                this.Dayfloor_title = report + 'floor_triffic'
                // floor_triffic['seriesText'] = 'trafficRank'
                floor_triffic['otherConf'] = {
                  'seriesText': 'traffic'
                }
                if(floor_triffic.yaxis.data){
                //   floor_triffic.yaxis.data.map((ele,index)=>{
                //     if(ele == '日报区域') {
                //       floor_triffic.yaxis.data.splice(index,1)
                //       if(floor_triffic.series[0].data.length > 0) {
                //         floor_triffic.series[0].data.splice(index,1)
                //       }
                //     }
                //   })
                }
                this.mallYfloorFlow_ops = floor_triffic
                // 性别分布
                if (customerfeature_denger) {
                    if (customerfeature_denger.series.length > 0) {
                        customerfeature_denger.series.forEach((item) => {
                            if (item.data.length > 1) {
                                let allNum = item.data[0].value + item.data[1].value
                                if (allNum > 0) {
                                    if (item.data[0].name === '女') {
                                        this.mallYearSex_ops.femaleRatio = ((item.data[0].value / allNum) * 100).toFixed(2) + '%'
                                        this.mallYearSex_ops.maleRatio = ((item.data[1].value / allNum) * 100).toFixed(2) + '%'
                                    } else {
                                        this.mallYearSex_ops.femaleRatio = ((item.data[1].value / allNum) * 100).toFixed(2) + '%'
                                        this.mallYearSex_ops.maleRatio = ((item.data[0].value / allNum) * 100).toFixed(2) + '%'
                                    }
                                } else {
                                    this.mallYearSex_ops = {
                                        maleRatio: '0%',
                                        femaleRatio: '0%'
                                    }
                                }
                            } else {
                                this.mallYearSex_ops = {
                                    maleRatio: '0%',
                                    femaleRatio: '0%'
                                }
                            }
                        })
                    }
                }
                  //出入口排行
                let gate_source = gateSource;
                gate_source["color"] = ["#0069FF", "#4BBEFF", "#87D14B", "#FFC62E", "#FF9631"];
                this.mall_pass_ops = gate_source;

                this.buildRanking()
              
                  // 头部数据
                this.headerData = this.buildHeaderData(
                  Object.assign({}, res.data.data.head)
                );
                // 头部数据
                this.headerCardDetail("mallData");
                
            })
            .catch(err => { 
              this.catchErrorHandle(err)
            });
        },
               /**
     * 构建头部数据
     * header
     */
    buildHeaderData(headerdata) {
      let data = headerdata;
      data.kedanjia = this.headerData.kedanjia;
      data.tidailv =  this.headerData.tidailv;
      data.userGroup =  this.headerData.userGroup;
      let dataArr = Object.keys(headerdata);
      dataArr.map((ele) => {
        switch (ele) {
          case "mallData":
            data[ele].title = "客流量";
            data[ele].unit = "人次";
            data[ele].subunit = "人数";
            data[ele].dianyuan = data.staffManTime;
            data[ele].chongfu = 100;
            data[ele].info = "累计进入商场的客流数，（人数为去除重复客流与店员客流后的数据)";
            break;
          case "zoneData":
            data[ele].title  = "进店量";
            data[ele].unit = "人次";
            data[ele].subunit= "人数";
            data[ele].info = "累计进入店铺的客流数";
            break;
          case "zoneRatio":
            data[ele].title = "在店率";
            data[ele].unit = "%";
            data[ele].subunit = "人数";
            data[ele].info = "所有店铺的总滞留量/商场总客流（10min一个时段）";
            break;
          case "userGroup":
            data[ele].title = "主力客群";
            data[ele].unit = " ";
            data[ele].YEAR = "--";
            data[ele].info = "所有年龄与性别的客流数量统计中，占比最大的年龄与性别组合/商场总客流（10min一个时段）";
            break;
          case "aveFloor":
            data[ele].title = "人均游逛层数";
            data[ele].unit = "层";
            data[ele].info = "所有顾客的总游逛层数/商场总客流人数";
            break;
          case "aveZone":
            data[ele].title = "人均游逛店数";
            data[ele].unit = "个";
            data[ele].info = "所有顾客的总游逛店铺数/商场总客流人数";
            break;
          case "mallRetention":
            data[ele].title = "商城滞留时长";
            data[ele].unit = " ";
            data[ele].info = "所有顾客在商场的总滞留时长/商场总客流人数";
            break;
          case "zoneRetention":
            data[ele].title = "店铺滞留时长";
            data[ele].info = "所有店铺的总滞留时长（平均）/商场总店铺数";
            break;
          case "tidailv":
            data[ele].title = "提袋率";
            data[ele].YEAR = "--";
            data[ele].unit = " ";
            data[ele].info = "";
            break;
          case "kedanjia":
            data[ele].title = "客单价";
            data[ele].YEAR = "--";
            data[ele].unit = " ";
            data[ele].info = "";
            break;
          default:
            break;
        }
      });
      console.log(data)
      return data;
    },
    headerCardDetail(type) {
      this.active = type;
      let data = this.headerData[type];
    
      let activecard = {
        type:type,
        title: data.title,
        dianyuan :data.dianyuan,
        chongfu : data.YEAR - data.PERSONCOUNT - data.dianyuan,
        info:data.info,
        contenthtml: data.unit
          ? `<div><span class='number'>${data.YEAR}</span><span class='unit'>${data.unit}</span></div>`
          : `<div>${data.YEAR}</div>`,
      };
      //子标题
      activecard.otherhtml = (data.PERSONCOUNT || data.PERSONCOUNT >= 0) 
        ? `<div><span class='otnumber'>${data.PERSONCOUNT}</span><span class='otunit'>${data.subunit}</span></div>`
        : null;
      let obj = {
        YEAR: `<div class="title-row">日均进店：${data.DAILYAVERAGE} ${data.unit ||''}</div>`,
        WORKINGDAY: `<div class="title-row">工作日均进店：${data.WORKINGDAY} ${data.unit ||''}</div>`,
        WEEKENDDAY: `<div class="title-row">双休日均进店：${data.WEEKENDDAY} ${data.unit ||''}</div>`,
        LASTYEAR: `<div class="title-row">去年同期：${data.LASTYEAR} ${data.unit ||''}<span class=""><img class="showbox-img" src="${this.showImg(
          data.LASTYEARDAYRATIO
        )}"/>${ Math.abs(data.LASTYEARDAYRATIO)}%</span></div>`,
      };
      if (type == "userGroup" || type == "tidailv" || type == "kedanjia") {
        obj = {
          YEAR: `<div class="title-row">昨日： <span class="">${data.YEAR|| '未知'}</span></div>`,
          WORKINGDAY: `<div class="title-row">去年：<span class="">${data.WORKINGDAY|| '未知'}</span></div>`,
          WEEKENDDAY: `<div class="title-row">去年：<span class="">${data.WEEKENDDAY || '未知'}</span></div>`,
          LASTYEAR: `<div class="title-row">去年：<span class="">${data.LASTYEAR || '未知'}</span></div>`,
        };
      } else if(type == "zoneRatio") {
        obj.YEAR = ''
      }  else if(type == "mallRetention" || type == "zoneRetention" || type == "aveZone" ||  type == "aveFloor"){
        obj.YEAR = `<div class="title-row">日均进店：${data.YEAR} ${data.unit ||''}</div>`
      }
      

      activecard.exponent = obj;
      this.activecard = activecard;
    },
      buildRanking(){
         let yaxis = {
              data: []
            };
            let data = [];
            this.trafficRanking.map(ele => {
              yaxis.data.push(ele.storeName);
              data.push(ele.trafficNum)
            })
            this.trafficRankingChart = {
              series: [{
                name: '',
                type: 'bar',
                data: data,
              }],
              yaxis: yaxis,
              title: '店铺客流排行'
            }
      },
        changeChartSelect(dom, value, type) { // 切换选项
            let _params = {},
                chartId = null,
                _st = '',
                _et = '';
            if(!this.start_time && !this.end_time) {
                _et = dateUnit.dateFormat(new Date(), 'yyyy-MM-dd');
                _st = dateUnit.dateFormat(new Date(Date.parse(new Date().getFullYear() + '/01/01')), 'yyyy-MM-dd');
            } else {
                _et = this.end_time;
                _st = this.start_time;
            }
            if(dom === 'mallYearTrend' && type === 'YearTrend') {
                switch (value) {
                    case 'trafficAndSaleDayTrend':
                        value = 'TAB_DAY';
                        this.isDayTrend = true;
                        break;
                    case 'trafficAndSaleWeekTrend':
                        value = 'TAB_WEEK';
                        this.isDayTrend = false;
                        break;
                    case 'trafficAndSaleMonthTrend':
                        value = 'TAB_MONTH';
                        this.isDayTrend = false;
                        break;
                    default:
                        break;
                }
                chartId = this.chartKeyToId['trafficAndSaleTrend'];
                _params = {
                    orgIds: this.$cookie.get('orgId'),
                    startDate: _st,
                    endDate: _et,
                    option: value,
                    // _t: Date.parse(new Date()) / 1000
                }
            } else {
                chartId = this.chartKeyToId[val];
                _params = {
                    orgIds: this.$cookie.get('orgId'),
                    startDate: _st,
                    endDate: _et,
                    // _t: Date.parse(new Date()) / 1000
                }
            }
            this.$api.baseReport.reportMallSingleChart('year', chartId, _params)
            .then(data => {
                let result = data.data;
                if(result.data) {
                    let rankData = {}, formatRankData = {};
                    if(type === 'Rank') {
                        switch (dom) {
                            case 'mallYmainRank':
                                rankData = result.data;
                                if(JSON.stringify(rankData) === '{}') {
                                    this.mallYmainRank_ops = {};
                                } else {
                                    rankData['otherConf'] = {
                                      'seriesText': value
                                    }
                                    this.mallYmainRank_ops = rankData;
                                }
                                break;
                            case 'mallYformatRank':
                                formatRankData = result.data;
                                if(JSON.stringify(formatRankData) === '{}') {
                                    this.mallYmainRank_ops = {};
                                } else {
                                    formatRankData['otherConf'] = {
                                      'seriesText': value
                                    }
                                    this.mallYformatRank_ops = formatRankData;
                                }
                                break;
                            default:
                                break;
                        }
                    } else if(type === 'YearTrend') {
                        let trend = result.data;
                        if(JSON.stringify(trend) === '{}') {
                            this.mallYearTrend_ops = {};
                        } else {
                            trend['otherConf'] = {
                              _color: ["#0069FF", "#4BBEFF", "#87D14B", "#FFC62E", "#FF9631"],
                              hasYaxisName: false
                            }
                            if(this.isDayTrend){
                              trend['otherConf']['isYear'] = true
                            }
                            this.mallYearTrend_ops = trend;
                        }
                    }
                }
            })
            .catch(err => {
              this.catchErrorHandle(err)
            })
        },
        exportDataHandle(domId, title, chartKey) {
            // 
            let chartId = this.chartKeyToId[chartKey];
            let exportNeed = {
                domId: domId,
                title: title,
                data: {
                    url: '/report/year/mall/' + chartId + '/excel',
                    params: 'orgIds=' + this.$cookie.get('orgId') + '&option=TAB_YEAR&startDate=' + this.start_time + '&endDate=' + this.end_time
                }
            }
            // console.log('mall year exportNeed', exportNeed)
            this.$refs.exportDialog.dialogInit(exportNeed);
        },
         //店铺客流排行chart和表格切换
      selReport(iconType) {
        if (iconType === "line" || iconType === "bar") {
          if (this.isTabChart) {
            this.isTabChart = false;
            this.buildRanking()
          }
        } else {
          if (!this.isTabChart) {
            this.isTabChart = true;
          }
        }
      },
        getGatesFace(showGender){
            this.$api.base.gate({
                mallId: this.$cookie.get('orgId'),
                isHasFace: 1,
                // _t: Date.parse(new Date()) / 1000
            })
            .then(res => {
                let result = res.data.data
                if(result.length){
                    this.showGender = true
                }else{
                    this.showGender = false
                }
            })
            .catch(err => {
                this.showGender = false
            })
        },
         showImg(data) {
        let upimg = require("../../assets/img/rise.png");
        let downimg = require("../../assets/img/decline.png");
        let img = data > 0 ? upimg : downimg;
        return img;
      },
    }
}
</script>

<style scoped>
@media only screen and (max-width: 1680px) {
  .select-box {
    left: 172px;
  }
  .gender-box-top {
    height: 268px;
    margin-bottom: 10px;
    padding: 8px 17px 0;
  }

  .bar-num {
    font-size: 22px;
    color: #666;
  }

  .gender-top-item:first-child,
  .gender-top-item:nth-child(2) {
    margin-bottom: 18px;
  }

  .gender-progress-bars {
    margin-top: 4px;
  }

  .gender-box-bottom {
    height: 122px;
    padding: 13px 0;
  }

  .bottom-text {
    font-size: 20px;
    color: #666;
    margin-top: 9px;
  }

  .gender-bottom-item {
    height: 96px;
    padding-top: 14px;
  }

  .gender-bottom-item:after {
    height: 96px;
  }
}

@media only screen and (max-width: 1440px) {
  .select-box {
    left: 172px;
  }
  .gender-box-top {
    height: 210px;
    margin-bottom: 6px;
    padding: 2px 17px 0;
  }

  .bar-num {
    font-size: 20px;
    color: #666;
  }

  .gender-top-item:first-child,
  .gender-top-item:nth-child(2) {
    margin-bottom: 4px;
  }

  .gender-progress-bars {
    margin-top: 4px;
  }

  .gender-box-bottom {
    height: 90px;
    padding: 13px 0;
  }

  .bottom-text {
    font-size: 20px;
    color: #666;
    margin-top: 1px;
  }

  .gender-bottom-item {
    height: 64px;
  }

  .gender-bottom-item:after {
    height: 64px;
  }
}

@media only screen and (max-width: 1366px) {
  .select-box {
    left: 172px;
  }
  .gender-box-top {
    height: 210px;
    margin-bottom: 6px;
    padding: 2px 17px 0;
  }

  .bar-num {
    font-size: 20px;
    color: #666;
  }

  .gender-top-item:first-child,
  .gender-top-item:nth-child(2) {
    margin-bottom: 4px;
  }

  .gender-progress-bars {
    margin-top: 4px;
  }

  .gender-box-bottom {
    height: 90px;
    padding: 13px 0;
  }

  .bottom-text {
    font-size: 20px;
    color: #666;
    margin-top: 1px;
  }

  .gender-bottom-item {
    height: 64px;
  }

  .gender-bottom-item:after {
    height: 64px;
  }
}

@media only screen and (max-width: 1280px) {
  /* #mallFlowCounting,
        #mallCountFlow {
            height: 256px;
        }

        #mallTrend {
            height: 312px;
        }

        #mallDayAge {
            height: 306px;
        } */
  .select-box {
    left: 172px;
  }

  .gender-box-top {
    height: 210px;
    margin-bottom: 6px;
    padding: 2px 17px 0;
  }

  .bar-num {
    font-size: 20px;
    color: #666;
  }

  .gender-top-item:first-child,
  .gender-top-item:nth-child(2) {
    margin-bottom: 4px;
  }

  .gender-progress-bars {
    margin-top: 4px;
  }

  .gender-box-bottom {
    height: 90px;
    padding: 13px 0;
  }

  .bottom-text {
    font-size: 20px;
    color: #666;
    margin-top: 1px;
  }

  .gender-bottom-item {
    height: 64px;
  }

  .gender-bottom-item:after {
    height: 64px;
  }
 
}
 .mall-report-type-box {
    position: absolute;
    top: 15px;
    right: 108px;
    font-size: 14px;
    color: #666;
    cursor: pointer;
  }
</style>