推广素材

src/HManagement/archives_ad/dataAnalysis/index.vue

@@ -2,19 +2,31 @@
   <div>
     <el-tabs v-model="activeName" @tab-click="handleClick">
       <el-tab-pane label="经销商分析" name="first">
+        <!-- 分享 -->
         <share-data></share-data>
+        <!-- 浏览数据 -->
+        <read-data type="agency"></read-data>
+        <!-- 下载数据 -->
+        <downloadData type="agency"></downloadData>
 
       </el-tab-pane>
-      <el-tab-pane label="团队内部分析" name="second">团队内部分析</el-tab-pane>
+      <el-tab-pane label="团队内部分析" name="second">
+        <!-- 浏览数据 -->
+        <read-data type='team'></read-data>
+        <!-- 下载数据 -->
+        <downloadData type='team'></downloadData>
+      </el-tab-pane>
     </el-tabs>
   </div>
 </template>
 
 <script>
 import shareData from "@/HManagement/archives_ad/dataAnalysis/modules/adShareData.vue";
+import readData from '@/HManagement/archives_ad/dataAnalysis/modules/adReadData.vue';
+import downloadData from "@/HManagement/archives_ad/dataAnalysis/modules/adDownloadData.vue";
 
 export default {
-  components: { shareData },
+  components: { shareData, readData, downloadData },
   data() {
     return {
       activeName: "first",

src/HManagement/archives_ad/dataAnalysis/modules/adDownloadData.vue

@@ -0,0 +1,104 @@
+<template>
+    <div class="content">
+        <header>下载数据</header>
+        <div class="chart-box">
+            <div :id="type + 'pie2'" style="width:50%;"></div>
+        </div>
+        <div class="title-box">
+            <div class="title">未下载业务员</div>
+        </div>
+        <div class="title-box">
+            <div class="title">已下载业务员</div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { Pie } from '@antv/g2plot';
+export default {
+    props: ["type"],
+    methods: {
+        /* 渲染图表 */
+        renderer(data) {
+            const piePlot = new Pie(this.type + 'pie2', {
+                appendPadding: 10,
+                data,
+                angleField: 'value',
+                colorField: 'type',
+                radius: 0.75,
+                legend: {
+                    position: 'leftTop'
+                },
+                label: {
+                    type: 'spider',
+                    labelHeight: 28,
+                    content: '{name}\n{percentage}',
+                },
+                interactions: [{ type: 'element-selected' }, { type: 'element-active' }],
+            });
+
+            piePlot.render();
+        }
+    },
+
+    created() {
+        if (this.type == 'agency') {
+            this.$api.requested({
+                "classname": "webmanage.saletool.sharematerial.statistics.agent",
+                "method": "getDownloadList",
+                "content": {
+                    "sat_sharematerialid": this.$route.query.id,
+                    "pageNumber": 1,
+                    "pageSize": 20,
+                    "isAll": false
+                }
+            }).then(res => {
+                console.log("下载", res)
+            });
+            this.$api.requested({
+                "classname": "webmanage.saletool.sharematerial.statistics.agent",
+                "method": "getUnDownloadList",
+                "content": {
+                    "sat_sharematerialid": this.$route.query.id,
+                    "pageNumber": 1,
+                    "pageSize": 20,
+                    "isAll": false
+                }
+            }).then(res => {
+                console.log("未下载", res)
+            });
+        }
+    },
+
+
+
+    mounted() {
+        this.$api.requested({
+            "classname": this.type == 'agency' ? "webmanage.saletool.sharematerial.statistics.agent" : "webmanage.saletool.sharematerial.statistics.team",
+            "method": "getData",
+            "content": {
+                "sat_sharematerialid": this.$route.query.id
+            }
+        }).then(res => {
+            if (res.msg != '成功') return this.$message.error(res.data);
+            const data = [
+                { type: '未下载', value: res.data.unDownloadNum },
+                { type: '已下载', value: res.data.downloadNum },
+            ];
+            this.renderer(data);
+        })
+    }
+}
+</script>
+
+<style scoped>
+@import url('./public.css');
+
+.chart-box {
+    display: flex;
+    align-content: center;
+    justify-content: center;
+    width: 100%;
+    margin-top: 40px;
+}
+</style>

src/HManagement/archives_ad/dataAnalysis/modules/adReadData.vue

@@ -0,0 +1,101 @@
+<template>
+    <div class="content">
+        <header>浏览数据</header>
+        <div class="chart-box">
+            <div :id="type + 'pie1'" style="width:50%;"></div>
+        </div>
+        <div class="title-box">
+            <div class="title">未浏览经销商</div>
+        </div>
+        <div class="title-box">
+            <div class="title">已浏览经销商</div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { Pie } from '@antv/g2plot';
+export default {
+    props: ["type"],
+    methods: {
+        renderer(data) {
+            const piePlot = new Pie(this.type + 'pie1', {
+                appendPadding: 10,
+                data,
+                angleField: 'value',
+                colorField: 'type',
+                radius: 0.75,
+                legend: {
+                    position: 'leftTop'
+                },
+                label: {
+                    type: 'spider',
+                    labelHeight: 28,
+                    content: '{name}\n{percentage}',
+                },
+                interactions: [{ type: 'element-selected' }, { type: 'element-active' }],
+            });
+
+            piePlot.render();
+        }
+    },
+    created() {
+        console.log(this.type)
+        if (this.type == 'agency') {
+            this.$api.requested({
+                "classname": "webmanage.saletool.sharematerial.statistics.agent",
+                "method": "getReadList",
+                "content": {
+                    "sat_sharematerialid": this.$route.query.id,
+                    "pageNumber": 1,
+                    "pageSize": 20,
+                    "isAll": false
+                }
+            }).then(res => {
+                console.log("已读", res)
+            });
+
+            this.$api.requested({
+                "classname": "webmanage.saletool.sharematerial.statistics.agent",
+                "method": "getUnReadList",
+                "content": {
+                    "sat_sharematerialid": this.$route.query.id,
+                    "pageNumber": 1,
+                    "pageSize": 20,
+                    "isAll": false
+                }
+            }).then(res => {
+                console.log("未读", res)
+            });
+        };
+    },
+    mounted() {
+        this.$api.requested({
+            "classname": this.type == 'agency' ? "webmanage.saletool.sharematerial.statistics.agent" : "webmanage.saletool.sharematerial.statistics.team",
+            "method": "getData",
+            "content": {
+                "sat_sharematerialid": this.$route.query.id
+            }
+        }).then(res => {
+            if (res.msg != '成功') return this.$message.error(res.data);
+            const data = [
+                { type: '未浏览', value: res.data.unreadNum },
+                { type: '已浏览', value: res.data.readNum },
+            ];
+            this.renderer(data);
+        })
+    }
+}
+</script>
+
+<style scoped>
+@import url('./public.css');
+
+.chart-box {
+    display: flex;
+    align-content: center;
+    justify-content: center;
+    width: 100%;
+    margin-top: 40px;
+}
+</style>

src/HManagement/archives_ad/dataAnalysis/modules/adShareData.vue

@@ -1,9 +1,10 @@
 <template>
     <div class="content">
+        <header>分享数据</header>
         <div class="chart">
             <div class="box">
                 <div class="title-box">
-                    <div class="title">分析次数</div>
+                    <div class="title">分享次数</div>
                     <el-radio-group v-model="tabPosition" style="margin-right:33px;" size="small">
                         <el-radio-button label="year">年</el-radio-button>
                         <el-radio-button label="month">月</el-radio-button>
@@ -14,7 +15,7 @@
             </div>
             <div class="box">
                 <div class="title-box">
-                    <div class="title">分析渠道</div>
+                    <div class="title">分享渠道</div>
                 </div>
                 <div id="pie" style="width: calc(100% - 33px); height: 374px; margin-top: 40px;"></div>
             </div>
@@ -80,41 +81,7 @@ export default {
 </script>
 
 <style scoped>
-.content {
-    width: 100%;
-    background: #fff;
-    padding: 20px 16px;
-    box-sizing: border-box;
-}
-
-.title-box {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-    height: 36px;
-    box-sizing: border-box;
-}
-
-.title {
-    position: relative;
-    font-size: 14px;
-    font-family: PingFang SC-Bold, PingFang SC;
-    font-weight: bold;
-    color: #333333;
-    padding-left: 11px;
-}
-
-.title::after {
-    position: absolute;
-    content: '';
-    display: block;
-    width: 4px;
-    height: 20px;
-    background: #3874F6;
-    top: 0;
-    left: 0;
-}
+@import url('./public.css');
 
 .chart {
     display: flex;

src/HManagement/archives_ad/dataAnalysis/modules/public.css

@@ -0,0 +1,46 @@
+header {
+    width: 100%;
+    height: 48px;
+    background: #FFFFFF;
+    font-size: 14px;
+    font-family: PingFang SC-Bold, PingFang SC;
+    font-weight: bold;
+    color: #333333;
+}
+
+.content {
+    width: 100%;
+    background: #fff;
+    padding: 20px 16px;
+    box-sizing: border-box;
+    margin-bottom: 10px;
+}
+
+.title-box {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    height: 36px;
+    box-sizing: border-box;
+}
+
+.title {
+    position: relative;
+    font-size: 14px;
+    font-family: PingFang SC-Bold, PingFang SC;
+    font-weight: bold;
+    color: #333333;
+    padding-left: 11px;
+}
+
+.title::after {
+    position: absolute;
+    content: '';
+    display: block;
+    width: 4px;
+    height: 20px;
+    background: #3874F6;
+    top: 0;
+    left: 0;
+}