init

src/api/modules/setApi.js

@@ -318,6 +318,13 @@ const departInterence = {
 	 */
 	getPhoneAreaCode:params=>{
 		return http.get('/user_login/area_code/list',params)
+	},
+	/**
+	 * 小程序banner统计
+	 * @returns 
+	 */
+	getBannerStatistic:params=>{
+		return http.get('/banner/statistic',params)
 	}
 }
 

src/routes/modules/ficcXcxRoutes.js

@@ -90,6 +90,12 @@ export default [
 				name:'群发日志',
 				hidden:true
 			},
+			{
+				path:'bannerStatistics',
+				component:()=> import('@/views/interaction_manage/bannerStatistics.vue'),
+				name:'banner 统计',
+				hidden:true
+			},
 
         ]
     }

src/views/interaction_manage/bannerStatistics.vue

@@ -0,0 +1,108 @@
+<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">banner图片</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.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 || [];
+         this.tableData.push(...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>