lotteryDraw_admin/src/views/super/Ranking/RankBatchList.vue

<template>
    <div class="demo-wrap min-flex-right">
        <div class="flex-between">
            <h2>{{pageTitle}}</h2>
            <CustomDropdown ref="dropdownRef" :placeholder="'（'+viewDesc[this.view]+')'+text" width="280px">
                <DateSelect slot="normal" :view="view" v-model="selectedDate" @update-count="handleUpdateView" @change="handleDateChange" />
            </CustomDropdown>
        </div>
        <div class=" flex-common" id="">
            <el-form>
                <el-table :data="tableData" style="width: 100%" @sort-change="handleSortChange" @cell-mouse-enter="handleRowHover">
                    <el-table-column prop="sort" label="排序" width="100"></el-table-column>

                    <el-table-column v-if="(dataRank == 1 || dataRank == 2) && (dataType == 'ver_type' || dataType == 'check_type')" prop="name" :key="selectedType" :label="type_select[selectedType]">
                        <template slot="header">
                            <el-select class="custom-select" v-model="selectedType" @change="changeRankType">
                                <el-option v-for="(item,type) in type_select" :key="type" :label="item" :value="type"></el-option>
                            </el-select>
                        </template>
                        <template slot-scope="scope">
                            {{ scope.row.name }}
                        </template>
                    </el-table-column>
                    <el-table-column v-else prop="name" :label="type_desc[dataType]" width="150"></el-table-column>

                    <el-table-column v-for="(field, index) in valueFields" :key="field" :label="labels[index]" :prop="String(index + 1)" sortable="custom">
                        <template v-if="index == 3 && dataRank == 1 && type != 'agent'" v-slot="{ row, $index }">
                            <el-popover v-model="row.id_popover" placement="top" trigger="manual" :ref="`popover-${$index}`" @show="popshow">
                                <div class="pop-wrap">
                                    <div class="flex-between flex pop-top">
                                        <h3>{{ text }} {{ row.name }} <span @click="goLookMoreData(row.id)">查看更多</span></h3>
                                        <span class="flex point" @click="closePop(row,'id')">关闭 <img src="@/assets/register/close.svg" alt=""></span>
                                    </div>
                                    <el-table :data="tableData1" style="width: 100%">
                                        <el-table-column prop="value_1" width="208" label="日期"></el-table-column>
                                        <el-table-column width="348" :label="rank_type_desc[dataRank]">
                                            <template slot-scope="scope">
                                                <div class="flex">
                                                    {{ scope.row.value_2 }}
                                                    <template v-if="Object.keys(growth_list1).length > 0">
                                                        <span class="flex growth-text" v-if="growth_list1[scope.row.id]">
                                                            <span v-if="growth_list1[scope.row.id].value>0">
                                                                <span class="growth-up">
                                                                  <img class="edit_icon" src="@/assets/super/growth-up.svg" alt="">{{growth_list1[scope.row.id].value}}%
                                                                </span>同比上年
                                                            </span>
                                                            <span v-if="growth_list1[scope.row.id].value<0">
                                                                <span class="growth-down">
                                                                  <img class="edit_icon" src="@/assets/super/growth-down.svg" alt="">{{growth_list1[scope.row.id].value}}%
                                                                </span>同比上年
                                                            </span>
                                                            <span v-if="growth_list1[scope.row.id].value==0">
                                                               <img class="edit_icon" src="@/assets/super/growth-flat.svg" alt="">同比上年持平
                                                            </span>
                                                        </span>
                                                        <span class="flex growth-text" v-else>上年无数据</span>
                                                    </template>
                                                </div>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>

                                <div class="flex" slot="reference" >
                                    {{ row[field] }}
                                    <template v-if="Object.keys(growth_list).length > 0">
                                        <template v-if="growth_list[row.id] && growth_list[row.id][field]">
                                            <span v-if="growth_list[row.id][field].value > 0" class="growth-text">
                                                <span class="growth-up">
                                                    <img class="edit_icon" src="@/assets/super/growth-up.svg" alt="" />
                                                    {{ growth_list[row.id][field].value }}%
                                                </span>同比上年
                                            </span>
                                            <span v-else-if="growth_list[row.id][field].value < 0" class="growth-text">
                                                <span class="growth-down">
                                                    <img class="edit_icon" src="@/assets/super/growth-down.svg" alt="" />
                                                    {{ growth_list[row.id][field].value }}%
                                                </span>同比上年
                                            </span>
                                            <span v-else class="growth-text">
                                                <img class="edit_icon" src="@/assets/super/growth-flat.svg" alt="" />同比上年持平
                                            </span>
                                        </template>
                                        <span v-else class="growth-text">上年无数据</span>
                                    </template>
                                    <img @click="handleClick(row, $index, 'id')" v-if="show_detail_index == row.sort" class="detail_icon" src="@/assets/super/list-detail.svg" alt="">
                                </div>
                            </el-popover>
                        </template>
                        <template v-else slot-scope="scope">
                            <div class="flex">
                                {{ scope.row[field] }}
                                <template v-if="Object.keys(growth_list).length > 0">
                                    <template v-if="growth_list[scope.row.id] && growth_list[scope.row.id][field]">
                                        <span v-if="growth_list[scope.row.id][field].value > 0" class="growth-text">
                                            <span class="growth-up">
                                                <img class="edit_icon" src="@/assets/super/growth-up.svg" alt="" />
                                                {{ growth_list[scope.row.id][field].value }}%
                                            </span>
                                            同比上年
                                        </span>
                                        <span v-else-if="growth_list[scope.row.id][field].value < 0" class="growth-text">
                                            <span class="growth-down">
                                                <img class="edit_icon" src="@/assets/super/growth-down.svg" alt="" />
                                                {{ growth_list[scope.row.id][field].value }}%
                                            </span>
                                            同比上年
                                        </span>
                                        <span v-else class="growth-text">
                                            <img class="edit_icon" src="@/assets/super/growth-flat.svg" alt="" />
                                            同比上年持平
                                        </span>
                                    </template>
                                    <span v-else class="growth-text">上年无数据</span>
                                </template>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination background @size-change='handleSizeChange' @current-change='handleCurrentChange'
                    :current-page="currentPage" :page-size=pageSize layout="prev, pager, next,jumper"
                    :total="total">
                </el-pagination>
            </el-form>
        </div>
    </div>
