From 719755e19a2c8a6e2ee2305b21d5fd0e53cab4b9 Mon Sep 17 00:00:00 2001
From: zq <136432190602163.com>
Date: Fri, 30 May 2025 14:04:33 +0800
Subject: [PATCH] =?UTF-8?q?=E6=AF=9B=E5=88=A9=E6=B6=A6=E6=8E=92=E8=A1=8C?=
 =?UTF-8?q?=E6=A6=9C=E9=A1=B5=E9=9D=A2=E6=94=B9=E9=80=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CustomDropdown.vue         |   4 +-
 src/components/GuipTable.vue              |   2 +-
 src/components/super/DateSelect.vue       |   2 +-
 src/main.js                               |   3 +-
 src/style/theme/index.css                 |  38 ++++--
 src/utils/headerIcon.js                   |  17 +++
 src/views/super/Ranking/RankBatchList.vue | 210 ++++++++++++++++--------------
 7 files changed, 165 insertions(+), 111 deletions(-)
 create mode 100644 src/utils/headerIcon.js

diff --git a/src/components/CustomDropdown.vue b/src/components/CustomDropdown.vue
index 140b381..2b89d54 100644
--- a/src/components/CustomDropdown.vue
+++ b/src/components/CustomDropdown.vue
@@ -124,7 +124,9 @@ export default {
     opacity: 1;
     background: #FFFFFF;
     border: 1px solid #DFE2E6;
-    width: calc(100% - 24px);
+    width: 100%;
+    height: 40px;
+    box-sizing: border-box;
     padding: 10px 12px;
     cursor: pointer;
     display: flex;
diff --git a/src/components/GuipTable.vue b/src/components/GuipTable.vue
index 52d3aec..df58773 100644
--- a/src/components/GuipTable.vue
+++ b/src/components/GuipTable.vue
@@ -1,6 +1,6 @@
 <template>
   <global-loading>
-    <el-table ref="guiptable" :data="tableData" :border="border" @selection-change="handleSelectionChange"
+    <el-table ref="guiptable" v-bind="$attrs" :data="tableData"  v-on="$listeners" :border="border" @selection-change="handleSelectionChange"
       :style="{ width: width ? width : '100%', height: height ? height : '100%' }" v-loading="loading">
       <!-- 多选 -->
       <template v-if="multiple">
diff --git a/src/components/super/DateSelect.vue b/src/components/super/DateSelect.vue
index af8890f..9292fd3 100644
--- a/src/components/super/DateSelect.vue
+++ b/src/components/super/DateSelect.vue
@@ -179,7 +179,7 @@
   <style scoped>
   .date-picker {
     font-family: Microsoft YaHei UI;
-    width: 300px;
+    /* width: 300px; */
     /* border: 1px solid #ddd; */
     border-radius: 4px;
     padding: 10px 0 0 0;
diff --git a/src/main.js b/src/main.js
index b838737..694041b 100755
--- a/src/main.js
+++ b/src/main.js
@@ -13,13 +13,14 @@ import '@/assets/css/fonts.css';
 import LoadingService from './services/loading'
 import { directive as clickaway } from 'vue-clickaway';
 import GuipMessage from '@/components/GuipMessage/index';
+import HeaderIcon from './utils/headerIcon'
 Vue.prototype.$loadingFn = LoadingService;
 Vue.config.productionTip = false;
 Vue.prototype.$http = request;
 Vue.use(ElementUI);
 Vue.use(GuipMessage)
 Vue.directive('clickaway', clickaway);
-
+Vue.mixin(HeaderIcon)
 new Vue({
   router,
   store,
diff --git a/src/style/theme/index.css b/src/style/theme/index.css
index 2e74416..0732fda 100644
--- a/src/style/theme/index.css
+++ b/src/style/theme/index.css
@@ -2743,7 +2743,8 @@
     margin: 0 2px;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
-    border-radius: 3px
+    border-radius: 3px;
+    transition: all .3s;
 }
 
 .el-pagination__editor.el-input {
@@ -2751,7 +2752,10 @@
 }
 
 .el-pagination__editor.el-input .el-input__inner {
-    height: 26px
+    height: 26px;
+}
+.el-pagination__editor.el-input:hover{
+border-color:#006AFF !important;
 }
 
 .el-pagination__editor .el-input__inner::-webkit-inner-spin-button,
@@ -2765,9 +2769,10 @@
 .el-pagination.is-background .el-pager li {
     margin: 0 5px;
     background-color: transparent;
-    color: #606266;
+    color: #8A9099;
     min-width: 30px;
-    border-radius: 4px
+    border-radius: 4px;
+    transition: all .3s;
 }
 
 .el-pagination.is-background .btn-next.disabled,
@@ -2788,21 +2793,28 @@
 }
 
 .el-pagination.is-background .el-pager li:not(.disabled):hover {
-    color: #006aff
+    color: #8A9099;
+    background: #F6F7FA;
 }
 
 .el-pagination.is-background .el-pager li:not(.disabled).active {
     background-color: #006aff;
-    color: #fff
+    color: #fff;
+    font-weight: bold;
+}
+.btn-next:hover, .btn-prev:hover{
+    background: #F6F7FA !important;
+    transition: all .3s;
 }
-
 .el-pagination.is-background.el-pagination--small .btn-next,
 .el-pagination.is-background.el-pagination--small .btn-prev,
 .el-pagination.is-background.el-pagination--small .el-pager li {
     margin: 0 3px;
     min-width: 22px
 }
+.el-pagination__editor.el-input{
 
+}
 .el-pager {
     -webkit-user-select: none;
     -moz-user-select: none;
@@ -2830,10 +2842,12 @@
     height: 28px;
     line-height: 28px;
     cursor: pointer;
+    font-weight: normal;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     text-align: center;
-    margin: 0
+    margin: 0;
+    color: #8A9099;
 }
 
 .el-pager li.btn-quicknext,
@@ -9457,7 +9471,7 @@
 }
 
 .el-table--border .el-table__cell:first-child .cell {
-    padding-left: 10px
+    padding-left: 0px
 }
 
 .el-table--border th.el-table__cell.gutter:last-of-type {
@@ -9617,7 +9631,7 @@
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
-    height: 34px;
+    height: 20px;
     width: 24px;
     vertical-align: middle;
     cursor: pointer;
@@ -9635,12 +9649,12 @@
 
 .el-table .sort-caret.ascending {
     border-bottom-color: #babdc2;
-    top: 5px
+    top: -1px
 }
 
 .el-table .sort-caret.descending {
     border-top-color: #babdc2;
-    bottom: 7px
+    bottom: -1px
 }
 
 .el-table .ascending .sort-caret.ascending {
diff --git a/src/utils/headerIcon.js b/src/utils/headerIcon.js
new file mode 100644
index 0000000..b1fe542
--- /dev/null
+++ b/src/utils/headerIcon.js
@@ -0,0 +1,17 @@
+export default {
+    methods: {
+      renderHeaderWithIcon(h, { column }, iconPath) {
+        return h('div', [
+          column.label,
+          h('img', {
+            attrs: { src: iconPath },
+            style: {
+              width: '10px',
+              height: '10px',
+              marginLeft: '3px',
+            }
+          })
+        ])
+      }
+    }
+  }
\ No newline at end of file
diff --git a/src/views/super/Ranking/RankBatchList.vue b/src/views/super/Ranking/RankBatchList.vue
index 8e6aa95..4e31fe3 100644
--- a/src/views/super/Ranking/RankBatchList.vue
+++ b/src/views/super/Ranking/RankBatchList.vue
@@ -1,87 +1,67 @@
 <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"/>
+        <div class="flex-between flex-end pagetitle">
+            <h4>{{ pageTitle }}</h4>
+            <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 v-if="dataRank == 1 && (dataType == 'ver_type' || dataType == 'check_type')" style="margin-bottom: 20px;text-align: left">
-            <el-alert type="info" :closable="false" show-icon>
-                <template #title>
-                    未计成本
-                </template>
-                <div style="margin-top: 8px; line-height: 1.6; font-size: 14px; color: #606266;">
-                    <template v-if="dataType == 'ver_type'">
-                        1. AI（服务器成本） <span v-if="view == 'year'" style="color:red;">2025年（含）后计入成本</span><br />
-                        2. Turnitin <span v-if="view == 'year'" style="color:red;">2025年（含）后计入成本</span><br />
-                        3. 学术（知网PMLC，硕博VIP）<span v-if="view == 'year'" style="color:red;">2025年（含）后计入成本</span><br />
-                    </template>
-                    <template v-if="dataType == 'check_type'">
-                        1. AI（服务器成本）<br />
-                        2. Turnitin国际版、TurnitinUK版、Turnitin国际版+AI<br />
-                        3. 知网PMLC，硕博VIP <span v-if="view == 'year'" style="color:red;">2025年（含）后计入成本</span><br />
-                    </template>
-                </div>
-            </el-alert>
+        <div v-if="dataRank == 1 && (dataType == 'ver_type' || dataType == 'check_type')"
+            style="margin-bottom: 20px;text-align: left" class="beforeNotice">
+            <p class="noticeTop flex"><img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 未计成本</p>
+            <div v-if="dataType == 'ver_type'" class="noticeBot column">
+                <p>1. AI（服务器成本） <span v-if="view == 'year'" style="color:red;">2025年（含）后计入成本</span></p>
+                <p>2. Turnitin <span v-if="view == 'year'" style="color:red;">2025年（含）后计入成本</span></p>
+                <p>3. 学术（知网PMLC，硕博VIP）<span v-if="view == 'year'" style="color:red;">2025年（含）后计入成本</span></p>
+            </div>
+            <div v-if="dataType == 'check_type'" class="noticeBot column">
+                <p>1. AI（服务器成本）</p>
+                <p>2. Turnitin国际版、TurnitinUK版、Turnitin国际版+AI</p>
+                <p>3. 知网PMLC，硕博VIP <span v-if="view == 'year'" style="color:red;">2025年（含）后计入成本</span></p>
+            </div>
         </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="95"></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]"  width="250">
+                <GuipTable :tableData="tableData" style="width: 100%" :border="true" @sort-change="handleSortChange"
+                    :loading="loading" @cell-mouse-enter="handleRowHover">
+                    <el-table-column fixed="left" prop="sort" label="排序" width="70"></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]" min-width="120">
 
                         <template slot="header">
-                            <el-select class="custom-select" popper-class="custom-select-dropdown" v-model="selectedType" @change="changeRankType">
-                                <el-option v-for="(item,type) in type_select"
-                                           :key="type"
-                                           :label="item"
-                                           :value="type">
+                            <el-select class="custom-select tableHeaderSelect" popper-class="custom-select-dropdown"
+                                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 }}
+                            <GuipToolTip :content=" scope.row.name">
+                                <span class=nowrap>{{ scope.row.name }}</span>
+                            </GuipToolTip>
                         </template>
 
                     </el-table-column>
