borderNums.vue

<template>
  <div class="dashbord-list">
    <p class="tip">
      <span class="tip-title">页面说明:</span>
      <span
        >可查看当前系统各项数据统计情况。互动频次及点播趋势图展示部分数据，可进入互动统计及趋势分析详情页查看全部数据。</span
      >
    </p>
    <ul>
      <li v-for="(item, index) in list" :key="index">
        <div class="title-name">{{ item.label }}</div>
        <img :src="getImg(item.urlName)" alt="" />
        <div class="title">
          <span>
            <a class="num">{{ item.num }}</a>
            <a class="unit">{{ item.unit }}</a>
          </span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "nums",
  data() {
    return {
      data: [
        {
          label: "总播放量",
          num: 0,
          unit: "次",
          urlName: "play",
          feild: "playCnt",
        },
        {
          label: "单位组织",
          num: 0,
          unit: "家",
          urlName: "org",
          feild: "orgCnt",
        },
        {
          label: "展板总量",
          num: 0,
          unit: "个",
          urlName: "boardsTotal",
          feild: "boardCnt",
        },
        {
          label: "互动总量",
          num: 0,
          unit: "次",
          urlName: "interaction",
          feild: "interactionCnt",
        },
      ],
      list: [],
    };
  },
  mounted() {
    this.getList()
  },
  methods: {
    getImg(imgUrl) {
      return require("@/assets/overview/" + imgUrl + ".png");
    },
    getList() {
      this.$https({
        method: "post",
        url: "tBoardStatistic/getBoardSurvey",
        authType: this.backToken,
      })
        .then((res) => {
          // console.log(res.data.data)
          if (res.status == 200) {
            if (res.data.resultCode == 200) {
              let resData = res.data.data;
              this.list = [...this.data].map((v) => {
                v['num'] = resData[v['feild']] === null ? 0 : resData[v['feild']];
                return v
              });
            } else {
              this.list = [...this.data];
            }
          } else {
            this.list = [...this.data];
          }
        })
        .catch((err) => {
          this.$message.error(err.message);
        });
    },
  },
};
</script>

<style lang="less">
.dashbord-list {
  width: 100%;
  position: absolute;
  padding: 0 10px;
  z-index: 100;
  .tip {
    color: @font-color;
    .tip-title {
      font-weight: bold;
      padding-right: 10px;
    }
  }
  ul {
    display: flex;
    font-size: 0;
    justify-content: space-around;
    li {
      position: relative;
      width: 9vw;
      margin-top: 15px;
    }
    img {
      width: 100%;
    }
    .title-name {
      font-size: 18px;
      color: @font-color;
      position: absolute;
      top: -8px;
      right: 0;
    }
    .title {
      position: absolute;
      right: 0.2rem;
      bottom: 5px;
      color: @party-white;
      .num {
        font-size: 28px;
      }
      .unit {
        font-size: 16px;
        margin-left: 5px;
      }
    }
  }
}
</style>