lt-system/src/components/page/homeParts/fhstat.vue

<template>
  <div id="fhstat">
    <el-row>
      <el-col :span="24" class="main">
        <h3 class="h3">商家</h3>
        <el-col :span="4" class="sjList" v-for="(item, sjindex) in sjList.slice(0, 6)" :key="`${sjindex}`">
          <p>{{ item.name }}</p>
          <p>
            销售注册数：<span>{{ xsgetnum(item) || 0 }}</span
            >&nbsp;人
          </p>
          <p>
            客户报名数：<span>{{ khgetnum(item) || 0 }}</span
            >&nbsp;人
          </p>
        </el-col>
        <h3 class="h3 two">销售员</h3>
        <el-col :span="4" class="xsList" v-for="(tag, xsindex) in xsList.slice(0, 6)" :key="xsindex + 'only'">
          <p>{{ tag.name }}</p>
          <p>
            客户报名数：<span>{{ xskhgetnum(tag) || 0 }}&nbsp;人</span>
          </p>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  metaInfo: { title: 'fhstat' },
  name: 'fhstat',
  props: {
    // 商家
    sjstatList: { type: Array },
    // 销售
    xsstatList: { type: Array },
    // 客户
    khstatList: { type: Array },
  },
  components: {},
  data: function() {
    return {
      sjList: [],
      xsList: [],
    };
  },
  created() {},
  methods: {
    searchfilter() {
      let sjList = this.sjstatList.filter(i => i.ssid == this.user.tableid);
      if (sjList) this.$set(this, `sjList`, sjList);
      let xsList = this.xsstatList.filter(i => i.ssid == this.user.tableid);
      if (xsList) this.$set(this, `xsList`, xsList);
    },
    // 获取商家销售数
    xsgetnum(data) {
      let res = this.xsstatList.filter(i => i.ssid == data.tableid);
      if (res) {
        return res.length;
      }
    },
    // 商家客户总数
    khgetnum(data) {
      let res = this.khstatList.filter(i => i.sjid == data.tableid);
      if (res) {
        return res.length;
      }
    },
    // 销售员客户总数
    xskhgetnum(data) {
      let res = this.khstatList.filter(i => i.xsid == data.tableid);
      if (res) {
        return res.length;
      }
    },
  },
  watch: {
    sjstatList: {
      handler(val) {
        this.searchfilter();
      },
    },
    xsstatList: {
      handler(val) {
        this.searchfilter();
      },
    },
    khstatList: {
      handler(val) {
        this.searchfilter();
      },
    },
    immediate: true,
    deep: true,
  },
  computed: {
    ...mapState(['user']),
  },
};
</script>

<style lang="less" scoped>
.main {
  .h3 {
    float: left;
    width: 100%;
    margin: 15px 0;
  }
  .two {
    margin: 70px 0 15px 0;
  }
  .sjList {
    text-align: center;
    border-radius: 360px;
    margin: 5px 10px;
    width: 15%;
    height: 240px;
    box-shadow: 0 0 6px #ccc;
    p:nth-child(1) {
      font-size: 20px;
      font-family: 微软雅黑;
      font-weight: bold;
      padding: 50px 0 20px 0;
    }
    p:nth-child(2) {
      font-size: 16px;
      font-family: 微软雅黑;
      font-weight: bold;
      padding: 10px 0;
      span {
        color: red;
      }
    }
    p:nth-child(3) {
      font-size: 16px;
      font-family: 微软雅黑;
      font-weight: bold;
      padding: 10px 0;
      span {
        color: red;
      }
    }
  }
  .xsList {
    text-align: center;
    border-radius: 360px;
    margin: 5px 0 90px 10px;
    width: 15%;
    height: 240px;
    box-shadow: 0 0 6px #ccc;
    p:nth-child(1) {
      font-size: 20px;
      font-family: 微软雅黑;
      font-weight: bold;
      padding: 70px 0 20px 0;
    }
    p:nth-child(2) {
      font-size: 16px;
      font-family: 微软雅黑;
      font-weight: bold;
      padding: 15px 0;
      span {
        color: red;
      }
    }
  }
}
</style>