|
|
@@ -0,0 +1,142 @@
|
|
|
+<script setup>
|
|
|
+import { departInterence } from "@/api/api.js";
|
|
|
+import { ref } from 'vue'
|
|
|
+
|
|
|
+const tableData = ref([])
|
|
|
+async function getDataList() {
|
|
|
+ const res = await departInterence.getBannerStatistic();
|
|
|
+ if (res.Ret === 200) {
|
|
|
+ tableData.value = res.Data || [];
|
|
|
+ }
|
|
|
+}
|
|
|
+getDataList()
|
|
|
+
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<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"> <img :src="item.BannerUrl" class="table-img" alt="" /></td> -->
|
|
|
+ <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>
|
|
|
+
|
|
|
+<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>
|
