weekHeadeCard.vue

<template>
  <div class="weekly">
    <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 == 'zoneTimeData' }"
            @click="headerCardDetail('zoneTimeData')"
          >
            <div class="jm-showBoxNum">
              <div class="number">
                {{ headerData.zoneTimeData.WEEK
                }}<span class="unit">{{ headerData.zoneTimeData.unit }}</span>
              </div>
              <div class="box-title">
                <span>{{ headerData.zoneTimeData.title }}</span>
              </div>
            </div>
          </div>
          <div
            :class="{
              showBox: true,
              showisactive: active == 'zoneRetention',
            }"
            @click="headerCardDetail('zoneRetention')"
          >
            <div class="jm-showBoxNum">
              <div class="number">
                {{ headerData.zoneRetention.WEEK
                }}<span class="unit">{{ headerData.zoneRetention.unit }}</span>
              </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 == 'effectiveTraffic',
            }"
            @click="headerCardDetail('effectiveTraffic')"
          >
            <div class="jm-showBoxNum">
              <div class="number">
                {{ headerData.effectiveTraffic.WEEK
                }}<span class="unit">{{
                  headerData.effectiveTraffic.unit
                }}</span>
              </div>
              <div class="box-title">
                <span>{{ headerData.effectiveTraffic.title }}</span>
              </div>
            </div>
          </div>
          <div
            :class="{
              showBox: true,
              showisactive: active == 'zoneOutsideData',
            }"
            @click="headerCardDetail('zoneOutsideData')"
          >
            <div class="jm-showBoxNum">
              <div class="number">
                {{ headerData.zoneOutsideData.WEEK
                }}<span class="unit">{{
                  headerData.zoneOutsideData.unit
                }}</span>
              </div>
              <div class="box-title">
                <span>{{ headerData.zoneOutsideData.title }}</span>
              </div>
            </div>
          </div>
          
        </el-col>
        <el-col class="tabcard">
          <div
            :class="{ showBox: true, showisactive: active == 'zoneEnterRate' }"
            @click="headerCardDetail('zoneEnterRate')"
          >
            <div class="jm-showBoxNum">
              <div class="number">
                {{ headerData.zoneEnterRate.WEEK
                }}<span class="unit">{{ headerData.zoneEnterRate.unit }}</span>
              </div>
              <div class="box-title">
                <span>{{ headerData.zoneEnterRate.title }}</span>
              </div>
            </div>
          </div>
          <div
            :class="{
              showBox: true,
              showisactive: active == 'zoneEffect',
            }"
            @click="headerCardDetail('zoneEffect')"
          >
            <div class="jm-showBoxNum">
              <div class="number">{{ headerData.zoneEffect.WEEK }}
                 <span class="unit">{{ headerData.zoneEffect.unit }}</span>
              </div>
              <div class="box-title">
                <span>{{ headerData.zoneEffect.title }}</span>
              </div>
            </div>
          </div>
          
        </el-col>
        <el-col class="tabcard">
          <div
            :class="{ showBox: true, showisactive: active == 'zoneAttractiveness' }"
            @click="headerCardDetail('zoneAttractiveness')"
          >
            <div class="jm-showBoxNum">
              <div class="number">
                {{ headerData.zoneAttractiveness.WEEK
                }}<span class="unit">{{ headerData.zoneAttractiveness.unit }}</span>
              </div>
              <div class="box-title">
                <span>{{ headerData.zoneAttractiveness.title }}</span>
              </div>
            </div>
          </div>
          <div
            :class="{ showBox: true, showisactive: active == 'tidailv' }"
            @click="headerCardDetail('tidailv')"
          >
            <div class="jm-showBoxNum">
              <div class="number">
                {{ headerData.tidailv.WEEK
                }}<span class="unit">{{ headerData.tidailv.unit }}</span>
              </div>
              <div class="box-title">
                <span>{{ headerData.tidailv.title }}</span>
              </div>
            </div>
          </div>
        </el-col>
        <el-col class="tabcard">
          <div
            :class="{ showBox: true, showisactive: active == 'customerGroup' }"
            @click="headerCardDetail('customerGroup')"
          >
            <div class="jm-showBoxNum">
              <div class="number">
                {{ headerData.customerGroup.WEEK
                }}<span class="unit">{{ headerData.customerGroup.unit }}</span>
              </div>
              <div class="box-title">
                <span>{{ headerData.customerGroup.title }}</span>
              </div>
            </div>
          </div>
          <div
            :class="{ showBox: true, showisactive: active == 'aveFloor' }"
            @click="headerCardDetail('aveFloor')"
          >
            <div class="jm-showBoxNum">
              <div class="number">
                {{ headerData.aveFloor.WEEK
                }}<span class="unit">{{ headerData.aveFloor.unit }}</span>
              </div>
              <div class="box-title">
                <span>{{ headerData.aveFloor.title }}</span>
              </div>
            </div>
          </div>
          <!-- <div
            :class="{ showBox: true, showisactive: active == 'kedanjia' }"
            @click="headerCardDetail('kedanjia')"
          >
            <div class="jm-showBoxNum">
              <div class="number">
                {{ headerData.kedanjia.WEEK
                }}<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>
</template>