-                    <el-table-column v-else prop="name" :label="type_desc[dataType]" width="250"></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] + (index == 3 ? current_month : '')"
-                                     :prop="String(index + 1)"
-                                     sortable="custom">
+                    <el-table-column v-for="(field, index) in valueFields" :key="field" :label="labels[index]"
+                         :prop="String(index + 1)"
+                        :render-header=" (h, scope) => index == 3 ? renderHeaderWithIcon(h, scope, require('@/assets/require.svg')) : scope.column.label"
+                        sortable="custom" min-width="170">
 
                         <!--产品利润排行展示查看更多-->
                         <template v-if="index == 3 && dataRank == 1" v-slot="{ row, $index }">
-                            <el-popover v-model="row.id_popover"
-                                        placement="top"
-                                        trigger="manual"
-                                        :ref="`popover-${$index}`"
-                                        @show="popshow">
+                            <el-popover v-model="row.id_popover" placement="top" trigger="manual"
+                                :ref="`popover-${$index}`" :append-to-body="false" :visible-arrow="true"
+                                popper-class="custom-popover" @show="popshow">
 
                                 <div v-if="type != 'agent'" class="pop-wrap">
                                     <div class="flex-between flex pop-top">
                                         <h3>
                                             {{ text }} {{ row.name }}
