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

<template>
    <div class="content">
        <header>浏览数据</header>
        <div class="main">
            <div class="chart-box">
                <div :id="type + 'pie1'" style="width:100%"></div>
            </div>

            <div style="flex:1;">
                <div class="title-box">
                    <div class="title">未浏览{{ type == 'agency' ? '经销商' : '业务员' }}</div>
                    <exportExcel :tablecols="unReadData.tablecols" :param="unReadData.params"
                        :excelTitle="type == 'agency' ? '推广素材经销商未浏览表' : '推广素材团队未浏览表'" />
                </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>
        </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 => {
                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 => {
                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,
                data,
                angleField: 'value',
                colorField: 'type',
                radius: 0.75,
                color: ['#FBB33B', '#F77655'],
                legend: {
                    position: 'leftTop'
                },
                label: {
                    type: 'spider',
                    labelHeight: 28,
                    content: '{name}\n{percentage}',
                },
                interactions: [{ type: 'element-selected' }, { type: 'element-active' }],
            });
            piePlot.render();
        },
    },
    created() {
        //判断经销商数据还是内部数据
        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",
            "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');
</style>