</template>
<script>
// import GuipForm from '@/components/GuipForm.vue'
import DateSelect from '@/components/super/DateSelect.vue';
import CustomDropdown from '@/components/CustomDropdown.vue';

export default {
    name: 'rank_batch_list',
    props:  {
      pageTitle: {
        type: String,
        default: ''
      },
      rank_type: {
        type: Number,
        default: 0
      },
      type: {
        type: String,
        default: ''
      }
    },
    components: {
        DateSelect,
        CustomDropdown
    },
    data() {
        return {
            viewDesc:{
              'month':'月份',
              'monthTwo':'月份',
              'year':'年份',
            },
            rank_type_desc:{
               1:'毛利润/元',
               2:'订单数',
               3:'退单数',
               4:'充值金额',
            },
            type_desc:{
              'agent':'代理商昵称',
              'ver_type':'品牌名称',
              'check_type':'服务名称',
            },
            type_select:{
              'ver_type':'按品牌名称',
              'check_type':'按服务名称',
            },
            selectedType: 'check_type',
            view:'month',
            labels:['','','',''],
            valueFields:['value_1','value_2','value_3','value_4'],
            currentPage: 1,    //当前页
            pageSize: 20,   //每页的容量
            total: 0,   //列表总数
            sortBy: 4,
            sortOrder: 2,
            text:'',//下拉框显示具体文案
            selectedDate:new Date(),//默认当天日期
            dataType: '',
            dataRank: '',
            tableData: [],
            growth_list: [],
            tableData1: [],
            growth_list1: [],
            show_detail_index: 0,
        }
    },
    mounted() {
        this.init()
    },
    computed: {
    },
    watch: {
        '$route'() {
            this.init()
        }
    },
    methods: {
        init(){
            this.text = this.getNowDate()//初始赋值

            this.dataType = this.type
            this.dataRank = this.rank_type

            this.getRankingData(); // 每次路由变化都重新获取数据
        },
        handleUpdateView(newView) {
            this.view = newView;
        },
        getNowDate(){
            const now = new Date();
            const year = now.getFullYear();
            const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，补零
            const currentYearMonth = `${year}-${month}`;
            return `${currentYearMonth}`
        },
        getDate(dateStr){
            const date = new Date(dateStr);
            const year = date.getFullYear(); // 2025
            const month = date.getMonth() + 1; // 3 (表示3月)
            if(this.view == 'year'){
                return `${year}`
            }else{
                return `${year}-${month}`
            }
        },
        handleDateChange(date) {
            this.text = this.getDate(date)
            this.selectedDate = date;
            localStorage.setItem('date',JSON.stringify(date))

            this.$refs.dropdownRef.closeDropdown();

            this.currentPage = 1;
            this.getRankingData()
        },
        goLookMoreData(id) {
            let query = {}
            query.date = this.text
            query.rank_type = this.dataRank
            if(this.dataType == 'agent') {
              query.aid = id
            }
            if(this.dataType == 'ver_type') {
              query.ver_type = id
            }
            if(this.dataType == 'check_type') {
              query.check_type = id
            }
            window.open(this.$router.resolve({
              path: '/super/ranking/detail',
              query: query
            }).href, '_blank')
        },
        closePop(row,type){
            row[type + '_popover'] = false; // 关闭弹框
        },
        handleClick(row, index, type) {
            // 关闭其他行的弹框
            this.tableData.forEach((item, i) => {
                if (i !== index) {
                    item[type + '_popover'] = false;
                }
            });
            // 打开当前行的弹框
            row[type + '_popover'] = true;

            let obj = {}
            if(this.dataType == 'agent') {
              obj.aid = row.id
            }
            if(this.dataType == 'ver_type') {
              obj.ver_type = row.id
            }
            if(this.dataType == 'check_type') {
              obj.check_type = row.id
            }
            this.getRankingDetail(obj);
        },
        popshow() {
            var ariaEls = document.querySelectorAll('.el-popover')
            ariaEls.forEach((item) => {
                item.removeAttribute('aria-hidden')
            })

            ariaEls = document.querySelectorAll('.el-radio__original')
            ariaEls.forEach((item) => {
                item.removeAttribute('aria-hidden')
            })
        },
        handleSortChange({ prop, order }) {
            this.sortBy = 4;
            this.sortOrder = 2;
            if (order == 'ascending') {
                this.sortBy = prop;
                this.sortOrder = 1;
            }
            if (order == 'descending') {
                this.sortBy = prop;
                this.sortOrder = 2;
            }
            this.currentPage = 1;
            this.getRankingData()
        },
        handleRowHover(row) {
            this.show_detail_index = row.sort
        },
        changeRankType(){
            this.dataType = this.selectedType
            this.getRankingData()
        },
        getRankingData() {
            this.setLabelText();

            if(this.dataType == 'agent') {
                this.getAgentRanking()
            }
            if(this.dataType == 'ver_type') {
                this.getVerRanking()
            }
            if(this.dataType == 'check_type') {
                this.getTypeRanking()
            }
        },
        setLabelText(){
            const date = new Date(this.text);
            const year = date.getFullYear(); // 2025
            const month = date.getMonth() + 1; // 3 (表示3月)

            this.labels = [];
            if (this.view === 'year') {
              for (let i = 3; i >= 0; i--) {
                this.labels.push((year - i) + '年' + this.rank_type_desc[this.dataRank]);
              }
            } else {
              const monthLabels = [];
              for (let i = 3; i >= 0; i--) {
                let m = month - i;
                if (m <= 0) m += 12;
                monthLabels.push(m + '月' + this.rank_type_desc[this.dataRank]);
              }
              this.labels = monthLabels;
            }
        },
        getAgentRanking() {
            const that = this
            //充值排行
            if(that.dataRank == 4){
              this.$http('POST', '/supernew/ajax_get_rank_recharge', {
                date: that.text,
                sortBy: that.sortBy,
                sortOrder: that.sortOrder,
                cur_page: that.currentPage,
                page_size: that.pageSize,
              }).then(response => {
                this.$nextTick(() => {
                  that.tableData = response.data.list
                  that.growth_list = response.data.growth_list
                  that.total = response.data.total
                })
              }).catch(error => {
                console.error(error, 'error')
              })
              return
            }

            this.$http('POST', '/supernew/ajax_get_agent_batch_list', {
                date: that.text,
                rank_type: that.dataRank,
                sortBy: that.sortBy,
                sortOrder: that.sortOrder,
                cur_page: that.currentPage,
                page_size: that.pageSize,
            }).then(response => {
                this.$nextTick(() => {
                  that.tableData = response.data.list
                  that.growth_list = response.data.growth_list
                  that.total = response.data.total
                })
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        getVerRanking() {
          const that = this
          this.$http('POST', '/supernew/ajax_get_ver_batch_list', {
              date: that.text,
              rank_type: that.dataRank,
              sortBy: that.sortBy,
              sortOrder: that.sortOrder,
              cur_page: that.currentPage,
              page_size: that.pageSize,
          }).then(response => {
              this.$nextTick(() => {
                  that.tableData = response.data.list
                  that.top_list = response.data.top_list
                  that.growth_list = response.data.growth_list
                  that.total = response.data.total
              })
          }).catch(error => {
              console.error(error, 'error')
          })
        },
        getTypeRanking() {
            const that = this
            this.$http('POST', '/supernew/ajax_get_type_batch_list', {
                date: that.text,
                rank_type: that.dataRank,
                sortBy: that.sortBy,
                sortOrder: that.sortOrder,
                cur_page: that.currentPage,
                page_size: that.pageSize,
            }).then(response => {
                this.$nextTick(() => {
                  that.tableData = response.data.list
                  that.top_list = response.data.top_list
                  that.growth_list = response.data.growth_list
                  that.total = response.data.total
                })
            }).catch(error => {
               console.error(error, 'error')
            })
        },
        getRankingDetail(obj) {
            const that = this
            that.tableData1 = []
            that.growth_list1 = []
            this.$http('POST', '/supernew/ajax_get_rank_detail', {
                date: that.text,
                rank_type: that.dataRank,
                sortBy: 2,
                sortOrder: 2,
                ...obj
            }).then(response => {
                this.$nextTick(() => {
                    that.tableData1 = response.data.list.slice(0, 5)
                    that.growth_list1 = response.data.growth_list
                })
            }).catch(error => {
                console.error(error, 'error')
            })
        },
        handleSizeChange(val) {
            this.pageSize = val
            this.getRankingData()
        },
        handleCurrentChange(val) {
            this.currentPage = val
            this.getRankingData()
        },
    }
}
</script>
<style scoped lang="scss">
.growth-up{
  padding: 0 5px;
  color:#22C55E;
}
.growth-down{
  padding: 0 5px;
  color:#EF4444;
}
.growth-text{
  color:#9CA3AF;
  padding-left: 5px;
}
.edit_icon{
  padding: 0 5px;
  vertical-align: middle;
}
.demo-wrap {
    width: 100%;
    letter-spacing: 0.08em;
}
.custom-select {
  width: 120px;
  border: none;
  border-radius: 0;
  font-size: 14px;
}
.custom-select ::v-deep(.el-input__inner) {
  background: none;
  border: 1px solid transparent;
  border-radius: 0;
  box-shadow: none;
  font-size: 14px;
  color: #1e2226;
  font-weight: bold;
  padding: 0;
}
.custom-select ::v-deep(.el-input:focus-within) {
  background: none;
  border-color: #F5F7FA!important;
  border-radius: 0;
  box-shadow: none;
  outline:none;
}

.detail_icon {
    vertical-align: text-top;
    padding-left: 5px;
}

::v-deep .el-popover.el-popper {
    padding: 20px;
}
.pop-wrap {
    // width: 596px;
    // height: 320px;
    /* 自动布局 */
    display: flex;
    flex-direction: column;
    // padding: 20px;
    gap: 20px;
    box-sizing: border-box;

    // background: #FFFFFF;
    /* 阴影/常规阴影 */
    // box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.16);
    .pop-top {
        h3 {
            /* body/body 1_bold */
            font-family: Microsoft YaHei UI;
            font-size: 16px;
            font-weight: bold;
            line-height: 18px;
            letter-spacing: 0.08em;
            color: #1D2129;
            margin: 0;

            span {
                display: inline-block;
                margin-left: 12px;
                font-size: 14px;
                line-height: 18px;
                color: #006AFF;
            }
        }
        img{
            width: 20px;
            height: 20px;
        }
    }
}
</style>