diff --git a/src/views/index.vue b/src/views/index.vue
index 7934bcc..ed72206 100644
--- a/src/views/index.vue
+++ b/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;
+ }
}
}
}
diff --git a/src/views/system/area/areaRange.vue b/src/views/system/area/areaRange.vue
index c730304..44672c2 100644
--- a/src/views/system/area/areaRange.vue
+++ b/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的列数背景颜色显示为红色（颜色自定义根据大家需求来）