排行榜

src/WebsiteManagement/dataStatistics/modules/rankingList.vue

@@ -1,6 +1,36 @@
 <template>
   <div>
     <cord-top title="访问量top10" @returnWhere="getVisits" />
+
+    <div class="ranking-list">
+      <div class="ranking-list-item" v-for="item in list" :key="item.name">
+        <div class="ranking-list-item-name">{{ $t(item.name) }}</div>
+        <div
+          class="ranking-list-item-value"
+          v-for="(it, index) in item.value"
+          :key="it.specificname"
+        >
+          <div
+            class="ranking-list-item-value-rowindex"
+            :style="{
+              background:
+                { 1: '#FF4D4F', 2: '#FA9014', 3: '#FFC148' }[index + 1] ||
+                '#bbbbbb',
+            }"
+          >
+            {{ index + 1 }}
+          </div>
+          <el-tooltip :content="$t(it.specificname)" placement="top-start">
+            <div class="ranking-list-item-value-module">
+              {{ $t(it.specificname) }}
+            </div>
+          </el-tooltip>
+          <div class="ranking-list-item-value-visitcount">
+            {{ it.visitcount }}
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -14,6 +44,7 @@ export default {
   data() {
     return {
       siteid: "", //站点id
+      list: [],
     };
   },
   created() {
@@ -43,6 +74,16 @@ export default {
         .then((res) => {
           console.log("获取访问量top10", res);
           if (res.code != 1) return;
+          let list = [];
+          res.data.forEach((item) => {
+            for (const key in item) {
+              list.push({
+                name: key,
+                value: item[key],
+              });
+            }
+          });
+          this.list = list;
         });
     },
   },
@@ -50,4 +91,76 @@ export default {
 </script>
 
 <style scoped>
+.ranking-list {
+  width: 100%;
+  display: flex;
+  margin-top: 20px;
+  overflow-x: auto;
+  padding-bottom: 20px;
+}
+
+.ranking-list-item {
+  flex: 1;
+  flex-shrink: 0;
+  min-width: 250px;
+  border-right: 2px solid #e0e0e0;
+  margin-right: 20px;
+  padding-right: 20px;
+}
+
+.ranking-list-item:last-child {
+  border-right: none;
+}
+
+.ranking-list-item-name {
+  font-family: PingFang SC, PingFang SC;
+  font-weight: 500;
+  font-size: 14px;
+  color: #333333;
+  margin-bottom: 12px;
+}
+
+.ranking-list-item-value {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.ranking-list-item-value-rowindex {
+  width: 24px;
+  height: 24px;
+  line-height: 24px;
+  color: #ffffff;
+  background: #bbbbbb;
+  border-radius: 2px;
+  text-align: center;
+  font-family: Arial, Arial;
+  font-weight: 400;
+  font-size: 12px;
+  margin-right: 10px;
+}
+
+.ranking-list-item-value-module {
+  flex: 1;
+  width: 0;
+  line-height: 16px;
+  font-family: Arial, Arial;
+  font-size: 12px;
+  color: #333333;
+  white-space: nowrap; /* 禁止换行 */
+  overflow: hidden; /* 超出部分隐藏 */
+  text-overflow: ellipsis; /* 超出部分用省略号显示 */
+  padding-right: 10px;
+  box-sizing: border-box;
+}
+
+.ranking-list-item-value-visitcount {
+  height: 14px;
+  font-family: Arial, Arial;
+  font-weight: 400;
+  font-size: 12px;
+  color: #333333;
+  flex-shrink: 0;
+}
 </style>