排行榜修改

src/views/index.vue

@@ -328,7 +328,6 @@
     </div>
     <div class="rights">
       <div class="check_li">
-        
         <span>时间：</span>
         <el-select
           v-model="data"
@@ -344,14 +343,14 @@
             :value="item.value"
           ></el-option>
         </el-select>
-         
-         <span>类型：</span>
+
+        <span>类型：</span>
         <el-select
           v-model="type"
           filterable
           placeholder="请选择排序类型"
           clearable
-           @change="changetype"
+          @change="changetype"
         >
           <el-option
             v-for="item in optionss"
@@ -361,34 +360,36 @@
           ></el-option>
         </el-select>
       </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">
-          {{index+1}}
-        </div>
-          <div class="li_txt">
-           {{item.areaName}}
+      <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">
+        <div class="li_txt" style="width: 34%;justify-content: flex-start;">
+         
+          <div class="paim" >
+            {{ index + 1 }}
+          </div>
+          {{ item.areaName }}
         </div>
         <div class="li_txt">
-          订单金额:{{item.orderFee}}
+          {{ item.orderFee }}
         </div>
-         <div class="li_txt">
-          订单数:{{item.orderCount}}
+        <div class="li_txt">
+          {{ item.orderCount }}
         </div>
-         <div class="li_txt">
-          进行中的订单:{{item.inProgressOrderCount}}
+        <div class="li_txt">
+          {{ item.inProgressOrderCount }}
         </div>
-        
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import { getAdminStatistics,getleaderboard } from "@/api/system/area";
+import { getAdminStatistics, getleaderboard } from "@/api/system/area";
 import * as echarts from "echarts";
 export default {
   name: "Index",
@@ -408,8 +409,8 @@ export default {
           label: "本周",
         },
       ],
-       optionss: [
-         {
+      optionss: [
+        {
           value: "1",
           label: "订单数",
         },
@@ -417,14 +418,14 @@ export default {
           value: "2",
           label: "订单金额",
         },
-       
-         {
+
+        {
           value: "3",
           label: "进行中的订单",
         },
       ],
-      type:"2",
-      leaderboardList:[]
+      type: "2",
+      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);
@@ -441,13 +442,13 @@ export default {
     }
   },
   methods: {
-    changetype(value){
-      this.getlibord()
-      console.log('点击了',value);
+    changetype(value) {
+      this.getlibord();
+      console.log("点击了", value);
     },
-    changetime(value){
-      this.getlibord()
-       console.log('点击了',value);
+    changetime(value) {
+      this.getlibord();
+      console.log("点击了", value);
     },
     AdminStatistics() {
       getAdminStatistics().then((response) => {
@@ -461,8 +462,8 @@ export default {
       });
     },
     getlibord() {
-      getleaderboard(this.type,this.data).then((response) => {
-        this.leaderboardList=response.data
+      getleaderboard(this.type, this.data).then((response) => {
+        this.leaderboardList = response.data;
         // this.StatisticsInfo = response.data;
         // this.StatisticsInfo.incomeVoList.reverse();
         // setTimeout(() => {
@@ -568,47 +569,52 @@ export default {
     align-content: flex-start;
     flex-direction: row;
 
-    .check_li{
+    .check_li {
       padding: 0 1rem;
       width: 100%;
       display: flex;
       align-items: center;
       flex-wrap: nowrap;
       height: 3rem;
-      span{
+      span {
         width: 3.5rem;
         font-size: 0.8rem;
       }
     }
 
     .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%;
-      img{
-        width: 37px;
-        height: 23.6px;
-      }
-      .li_txt{
-        width: 20%;
-        font-size: 0.6rem;
-      }
-      .paim{
-        display: flex;
-        align-items: center;
-        justify-content: center;
-         width: 37px;
-         height: 37px;
-         border-radius: 50%;
-        //  background-color: #ccc;
 
+      .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;
+        }
+        .paim {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 37px;
+          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的列数背景颜色显示为红色（颜色自定义根据大家需求来）