<script>
export default {
  props: {
    headeData: Object,
  },
  data() {
    return {
      headerData: {
        zoneTimeData: {
          WEEK: null,
          unit: "",
          title: "客流量",
        },
        effectiveTraffic:{
          WEEK: null,
          unit: "",
          title: "顾客人数",
        },
        zoneOutsideData: {
          WEEK: null,
          unit: "",
          title: "过店客流",
        },
        zoneEnterRate: {
          WEEK: null,
          unit: "",
          title: "在店率",
        },
        aveFloor: {
          WEEK: null,
          unit: "",
          title: "抵达便利度",
        },
        customerGroup: {
          WEEK: null,
          unit: "",
          title: "主力客群",
        },
        zoneRetention: {
          WEEK: null,
          unit: "",
          title: "平均滞留时长",
        },
        zoneEffect: {
          WEEK: null,
          unit: "",
          title: "客流坪效",
        },
        zoneAttractiveness: {
          WEEK: null,
          unit: "",
          title: "吸客率",
        },
        tidailv: {
          WEEK: null,
          unit: "",
          title: "提袋率",
        },
        kedanjia: {
          WEEK: null,
          unit: "",
          title: "客单价",
        },
      },
      active: "zoneTimeData",
      activecard: {},
    };
  },
  created(){
     this.activecard = {};
  },

  watch: {
    headeData(val) {

      this.headerData = this.buildHeaderData(val);

      this.headerCardDetail("zoneTimeData");
    },
  },
  methods: {
    /**
     * 构建头部数据
     * header
     */
    buildHeaderData(headerdata) {
      let data = headerdata;
      data.kedanjia = this.headerData.kedanjia;
      data.tidailv = this.headerData.tidailv;
      data.aveFloor = this.headerData.aveFloor;
      data.customerGroup = this.headerData.customerGroup;
      let dataArr = Object.keys(headerdata);
      dataArr.map((ele) => {
        if (ele == "zoneTimeData") {
          data[ele].title = "客流量";
          data[ele].unit = "人次";
          data[ele].subunit = "人数";
          data[ele].chongfu = 100;
          data[ele].info =
            "累计进入店铺的客流数";
        } else if (ele == "effectiveTraffic") {
          data[ele].title = "顾客人数";
          data[ele].unit = "人";
          data[ele].subunit = "人数";
          data[ele].info = "累计进入店铺的客流数";
        } else if (ele == "zoneOutsideData") {
          data[ele].title = "过店客流";
          data[ele].unit = "人次";
          data[ele].subunit = "人数";
          data[ele].info = "累计路过店铺门口的客流数";
        } else if (ele == "zoneEnterRate") {
          data[ele].title = "进店率";
          data[ele].unit = "%";
          data[ele].subunit = "人数";
          data[ele].info = "店铺客流量/（店铺客流量+过店客流量）";
        } else if (ele == "zoneAttractiveness") {
          data[ele].title = "吸客率";
          data[ele].unit = " ";
          data[ele].info = "店铺客流量/全商场总客流量";
        } else if (ele == "customerGroup") {
          data[ele].title = "主力客群";
          data[ele].WEEK = "--";
          data[ele].unit = " ";
          data[ele].info =
            "所有年龄与性别的客流数量统计中，占比最大的年龄与性别组合";
        } else if (ele == "zoneRetention") {
          data[ele].title = "滞留时长";
          data[ele].unit = " ";
          data[ele].info = "所有顾客在店铺的总滞留时长/店铺总客流人数";
        } else if (ele == "zoneEffect") {
          data[ele].title = "客流坪效";
          data[ele].unit = "人/㎡ ";
          data[ele].info = "店铺总客流/店铺面积";
        } else if (ele == "aveFloor") {
          data[ele].title = "抵达便利度";
          data[ele].WEEK = "--";
          data[ele].unit = " ";
          data[ele].info = "所有顾客从进入商场到首次抵达店铺的平均用时";
        } else if (ele == "tidailv") {
          data[ele].title = "提袋率";
          data[ele].WEEK = "--";
          data[ele].unit = " ";
          data[ele].info = "在店消费客流/店铺总客流";
        } else if (ele == "kedanjia") {
          data[ele].title = "客单价";
          data[ele].WEEK = "--";
          data[ele].unit = " ";
          data[ele].info = "店铺顾客的平均购买商品金额";
        }
      });
      return data;
    },

    headerCardDetail(type) {
      this.active = type;
      let data = this.headerData[type];
      let activecard = {
        type: type,
        title: data.title,
        info: data.info,
        contenthtml: data.unit
          ? `<div><span class='number'>${data.WEEK}</span><span class='unit'>${data.unit}</span></div>`
          : `<div>${data.WEEK}</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 = {
        YESTERDAY: `<div class="title-row">日均进店：${data.WEEK} ${
          data.unit || ""}</div>`,
        LASTWEEKDAY: `<div class="title-row">工作日均进店：${data.WEEKDAY} ${
          data.unit || ""}</div>`,
        LASTMONTHDAY: `<div class="title-row">双休日均进店：${data.WEEKEND} ${
          data.unit || ""}</div>`,
        LASTYEARDAY: `<div class="title-row">上周同期：${data.LASTWEEK} ${
          data.unit || "" }<span class=""><img class="showbox-img" src="${this.showImg(
          data.LASTWEEKDAYRATIO
        )}"/>${Math.abs(data.LASTWEEKDAYRATIO)}%</span></div>`,
      };
      if (type == "customerGroup" || type == "tidailv" || type == "kedanjia") {
        obj = {
          YESTERDAY: `<div class="title-row">日均进店：： <span class="">${
            data.WEEK || "未知"
          }</span></div>`,
          LASTWEEKDAY: `<div class="title-row">上周：<span class="">${
            data.WEEKDAY || "未知"
          }</span></div>`,
          LASTMONTHDAY: `<div class="title-row">上周：<span class="">${
            data.WEEKEND || "未知"
          }</span></div>`,
          LASTYEARDAY: `<div class="title-row">上周：<span class="">${
            data.LASTWEEK || "未知"
          }</span></div>`,
        };
      }

      activecard.exponent = obj;
      this.activecard = activecard;
      console.log("🚀 ~ file: weekHeadeCard.vue ~ line 384 ~ headerCardDetail ~ this.activecard", this.activecard)
    },
    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>
</style>