-                                            <span @click="goLookMoreData(row.id)">查看更多</span>
+                                            <span class="lookMore" @click="goLookMoreData(row.id)">查看更多</span>
                                         </h3>
                                         <span class="flex point" @click="closePop(row,'id')">
                                             关闭<img src="@/assets/register/close.svg">
@@ -103,14 +83,16 @@
                                     <div class="flex-between flex pop-top">
                                         <h3>
                                             {{ text }} {{ row.name }}
-                                            <span @click="goLookCheckTypeRank(row.id)">查看更多</span>
+                                            <span class="lookMore" @click="goLookCheckTypeRank(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="95" label="排序"></el-table-column>
+                                        <el-table-column prop="sort" width="95" label="排序">
+                                           
+                                        </el-table-column>
                                         <el-table-column prop="name" width="250" label="服务名称"></el-table-column>
                                         <el-table-column prop="rate" width="130" label="毛利占比">
                                             <template slot-scope="scope">
@@ -132,33 +114,32 @@
 
                                 <div class="flex" slot="reference">
                                     {{ row[field] }}
-                                    <HoverImage v-if="show_detail_index == row.sort && row[field] > 0"
-                                        @click="handleClick(row, $index, 'id')"
-                                        :normal="require('@/assets/super/list-detail.svg')"
-                                        :hover="require('@/assets/super/list-detail-hover.svg')"/>
+                                    <svg-icon v-if="row[field] > 0" :size="14"
+                                        :path="require('@/assets/super/list-detail.svg')" :color="'#8A9099'"
+                                        :hoverColor="'#006AFF'" @click="handleClick(row, $index, 'id')" />
                                 </div>
                             </el-popover>
