monthly.vue

<template>
  <div class="monthly" 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.MONTH}}<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.MONTH}}<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.MONTH}}<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.MONTH}}</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.MONTH}}<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.MONTH}}<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.MONTH}}<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.MONTH}}<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.MONTH}}<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.MONTH}}<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="download-parent">
          <div class="date-radio-wrapper">
            <el-radio-group v-model="radioDate" size="mini" fill="#0069FF" @change="changeChartSelect('mallMformatRank',radioDate,'Trend')">
              <el-radio-button label="trafficAndSaleTrend" border>日</el-radio-button>
              <el-radio-button label="trafficAndSaleTrend_12month" border>月</el-radio-button>
            </el-radio-group>
          </div>
          <!-- 商场近期趋势 -->
          <!-- <my-chart id="mallMonthTrend" chartType="Line" :options="mallMonthTrend_ops" class="trend-chart-box"></my-chart> -->
          <mix-charts chartId="mallMonthTrend" class="trend-chart-box dchart" :chartData="mallMonthTrend_ops" chartType="HomeAreaLine" />
          <span class="ehcarts-title">{{ i18n(Daytrend_title) }}</span>
          <span class="download-text" @click="exportDataHandle('mallMonthTrend',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="mallMonthAge_ops" chartType="StackBar" />   
            <span class="download-text" @click="exportDataHandle('mallDayAge',mallMonthAge_ops.title.text,'customerfeature_age')">{{$t('allPages.load')}}</span>
          </el-col>
          <!-- 性别分布 -->
          <el-col :span="10">
          <!-- <el-col :span="24"> -->
            <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="mallMformatRank_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">
          <!--  出入口客流排行 -->
          <!-- <my-chart id="mallMmainIo" chartType="Rank" :options="mallMmainIo_ops" class="small-rank-chart-box"></my-chart> -->
          <mix-charts chartId="mallMmainIo" class="small-rank-chart-box dchart" :chartData="mallMmainIo_ops" chartType="Rank" />
          <span class="ehcarts-title">{{ i18n(Daygate_title) }}</span>
          <span class="download-text spe-download-text" @click="exportDataHandle('mallMmainIo',i18n(Daygate_title),'gate_triffic')">{{$t('allPages.load')}}</span>
        </el-col>
        <el-col :span="12" class="download-parent">
          <!--  楼层客流排行 -->
          <my-chart id="mallMfloorFlow" chartType="mallRank" :options="mallMfloorFlow_ops" class="small-rank-chart-box dchart"></my-chart>
          <span class="ehcarts-title">{{ i18n(Dayfloor_title) }}</span>
          <span class="download-text" @click="exportDataHandle('mallMfloorFlow', 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="enterZonemonthHeatmap" 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="mallMfloorFlow" chartType="mallRank" :options="mallMfloorFlow_ops" class="small-rank-chart-box"></my-chart>
                        <span class="download-text" @click="exportDataHandle('mallMfloorFlow','',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('mallMformatRank', 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="mallMformatRank" chartType="Rank" :options="mallMformatRank_ops" class="rank-chart-box"></my-chart>
                        <span class="download-text" @click="exportDataHandle('mallMformatRank','',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",
        mallMonthSex_ops: {
          maleRatio: '0%',
          femaleRatio: '0%'
        }, // 性别分布
        mallMonthAge_ops: {}, // 年龄分布 
        mallHeatmap_ops: {}, //店铺关联情况
        zone_ops:{},
        format_ops:{},
        // mallMonthIoCustomer_ops: {},  // 新老客户分布
        mallMonthTrend_ops: {}, // 商场近期趋势
        mallMmainRank_ops: {}, // 主力店铺排行
        mallMformatRank_ops: {}, // 全国业态排行
        mallMmainIo_ops: {}, // 出入口客流排行
        mallMfloorFlow_ops: {}, // 楼层客流排行
        mall_denger_ops:{},
        trafficRankingChart: {},
        trafficRank: {},
         mall_pass_ops:{},//出入口排行
        mainMallVal: 'costomer_ranking', // 主力店铺下拉菜单值
        formatRankValue: 'triffic_ranking', // 全国业态排行下拉菜单值
        radioDate: 'trafficAndSaleTrend',
        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_date: '',
        isTabChart: false,
        end_date: '',
        Daytrend_title: '',
        Daygate_title: '',
        Shopranking_title: '',
        Dayfloor_title: '',
        monthImg: Boolean,
        monthClass: '',
        showGender: true,
        isTabChart: false,
      }
    },
    components: {
      'my-chart': myChart,
      'gender-chart': genderChart,
      "enter-chart": enterChart,
      "flow-sort": flowSort,
      genderCompare
    },
    watch: {
      // propparam: {
      //     handler: 'refreshHandle',
      //     immediate: false
      // }
      propparam(val, old) {
        if (val.dateType === '/mall/monthly') {
          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";
        }
      },
    },
    created() {
    },
    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/monthly' && 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.getMonth() === new Date().getMonth() && param.timeVal.getFullYear() === new Date().getFullYear()) {
            this.end_date = dateUnit.dateFormat(param.timeVal, 'yyyy-MM-dd');
            this.start_date = dateUnit.dateFormat(new Date(Date.parse(param.timeVal.getFullYear() + '/' + (param.timeVal.getMonth() + 1) + '/01')), 'yyyy-MM-dd');
            if (this.start_date == this.end_date) {
              this.end_date = dateUnit.dateFormat(new Date(), 'yyyy-MM-dd');
            }
          } else {
            this.start_date = param.timeVal;
            this.end_date = new Date(Date.parse(this.dayAdd(param.timeVal, 31).replace(/\-/, '/')));
            // if((this.start_date instanceof Object) && (this.end_date instanceof Object)) {
            let formatTime = this.unitTime(this.start_date, this.end_date, 'month');
            this.start_date = formatTime.startTime;
            this.end_date = formatTime.endTime;
            // }
          }
        }
        if (this.chartIds) {
          this.getChartData();
        } else {
          this.getChartId();
        }
      },
      emptyChart() {
        this.mallMonthSex_ops = {
          maleRatio: '0%',
          femaleRatio: '0%'
        };
        this.mallMonthAge_ops = {};
        this.mallMonthTrend_ops = {};
        this.mallMmainRank_ops = {};
        this.mallMformatRank_ops = {};
        this.mallMmainIo_ops = {};
        this.mallMfloorFlow_ops = {};
        this.format_ops = {};
        this.zone_ops = {};
        this.mall_denger_ops = {};
      },
      //获取chartID
      getChartId() {
        this.chartKeyToId = {};
        this.chartIds = '';
        this.$api.baseReport.reportChart({
            report: 'MallMonth',
            // _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() {
        this.radioDate = 'trafficAndSaleTrend';
        // if(!this.orgId) {
        //     this.orgId = this.$cookie.get('orgId');
        // }
        this.emptyChart();
        let _st = '',
          _et = '';
        if (!this.start_date && !this.end_date) {
          _et = dateUnit.dateFormat(new Date(), 'yyyy-MM-dd');
          _st = dateUnit.dateFormat(new Date(Date.parse(new Date().getFullYear() + '/' + (new Date().getMonth() + 1) + '/01')), 'yyyy-MM-dd');
        } else {
          _et = this.end_date;
          _st = this.start_date;
        }
        this.$api.baseReport.mallReport('month', {
            kpiType:'TRAFFIC', 
            orgIds: this.$cookie.get('orgId'),
            startDate: _st,
            endDate: _et,
            chartIds: this.chartIds,
            // _t: Date.parse(new Date()) / 1000
          })
          .then(res => {
            let report = 'MallMonth',
              {
                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.mallMonthAge_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,
              oriData: trafficAndSaleTrend.series,
            }
           
            // 去除天气和温度数据
            let trData = [],
              wetherdata = []
            trafficAndSaleTrend.series.map((ele, i) => {
              if (ele.name == "天气" || ele.name == '温度') {
                wetherdata.push(ele)
              } else {
                trData.push(ele)
              }
            })
            trafficAndSaleTrend.series = trData
            this.mallMonthTrend_ops = trafficAndSaleTrend
            // 主力店铺排行
            this.Shopranking_title = report + 'costomer_ranking'
            // costomer_ranking['seriesText'] = 'costomer_ranking'
            costomer_ranking['otherConf'] = {
              'seriesText': 'triffic'
            }
            this.mallMmainRank_ops = costomer_ranking
            // 全国业态排行
            // triffic_ranking['seriesText'] = 'triffic_ranking'
            triffic_ranking['otherConf'] = {
              'seriesText': 'triffic'
            }
            this.mallMformatRank_ops = triffic_ranking
            // 出入口客流排行
            this.Daygate_title = report + 'gate_triffic'
            // gate_triffic['seriesText'] = 'trifficRank'
            gate_triffic['otherConf'] = {
              'seriesText': 'triffic'
            }
            this.mallMmainIo_ops = gate_triffic
            // 楼层客流排行
            floor_triffic['otherConf'] = {
              'seriesText': 'triffic'
            }
            this.Dayfloor_title = report + 'floor_triffic'
            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.mallMfloorFlow_ops = floor_triffic
            //店铺关联热力图数据
            this.zone_ops = zone_association;
            //业态关联热力图数据
            this.format_ops = format_association;
            //店铺客流排行表格数据
            try {
              this.trafficRanking = zone_traffic.series[0].data;
            } catch (error) {
              
            }
            // 性别分布
            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.mallMonthSex_ops.femaleRatio = ((item.data[0].value / allNum) * 100).toFixed(2) + '%';
                        this.mallMonthSex_ops.maleRatio = ((item.data[1].value / allNum) * 100).toFixed(2) + '%';
                      } else {
                        this.mallMonthSex_ops.femaleRatio = ((item.data[1].value / allNum) * 100).toFixed(2) + '%';
                        this.mallMonthSex_ops.maleRatio = ((item.data[0].value / allNum) * 100).toFixed(2) + '%';
                      }
                    } else {
                      this.mallMonthSex_ops = {
                        maleRatio: '0%',
                        femaleRatio: '0%'
                      };
                    }
                  } else {
                    this.mallMonthSex_ops = {
                      maleRatio: '0%',
                      femaleRatio: '0%'
                    };
                  }
                })
              }
            }
             //出入口排行
            let gate_source = gateSource;
            gate_source["color"] = ["#0069FF", "#4BBEFF", "#87D14B", "#FFC62E", "#FF9631"];
            this.mall_pass_ops = gate_source;
            // 头部数据
            this.headerData = this.buildHeaderData(
              Object.assign({}, res.data.data.head)
            );
             // 头部数据
            this.headerCardDetail("mallData");
            // if (this.headerData.comparedMonthInnum) {
            //   if (Number(this.headerData.comparedMonthInnum) >= 0) {
            //     this.monthImg = true
            //     this.monthClass = "rise-text"
            //   } else {
            //     this.monthImg = false
            //     this.monthClass = "decline-text"
            //     this.headerData.comparedMonthInnum = (this.headerData.comparedMonthInnum).split('-')[1]
            //   }
            // } else {
            //   this.monthImg = Boolean
            //   this.monthClass = ""
            // }
            this.buildRanking()
          })
          .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].MONTH = "--";
            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].MONTH = "--";
            data[ele].unit = " ";
            data[ele].info = "";
            break;
          case "kedanjia":
            data[ele].title = "客单价";
            data[ele].MONTH = "--";
            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.MONTH - data.PERSONCOUNT - data.dianyuan,
        info:data.info,
        contenthtml: data.unit
          ? `<div><span class='number'>${data.MONTH}</span><span class='unit'>${data.unit}</span></div>`
          : `<div>${data.MONTH}</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 = {
        MONTH: `<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>`,
        LASTMONTH: `<div class="title-row">上月同期：${data.LASTMONTH} ${data.unit ||''}<span class=""><img class="showbox-img" src="${this.showImg(
          data.LASTMONTHDAYRATIO
        )}"/>${ Math.abs(data.LASTMONTHDAYRATIO)}%</span></div>`,
      };
      if (type == "userGroup" || type == "tidailv" || type == "kedanjia") {
        obj = {
          MONTH: `<div class="title-row">昨日： <span class="">${data.MONTH|| '未知'}</span></div>`,
          WORKINGDAY: `<div class="title-row">上月：<span class="">${data.WORKINGDAY|| '未知'}</span></div>`,
          WEEKENDDAY: `<div class="title-row">上月：<span class="">${data.WEEKENDDAY || '未知'}</span></div>`,
          LASTMONTH: `<div class="title-row">上月：<span class="">${data.LASTMONTH || '未知'}</span></div>`,
        };
      } else if(type == "zoneRatio") {
        obj.MONTH = ''
      } else if(type == "mallRetention" || type == "zoneRetention" || type == "aveZone" ||  type == "aveFloor"){
        obj.MONTH = `<div class="title-row">日均进店：${data.MONTH} ${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 id = this.chartKeyToId[value];
        let _st = '',
          _et = '';
        if (!this.start_date && !this.end_date) {
          _et = dateUnit.dateFormat(new Date(), 'yyyy-MM-dd');
          _st = dateUnit.dateFormat(new Date(Date.parse(new Date().getFullYear() + '/' + (new Date().getMonth() + 1) + '/01')), 'yyyy-MM-dd');
        } else {
          _et = this.end_date;
          _st = this.start_date;
        }
        if(value == 'trafficAndSaleTrend_12month'){
          this.$api.baseReport.reportMallSingleChart('month', id, {
            orgIds: this.$cookie.get('orgId'),
            startDate: _st,
            endDate: _et,
            option:'TAB_MONTH',
            // _t: Date.parse(new Date()) / 1000
          })
          .then(data => {
            if (data.data.data) {
              let  trafficAndSaleTrend = data.data.data;
              let rankData = {},
              formatRankData = {};
                  trafficAndSaleTrend['otherConf'] = {
                  _color: ["#0069FF", "#4BBEFF", "#87D14B", "#FFC62E", "#FF9631"],
                  hasYaxisName: false,
                }
              this.mallMonthTrend_ops  = trafficAndSaleTrend;
            }
          })
          .catch(err => {
            this.catchErrorHandle(err)
          })
        } else {
          this.$api.baseReport.mallReport('month', {
                  orgIds: this.$cookie.get('orgId'),
                  startDate: _st,
                  endDate: _et,
                  chartIds: id,
                  // _t: Date.parse(new Date()) / 1000
                }).then(res => {
                  let {trafficAndSaleTrend={}} = res.data.data.body;
                  trafficAndSaleTrend['otherConf'] = {
                  _color: ["#0069FF", "#4BBEFF", "#87D14B", "#FFC62E", "#FF9631"],
                  hasYaxisName: false,
                  oriData: trafficAndSaleTrend.series,
                }
                // 去除天气和温度数据
                let trData = [],
                  wetherdata = []
                trafficAndSaleTrend.series.map((ele, i) => {
                  if (ele.name == "天气" || ele.name == '温度') {
                    wetherdata.push(ele)
                  } else {
                    trData.push(ele)
                  }
                })
                trafficAndSaleTrend.series = trData
                this.mallMonthTrend_ops = trafficAndSaleTrend
              })
        }
        
      },
      exportDataHandle(domId, title, chartKey) {
        // 
        let chartId = this.chartKeyToId[chartKey];
        let exportNeed = {
          domId: domId,
          title: title,
          data: {
            url: '/report/month/mall/' + chartId + '/excel',
            params: 'orgIds=' + this.$cookie.get('orgId') + '&option=TAB_MONTH&startDate=' + this.start_date + '&endDate=' + this.end_date
          }
        }
        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>