From 89f8f8744e8c435405485439973e6cd5fee90a0c Mon Sep 17 00:00:00 2001 From: tx <2622874537@qq.com> Date: Wed, 28 Aug 2024 17:25:04 +0800 Subject: [PATCH] =?UTF-8?q?=E6=8E=92=E8=A1=8C=E6=A6=9C=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/index.vue | 120 +++++++++++++++------------- src/views/system/area/areaRange.vue | 22 ++--- 2 files changed, 71 insertions(+), 71 deletions(-) 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的列数背景颜色显示为红色(颜色自定义根据大家需求来)