@@ -125,10 +125,13 @@ const handle_drawer = async () => {
}
.ac {
- border: 1px solid white;
+ padding: 10px 0;
+ // border: 1px solid white;
border-radius: 10px;
margin-bottom: 30px;
- background-color: white;
+ // background-color: white;
+ background-image: linear-gradient(to right, #868f96 0%, #596164 100%);
+ color: #fff;
}
.ac .info {
@@ -161,7 +164,7 @@ const handle_drawer = async () => {
}
.down_btn {
- background: #1b1f83;
+ background: #131a1f;
color: #fff;
}
diff --git a/src/views/home/charging/index.css b/src/views/home/charging/index.css
index 827003e..8a09bb1 100644
--- a/src/views/home/charging/index.css
+++ b/src/views/home/charging/index.css
@@ -15,7 +15,6 @@
.title_tops .top_kuang {
width: 100%;
height: 80px;
- filter: drop-shadow(2px 2px 2px #ccc);
}
.title_tops .left_imgs_posi {
height: 100%;
@@ -30,8 +29,13 @@
.title_tops .left_imgs_posi span:first-child {
width: 270px;
height: 40px;
- background: url('../../../assets/imgs/充电数据监控大屏.png') no-repeat center;
- background-size: 100% 100%;
+ font-size: 30px;
+ font-weight: bold;
+ background-image: linear-gradient(to right, #868f96 0%, #596164 100%);
+ background-clip: text;
+ -webkit-text-fill-color: transparent;
+ font-family: emoji;
+ font-style: italic;
}
.title_tops .left_imgs_posi span:last-child {
color: #1f34d5;
@@ -41,7 +45,7 @@
}
.bot_main {
height: calc(100% - 60px);
- padding: 10px 0;
+ padding: 10px 0 0 0;
box-sizing: border-box;
}
.bot_main .el-col {
@@ -55,9 +59,9 @@
flex-direction: column;
}
.bot_main .left_hinge > div {
- background: #fff;
- box-shadow: 2px 2px 2px #ccc;
+ background: #28353f;
border-radius: 5px;
+ color: #fff;
}
.bot_main .left_hinge > div:first-child {
flex: 1;
@@ -93,44 +97,29 @@
.bot_main .left_hinge .batter_dates {
margin-top: 10px;
flex: 1;
- display: flex;
- flex-direction: column;
}
-.bot_main .left_hinge .batter_dates > div {
- flex: 1;
- padding: 5px;
- box-sizing: border-box;
+.bot_main .left_hinge .batter_dates .allow_infos {
display: flex;
}
-.bot_main .left_hinge .batter_dates > div > div {
+.bot_main .left_hinge .batter_dates .allow_infos > div {
flex: 1;
- height: 100%;
-}
-.bot_main .left_hinge .batter_dates > div .allow_big {
- display: flex;
- flex-direction: column;
- align-items: start;
- justify-content: space-evenly;
-}
-.bot_main .left_hinge .batter_dates > div .allow_big > div {
+ margin: 0 5px;
+ height: 80px;
+ background: url('../../../assets/imgs/sort_three.png') no-repeat center;
+ background-size: 100% 100%;
display: flex;
align-items: center;
+ justify-content: center;
}
-.bot_main .left_hinge .batter_dates > div .allow_big > div span:first-child {
- width: 10px;
- height: 10px;
- border: 1px solid #1c3dc2;
-}
-.bot_main .left_hinge .batter_dates > div .allow_big > div span:last-child {
- margin-left: 5px;
- font-size: 14px;
-}
-.bot_main .left_hinge .batter_dates > div .allow_big > span {
- margin-left: 15px;
+.bot_main .left_hinge .batter_dates .allow_infos > div:last-child {
+ background: url('../../../assets/imgs/sort_two.png') no-repeat center;
+ background-size: 100% 100%;
}
-.bot_main .left_hinge .batter_dates > div:nth-child(1),
-.bot_main .left_hinge .batter_dates > div:nth-child(2) {
- border-bottom: 1px solid #ccc;
+.bot_main .left_hinge .batter_dates .echarts_battery {
+ margin-top: 10px;
+ height: calc(100% - 90px);
+ padding: 10px;
+ box-sizing: border-box;
}
.bot_main .left_hinge .batter_charts {
padding: 10px;
@@ -142,10 +131,7 @@
height: 100%;
}
.bot_main .hinge_topsdates {
- height: 35px;
- background: #1c3dc2;
- border-radius: 5px;
- padding-left: 10px;
+ padding-left: 5px;
font-size: 12px;
display: flex;
align-items: center;
@@ -155,8 +141,7 @@
font-size: 20px !important;
}
.bot_main .strategy_center {
- background: #fff;
- box-shadow: 2px 2px 2px #ccc;
+ background: #28353f;
border-radius: 5px;
padding: 5px 10px 5px 10px;
box-sizing: border-box;
@@ -228,7 +213,7 @@
margin-left: 10px;
font-size: 25px;
font-weight: bold;
- color: black;
+ color: #fff;
letter-spacing: 2px;
}
.bot_main .strategy_center .strategy_soc i {
@@ -267,23 +252,22 @@
}
}
.bot_main .strategy_center .center_table {
- margin-top: 10px;
flex: 1;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
- overflow: hidden;
- overflow-y: scroll;
+ padding-bottom: 5px;
+ box-sizing: border-box;
}
.bot_main .strategy_center .center_table > div {
- width: 32%;
- height: 50%;
- background: #edeef0;
+ width: 24%;
+ height: 49%;
+ background-image: linear-gradient(to right, #868f96 0%, #596164 100%);
border-radius: 8px;
padding: 10px 10px;
box-sizing: border-box;
font-size: 12px;
- color: #000;
+ color: #fff;
margin: 5px;
}
.bot_main .strategy_center .center_table > div .title {
diff --git a/src/views/home/charging/index.less b/src/views/home/charging/index.less
index 2bbb601..482b439 100644
--- a/src/views/home/charging/index.less
+++ b/src/views/home/charging/index.less
@@ -18,7 +18,7 @@
.top_kuang {
width: 100%;
height: 80px;
- filter: drop-shadow(2px 2px 2px #ccc);
+ // filter: drop-shadow(2px 2px 2px #ccc);
}
.left_imgs_posi {
@@ -34,8 +34,13 @@
span:first-child {
width: 270px;
height: 40px;
- background: url('../../../assets/imgs/充电数据监控大屏.png')no-repeat center;
- background-size: 100% 100%;
+ font-size: 30px;
+ font-weight: bold;
+ background-image: linear-gradient(to right, #868f96 0%, #596164 100%);
+ background-clip: text;
+ -webkit-text-fill-color: transparent;
+ font-family: emoji;
+ font-style: italic;
}
span:last-child {
@@ -51,7 +56,7 @@
.bot_main {
// margin-top: 10px;
height: calc(100% - 60px);
- padding: 10px 0;
+ padding: 10px 0 0 0;
box-sizing: border-box;
.el-col {
@@ -68,9 +73,10 @@
flex-direction: column;
>div {
- background: #fff;
- box-shadow: 2px 2px 2px #ccc;
+ background: #28353f;
+ // box-shadow: 2px 2px 2px #ccc;
border-radius: 5px;
+ color: #fff;
}
>div:first-child {
@@ -115,54 +121,35 @@
.batter_dates {
margin-top: 10px;
flex: 1;
- // background: #1c3dc2;
- display: flex;
- flex-direction: column;
- >div {
- flex: 1;
- padding: 5px;
- box-sizing: border-box;
+ // display: flex;
+ .allow_infos {
display: flex;
>div {
flex: 1;
- height: 100%;
- }
-
- .allow_big {
+ margin: 0 5px;
+ height: 80px;
+ background: url('../../../assets/imgs/sort_three.png')no-repeat center;
+ background-size: 100% 100%;
display: flex;
- flex-direction: column;
- align-items: start;
- justify-content: space-evenly;
-
- >div {
- display: flex;
- align-items: center;
-
- span:first-child {
- width: 10px;
- height: 10px;
- border: 1px solid #1c3dc2;
- }
-
- span:last-child {
- margin-left: 5px;
- font-size: 14px;
- }
- }
-
- >span {
- margin-left: 15px;
- }
+ align-items: center;
+ justify-content: center;
+ }
+ >div:last-child {
+ background: url('../../../assets/imgs/sort_two.png')no-repeat center;
+ background-size: 100% 100%;
}
}
- >div:nth-child(1),
- >div:nth-child(2) {
- border-bottom: 1px solid #ccc;
+ .echarts_battery {
+ margin-top: 10px;
+ height: calc(100% - 90px);
+ padding: 10px;
+ box-sizing: border-box;
}
+
}
.batter_charts {
@@ -179,10 +166,10 @@
}
.hinge_topsdates {
- height: 35px;
- background: #1c3dc2;
- border-radius: 5px;
- padding-left: 10px;
+ // height: 35px;
+ // background: #1c3dc2;
+ // border-radius: 5px;
+ padding-left: 5px;
font-size: 12px;
display: flex;
align-items: center;
@@ -195,8 +182,8 @@
}
.strategy_center {
- background: #fff;
- box-shadow: 2px 2px 2px #ccc;
+ background: #28353f;
+ // box-shadow: 2px 2px 2px #ccc;
border-radius: 5px;
padding: 5px 10px 5px 10px;
box-sizing: border-box;
@@ -293,7 +280,7 @@
// font-family: UnidreamLED;
font-size: 25px;
font-weight: bold;
- color: black;
+ color: #fff;
letter-spacing: 2px;
}
@@ -343,25 +330,26 @@
}
.center_table {
- margin-top: 10px;
flex: 1;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
- overflow: hidden;
- overflow-y: scroll;
+ padding-bottom: 5px;
+ box-sizing: border-box;
>div {
- width: 32%;
- height: 50%;
- background: #edeef0;
+ width: 24%;
+ height: 49%;
+ background-image: linear-gradient(to right, #868f96 0%, #596164 100%);
+ // background: #edeef0;
// border: 2px solid #ccc;
border-radius: 8px;
padding: 10px 10px;
box-sizing: border-box;
font-size: 12px;
- color: #000;
+ color: #fff;
margin: 5px;
+
.title {
font-size: 18px;
font-weight: bold;
diff --git a/src/views/home/charging/index.vue b/src/views/home/charging/index.vue
index aee7a2e..accc9cc 100644
--- a/src/views/home/charging/index.vue
+++ b/src/views/home/charging/index.vue
@@ -1,13 +1,13 @@
-
+
-
+ 充电数据监控大屏
Charging date monItoring screen
-
+
@@ -15,58 +15,34 @@
关键数据 / KEY DATA
+
-
+
-
-
-
-
- {{ char_nums_obj.chargeTotalCount }}
-
-
{{ $t('message.charging.totalChargingTimes') }}
-
-
-
-
- {{ char_nums_obj.chargeTodayCount }}
-
-
{{ $t('message.charging.todayChargingTimes') }}
-
-
-
-
-
-
- {{ batter_status.btyTotalCount }}
-
-
{{ $t('message.charging.totalBatteriesInStation') }}
+
+
+
+
+
+
+
+
+
-
-
-
- {{ batter_status.canSwapCount }}
-
-
{{ $t('message.charging.availableBatteries') }}
+
+
+
+
+
+
+
+
-
-
-
-
- {{ batter_status.chargingCount }}
-
-
{{ $t('message.charging.chargingBatteries') }}
-
-
-
-
+
+
+
@@ -110,7 +86,9 @@
-
{{ $t('message.charging.relocate') }}
+
{{
+ $t('message.charging.relocate')
+ }}
{{ $t('message.charging.operation') }}
@@ -123,17 +101,6 @@
-
@@ -161,10 +128,6 @@
{{ $t('message.charging.remainingTime') }}:
{{ item.estimatedRemainingTime }} (min)
-
{{ $t('message.charging.requestedVoltage') }}:
{{ item.bmsNeedVoltage }} (V)
@@ -178,6 +141,10 @@
{{ item.totalCurrent }} (A)
+ {{ $t('message.charging.power') }}:
+ {{ (item.power / 1000).toFixed(2) }} (KW)
+
+
-
- {{ $t('message.charging.power') }}:
- {{ (item.power / 1000).toFixed(2) }} (KW)
-
+
+
{{ $t('message.charging.authenticationRequired') }}:
{{ $t('message.charging.isyes') }}
{{ $t('message.charging.isno') }}
-
+
-->
@@ -259,6 +214,7 @@
+