card.vue

<!-- 客流总览 -->
<template>
  <el-row v-loading="loading" v-if="loading||cardList.length">
    <!-- 顶部区域 S-->
    <div class="ipage_top">
      <div class="tit"><img src="~@/assets/img/ipage/shuju.png" />{{$t('iPage.overview')}}</div>
      <div class="acts"></div>
    </div>
    <!-- 顶部区域 S-->
    <!-- 卡片区域 S -->
    <el-row class="cardlist" v-for="(item,index) in cardList" :key="index" type="flex" justify="space-between">
        <el-col class="cgroup"  v-for="(card,idx) in item" :key="idx">
              <div v-if="card.chartKey!='empty'" :class="{card:true,[card.chartKey]:true,active:card.active,disable:!card.hasTrend||!hasTrend}"  @click="loadCardTrend(card)" :style="{cursor:card.hasTrend&&hasTrend?'pointer':''}">
                <div class="title acea-row">
                  {{card.name}}
                  <el-tooltip v-if="!isenus" class="activetip" effect="light" :content="card.info" placement="left"><span class="el-icon-warning-outline"></span>
                  </el-tooltip>
                </div>
                <div class="count" v-html="card.value"></div>
                <!-- 店铺个数 S -->
                <div class="grow acea-row row-start" v-if="card.chartKey=='zone_number'">
                  <p style="margin-right:20px;"><i>{{card.mainZone}}</i><span>{{$t('iPage.number')}}{{$t('dictionary.mainStore')}}</span></p>
                  <p><i>{{card.common}}</i><span>{{$t('iPage.number')}}{{$t('dictionary.generalStore')}}</span></p>
                </div>
                <!-- 店铺个数 E -->
                <!-- 已开业商场 S -->
                <div class="grow acea-row row-start" v-else-if="card.chartKey=='mall_number'">
                  <!-- <p style="margin-right:20px;"><i>{{card.open_mall_number}}</i><span>个</span></p> -->
                </div>
                <div class="grow acea-row row-start" v-else-if="card.chartKey=='mall_customer_adult_child'">
                  <!-- <p style="margin-right:20px;"><i>{{card.open_mall_number}}</i><span>个</span></p> -->
                </div>
                <div class="grow acea-row row-start" v-else-if="card.chartKey=='mall_customer_group'">
                  <!-- <p style="margin-right:20px;"><i>{{card.open_mall_number}}</i><span>个</span></p> -->
                </div>
                <!-- 已开业商场 E -->
                <!-- 日报 S -->
                <div class="grow day" v-else-if="params.dateType=='day'">
                  <p><span>{{$t('iPage.yesterday')}}：</span><b v-html="card.yesterday"></b><i :class="String(card.yesterdayRatio).startsWith('-')?'el-icon-caret-bottom':'el-icon-caret-top'">{{card.yesterdayRatio}}</i></p>
                  <p><span>{{$t('iPage.lastweekday')}}：</span><b v-html="card.lastWeekDay"></b><i :class="String(card.lastWeekDayRatio).startsWith('-')?'el-icon-caret-bottom':'el-icon-caret-top'">{{card.lastWeekDayRatio}}</i></p>
                </div>
                <!-- 日报 E -->
                <!-- 月报 S -->
                <div class="grow month" v-else-if="params.dateType=='month'">
                  <span v-if="params.dataTypePlus&&(params.dataTypePlus=='week'||params.dataTypePlus=='custom')">
                  </span>
                  <span v-else>
                    <p><span>{{$t('iPage.withlastmonth')}}：</span><b v-html="card.lastMonth"></b><i :class="String(card.lastMonthDayRatio).startsWith('-')?'el-icon-caret-bottom':'el-icon-caret-top'">{{card.lastMonthDayRatio}}</i></p>
                    <p><span>{{$t('iPage.withlastyear')}}：</span><b v-html="card.lastYearMonth"></b><i :class="String(card.lastYearMonthRatio).startsWith('-')?'el-icon-caret-bottom':'el-icon-caret-top'">{{card.lastYearMonthRatio}}</i></p>
                  </span>
                </div>
                <!-- 月报 E -->
                <!-- 年报 S -->
                <div class="grow year" v-else-if="params.dateType=='year'">
                  <!-- <p><span>{{$t('iPage.lastmonth')}}：</span><b v-html="card.lastYear"></b><i :class="String(card.lastYearRatio).startsWith('-')?'el-icon-caret-bottom':'el-icon-caret-top'">{{card.lastYearRatio}}</i></p> -->
                  <p><span>{{$t('iPage.lastyear')}}：</span><b v-html="card.last2Year"></b><i :class="String(card.last2YearRatio).startsWith('-')?'el-icon-caret-bottom':'el-icon-caret-top'">{{card.last2YearRatio}}</i></p>
                </div>
                <!-- 年报 E -->
              </div>
              <div v-else class="card cempty">

              </div>
        </el-col>
    </el-row>
    <el-row class="clist" type="flex" justify="space-between" v-if="hasTrend" v-loading="loading">
      <el-col>
        <trend ref="trend" :unit="curUnit" :ckey="curCardKey" :mparam="mparam" title=""></trend>
      </el-col>
    </el-row>
  </el-row>
