排行榜修改

src/views/index.vue

@@ -328,7 +328,6 @@
     </div>
     <div class="rights">
       <div class="check_li">
-        
         <span>时间：</span>
         <el-select
           v-model="data"
@@ -361,27 +360,29 @@
           ></el-option>
         </el-select>
       </div>
-
+      <div class="li">
+        <div class="li_txt"  style="width: 34%;justify-content: flex-start;">运营区</div>
+        <div class="li_txt">订单金额</div>
+        <div class="li_txt">订单数</div>
+        <div class="li_txt">进行中的订单</div>
+      </div>
       <div class="li" v-for="(item, index) in leaderboardList" :key="index">
-        <img src="https://lxnapi.ccttiot.com/bike/img/static/uM68bA3PUCCXFEkIZJ6c" alt="" v-if="index==0">
-        <img src="https://lxnapi.ccttiot.com/bike/img/static/u5drfWtvysvsCjN8IuAE" alt="" v-if="index==1">
-        <img src="https://lxnapi.ccttiot.com/bike/img/static/u35XPUX5r0HrV2IWit5F" alt="" v-if="index==2">
-        <div class="paim" v-if="index!=0&&index!=1&&index!=2">
+        <div class="li_txt" style="width: 34%;justify-content: flex-start;">
+         
+          <div class="paim" >
             {{ index + 1 }}
           </div>
-          <div class="li_txt">
           {{ item.areaName }}
         </div>
         <div class="li_txt">
-          订单金额:{{item.orderFee}}
+          {{ item.orderFee }}
         </div>
         <div class="li_txt">
-          订单数:{{item.orderCount}}
+          {{ item.orderCount }}
         </div>
         <div class="li_txt">
-          进行中的订单:{{item.inProgressOrderCount}}
+          {{ item.inProgressOrderCount }}
         </div>
-        
       </div>
     </div>
   </div>
@@ -424,7 +425,7 @@ export default {
         },
       ],
       type: "2",
-      leaderboardList:[]
+      leaderboardList: [],
     };
   },
   created() {},
@@ -432,7 +433,7 @@ export default {
     this.userName = this.$store.state.user.name;
     this.AdminStatistics();
     window.addEventListener("resize", this.handleResize);
-    this.getlibord()
+    this.getlibord();
   },
   beforeDestroy() {
     window.removeEventListener("resize", this.handleResize);
@@ -442,12 +443,12 @@ export default {
   },
   methods: {
     changetype(value) {
-      this.getlibord()
-      console.log('点击了',value);
+      this.getlibord();
+      console.log("点击了", value);
     },
     changetime(value) {
-      this.getlibord()
-       console.log('点击了',value);
+      this.getlibord();
+      console.log("点击了", value);
     },
     AdminStatistics() {
       getAdminStatistics().then((response) => {
@@ -462,7 +463,7 @@ export default {
     },
     getlibord() {
       getleaderboard(this.type, this.data).then((response) => {
-        this.leaderboardList=response.data
+        this.leaderboardList = response.data;
         // this.StatisticsInfo = response.data;
         // this.StatisticsInfo.incomeVoList.reverse();
         // setTimeout(() => {
@@ -582,24 +583,29 @@ export default {
     }
 
     .li {
-      margin-top: 1rem;
+      margin-top: 0.5rem;
       display: flex;
       flex-wrap: nowrap;
       align-items: center;
       justify-content: space-around;
       width: 90%;
-      height: 3rem;
+      height: 2.5rem;
       background: #fff;
-      box-shadow: 0px 10px 64px 0px rgba(0, 0, 0, 0.08);
+      // box-shadow: 0px 10px 64px 0px rgba(0, 0, 0, 0.08);
       border-radius: 10%;
+
+      .li_txt {
+        display: flex;
+        flex-wrap: nowrap;
+        align-items: center;
+        // text-align: center;
+        justify-content: center;
+        width: 22%;
+        font-size: 0.8rem;
         img {
           width: 37px;
           height: 23.6px;
         }
-      .li_txt{
-        width: 20%;
-        font-size: 0.6rem;
-      }
         .paim {
           display: flex;
           align-items: center;
@@ -608,7 +614,7 @@ export default {
           height: 37px;
           border-radius: 50%;
           //  background-color: #ccc;
-
+        }
       }
     }
   }

src/views/system/area/areaRange.vue

@@ -118,8 +118,9 @@
       v-loading="loading"
       :data="parkingList"
       @selection-change="handleSelectionChange"
-      
+      ref="myTable" 
       :cell-style="columnbackgroundStyle"
+       @current-change="handleCurrentChange"
     >
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="id" align="center" prop="parkingId" />
@@ -310,6 +311,7 @@ export default {
       form: {},
       highlightedId: null, // 默认不高亮
       showtable: true,
+      currentRow: null,
       // 表单校验
       rules: {
         parkingName: [
@@ -740,21 +742,13 @@ export default {
     },
     highlightRow(parkingId) {
       this.$set(this, "highlightedId", parkingId);
-  this.showtable = false;
+  // this.showtable = false;
+  this.$refs.myTable.setCurrentRow(this.parkingList[6]);
 
-  this.$nextTick(() => {
-    this.showtable = true;
-
-    // 确保高亮行的 DOM 已经渲染完成
-    this.$nextTick(() => {
-      const rowElement = this.$refs['row_' + parkingId];
-      if (rowElement && rowElement[0]) {
-        rowElement[0].scrollIntoView({ behavior: "smooth", block: "center" });
-      }
-    }); 
-  });
     },
-  
+    handleCurrentChange(val) {
+      this.currentRow = val;
+    },
     columnbackgroundStyle({ row }) {
       if (row.parkingId == this.highlightedId) {
         //让下标为1的列数背景颜色显示为红色（颜色自定义根据大家需求来）