数据展示

src/HManagement/archives_ad/dataAnalysis/index.vue

@@ -3,18 +3,18 @@
     <el-tabs v-model="activeName" @tab-click="handleClick">
       <el-tab-pane label="经销商分析" name="first">
         <!-- 分享 -->
-        <share-data></share-data>
+        <!-- <share-data></share-data> -->
         <!-- 浏览数据 -->
-        <read-data type="agency"></read-data>
+        <read-data type="agency" />
         <!-- 下载数据 -->
-        <downloadData type="agency"></downloadData>
+        <downloadData type="agency" />
 
       </el-tab-pane>
       <el-tab-pane label="团队内部分析" name="second">
         <!-- 浏览数据 -->
-        <read-data type='team'></read-data>
+        <read-data type='team' />
         <!-- 下载数据 -->
-        <downloadData type='team'></downloadData>
+        <downloadData type='team' />
       </el-tab-pane>
     </el-tabs>
   </div>

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

@@ -5,18 +5,75 @@
             <div :id="type + 'pie2'" style="width:50%;"></div>
         </div>
         <div class="title-box">
-            <div class="title">未下载业务员</div>
+            <div class="title">未下载{{ type == 'agency' ? '经销商' : '业务员' }}</div>
+            <exportExcel :tablecols="unDownload.tablecols" :param="unDownload.params"
+                :excelTitle="type == 'agency' ? '推广素材经销商未下载表' : '推广素材团队未下载表'" />
         </div>
-        <div class="title-box">
-            <div class="title">已下载业务员</div>
+        <!-- 未下载表格 -->
+        <tableLayout style="margin-top:16px" :layout="unDownload.tablecols" :data="unDownload.list" :custom="true">
+            <template v-slot:customcol="scope">
+                <div v-if="scope.column.columnname == 'region'">
+                    {{ scope.column.data.province }}{{ scope.column.data.city }}{{ scope.column.data.county }}
+                </div>
+                <p v-else>{{ scope.column.data[scope.column.columnname] }}</p>
+            </template>
+        </tableLayout>
+        <div style="margin-top:16px;text-align:right">
+            <el-pagination background small @current-change="handlUnCurrentChange" :current-page="unDownload.pageNumber"
+                :page-size="unDownload.pageSize" layout="total, prev, pager, next, jumper" :total="unDownload.total">
+            </el-pagination>
+        </div>
+        <div class="title-box" style="margin-top:30px">
+            <div class="title">已下载{{ type == 'agency' ? '经销商' : '业务员' }}</div>
+            <exportExcel :tablecols="download.tablecols" :param="download.params"
+                :excelTitle="type == 'agency' ? '推广素材经销商已下载表' : '推广素材团队已下载表'" />
+        </div>
+        <!-- 已读表格 -->
+        <tableLayout style="margin-top:16px" :layout="download.tablecols" :data="download.list" :custom="true">
+            <template v-slot:customcol="scope">
+                <div v-if="scope.column.columnname == 'region'">
+                    {{ scope.column.data.province }}{{ scope.column.data.city }}{{ scope.column.data.county }}
+                </div>
+                <div v-else-if="scope.column.columnname == 'isdownloadfile'">
+                    {{ scope.column.data.isdownloadfile == 1 ? '是' : '否' }}
+                </div>
+                <p v-else>{{ scope.column.data[scope.column.columnname] }}</p>
+            </template>
+        </tableLayout>
+        <div style="margin-top:16px;text-align:right">
+            <el-pagination background small @current-change="handlCurrentChange" :current-page="download.pageNumber"
+                :page-size="download.pageSize" layout="total, prev, pager, next, jumper" :total="download.total">
+            </el-pagination>
         </div>
     </div>
 </template>
 
 <script>
