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

<template>
    <div class="content">
        <header>下载数据</header>
        <div class="main">
            <div class="chart-box">
                <div :id="type + 'pie2'"  style="width:100%"></div>
            </div>
            <div style="flex:1;">
                <div class="title-box">
                    <div class="title">未下载{{ type == 'agency' ? '经销商' : '业务员' }}</div>
                    <exportExcel :tablecols="unDownload.tablecols" :param="unDownload.params"
                        :excelTitle="type == 'agency' ? '推广素材经销商未下载表' : '推广素材团队未下载表'" />
                </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>
        </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) {
            const piePlot = new Pie(this.type + 'pie2', {
                appendPadding: 10,
                data,
                angleField: 'value',
                colorField: 'type',
                radius: 0.75,
                color: ['#38C2F6','#5D76E4'],
                legend: {
                    position: 'leftTop'
                },
                label: {
                    type: 'spider',
                    labelHeight: 28,
                    content: '{name}\n{percentage}',
                },
                interactions: [{ type: 'element-selected' }, { type: 'element-active' }],
            });

            piePlot.render();
        },
        getDownloadList() {
            let params = {
                "classname": this.classname,
                "method": "getDownloadList",
                "content": {
                    "sat_sharematerialid": this.$route.query.id,
                    "pageNumber": this.download.pageNumber,
                    "pageSize": this.download.pageSize,
                    "isAll": false
                }
            };

            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;
            });
        },

        getUnDownloadList() {
            let params = {
                "classname": this.classname,
                "method": "getUnDownloadList",
                "content": {
                    "sat_sharematerialid": this.$route.query.id,
                    "pageNumber": this.unDownload.pageNumber,
                    "pageSize": this.unDownload.pageSize,
                    "isAll": false
                }
            };
            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",
            "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');
</style>