From 912871d19d5e2884e1a7db8335ae66fd29d5f456 Mon Sep 17 00:00:00 2001
From: pengda <10266652509@qq.com>
Date: Thu, 24 Apr 2025 10:28:13 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8E=92=E8=A1=8C=E6=A6=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/super/Ranking/RankList.vue | 713 +++++++++++++++++++++++++++++++++++
 1 file changed, 713 insertions(+)
 create mode 100644 src/views/super/Ranking/RankList.vue

diff --git a/src/views/super/Ranking/RankList.vue b/src/views/super/Ranking/RankList.vue
new file mode 100644
index 0000000..867c5dd
--- /dev/null
+++ b/src/views/super/Ranking/RankList.vue
@@ -0,0 +1,713 @@
+<template>
+    <div class="demo-wrap min-flex-right">
+        <div class="flex-between">
+            <h2>{{ filterTitle ? filterTitle : 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"
+                          :key="dataRank"
+                          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 == 3 && (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]"></el-table-column>
+
+                    <el-table-column prop="1" :label="rank_type_desc[dataRank]" sortable="custom">
+                        <template v-slot="{ row, $index }">
+                            <template v-if="dataRank == 3">
+                                {{ row.value_1 }}
+                            </template>
+
+                            <template v-else>
+                                <el-popover v-model="row.id_popover_2"
+                                            placement="top"
+                                            trigger="manual"
+                                            :ref="`popover_2-${$index}`"
+                                            @show="popshow">
+
+                                    <div class="pop-wrap">
+                                        <div class="flex-between flex pop-top">
+                                            <h3>
+                                                {{ text }} {{ row.name }} {{ rank_type_desc[dataRank] }}
+                                                <span @click="goLookMoreData(row.id)">查看更多</span>
+                                            </h3>
+                                            <span class="flex point" @click="closePop(row,'id')">
+                                                关闭<img src="@/assets/register/close.svg">
+                                            </span>
+                                        </div>
+                                        <el-table :data="tableData1" style="width: 100%">
+                                            <el-table-column prop="value_1" width="208" label="日期"></el-table-column>
+                                            <el-table-column prop="value_2" width="208" :label="rank_type_desc[dataRank]"></el-table-column>
+                                        </el-table>
+                                    </div>
+
+                                    <div class="flex" slot="reference">
+                                        {{ row.value_1 }}
+                                        <template v-if="Object.keys(growth_list).length > 0">
+                                            <span v-if="growth_list[row.id]" class="flex growth-text">
+                                                <span v-if="growth_list[row.id].value>0">
+                                                    <span class="growth-up">
+                                                        <img class="edit_icon" src="@/assets/super/growth-up.svg">
+                                                        {{ growth_list[row.id].value }}%
+                                                    </span>同比上年
+                                                </span>
+                                                <span v-if="growth_list[row.id].value<0">
+                                                    <span class="growth-down">
+                                                        <img class="edit_icon" src="@/assets/super/growth-down.svg">
+                                                        {{ growth_list[row.id].value }}%
+                                                    </span>同比上年
+                                                </span>
+                                                <span v-if="growth_list[row.id].value==0">
+                                                    <img class="edit_icon" src="@/assets/super/growth-flat.svg">同比上年持平
+                                                </span>
+                                            </span>
+                                            <span v-else class="flex growth-text">上年无数据</span>
+                                        </template>
+                                        <img v-if="false && row.value_1>0 && show_detail_index == row.sort"
+                                             @click="handleClick2(row, $index, 'id')"
+                                             class="detail_icon"
+                                             src="@/assets/super/list-detail.svg">
+                                    </div>
+
+                                </el-popover>
+                            </template>
+                        </template>
+                    </el-table-column>
+
+                    <el-table-column prop="2" label="退单率" sortable="custom" v-if="dataRank == 3">
+                        <template v-slot="{ row, $index }">
+                            <el-popover v-model="row.id_popover_2"
+                                        placement="top"
+                                        trigger="manual"
+                                        :ref="`popover_2-${$index}`"
+                                        @show="popshow">
+                                <div class="pop-wrap">
+                                    <div class="flex-between flex pop-top">
+                                        <h3>
+                                            {{ text }} {{ row.name }} {{ rank_type_desc[dataRank] }}
+                                            <span @click="goLookMoreData(row.id)">查看更多</span>
+                                        </h3>
+                                        <span class="flex point" @click="closePop(row,'id')">
+                                            关闭<img src="@/assets/register/close.svg">
+                                        </span>
+                                    </div>
+                                    <el-table :data="tableData1" style="width: 100%">
+                                        <el-table-column prop="value_1" width="208" label="日期"></el-table-column>
+                                        <el-table-column prop="value_2" width="208" label="退单数"></el-table-column>
+                                    </el-table>
+                                </div>
+
+                                <div class="flex" slot="reference">
+                                    {{ row.value_2 }}
+                                    <template v-if="Object.keys(growth_list).length > 0">
+                                        <span v-if="growth_list[row.id]" class="flex growth-text">
+                                            <span v-if="growth_list[row.id].value>0">
+                                                <span class="growth-up">
+                                                    <img class="edit_icon" src="@/assets/super/growth-up.svg">
+                                                    {{ growth_list[row.id].value }}%
+                                                </span>同比上年
+                                            </span>
+                                            <span v-if="growth_list[row.id].value<0">
+                                                <span class="growth-down">
+                                                    <img class="edit_icon" src="@/assets/super/growth-down.svg">
+                                                    {{ growth_list[row.id].value }}%
+                                                </span>同比上年
+                                            </span>
+                                            <span v-if="growth_list[row.id].value==0">
+                                                <img class="edit_icon" src="@/assets/super/growth-flat.svg">同比上年持平
+                                            </span>
+                                        </span>
+                                        <span class="flex growth-text" v-else>上年无数据</span>
+                                    </template>
+                                    <img @click="handleClick2(row, $index, 'id')"
+                                         v-if="row.value_1>0 && show_detail_index == row.sort" class="detail_icon"
+                                         src="@/assets/super/list-detail.svg">
+                                </div>
+                            </el-popover>
+                        </template>
+                    </el-table-column>
+
+                    <el-table-column label="代理商排行" v-if="dataType != 'agent' && dataRank == 3">
+                        <template 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 }} {{ rank_type_desc[dataRank] }}
+                                            <span @click="goLookMoreRank(row.id)">查看更多</span>
+                                        </h3>
+                                        <span class="flex point" @click="closePop(row,'id')">
+                                            关闭<img src="@/assets/register/close.svg">
+                                        </span>
+                                    </div>
+                                    <el-table :data="tableData1" style="width: 100%">
+                                        <el-table-column prop="sort" width="100" label="排行"></el-table-column>
+                                        <el-table-column prop="name" width="208" label="代理商"></el-table-column>
+                                        <el-table-column prop="value_1" width="100" label="退单率"></el-table-column>
+                                        <el-table-column prop="value_2" width="100" label="退单数"></el-table-column>
+                                    </el-table>
+                                </div>
+                                <!-- 触发弹框的按钮 -->
+                                <span v-if="top_list[row.id]" slot="reference">
+                                    No.1 {{ top_list[row.id]['name'] }}
+                                    <span class="color-red">{{ top_list[row.id]['value_1'] }}%</span>
+                                    <span class="color-red">{{ top_list[row.id]['value_2'] }}单</span>
+                                    <img v-if="show_detail_index == row.sort"
+                                         @click="handleClick(row, $index, 'id')"
+                                         class="detail_icon"
+                                         src="@/assets/super/list-detail.svg">
+                                </span>
+                                <span v-else slot="reference">暂无排行</span>
+                            </el-popover>
+                        </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 DateSelect from '@/components/super/DateSelect.vue';
+import CustomDropdown from '@/components/CustomDropdown.vue';
+
+export default {
+    name: 'rank_list',
+    props: {
+        pageTitle: {
+            type: String,
+            default: ''
+        },
+        rank_type: {
+            type: Number,
+            default: 0
+        },
+        type: {
+            type: String,
+            default: ''
+        }
+    },
+    components: {
+        DateSelect,
+        CustomDropdown
+    },
+    data() {
+        return {
+            rank_type_desc: {
+                1: '毛利润/元',
+                2: '订单数',
+                3: '退单数',
+            },
+            type_desc: {
+                'agent': '代理商昵称',
+                'ver_type': '品牌名称',
+                'check_type': '服务名称',
+            },
+            type_select: {
+                'ver_type': '按品牌名称',
+                'check_type': '按服务名称',
+            },
+            selectedType: 'check_type',
+            viewDesc: {
+                'month': '月份',
+                'monthTwo': '月份',
+                'year': '年份',
+            },
+            view: 'month',
+            currentPage: 1,    //当前页
+            pageSize: 20,   //每页的容量
+            total: 0,   //列表总数
+            sortBy: 1,
+            sortOrder: 2,
+            showfilterTitle: false,
+            filterTitle: "",
+            text: '',//下拉框显示具体文案
+            selectedDate: new Date(),//默认当天日期
+            dataType: '',
+            dataRank: '',
+            tableData: [],
+            tableData1: [],
+            growth_list: [],
+            top_list: [],
+            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.aid = this.$route.query.aid
+            this.ver_type = this.$route.query.ver_type
+            this.check_type = this.$route.query.check_type
+            if (this.$route.query.date) this.text = this.$route.query.date
+            if (this.$route.query.type) this.dataType = this.$route.query.type
+            if (this.$route.query.rank_type) this.dataRank = this.$route.query.rank_type
+            if (Object.keys(this.$route.query).length > 0) this.showfilterTitle = true
+
+            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.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')
+        },
+        goLookMoreRank(id) {
+            let query = {}
+            query.date = this.text
+            query.rank_type = this.dataRank
+            query.type = 'agent'
+            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/list',
+                query: query
+            }).href, '_blank')
+        },
+        closePop(row, type) {
+            row[type + '_popover'] = false;
+            row[type + '_popover_2'] = false;
+        },
+        handleClick(row, index, type) {
+            // 关闭其他行的弹框
+            this.tableData.forEach((item, i) => {
+                item[type + '_popover_2'] = false;
+                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.getRankingList(obj);
+        },
+        handleClick2(row, index, type) {
+            // 关闭其他行的弹框
+            this.tableData.forEach((item, i) => {
+                item[type + '_popover'] = false;
+                if (i !== index) {
+                    item[type + '_popover_2'] = false;
+                }
+            });
+            // 打开当前行的弹框
+            row[type + '_popover_2'] = 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 = 1;
+            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()
+        },
+        changeRankType() {
+            this.dataType = this.selectedType
+            this.getRankingData()
+        },
+        handleRowHover(row) {
+            this.show_detail_index = row.sort
+        },
+        getRankingData() {
+            if (this.dataType == 'agent') {
+                this.getAgentRanking()
+            }
+            if (this.dataType == 'ver_type') {
+                this.getVerRanking()
+            }
+            if (this.dataType == 'check_type') {
+                this.getTypeRanking()
+            }
+        },
+        getAgentRanking() {
+            const that = this
+            this.$http('POST', '/supernew/ajax_get_agent_rank_list', {
+                ver_type: that.ver_type,
+                check_type: that.check_type,
+                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
+                    if (that.showfilterTitle) that.filterTitle = response.data.title
+                })
+            }).catch(error => {
+                console.error(error, 'error')
+            })
+        },
+        getVerRanking() {
+            const that = this
+            this.$http('POST', '/supernew/ajax_get_ver_rank_list', {
+                aid: that.aid,
+                check_type: that.check_type,
+                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
+                    if (that.showfilterTitle) that.filterTitle = response.data.title
+                })
+            }).catch(error => {
+                console.error(error, 'error')
+            })
+        },
+        getTypeRanking() {
+            const that = this
+            this.$http('POST', '/supernew/ajax_get_type_rank_list', {
+                aid: that.aid,
+                ver_type: that.ver_type,
+                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
+                    if (that.showfilterTitle) that.filterTitle = response.data.title
+                })
+            }).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')
+            })
+        },
+        getRankingList(obj) {
+            const that = this
+            that.tableData1 = []
+            that.growth_list1 = []
+            this.$http('POST', '/supernew/ajax_get_agent_rank_list', {
+                date: that.text,
+                rank_type: that.dataRank,
+                cur_page: 1,
+                page_size: 5,
+                ...obj
+            }).then(response => {
+                this.$nextTick(() => {
+                    that.tableData1 = response.data.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">
+.color-red {
+  color: #FF4D4F;
+}
+
+.growth-up {
+  padding: 0 5px;
+  color: #22C55E;
+}
+
+.growth-down {
+  padding: 0 5px;
+  color: #EF4444;
+}
+
+.growth-text {
+  color: #9CA3AF;
+  padding-left: 5px;
+}
+
+.custom-select {
+  width: 210px;
+  border: none;
+  border-radius: 0;
+  font-size: 14px;
+  line-height: 18px;
+  height: 30px;
+}
+
+.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;
+}
+
+.el-select-dropdown__item {
+  color: #1E2226;
+  margin: 0 12px;
+  padding: 0 12px;
+}
+
+.el-select-dropdown__item:first-child {
+  margin-top: 6px;
+}
+
+.el-select-dropdown__item:last-child {
+  margin-bottom: 6px;
+}
+
+.el-select-dropdown__item:hover {
+  background: #F6F7FA;
+}
+
+.el-select-dropdown__item.selected {
+  font-weight: normal;
+}
+
+.el-select-dropdown__item.selected::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  right: 10px;
+  transform: translateY(-50%);
+  width: 16px;
+  height: 16px;
+  background-image: url('../../../assets/super/select-active.svg');
+  background-size: contain;
+  background-repeat: no-repeat;
+  opacity: 1;
+}
+
+.edit_icon {
+  padding: 0 5px;
+  vertical-align: middle;
+}
+
+.demo-wrap {
+  width: 100%;
+  letter-spacing: 0.08em;
+}
+
+.detail_icon {
+  vertical-align: text-top;
+  padding-left: 5px;
+}
+
+::v-deep .el-popover.el-popper {
+  padding: 20px;
+}
+
+.pop-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  box-sizing: border-box;
+
+  .pop-top {
+    h3 {
+      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>
\ No newline at end of file