dayHeadeCard.vue

<template>
  <div class="">
    <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 v-if="active == 'zoneData'" class="traffictip">
                    <el-tooltip
                      class="activetip"
                      effect="light"
                      placement="right"
                    >
                      <div slot="content">
                        店员：{{ activecard.dianyuan }}/人次<br />重复：{{
                          activecard.chongfu
                        }}/人次
                      </div>
                      <span class="el-icon-info"></span>
                    </el-tooltip>
                  </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 == 'zoneData' }"
            @click="headerCardDetail('zoneData')"
          >
            <div class="jm-showBoxNum">
              <div class="number">
                {{ headerData.zoneData.TODAY
                }}<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 == 'durationTime',
            }"
            @click="headerCardDetail('durationTime')"
          >
            <div class="jm-showBoxNum">
              <div class="number">
                {{ headerData.durationTime.TODAY
                }}<span class="unit">{{ headerData.durationTime.unit }}</span>
              </div>
              <div class="box-title">
                <span>{{ headerData.durationTime.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.TODAY
                }}<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 == 'passingByTraffic',
            }"
            @click="headerCardDetail('passingByTraffic')"
          >
            <div class="jm-showBoxNum">
              <div class="number">
                {{ headerData.passingByTraffic.TODAY
                }}<span class="unit">{{
                  headerData.passingByTraffic.unit
                }}</span>
              </div>
              <div class="box-title">
                <span>{{ headerData.passingByTraffic.title }}</span>
              </div>
            </div>
          </div>
          <!--  -->
        </el-col>
        <el-col class="tabcard">
          <div
            :class="{ showBox: true, showisactive: active == 'enteringRate' }"
            @click="headerCardDetail('enteringRate')"
          >
            <div class="jm-showBoxNum">
              <div class="number">
                {{ headerData.enteringRate.TODAY
                }}<span class="unit">{{ headerData.enteringRate.unit }}</span>
              </div>
              <div class="box-title">
                <span>{{ headerData.enteringRate.title }}</span>
              </div>
            </div>
          </div>
          <div
            :class="{
              showBox: true,
              showisactive: active == 'perSquaremeter',
            }"
            @click="headerCardDetail('perSquaremeter')"
          >
            <div class="jm-showBoxNum">
              <div class="number">{{ headerData.perSquaremeter.TODAY }}
                <span class="unit">{{ headerData.perSquaremeter.unit }}</span>
              </div>
              <div class="box-title">
                <span>{{ headerData.perSquaremeter.title }}</span>
              </div>
            </div>
          </div>
          <!-- <div
            :class="{ showBox: true, showisactive: active == 'tidailv' }"
            @click="headerCardDetail('tidailv')"
          >
            <div class="jm-showBoxNum">
              <div class="number">
                {{ headerData.tidailv.TODAY
                }}<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 == 'zoneEffect' }"
            @click="headerCardDetail('zoneEffect')"
          >
            <div class="jm-showBoxNum">
              <div class="number">
                {{ headerData.zoneEffect.TODAY
                }}<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 == 'attractiveness' }"
            @click="headerCardDetail('attractiveness')"
          >
            <div class="jm-showBoxNum">
              <div class="number">
                {{ headerData.attractiveness.TODAY
                }}<span class="unit">{{ headerData.attractiveness.unit }}</span>
              </div>
              <div class="box-title">
                <span>{{ headerData.attractiveness.title }}</span>
              </div>
            </div>
          </div>
          <div
            :class="{ showBox: true, showisactive: active == 'tidailv' }"
            @click="headerCardDetail('tidailv')"
          >
            <div class="jm-showBoxNum">
              <div class="number">
                {{ headerData.tidailv.TODAY
                }}<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.TODAY
                }}<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.TODAY
                }}<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.TODAY
                }}<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: {
        zoneData: {
          TODAY: null,
          unit: "",
          title: "客流量",
        },
        effectiveTraffic:{
          TODAY: null,
          unit: "",
          title: "顾客人数",
        },
        passingByTraffic: {
          TODAY: null,
          unit: "",
          title: "过店客流",
        },
        enteringRate: {
          TODAY: null,
          unit: "",
          title: "在店率",
        },

        aveFloor: {
          TODAY: null,
          unit: "",
          title: "抵达便利度",
        },
        customerGroup: {
          TODAY: null,
          unit: "",
          title: "主力客群",
        },
        durationTime: {
          TODAY: null,
          unit: "",
          title: "平均滞留时长",
        },
        perSquaremeter: {
          TODAY: null,
          unit: "",
          title: "客流坪效",
        },
        attractiveness: {
          TODAY: null,
          unit: "",
          title: "吸客率",
        },
        tidailv: {
          TODAY: null,
          unit: "",
          title: "提袋率",
        },
        kedanjia: {
          TODAY: null,
          unit: "",
          title: "客单价",
        },
      },
      active: "zoneData",
      activecard: {},
    };
  },

  watch: {
    headeData(val) {
      console.log(
        "🚀 ~ file: headeCard.vue ~ line 282 ~ headeData ~ headerData",
        val
      );
      this.headerData = this.buildHeaderData(val);

      this.headerCardDetail("zoneData");
    },
  },
  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 == "zoneData") {
          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 == "passingByTraffic") {
          data[ele].title = "过店客流";
          data[ele].unit = "人次";
          data[ele].subunit = "人数";
          data[ele].info = "累计路过店铺门口的客流数";
        } else if (ele == "enteringRate") {
          data[ele].title = "进店率";
          data[ele].unit = "%";
          data[ele].subunit = "人数";
          data[ele].info = "店铺客流量/（店铺客流量+过店客流量）";
        } else if (ele == "attractiveness") {
          data[ele].title = "吸客率";
          data[ele].unit = " ";
          data[ele].info = "店铺客流量/全商场总客流量";
        } else if (ele == "customerGroup") {
          data[ele].title = "主力客群";
          data[ele].TODAY = "--";
          data[ele].unit = " ";
          data[ele].info = "所有年龄与性别的客流数量统计中，占比最大的年龄与性别组合";
        } else if (ele == "durationTime") {
          data[ele].title = "滞留时长";
          data[ele].unit = " ";
          data[ele].info = "所有顾客在店铺的总滞留时长/店铺总客流人数";
        } else if (ele == "perSquaremeter") {
          data[ele].title = "客流坪效";
          data[ele].unit = "人/㎡";
          data[ele].info = "店铺总客流/店铺面积";
        } else if (ele == "aveFloor") {
          data[ele].title = "抵达便利度";
          data[ele].TODAY = "--";
          data[ele].unit = " ";
          data[ele].info = "所有顾客从进入商场到首次抵达店铺的平均用时";
        } else if (ele == "tidailv") {
          data[ele].title = "提袋率";
          data[ele].TODAY = "--";
          data[ele].unit = " ";
          data[ele].info = "在店消费客流/店铺总客流";
        } else if (ele == "kedanjia") {
          data[ele].title = "客单价";
          data[ele].TODAY = "--";
          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,
        dianyuan: data.dianyuan,
        chongfu: data.TODAY - data.PERSONCOUNT - data.dianyuan,
        info: data.info,
        contenthtml: data.unit
          ? `<div><span class='number'>${data.TODAY}</span><span class='unit'>${data.unit}</span></div>`
          : `<div>${data.TODAY}</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.YESTERDAY} ${
          data.unit || ""
        }<span class=""><img class="showbox-img" src="${this.showImg(
          data.YESTERDAYRATIO
        )}"/>${Math.abs(data.YESTERDAYRATIO)}%</span></div>`,
        LASTWEEKDAY: `<div class="title-row">上周：${data.LASTWEEKDAY} ${
          data.unit || ""
        }<span class=""><img class="showbox-img" src="${this.showImg(
          data.LASTWEEKDAYRATIO
        )}"/>${Math.abs(data.LASTWEEKDAYRATIO)}%</span></div>`,
        LASTMONTHDAY: `<div class="title-row">上月：${data.LASTMONTHDAY} ${
          data.unit || ""
        }<span class=""><img class="showbox-img" src="${this.showImg(
          data.LASTMONTHDAYRATIO
        )}"/>${Math.abs(data.LASTMONTHDAYRATIO)}%</span></div>`,
        LASTYEARDAY: `<div class="title-row">去年：${data.LASTYEARDAY} ${
          data.unit || ""
        }<span class=""><img class="showbox-img" src="${this.showImg(
          data.LASTYEARDAYRATIO
        )}"/>${Math.abs(data.LASTYEARDAYRATIO)}%</span></div>`,
      };
      if (type == "customerGroup" || type == "tidailv" || type == "kedanjia") {
        obj = {
          YESTERDAY: `<div class="title-row">昨日： <span class="">${
            data.YESTERDAY || "未知"
          }</span></div>`,
          LASTWEEKDAY: `<div class="title-row">上周：<span class="">${
            data.LASTWEEKDAY || "未知"
          }</span></div>`,
          LASTMONTHDAY: `<div class="title-row">上周：<span class="">${
            data.LASTMONTHDAY || "未知"
          }</span></div>`,
          LASTYEARDAY: `<div class="title-row">上周：<span class="">${
            data.LASTYEARDAY || "未知"
          }</span></div>`,
        };
      }

      activecard.exponent = obj;
      this.activecard = 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>