+
                         </template>
-                        <template v-else slot-scope="scope">
-                            <div class="flex">
+                        <template v-else slot-scope="scope" >
+                            <div class="flex" >
                                 {{ scope.row[field] }}
                             </div>
                         </template>
                     </el-table-column>
 
                     <!--产品利润排行展示代理商排行-->
-                    <el-table-column v-if="dataRank == 1 && (dataType == 'ver_type' || dataType == 'check_type')" key="top" prop="top" :label="'代理商排行'+current_month" width="250">
+                    <el-table-column v-if="dataRank == 1 && (dataType == 'ver_type' || dataType == 'check_type')"
+                        :render-header=" (h, scope) => renderHeaderWithIcon(h, scope, require('@/assets/require.svg')) "
+                        key="top" prop="top" label="代理商排行" width="250" fixed="right">
                         <template v-slot="{ row, $index }">
-                            <el-popover v-model="row.id_popover_2"
-                                        placement="top"
-                                        trigger="manual"
-                                        :ref="`popover_2-${$index}`"
-                                        @show="popshow">
+                            <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>
                                             {{ row.name }} 代理商排行
-                                            <span @click="goLookAgentRank(row.id)">查看更多</span>
+                                            <span class="lookMore" @click="goLookAgentRank(row.id)">查看更多</span>
                                         </h3>
                                         <span class="flex point" @click="closePop(row,'id')">
                                             关闭<img src="@/assets/register/close.svg">
@@ -172,23 +153,18 @@
                                 </div>
                                 <span v-if="top_list[row.id]" slot="reference">
                                     No.1 {{ top_list[row.id]['name'] }}
-                                    <HoverImage v-if="show_detail_index == row.sort"
-                                         @click="handleClick2(row, $index, 'id')"
-                                         :normal="require('@/assets/super/list-detail.svg')"
-                                         :hover="require('@/assets/super/list-detail-hover.svg')"/>
+                                    <svg-icon :size="14" @click="handleClick2(row, $index, 'id')"
+                                        :path="require('@/assets/super/list-detail.svg')" :color="'#8A9099'"
+                                        :hoverColor="'#006AFF'" />
                                 </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="parseInt(total)">
+                </GuipTable>
+                <el-pagination background @size-change='handleSizeChange' @current-change='handleCurrentChange'
+                    :current-page="currentPage" :page-size=pageSize layout="prev, pager, next,jumper"
+                    :total="parseInt(total)">
                 </el-pagination>
             </el-form>
         </div>
