From 3f0d4c3df5d21e48da5d4ec658d9bcf54ec10319 Mon Sep 17 00:00:00 2001
From: 董国庆 <364620639@qq.com>
Date: 星期五, 16 五月 2025 19:52:24 +0800
Subject: [PATCH] 修改首页
---
src/view/home/index.vue | 148 +++++++++++++++++++++++++++++++------------------
1 files changed, 94 insertions(+), 54 deletions(-)
diff --git a/src/view/home/index.vue b/src/view/home/index.vue
index 1f6c1e4..88a9768 100644
--- a/src/view/home/index.vue
+++ b/src/view/home/index.vue
@@ -66,44 +66,44 @@
</div>
</div> -->
- <div class="firCard">
- <div class="companyCard">
- <div class="lineCard"></div>
- <div class="name">运营公司(家)</div>
- <div class="value">{{ carStatusData.enterprise || 0 }}</div>
+ <div class="firCard">
+ <div class="companyCard">
+ <div class="lineCard"></div>
+ <div class="name">运营公司(家)</div>
+ <div class="value">{{ carStatusData.enterprise || 0 }}</div>
+ </div>
+ <div class="companyCard">
+ <div class="statusLeft">
+ <div class="name">运营车辆(辆)</div>
+ <div class="value">{{ carStatusData.car || 0 }}</div>
</div>
- <div class="companyCard">
- <div class="statusLeft">
- <div class="name">运营车辆(辆)</div>
- <div class="value">{{ carStatusData.car || 0 }}</div>
- </div>
- <div class="statusLeft">
- <div class="name">在线</div>
- <div class="num">{{ carStatusData.online || 0 }}</div>
- </div>
- <div class="statusLeft">
- <div class="name">离线</div>
- <div class="num">{{ carStatusData.offline || 0 }}</div>
- </div>
-
- <div class="statusLeft">
- <div class="name">故障</div>
- <div class="num">{{ carStatusData.breakdown || 0 }}</div>
- </div>
-
- <div class="statusLeft">
- <div class="name">异常</div>
- <div class="num">{{ carStatusData.abnormal || 0 }}</div>
- </div>
+ <div class="statusLeft">
+ <div class="name">在线</div>
+ <div class="value">{{ carStatusData.online || 0 }}</div>
</div>
- <!-- <div class="companyCard">
+ <div class="statusLeft">
+ <div class="name">离线</div>
+ <div class="value onLine">{{ carStatusData.offline || 0 }}</div>
+ </div>
+
+ <div class="statusLeft">
+ <div class="name">故障</div>
+ <div class="value breakdown">{{ carStatusData.breakdown || 0 }}</div>
+ </div>
+
+ <div class="statusLeft">
+ <div class="name">异常</div>
+ <div class="value abnormal">{{ carStatusData.abnormal || 0 }}</div>
+ </div>
+ </div>
+ <!-- <div class="companyCard">
<div class="lineCard"></div>
<div class="name">驾驶员(人)</div>
<div class="value">{{ carStatusData.driver || 0 }}</div>
</div> -->
- </div>
+ </div>
</div>
@@ -111,12 +111,12 @@
<!-- 左边统计 -->
<div class="leftData">
<div class="warnCount">
- <div class="title ">预警类型排行榜</div>
+ <div class="title ">预警类型排行</div>
<div class="countChart" id="countChart"></div>
</div>
<!-- 预警排行榜(前10) -->
<div class="warnRank">
- <div class="title mt-0">公司预警排行榜</div>
+ <div class="title mt-0">公司预警排行</div>
<div class="rankChart" id="rankChart">
<div class="rankItem" v-for="(item, index) in rankList" :key="index">
<div class="left">{{ item.name }}</div>
@@ -136,7 +136,7 @@
</div>
<!-- 右边 内容 -->
<div class="right">
-
+
<!-- 今日预警 -->
<div class="todayWarn">
<div class="title">今日预警</div>
@@ -167,7 +167,7 @@
<!-- 预警情况统计 -->
<div class="warnCount">
<div class="title ">预警情况统计</div>
- <el-table v-if="tableData.length" :data="tableData" border stripe style="width: 100%" :height="300">
+ <el-table v-if="tableData.length" :data="tableData" border stripe style="width: 100%" :height="321">
<el-table-column prop="operate_type" label="车辆类型">
<template #default="{ row }">
<span class="operate_type" @click="toWarningList(row.operate_type)">{{ row.operate_type }}</span>
@@ -979,21 +979,30 @@
display: flex;
height: calc(100% - 138px);
padding-top: 20px;
+
.title {
- margin-top: 10px;
- font-weight: 600;
- font-size: 18px;
- color: rgba(0, 0, 0, 0.88);
- line-height: 25px;
- text-transform: none;
- margin-bottom: 10px;
- }
+ font-weight: 600;
+ font-size: 18px;
+ color: #fff;
+ line-height: 25px;
+ text-transform: none;
+ padding: 5px 0;
+
+ }
+
+ .title:nth-child(1) {
+ background: url("../../assets/6.png") no-repeat center center;
+ background-size: 100% 100%;
+ padding-left: 30px;
+ }
+
+
.leftData {
display: flex;
flex-direction: column;
- width: 493px;
+ width: 443px;
height: 100%;
padding-right: 20px;
@@ -1012,6 +1021,14 @@
width: 100%;
height: 88%;
}
+
+ .title {
+ background: url("../../assets/3.png") no-repeat center center;
+ background-size: 100% 100%;
+ padding-left: 14px;
+ }
+
+
.noData {
display: flex;
@@ -1034,6 +1051,11 @@
background: #f4f4ff;
padding: 10px;
margin-top: 10px;
+ .title {
+ background: url("../../assets/1.png") no-repeat center center;
+ background-size: 100% 100%;
+ padding-left: 14px;
+ }
.rankChart {
padding: 5px;
@@ -1142,14 +1164,12 @@
background: #f4f4ff;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
border-radius: 10px;
- padding: 14px 20px 20px 20px;
+ padding: 14px 20px 14px 20px;
margin-right: 20px;
.fir {
display: flex;
justify-content: space-between;
- margin-bottom: 10px;
- margin-top: 11px;
.countCard {
background: #ffffff;
@@ -1315,7 +1335,7 @@
background: #f4f4ff;
// margin-bottom: 10px;
padding: 10px;
- width: 473px;
+ width: 423px;
padding-left: 20px;
.companyCard {
@@ -1346,13 +1366,23 @@
.value {
padding-left: 10px;
- margin-bottom: 22px;
+ margin-bottom: 12px;
text-align: left;
font-weight: 900;
font-size: 18px;
color: #0e6efd;
line-height: 21px;
}
+ .onLine{
+ color: #000000;
+ }
+ .breakdown{
+ color: #ffa500;
+ }
+ .abnormal{
+ color: #ff0000;
+ }
+
}
.companyCard:nth-child(2) {
@@ -1379,7 +1409,7 @@
// position: absolute;
// right: 0;
// top: 0;
- width: 493px;
+ width: 443px;
// flex: 1;
display: flex;
flex-direction: column;
@@ -1393,13 +1423,12 @@
// overflow-y: auto;
.title {
- margin-top: 10px;
+ padding: 5px 0;
font-weight: 600;
font-size: 18px;
- color: rgba(0, 0, 0, 0.88);
+ color: #fff;
line-height: 25px;
text-transform: none;
- margin-bottom: 10px;
}
.mt-0 {
@@ -1480,9 +1509,10 @@
flex: 1;
.warnList {
- height: 100%;
+ margin-top: 5px;
+ height: calc(100% - 45px);
overflow-y: auto;
- box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
+ // box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
border-radius: 10px 10px 0px 0px;
background-color: #fff;
@@ -1599,6 +1629,13 @@
background: #f4f4ff;
margin-bottom: 0px !important;
flex: 1;
+
+
+ .title {
+ background: url("../../assets/5.png") no-repeat center center !important;
+ background-size: 100% 100% !important;
+ padding-left: 14px;
+ }
#countChart {
width: 100%;
@@ -1690,6 +1727,9 @@
}
}
}
+ ::v-deep .el-table .el-table__cell{
+ padding:8px 0px !important;
+ }
}
.operate_type {
--
Gitblit v1.7.1