EXEED_manage/src/views/QuestManage/_transformResult/index.vue

<template>
    <div class="main-content">
        <h3 class="top-title" style="font-size: 24px">{{transformData.taskTitle}}</h3>
        <el-button size="default" type="primary" @click="download">导出传播效果</el-button>
        <h3 class="top-title" style="margin-top: 32px">传播数据</h3>
        <div class="top-number">
            <div class="top-number-item">
                <div class="title-style">总播放数</div>
                <div class="number-style">{{transformData.playNumSum}}</div>
            </div>
            <div class="top-number-item">
                <div class="title-style">总点赞数</div>
                <div class="number-style">{{transformData.commendNumSum}}</div>
            </div>
            <div class="top-number-item">
                <div class="title-style">总收藏数</div>
                <div class="number-style">{{transformData.collectionNumSum}}</div>
            </div>
            <div class="top-number-item">
                <div class="title-style">总评论数</div>
                <div class="number-style">{{transformData.commentNumSum}}</div>
            </div>
            <div class="top-number-item">
                <div class="title-style">总转发数</div>
                <div class="number-style">{{transformData.reSendNumSum}}</div>
            </div>
            <div class="top-number-item">
                <div class="title-style">总推荐数</div>
                <div class="number-style">{{transformData.recommendNumSum}}</div>
            </div>
            <div class="top-number-item">
                <div class="title-style">已接受人数</div>
                <div class="number-style">{{transformData.taskUserNum}}</div>
            </div>
            <div class="top-number-item">
                <div class="title-style">未接受人数</div>
                <div class="number-style">{{transformData.taskUserSum - transformData.taskUserNum}}</div>
            </div>
        </div>
        <div class="bottom-list">
            <h3 class="top-title">传播数据</h3>
            <el-table :data="transformList" size="default" border style="width: 1300px">
                <el-table-column prop="userName" label="员工姓名" width="160"></el-table-column>
                <el-table-column prop="departmentName" label="部门" width="240"></el-table-column>
                <el-table-column prop="playNumSum" label="播放数" width="100"></el-table-column>
                <el-table-column prop="commendNumSum" label="点赞数" width="100"></el-table-column>
                <el-table-column prop="collectionNumSum" label="收藏数" width="100"></el-table-column>
                <el-table-column prop="commentNumSum" label="评论数" width="100"></el-table-column>
                <el-table-column prop="reSendNumSum" label="转发数" width="100"></el-table-column>
                <el-table-column prop="recommendNumSum" label="推荐数" width="100"></el-table-column>
                <el-table-column prop="effectResultSum" label="传播值" width="120"></el-table-column>
                <el-table-column prop="action" label="操作" fixed="right">
                   <template #default="scope">
                       <div>
                           <el-link type="primary" @click="goDetail(scope.row.userId)">详情</el-link>
                       </div>
                   </template>
               </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import {defineComponent, reactive, ref, getCurrentInstance} from 'vue'
export default defineComponent({
    name: 'v-transformResult',
    setup() {
        const activeId = reactive({
            value: 0
        });
        const transformData = ref({});
        const transformList = ref([]);
        const { proxy } = getCurrentInstance();
        return {
            proxy,
            transformData,transformList,
            activeId
        }
    },
    activated() {
        this.getApi();
    },
    // created() {
    //     this.getApi();
    // },
    methods: {
        getApi() {
            if(this.$route.query.id) {
                this.proxy.$post("/task/taskEffect", {id: this.$route.query.id}).then(res => {
                    const data = res.data;
                    this.transformData = data;
                }).catch(() => {});
                this.proxy.$post("/task/taskEffectData", {id: this.$route.query.id}).then(res => {
                    const data = res.data;
                    this.transformList = data;
                }).catch(() => {});
            };
        },
        goDetail(value) {
            this.$router.push({ name: "TransformResultDetail", query:{id:this.$route.query.id, userId: value}})
        },
        //导出
        download() {
            this.proxy.$download("/task/excel", {id: this.$route.query.id}, this.transformData.taskTitle+'传播效果.xlsx').then(res => {
                // if(res.code == 200) {
                //     const data = res.data
                //     this.tableData.data = data.records;
                //     this.pagination.total = data.total
                // } else {
                //     this.$message.error(res.msg)
                // }
            }).catch(() => {});
        }
    }
})
</script>

<style lang="less">
.form-area {
    width: 600px;
    height: 300px;
}
.img-upload {
    font-size: 28px;
    color: #8c939d;
    width: 135px;
    height: 135px;
    text-align: center;
    border: 1px solid;
}
.top-title {
    color: black;
    font-weight: 600;
    font-size: 14px;
    line-height: 16px;
}
.top-number {
    padding: 16px 0px 16px 0px;
    display: flex;
    justify-content: flex-start;
    .top-number-item {
        margin-right: 72px;
    }
    .title-style {
        font-weight: 600;
        font-size: 14px;
        line-height: 16px;
    }
    .number-style {
        color: black;
        font-weight: 900;
        font-size: 32px;
        line-height: 28px;
        margin-top: 6px
    }
}
.bottom-list {
    padding: 16px 0px 16px 0px
}
</style>