@@ -196,9 +172,10 @@
 </template>
 <script>
 import DateSelect from '@/components/super/DateSelect.vue';
-import HoverImage from '@/components/super/HoverImage.vue';
+import GuipTable from '@/components/GuipTable.vue';
 import CustomDropdown from '@/components/CustomDropdown.vue';
-
+import SvgIcon from '@/components/SvgIcon.vue';
+import GuipToolTip from '@/components/GuipToolTip.vue';
 export default {
     name: 'rank_batch_list',
     props: {
@@ -216,12 +193,16 @@ export default {
         }
     },
     components: {
-        HoverImage,
+        // HoverImage,
+        GuipToolTip,
+        SvgIcon,
+        GuipTable,
         DateSelect,
         CustomDropdown
     },
     data() {
         return {
+            loading: false,
             viewDesc: {
                 'month': '月份',
                 'monthTwo': '月份',
@@ -245,10 +226,10 @@ export default {
             selectedType: 'check_type',
             view: 'month',
             labels: ['', '', '', ''],
-            current_month:'',
+            current_month: '',
             valueFields: ['value_1', 'value_2', 'value_3', 'value_4'],
             currentPage: 1,    //当前页
-            pageSize: 20,   //每页的容量
+            pageSize: 10,   //每页的容量
             total: 0,   //列表总数
             sort_by: 4,
             sort_order: 2,
@@ -381,11 +362,11 @@ export default {
             if (this.dataType == 'check_type') {
                 obj.check_type = row.id
             }
-            if(this.dataType == 'agent'){
+            if (this.dataType == 'agent') {
                 let obj = {}
                 obj.aid = row.id
                 this.getCheckTypeRankingList(obj);
-            }else{
+            } else {
                 this.getRankingDetail(obj);
             }
         },
@@ -423,7 +404,8 @@ export default {
                 item.removeAttribute('aria-hidden')
             })
         },
-        handleSortChange({prop, order}) {
+        handleSortChange({ prop, order }) {
+            console.log('prop--排序',prop);
             this.sort_by = 4;
             this.sort_order = 2;
             if (order == 'ascending') {
@@ -466,7 +448,7 @@ export default {
             const currentMonth = new Date().getMonth() + 1;
 
             this.current_month = '';
-            if(this.view === 'month' && year == currentYear && month == currentMonth){
+            if (this.view === 'month' && year == currentYear && month == currentMonth) {
                 this.current_month = '(当月)';
             }
 
@@ -533,6 +515,7 @@ export default {
             const that = this
             that.tableData = []
             that.top_list = []
+            this.loading = true;
             this.$http('POST', '/supernew/ajax_get_type_batch_list', {
                 date: that.text,
                 rank_type: that.dataRank,
@@ -541,6 +524,7 @@ export default {
                 cur_page: that.currentPage,
                 page_size: that.pageSize,
             }).then(response => {
+                this.loading = false;
                 this.$nextTick(() => {
                     that.tableData = response.data.list
                     that.top_list = response.data.top_list
@@ -613,4 +597,40 @@ export default {
 }
 </script>
 <style scoped lang="scss">
+.pagetitle{
+    h4{
+        margin-bottom: 0;
+    }
+}
+.lookMore {
+    cursor: pointer;
+    font-weight: 400;
+}
+.beforeNotice{
+    margin-top: 12px;
+    border-radius: 4px;
+    background: #F2F7FF;
+    border: 1px solid #BFDAFF;
+    padding: 20px 14px;
+    color: #1E2226;
+    letter-spacing: 0.08em;
+    .noticeTop{
+        gap: 8px;
+        margin-bottom: 12px;
+
+    }
+    .noticeBot{
+        gap: 10px;
+    }
+
+}
+
+.tableHeaderSelect ::v-deep .el-input__inner {
+    font-size: 14px;
+    font-weight: normal;
+    letter-spacing: 0.08em;
+    font-family: Microsoft YaHei UI;
+    color: #1E2226;
+    height: 100%;
+}
 </style>
\ No newline at end of file