+import exportExcel from "@/components/export_excel";
 import { Pie } from '@antv/g2plot';
 export default {
     props: ["type"],
+    components:{exportExcel},
+    data() {
+        return {
+            //已下载
+            download: {
+                tablecols: [],
+                list: [],
+                pageNumber: 1,
+                pageSize: 10,
+                total: 0
+            },
+            //未下载
+            unDownload: {
+                tablecols: [],
+                list: [],
+                pageNumber: 1,
+                pageSize: 10,
+                total: 0
+            }
+        }
+    },
     methods: {
         /* 渲染图表 */
         renderer(data) {
@@ -38,40 +95,69 @@ export default {
             });
 
             piePlot.render();
-        }
-    },
-
-    created() {
-        if (this.type == 'agency') {
-            this.$api.requested({
-                "classname": "webmanage.saletool.sharematerial.statistics.agent",
+        },
+        getDownloadList() {
+            let params = {
+                "classname": this.classname,
                 "method": "getDownloadList",
                 "content": {
                     "sat_sharematerialid": this.$route.query.id,
-                    "pageNumber": 1,
-                    "pageSize": 20,
+                    "pageNumber": this.download.pageNumber,
+                    "pageSize": this.download.pageSize,
                     "isAll": false
                 }
-            }).then(res => {
-                console.log("下载", res)
+            };
+
+            this.$api.requested(params).then(res => {
+                console.log(this.type, "下载", res)
+                if (res.msg != '成功') return this.$message.error(res.data);
+                this.download.params = params;
+                this.download.list = res.data;
+                this.download.pageNumber = res.pageNumber;
+                this.download.total = res.total;
             });
-            this.$api.requested({
-                "classname": "webmanage.saletool.sharematerial.statistics.agent",
+        },
+
+        getUnDownloadList() {
+            let params = {
+                "classname": this.classname,
                 "method": "getUnDownloadList",
                 "content": {
                     "sat_sharematerialid": this.$route.query.id,
-                    "pageNumber": 1,
-                    "pageSize": 20,
+                    "pageNumber": this.unDownload.pageNumber,
+                    "pageSize": this.unDownload.pageSize,
                     "isAll": false
                 }
-            }).then(res => {
-                console.log("未下载", res)
+            };
+            this.$api.requested(params).then(res => {
+                console.log(this.type, "未下载", res)
+                if (res.msg != '成功') return this.$message.error(res.data);
+                this.unDownload.params = params;
+                this.unDownload.list = res.data;
+                this.unDownload.pageNumber = res.pageNumber;
+                this.unDownload.total = res.total;
             });
-        }
+        },
+        /* 已-切换分页 */
+        handlCurrentChange(index) {
+            this.download.pageNumber = index;
+            this.getDownloadList();
+        },
+        /* 未-切换分页 */
+        handlUnCurrentChange(index) {
+            this.unDownload.pageNumber = index;
+            this.getUnDownloadList();
+        },
     },
 
+    created() {
+        this.download.tablecols = this.tool.tabelCol('archives_adlist')[`${this.type}DownloadTable`].tablecols;
+        this.unDownload.tablecols = this.tool.tabelCol('archives_adlist')[`${this.type}UndownloadTable`].tablecols;
+        this.classname = `webmanage.saletool.sharematerial.statistics${this.type == 'agency' ? ".agent" : ".team"}`;
 
-
+        this.getDownloadList();
+        this.getUnDownloadList();
+    },
     mounted() {
         this.$api.requested({
             "classname": this.type == 'agency' ? "webmanage.saletool.sharematerial.statistics.agent" : "webmanage.saletool.sharematerial.statistics.team",

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

@@ -5,19 +5,133 @@
             <div :id="type + 'pie1'" style="width:50%;"></div>
         </div>
         <div class="title-box">
-            <div class="title">未浏览经销商</div>
+            <div class="title">未浏览{{ type == 'agency' ? '经销商' : '业务员' }}</div>
+            <exportExcel :tablecols="unReadData.tablecols" :param="unReadData.params"
+                :excelTitle="type == 'agency' ? '推广素材经销商未浏览表' : '推广素材团队未浏览表'" />
         </div>
-        <div class="title-box">
-            <div class="title">已浏览经销商</div>
+        <!-- 未读表格 -->
+        <tableLayout style="margin-top:16px" :layout="unReadData.tablecols" :data="unReadData.list" :custom="true">
+            <template v-slot:customcol="scope">
+                <div v-if="scope.column.columnname == 'region'">
+                    {{ scope.column.data.province }}{{ scope.column.data.city }}{{ scope.column.data.county }}
+                </div>
+                <p v-else>{{ scope.column.data[scope.column.columnname] }}</p>
+            </template>
+        </tableLayout>
+        <div style="margin-top:16px;text-align:right">
+            <el-pagination background small @current-change="handlUnReadCurrentChange"
+                :current-page="unReadData.pageNumber" :page-size="unReadData.pageSize"
+                layout="total, prev, pager, next, jumper" :total="unReadData.total">
+            </el-pagination>
+        </div>
+
+        <div class="title-box" style="margin-top:30px">
+            <div class="title">已浏览{{ type == 'agency' ? '经销商' : '业务员' }}</div>
+            <exportExcel :tablecols="readData.tablecols" :param="readData.params"
+                :excelTitle="type == 'agency' ? '推广素材经销商已浏览表' : '推广素材团队已浏览表'" />
+        </div>
+
+        <!-- 未读表格 -->
+        <tableLayout style="margin-top:16px" :layout="readData.tablecols" :data="readData.list" :custom="true">
+            <template v-slot:customcol="scope">
+                <div v-if="scope.column.columnname == 'region'">
+                    {{ scope.column.data.province }}{{ scope.column.data.city }}{{ scope.column.data.county }}
+                </div>
+                <div v-else-if="scope.column.columnname == 'isdownloadfile'">
+                    {{ scope.column.data.isdownloadfile == 1 ? '是' : '否' }}
+                </div>
+                <p v-else>{{ scope.column.data[scope.column.columnname] }}</p>
+            </template>
+        </tableLayout>
+        <div style="margin-top:16px;text-align:right">
+            <el-pagination background small @current-change="handlReadCurrentChange" :current-page="readData.pageNumber"
+                :page-size="readData.pageSize" layout="total, prev, pager, next, jumper" :total="readData.total">
+            </el-pagination>
         </div>
     </div>
 </template>
 
 <script>
+import exportExcel from "@/components/export_excel";
 import { Pie } from '@antv/g2plot';
 export default {
     props: ["type"],
+    components: { exportExcel },
+    data() {
+        return {
+            //已读对象
+            readData: {
+                tablecols: [],
+                list: [],
+                pageNumber: 1,
+                pageSize: 10,
+                total: 0
+            },
+            //未读对象
+            unReadData: {
+                tablecols: [],
+                list: [],
+                pageNumber: 1,
+                pageSize: 10,
+                total: 0
+            }
+        }
+    },
     methods: {
+        /* 获取已读表格 */
+        getReadList() {
+            let params = {
+                classname: this.classname,
+                "method": "getReadList",
+                "content": {
+                    "sat_sharematerialid": this.$route.query.id,
+                    pageNumber: this.readData.pageNumber,
+                    pageSize: this.readData.pageSize,
+                    "isAll": false
+                }
+            };
+            this.$api.requested(params).then(res => {
+                console.log(this.type, "read", res)
+                if (res.msg != '成功') return this.$message.error(res.data);
+                this.readData.params = params;
+                this.readData.list = res.data;
+                this.readData.pageNumber = res.pageNumber;
+                this.readData.total = res.total;
+            });
+        },
+        /* 获取未读表格 */
+        getUnReadList() {
+            let params = {
+                classname: this.classname,
+                "method": "getUnReadList",
+                "content": {
+                    "sat_sharematerialid": this.$route.query.id,
+                    pageNumber: this.unReadData.pageNumber,
+                    pageSize: this.unReadData.pageSize,
+                    "isAll": false
+                }
+            };
+            this.$api.requested(params).then(res => {
+                console.log(this.type, "unread", res)
+
+                if (res.msg != '成功') return this.$message.error(res.data);
+                this.unReadData.params = params;
+                this.unReadData.list = res.data;
+                this.unReadData.pageNumber = res.pageNumber;
+                this.unReadData.total = res.total;
+            });
+        },
+        /* 已读切换分页 */
+        handlReadCurrentChange(index) {
+            this.readData.pageNumber = index;
+            this.getReadList();
+        },
+        /* 未读切换分页 */
+        handlUnReadCurrentChange(index) {
+            this.unReadData.pageNumber = index;
+            this.getUnReadList();
+        },
+        /* 渲染表格 */
         renderer(data) {
             const piePlot = new Pie(this.type + 'pie1', {
                 appendPadding: 10,
@@ -35,40 +149,18 @@ export default {
                 },
                 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)
-            });
-        };
+        //判断经销商数据还是内部数据
+        this.readData.tablecols = this.tool.tabelCol('archives_adlist')[`${this.type}ReadTable`].tablecols;
+        this.unReadData.tablecols = this.tool.tabelCol('archives_adlist')[`${this.type}UnreadTable`].tablecols;
+        this.classname = this.type == 'agency' ? "webmanage.saletool.sharematerial.statistics.agent" : "webmanage.saletool.sharematerial.statistics.team";
+        this.getUnReadList();
+        this.getReadList();
     },
+
     mounted() {
         this.$api.requested({
             "classname": this.type == 'agency' ? "webmanage.saletool.sharematerial.statistics.agent" : "webmanage.saletool.sharematerial.statistics.team",