From 94f106e302214174ba757299b92f8546e676d876 Mon Sep 17 00:00:00 2001
From: MrShi <1878285526@qq.com>
Date: 星期三, 07 五月 2025 16:52:36 +0800
Subject: [PATCH] 提交
---
admin/src/views/business/carStatistics.vue | 217 ++++++++++++++++++++++++++++++++++++++----------------
1 files changed, 153 insertions(+), 64 deletions(-)
diff --git a/admin/src/views/business/carStatistics.vue b/admin/src/views/business/carStatistics.vue
index eab7479..6ada707 100644
--- a/admin/src/views/business/carStatistics.vue
+++ b/admin/src/views/business/carStatistics.vue
@@ -3,7 +3,7 @@
<div class="main_head">
<div class="main_head_title">
<span>鍏ュ洯杞﹁締缁熻鎬昏</span>
- <el-radio-group v-model="isGroupBy" size="mini" @change="getData(), getRataLists(), getReportLists()">
+ <el-radio-group v-model="isGroupBy" @change="getData(), getRataLists(), getReportLists()">
<el-radio-button :label="0">鎸夎溅娆＄粺璁�</el-radio-button>
<el-radio-button :label="1">鎸夎溅杈嗙粺璁�</el-radio-button>
</el-radio-group>
@@ -42,14 +42,13 @@
<div class="dept_wrap">
<div class="title">
<span>杞﹁締鍒嗙被缁熻</span>
- <el-radio-group style="margin-left: 20px;" v-model="dateType" size="mini" @change="changeDateType">
- <el-radio-button label="month">鏈�</el-radio-button>
- <el-radio-button label="year">骞�</el-radio-button>
+ <el-radio-group style="margin-left: 20px;" v-model="dateType" @change="changeDateType">
+ <el-radio-button label="month">鏈堝害</el-radio-button>
+ <el-radio-button label="year">骞村害</el-radio-button>
</el-radio-group>
<el-date-picker
v-model="value"
:type="dateType"
- size="mini"
:clearable="false"
@change="getRataLists()"
:value-format="dateType === 'month' ? 'yyyy-MM' : 'yyyy'"
@@ -66,16 +65,15 @@
<div class="main_table">
<div class="main_table_list">
<div class="title" style="display: flex; align-items: center; justify-content: space-between;">
- <div>
+ <div style="display: flex; align-items: center;">
<span>鍏ュ洯杞﹁締缁熻琛�</span>
- <el-radio-group style="margin-left: 20px;" v-model="radio" size="mini" @change="changeBB">
- <el-radio-button label="month">鏈�</el-radio-button>
- <el-radio-button label="year">骞�</el-radio-button>
+ <el-radio-group style="margin-left: 20px;" v-model="radio" @change="changeBB">
+ <el-radio-button label="month">鏈堝害</el-radio-button>
+ <el-radio-button label="year">骞村害</el-radio-button>
</el-radio-group>
<el-date-picker
v-model="date1"
:type="radio"
- size="mini"
:clearable="false"
@change="getReportLists()"
:value-format="radio === 'month' ? 'yyyy-MM' : 'yyyy'"
@@ -83,7 +81,7 @@
placeholder="璇烽�夋嫨">
</el-date-picker>
</div>
- <el-button type="primary" size="mini" style="margin-left: 20px;" @click="daochu">瀵煎嚭</el-button>
+ <el-button type="primary" style="margin-left: 20px;" icon="el-icon-upload2" @click="daochu">瀵煎嚭</el-button>
</div>
<div class="list_head">
<div class="list_head_item" v-for="(item, index) in column" :key="index">{{item}}</div>
@@ -227,9 +225,9 @@
left: 'left'
},
grid: {
- left: '5%',
- right: '10%',
- bottom: '0%',
+ left: '0%',
+ right: '5%',
+ bottom: '10%',
top: '20%',
containLabel: true
},
@@ -243,7 +241,48 @@
series: [
{
data: datas,
- type: 'line'
+ type: 'line',
+ areaStyle: {
+ normal: {
+ color: {
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [{
+ offset: 0,
+ color: '#207FF7' // 0% 澶勭殑棰滆壊
+ }, {
+ offset: 1,
+ color: 'rgba(255,255,255,.2)' // 100% 澶勭殑棰滆壊
+ }],
+ globalCoord: false // 缂虹渷涓� false
+ }
+ }
+ },
+ lineStyle: { // 绾挎潯鏍峰紡
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [{
+ offset: 0, color: '#207FF7' // 0% 澶勭殑棰滆壊
+ }, {
+ offset: 1, color: '#207FF7' // 100% 澶勭殑棰滆壊
+ }]
+ },
+ width: 2 // 绾挎潯绮楃粏
+ },
+ symbol: 'circle',
+ symbolSize: 10,
+ itemStyle: {
+ borderWidth: 1,
+ borderColor: '#fff',
+ color: '#207FF7'
+ },
+ smooth: false
}
]
}
@@ -278,7 +317,24 @@
{
name: '璁块棶鏉ユ簮',
type: 'pie',
- radius: '55%',
+ radius: ['34%', '50%'],
+ labelLine: {
+ normal: {
+ length: 30,
+ length2: 100,
+ }
+ },
+ label: {
+ formatter: "{a|{b}} {d}%",
+ rich: {
+ a: {
+ color: '#333333',
+ fontSize: 14,
+ fontWeight: 500
+ }
+ },
+ padding: [0,-50,20,-100]
+ },
data: data
}
]
@@ -330,21 +386,24 @@
overflow-x: hidden;
padding: 15px;
box-sizing: border-box;
- background-color: #ffffff;
+ background-color: #F4F7FC;
.main_head {
width: 100%;
display: flex;
align-items: center;
flex-direction: column;
- margin-bottom: 20px;
+ margin-bottom: 10px;
+ background-color: #ffffff;
+ padding: 20px;
+ box-sizing: border-box;
.main_head_title {
width: 100%;
display: flex;
align-items: center;
margin-bottom: 20px;
span {
- font-weight: 600;
- font-size: 16px;
+ font-weight: 500;
+ font-size: 18px;
color: #222222;
margin-right: 30px;
}
@@ -355,39 +414,40 @@
align-items: center;
justify-content: space-between;
.blue {
- border-left: 5px solid blue;
+ border-left: 8px solid #12BB8B;
}
.red {
- border-left: 5px solid red;
+ border-left: 8px solid #F6CF46;
}
.yellow {
- border-left: 5px solid yellow;
+ border-left: 8px solid #5DC9FB;
}
.orange {
- border-left: 5px solid orange;
+ border-left: 8px solid #FF9E56;
}
.darkBlue {
- border-left: 5px solid #0000a8;
+ border-left: 8px solid #6B6EFF;
}
.main_head_item {
width: 19%;
- height: 70px;
+ height: 112px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
border-radius: 5px;
- background-color: #ffffff;
+ background-color: #F4F7FC;
span {
&:nth-child(1) {
- font-size: 22px;
- color: black;
- font-weight: bold;
+ font-weight: 600;
+ font-size: 30px;
+ color: #222222;
}
&:nth-child(2) {
- font-size: 16px;
- color: black;
+ font-weight: 400;
+ font-size: 14px;
+ color: #222222;
}
}
}
@@ -396,27 +456,31 @@
.main_table {
display: flex;
- align-items: center;
+ align-items: start;
justify-content: space-between;
- height: 300px;
+ margin-top: 10px;
.main_table_list {
- margin-left: 20px;
+ background-color: #ffffff;
+ padding: 20px;
+ box-sizing: border-box;
flex: 1;
.title {
display: flex;
align-items: center;
span {
- font-weight: 600;
- font-size: 16px;
+ font-weight: 500;
+ font-size: 18px;
color: #222222;
}
}
.list_head {
width: 100%;
- height: 35px;
+ height: 50px;
display: flex;
align-items: center;
- background-color: #ececec;
+ background-color: #F7F7F7;
+ border-left: 1px solid #DFE2E8;
+ border-top: 1px solid #DFE2E8;
margin-top: 15px;
.list_head_item {
flex: 1;
@@ -426,20 +490,25 @@
justify-content: center;
font-size: 13px;
color: #222222;
+ font-weight: 500;
+ border-right: 1px solid #DFE2E8;
}
}
.table_box {
width: 100%;
- height: 234px;
+ border-bottom: 1px solid #DFE2E8;
.list_content {
width: 100%;
- height: 40px;
+ height: 50px;
display: flex;
align-items: center;
+ border-left: 1px solid #DFE2E8;
+ border-top: 1px solid #DFE2E8;
.list_head_item {
flex: 1;
height: 100%;
display: flex;
+ border-right: 1px solid #DFE2E8;
align-items: center;
justify-content: center;
font-size: 13px;
@@ -449,48 +518,64 @@
}
}
.main_table_list1 {
- margin-left: 20px;
- width: 300px;
+ margin-left: 10px;
+ width: 520px;
+ padding: 20px;
+ box-sizing: border-box;
flex-shrink: 0;
+ background-color: #ffffff;
.title {
- font-weight: 600;
- font-size: 16px;
+ font-weight: 500;
+ font-size: 18px;
color: #222222;
}
.list_head {
width: 100%;
- height: 35px;
+ height: 50px;
display: flex;
align-items: center;
- background-color: #ececec;
+ background-color: #F7F7F7;
+ border-left: 1px solid #DFE2E8;
+ border-top: 1px solid #DFE2E8;
margin-top: 15px;
.list_head_item {
- flex: 1;
+ flex: 1.8;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
color: #222222;
+ font-weight: 500;
+ border-right: 1px solid #DFE2E8;
+ &:last-child {
+ flex: 1;
+ }
}
}
.table_box {
width: 100%;
- height: 234px;
+ border-bottom: 1px solid #DFE2E8;
.list_content {
width: 100%;
- height: 40px;
+ height: 50px;
display: flex;
align-items: center;
+ border-left: 1px solid #DFE2E8;
+ border-top: 1px solid #DFE2E8;
.list_head_item {
- flex: 1;
+ flex: 1.8;
height: 100%;
display: flex;
align-items: center;
+ border-right: 1px solid #DFE2E8;
justify-content: center;
text-align: center;
font-size: 13px;
color: #222222;
+ &:last-child {
+ flex: 1;
+ }
}
}
}
@@ -499,38 +584,42 @@
.main_content {
display: flex;
+ align-items: center;
+ justify-content: space-between;
height: 400px;
.title {
- font-weight: 600;
- font-size: 16px;
+ font-weight: 500;
+ font-size: 18px;
color: #222222;
- /*margin-bottom: 20px;*/
- margin-top: 20px;
}
.type_wrap {
- flex: 11;
- flex-shrink: 0;
- height: calc(100% - 20px);
+ flex: 1;
+ height: 100%;
+ background-color: #ffffff;
+ padding: 20px;
+ box-sizing: border-box;
/*border-right: 12px solid #f7f7f7;*/
#echart1 {
width: 100%;
- height: calc(100% - 60px);
+ height: 100%;
}
}
.dept_wrap {
- flex: 8;
+ width: 520px;
flex-shrink: 0;
- height: calc(100% - 20px);
- padding-left: 20px;
-
+ height: 100%;
+ background-color: #ffffff;
+ padding: 20px;
+ box-sizing: border-box;
+ margin-left: 10px;
.echart_2 {
width: 100%;
- height: calc(100% - 60px);
+ height: 100%;
}
}
}
--
Gitblit v1.9.3