</template>
<script>
import trend from "./trend";
import _ from 'underscore';
import mallData from "@/components/Echarts/data";
import mixin from "./mixin";
import cardConfig from '../card.config';
export default {
  name:'card',
  mixins: [mixin],
  data() {
    return {
      isenus:localStorage.getItem('lang')=='en_US',
      loading: true,
      hasTrend: true,
      curCardKey: "",
      curUnit: "",
      cardList: [],
      mparam:{},
    };
  },
  components: {
    trend,
  },
  created() {},
  methods: {
    setChartConfig(params) {
      if (params.orgType == "zone" && params.radio != "detail") {
         this.hasTrend = false;
      }
      if(params.orgType == "account"){
        this.hasTrend = false;
      }
    },
    setCardUnit(unit, value, isUnit = true) {
      //unit = '';
      let cvalue = typeof value == "string"
        ? value.replace(/\d+/g, "<em>$&</em>")
        : `<em>${this.toThousands(value)}</em>${isUnit ? unit || "" : ""}`;
      if(localStorage.getItem('lang')=='en_US'){
          cvalue = cvalue.replace('小时',' Hours').replace('分',' Mins')
      }
      return cvalue;
    },

    resetCard(cards = []) {
      let list = _.map(cards,item=>{
          let key = item.chartKey;

          item.unit = this.$t(cardConfig[key].unit);
          item.unit2 = this.$t(cardConfig[key].unit2);
          item.info = cardConfig[key].info;
          item.value = this.setCardUnit(item.unit,item[this.params.dateType == "day" ? "today" : this.params.dateType],true);
          if (this.params.dateType == "day") {
            //item.yesterday = this.setCardUnit(item.unit, item.yesterday);
            //item.lastWeekDay = this.setCardUnit(item.unit, item.lastWeekDay);
          }
          if (this.params.dateType == "month") {
            //item.lastMonth = this.setCardUnit(item.unit, item.lastMonth);
            //item.lastYearMonth = this.setCardUnit(
            //  item.unit,
            //  item.lastYearMonth
            //);
          }
          if (this.params.dateType == "year") {
            //item.lastYear = this.setCardUnit(item.unit, item.lastYear);
            //item.last2Year = this.setCardUnit(item.unit, item.last2Year);
          }
          /*********特殊处理 S***************/
          if (key == "zone_number") {
            item.value = this.setCardUnit(
              item.unit,
              item.common + item.mainZone
            );
          }
          if (key == "mall_number") {
            item.value = this.setCardUnit(
              item.unit,
              item.open_mall_number
            );
          }
          /*********特殊处理 E***************/
          let lang = localStorage.getItem('lang').toLocaleLowerCase()
          Object.assign(item, {
            ...(cardConfig[key][this.params.dateType] || {}),
            name: lang=='en_us'?item.titleEn:item.title,
          });
          item.hasTrend = item.level && item.level.length?true:false;
          return item;
      });
      /************************************/
      let count = 0,length = list.length;
      if(length<5){
          count = 5-length;
      }else if(length<10){
          count = 10-length;
      }else if(length>10){
          count = 15-length;
      }
      let cardList = [...list,...new Array(count).fill({chartKey:'empty'})];
      this.cardList = [cardList.slice(0,5)];
      if(length>5){
         this.cardList.push(cardList.slice(5,10));
      }
      if(length>10){
         this.cardList.push(cardList.slice(10));
      }
      let citem;
      for(let i=0;i<5;i++){
         if(this.cardList[0][i].hasTrend){
             citem = this.cardList[0][i];
             break;
         }
      }
      if(!citem&&length>5){
        for(let i=0;i<5;i++){
            if(this.cardList[1][i].hasTrend){
                citem = this.cardList[1][i];
                break;
            }
        }
      }
      if(citem&&this.hasTrend){
         this.loadCardTrend(citem);
      }else{
        this.hasTrend = false;
      }
      this.loading = false;
    },
    loadCardTrend(card) {
      if (!card.hasTrend || !this.hasTrend){
        return;
      }
      this.cardList.forEach((item) => {
         card.active = false;
      });
      this.cardList.forEach((item) => {
        item.forEach((card) => {
          card.active = false;
        });
      });
      card.active = true;
      this.curUnit = card.unit2||card.unit;
      this.curCardKey = card.chartKey;
      this.$nextTick(()=>{
         this.mparam = Object.assign({},this.params,{level:card.level});
      })
      this.$forceUpdate();
      //this.$refs.trend.loadChartData(this.params);
    },
    loadChartData(params) {
      //params.chartIds = this.getCardIds().join(",");
      const cardList = this.getCardList();
      params.chartIds = _.pluck(cardList,'id').join(",");
      this.loading = true;
      this.$api.ipageReport.headReport(params).then((res) => {

        let { data } = res.data;
        if(data){
           _.each(cardList,card=>{
            Object.assign(card,data[card.chartKey]||{});
          });
          this.setChartData(cardList);
        }else{
          this.setChartData([]);
        }
        this.loading = false;
      });
    },
    setChartData(data) {
      let cards  = _.filter(data,item=>{
         return cardConfig[item.chartKey]&&true||false;
      })
      this.resetCard(cards);
    },
  },
};
</script>

