[Feature] 热榜点击更多时根据点击量排序

src/layout/components/HeaderTop.vue

@@ -14,39 +14,33 @@
     </div>
     <div class="header-right">
       <div class="right-top">
-        <el-popover v-model="hotVisibile" class="right-top-item" placement="bottom-start" popper-class="hot-popper-box" width="420" trigger="click" @show="showHotPopover">
+        <el-popover v-model="hotVisibile" class="right-top-item" placement="bottom-start" popper-class="hot-popper-box" width="480" trigger="click" @show="showHotPopover">
           <el-tabs v-model="curHotTab" @tab-click="getHotData">
             <el-tab-pane label="热门应用" name="hotSys">
               <div style="margin-bottom: 5px;">提示：根据应用浏览数量排行</div>
               <div v-loading="sysLoading" class="top-item-box">
                 <div v-for="(item, index) in sysTopData" :key="item.id" class="top-item">
-                  <span :class="['top-rank', index<=2 ? 'top-rank_'+index : '']">{{ index + 1 }}</span>
-                  <span>
-                    <el-avatar :size="32" fit="fill" :src="item.icon | formatFileUrl" />
-                  </span>
-                  <ellipsis-tooltip :content="item.systemName" placement="top" class="top-name" width="200px">
-                    <a @click="$jumpTo('app', item.id, item.systemName, item.url)">{{ item.systemName }}</a>
-                  </ellipsis-tooltip>
-                  <span class="top-count"><svg-icon icon-class="remen" class="hot-icon" />{{ formatCount(item.hits) }}</span>
+                  <div :class="['top-rank', index<=2 ? 'top-rank_'+index : '']">{{ index + 1 }}</div>
+                  <el-avatar :size="32" fit="fill" :src="item.icon | formatFileUrl" />
+                  <a class="top-name" @click="$jumpTo('app', item.id, item.systemName, item.url)">{{ item.systemName }}</a>
+                  <div class="top-count"><svg-icon icon-class="remen" class="hot-icon" />{{ formatCount(item.hits) }}</div>
                   <el-button v-if="item.isStar === 1" type="primary" size="small" style="width:68px; cursor: default">已收藏</el-button>
                   <el-button v-else size="small" style="width:68px" @click="addSysFavorite(item.id, index)">收藏</el-button>
                 </div>
-                <div class="more-item"><span style="cursor: pointer;" @click="showMoreHot('sys')">查看更多</span></div>
+                <div class="more-item"><span style="cursor: pointer;" @click="showMoreHot('System')">查看更多</span></div>
               </div>
             </el-tab-pane>
             <el-tab-pane label="热门业务" name="hotBiz">
               <div style="margin-bottom: 5px;">提示：根据业务浏览数量排行</div>
               <div v-loading="bizLoading" class="top-item-box">
                 <div v-for="(item, index) in bizTopData" :key="item.id" class="top-item">
-                  <span :class="['top-rank', index<=2 ? 'top-rank_'+index : '']">{{ index + 1 }}</span>
-                  <ellipsis-tooltip :content="item.businessName" placement="top" class="top-name" width="200px">
-                    <a @click="$jumpTo('business', item.id, item.businessName, item.url)">{{ item.businessName }}</a>
-                  </ellipsis-tooltip>
-                  <span class="top-count"><svg-icon icon-class="remen" class="hot-icon" />{{ formatCount(item.hits) }}</span>
+                  <div :class="['top-rank', index<=2 ? 'top-rank_'+index : '']">{{ index + 1 }}</div>
+                  <a class="top-name" @click="$jumpTo('business', item.id, item.businessName, item.url)">{{ item.businessName }}</a>
+                  <div class="top-count"><svg-icon icon-class="remen" class="hot-icon" />{{ formatCount(item.hits) }}</div>
                   <el-button v-if="item.isStar === 1" type="primary" size="small" style="width:68px; cursor: default">已收藏</el-button>
                   <el-button v-else size="small" style="width:68px" @click="addBizFavorite(item.appId, item.id, index)">收藏</el-button>
                 </div>
-                <div class="more-item"><span style="cursor: pointer;" @click="showMoreHot('biz')">查看更多</span></div>
+                <div class="more-item"><span style="cursor: pointer;" @click="showMoreHot('Biz')">查看更多</span></div>
               </div>
             </el-tab-pane>
           </el-tabs>
@@ -120,13 +114,11 @@ import { fetchTableList } from '@/api/message'
 
 import { mapGetters } from 'vuex'
 import Search from '@/components/HeaderSearch'
