hz_crm_web/src/views/interaction_manage/bannerStatistics.vue

<template>
  <div class="container-banner-statistics">
    <div class="table-body-wrapper" style="max-height: calc(100vh - 180px); overflow: auto">
      <table border>
        <thead>
          <td class="thead-rs">名称</td>
          <td class="thead-rs">日期</td>
          <td class="thead-rs">点击量合计</td>
          <td class="thead-rs">点击量</td>
          <td class="thead-rs">点击来源</td>
          <td class="thead-rs">最近一次点击时间</td>
        </thead>
        <tbody v-for="item in tableData" :key="item.ViewHistoryID">
          <tr v-for="(_item, index) in item.SourceList" :key="_item.LastUpdatedTime">
            <td class="thead-rs" :rowspan="item.SourceList.length" v-if="index == 0">{{ item.Remark }}</td>
            <td class="thead-rs" :rowspan="item.SourceList.length" v-if="index == 0">{{ item.StartDate }} -- {{ item.EndDate }}</td>
            <td class="thead-rs" :rowspan="item.SourceList.length" v-if="index == 0">{{ item.Pv }}</td>
            <td class="thead-rs">{{ _item.Pv }}</td>
            <td class="thead-rs">
              {{ _item.FirstSource == 1 ? "小程序移动端" : _item.FirstSource == 2 ? "小程序PC端" : _item.FirstSource == 3 ? "研报官网" : "" }}
              {{ _item.SecondSource == 1 ? "/ 首页" : _item.SecondSource == 2 ? "/ 研报详情页" : "" }}
            </td>
            <td class="thead-rs">{{ _item.LastUpdatedTime }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import { departInterence } from "@/api/api.js";
export default {
  name: "",
  data() {
    return {
      tableData: [],
    };
  },
  mounted() {
    this.getDataList();
  },
  methods: {
    async getDataList() {
      const res = await departInterence.getBannerStatistic();
      if (res.Ret === 200) {
        this.tableData = res.Data || [];
      }
    },
  },
};
</script>
<style scoped lang="scss">
.container-banner-statistics {
  .table-body-wrapper {
    max-height: calc(100vh - 100px);
    overflow-y: scroll;
    overflow-x: auto;
    border-bottom: 1px solid #dcdfe6;
    border-top: 1px solid #dcdfe6;
    .table-data-empty {
      color: #666666;
      height: 530px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-left: 1px solid #dcdfe6;
      border-right: 1px solid #dcdfe6;
    }
  }
  table {
    width: 100%;
    font-size: 14px;
    color: #666;
    thead {
      position: sticky;
      top: 0;
      z-index: 1;
      left: 0;
      border-left: 1px solid #dcdfe6;
      border-right: 1px solid #dcdfe6;
      td {
        border: none;
        outline-color: #dcdfe6;
        outline-style: solid;
        outline-width: 0.5px;
        background-color: #ebeef5 !important ;
        color: #333333;
        font-weight: 500;
      }
    }
    td,
    th {
      min-width: 35px;
      // word-break: break-all;
      border: 1px solid #dcdfe6;
      height: 45px;
      text-align: center;
      background-color: #fff;
    }
  }
  .table-img {
    padding: 20px 0;
    width: 368px;
    height: 107px;
    box-sizing: border-box;
  }
}
</style>