<style  lang="less">
.cardlist {
  min-height: 160px;
  .cgroup {
    padding: 0 6px;
    &:first-of-type {
      padding-left: 0;
    }
    &:last-of-type {
      padding-right: 0;
    }
  }
  .card {
    margin: 8px 0px;
    box-shadow: 0px 3px 12px 0px rgba(196, 200, 207, 0.48);
    border-radius: 4px;
    padding: 16px 20px;
    min-height: 115px;
    cursor: pointer;
    &.disable {
      cursor: text;
      //background:#c7c7c7
    }
    &.zone_number {
    }
    &.cempty{
      cursor: text;
      opacity:0;
      pointer-events:none;
    }
    .title {
      font-weight: 400;
      font-size: 16px;
      color: #787e9f;
      line-height: 22px;
      width: 100%;
      text-align: left;
    }
    .count {
      font-size: 14px;
      font-weight: 400;
      color: #787e9f;
      line-height: 22px;
      padding: 10px 0;
      em {
        font-size: 32px;
        color: #081735;
        line-height: 38px;
        font-style: normal;
        margin-right: 7px;
      }
    }
    .grow {
      font-size: 14px;
      font-weight: 400;
      color: #787e9f;
      line-height: 20px;
      .el-icon-caret-bottom {
        color: #ff4d4f;
      }
      .el-icon-caret-top {
        color: #07bfa5;
      }
      b {
        font-weight: normal;
        margin-right: 10px;
        display: inline-block;
        min-width: 36px;
      }
      em {
        font-style: normal;
      }
      &.day,
      &.month,
      &.year {
        margin-top: -10px;
        p {
          span {
            display: inline-block;
            //width:80px;
          }
          i {
          }
        }
        p:first-of-type {
          margin-bottom: 5px;
        }
      }
      //&.month p span{width:60px;}
      //&.year p span{width:68px;}
      i {
        font-style: normal;
        color: #ff4d4f;
        margin-right: 0;
      }
    }
    &.active {
      background: linear-gradient(#6ab0fd, #418cfa);
      .title,
      .count,
      .count em,
      .grow {
        color: #fff;
      }
      [class^="el-icon-caret-"] {
        background-color: #fff;
        padding: 2px 10px 2px 8px;
        border-radius: 8px;
      }
    }
  }
}
.ipage-mall-year .cardlist{
  min-height: 140px;
  .card{
    min-height: 100px;
  }

}
@media only screen and (max-width: 1900px) {
  .cardlist .card {
    padding: 10px 5px;
  }
}
</style>