-import EllipsisTooltip from '@/components/EllipsisTooltip'
 
 export default {
   name: 'HeaderTop',
   components: {
-    Search,
-    EllipsisTooltip
+    Search
   },
   data() {
     return {
@@ -159,6 +151,7 @@ export default {
     ])
   },
   methods: {
+    formatCount,
     async logout() {
       await this.$store.dispatch('user/logout').then((res) => {
         location.href = res['casLogoutUrl']
@@ -180,7 +173,10 @@ export default {
     },
     showMoreHot(path) {
       this.hotVisibile = false
-      this.$router.push(`/${path}`)
+      this.$router.replace({
+        path: `/redirect/name/${path}`,
+        query: { order: 'hits' }
+      })
     },
     getHotData() {
       const params = {
@@ -311,9 +307,6 @@ export default {
     showMoreMsg() {
       this.msgVisible = false
       this.$router.push('/home')
-    },
-    formatCount(count) {
-      return formatCount(count)
     }
   }
 }
@@ -396,14 +389,11 @@ export default {
       height: 50px;
       color: rgba(0,0,0,0.85);
       display: flex;
-      justify-content: space-between;
       align-items: center;
+      gap: 10px;
 
       &>* {
-        display: inline-block;
-      }
-      &>*+* {
-        margin-left: 10px;
+        flex: none;
       }
       .top-rank {
         width: 20px;
@@ -426,10 +416,15 @@ export default {
       }
 
       .top-name {
-        width: 270px;
-        margin-bottom: 5px;
+        flex: auto;
+
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
       }
       .top-count{
+        width: 100px;
+        text-align: right;
         color: #FF5030;
       }
       .hot-icon {

src/layout/components/Sidebar/Link.vue

@@ -34,8 +34,14 @@ export default {
           rel: 'noopener'
         }
       }
-      return {
-        to: to
+      if (to === '/sys' || to === '/biz') {
+        return {
+          to: '/redirect' + to
+        }
+      } else {
+        return {
+          to: to
+        }
       }
     }
   }

src/views/business/index.vue

@@ -18,6 +18,11 @@
           <el-form-item label="业务名称">
             <el-input v-model="formData.businessName" class="filter-item" clearable />
           </el-form-item>
+          <el-form-item prop="order" label="排序">
+            <el-select v-model="formData.order" placeholder="请选择">
+              <el-option v-for="(item) in orderData" :key="item.id" :label="item.label" :value="item.id" />
+            </el-select>
+          </el-form-item>
           <el-form-item>
             <el-button type="primary" @click="searchTable">查询</el-button>
           </el-form-item>
@@ -46,6 +51,7 @@
                   <div class="item-title">
                     <div class="item-name">{{ item.businessName }}</div>
                     <div class="item-system">{{ item.appName }}</div>
+                    <div class="item-count">点击量：{{ formatCount(item.hits) }}</div>
                   </div>
                 </div>
                 <el-button class="item-link" size="small" @click="$jumpTo('business', item.id, item.businessName, item.url)">打开</el-button>
@@ -77,18 +83,20 @@ import { downloadTemplate } from '@/api/file'
 import { fetchAllBizList, pushDeleteBusiness } from '@/api/business'
 
 import { hasValidRecords, formatDictData, isNull } from '@/utils/convert'
+import { formatCount } from '@/utils'
 
 import DetailEdit from './components/DetailEdit'
 import UploadExcel from '@/components/Upload/UploadExcel'
 
 export default {
-  name: 'Business',
+  name: 'Biz',
   components: { DetailEdit, UploadExcel },
   data() {
     return {
       // type
       dictType: 'business_type',
       typeData: [],
+      orderData: [{ 'id': 'update_time', 'label': '更新时间' }, { 'id': 'hits', 'label': '点击量' }],
       // table
       current: 1,
       size: 16,
@@ -99,7 +107,8 @@ export default {
       formData: {
         businessType: '',
         businessName: '',
-        appName: ''
+        appName: '',
+        order: isNull(this.$route.params.order) ? 'update_time' : this.$route.params.order
       },
       // others
       loading: false,
@@ -109,10 +118,12 @@ export default {
     }
   },
   created() {
+    console.log('Biz: Created')
     this.getTypeData()
     this.searchTable()
   },
   methods: {
+    formatCount,
     // Upload
     uploadSuccess(data) {
       this.uploadLoading = false
@@ -164,6 +175,7 @@ export default {
       const params = {
         page: this.current,
         size: this.size,
+        order: this.formData.order,
         params: {
           delFlag: 0,
           businessType: this.formData.businessType,
@@ -310,7 +322,7 @@ export default {
 
   .list-filter {
     height: 56px;
-    width: 800px;
+    width: 1000px;
     padding-top: 10px;
   }
 
@@ -319,7 +331,7 @@ export default {
   }
 
   .list-box {
-    min-width: 800px;
+    min-width: 1200px;
     height: calc(100% - 106px);
   }
 
@@ -400,15 +412,21 @@ export default {
       }
 
       .item-name {
-        font-size: 14px;
-        font-weight: 550;
+        font-size: 16px;
+        font-weight: 600;
         color: rgba(0,0,0,0.85);
       }
 
       .item-system {
-        font-size: 14px;
+        font-size: 15px;
         color: rgba(0,0,0,0.65);
       }
+
+      .item-count {
+        margin-top: 5px;
+        font-size: 14px;
+        color: rgba(0, 0, 0, 0.65);
+      }
     }
 
     .item-link {

src/views/system/index.vue

@@ -18,6 +18,11 @@
           <el-form-item label="应用事权单位名称">
             <el-input v-model="formData.deptName" class="filter-item" clearable />
           </el-form-item>
+          <el-form-item prop="order" label="排序">
+            <el-select v-model="formData.order" placeholder="请选择">
+              <el-option v-for="(item) in orderData" :key="item.id" :label="item.label" :value="item.id" />
+            </el-select>
+          </el-form-item>
           <el-form-item>
             <el-button type="primary" @click="searchTable">查询</el-button>
           </el-form-item>
@@ -43,7 +48,10 @@
               <div class="item-content">
                 <div class="item-content-left">
                   <el-avatar :size="56" :src="item.icon | formatFileUrl" />
-                  <span class="item-name">{{ item.systemName }}</span>
+                  <div class="item-name">
+                    <span>{{ item.systemName }}</span>
+                    <span class="item-count">点击量：{{ formatCount(item.hits) }}</span>
+                  </div>
                 </div>
                 <el-button class="item-link" size="small" @click="$jumpTo('app', item.id, item.systemName, item.url)">打开</el-button>
               </div>
@@ -74,6 +82,7 @@ import { downloadTemplate } from '@/api/file'
 import { fetchAllSystemList, pushDeleteSystem } from '@/api/system'
 
 import { hasValidRecords, formatDictData, isNull } from '@/utils/convert'
+import { formatCount } from '@/utils'
 
 import DetailEdit from './components/DetailEdit'
 import UploadExcel from '@/components/Upload/UploadExcel'
@@ -86,6 +95,7 @@ export default {
       // type
       dictType: 'app_type',
       typeData: [],
+      orderData: [{ 'id': 'update_time', 'label': '更新时间' }, { 'id': 'hits', 'label': '点击量' }],
       // table
       current: 1,
       size: 16,
@@ -96,7 +106,8 @@ export default {
       formData: {
         appType: '',
         systemName: '',
-        deptName: ''
+        deptName: '',
+        order: isNull(this.$route.params.order) ? 'update_time' : this.$route.params.order
       },
       // others
       loading: false,
@@ -110,6 +121,7 @@ export default {
     this.searchTable()
   },
   methods: {
+    formatCount,
     // Upload
     uploadSuccess(data) {
       this.uploadLoading = false
@@ -161,7 +173,7 @@ export default {
       const params = {
         page: this.current,
         size: this.size,
-        order: 'update_time',
+        order: this.formData.order,
         params: {
           delFlag: 0,
           appType: this.formData.appType,
@@ -308,7 +320,7 @@ export default {
 
   .list-filter {
     height: 56px;
-    width: 800px;
+    width: 1000px;
     padding-top: 10px;
   }
 
@@ -317,7 +329,7 @@ export default {
   }
 
   .list-box {
-    min-width: 800px;
+    min-width: 1200px;
     height: calc(100% - 106px);
   }
 
@@ -387,15 +399,25 @@ export default {
     }
 
     .item-name {
-      font-size: 14px;
-      font-weight: 550;
-      color: rgba(0,0,0,0.85);
-      margin-left: 10px;
-      display: inline-block;
       width: 230px;
+      margin-left: 10px;
+
+      font-size: 16px;
+      font-weight: 600;
+      color: rgba(0,0,0,0.85);
       text-overflow: ellipsis;
       overflow: hidden;
       white-space: nowrap;
+
+      display: flex;
+      flex-direction: column;
+      gap: 5px;
+    }
+
+    .item-count {
+      font-size: 14px;
+      font-weight: 400;
+      color: rgba(0, 0, 0, 0.65);
     }
 
     .item-link {