Browse Source

修改主页样式

a1140836302 2 years ago
parent
commit
0a5f175a4f

+ 5 - 0
src/filters/index.js

@@ -69,3 +69,8 @@ export function numFilter(value) {
   const realVal = parseFloat(value).toFixed(2)
   return realVal
 }
+
+export function exchangerFilter(value) {
+  const realVal = parseFloat(value).toFixed(1)
+  return realVal
+}

+ 3 - 3
src/layout/components/Navbar.vue

@@ -184,7 +184,7 @@ export default {
       display: none;
     }
     div{
-      margin-right: 40px;
+      margin-right: 35px;
     }
     .routerlink{
       position: relative;
@@ -233,7 +233,7 @@ export default {
     padding-right: 1rem;
   }
   .date-time {
-    width: 30%;
+    width: 32%;
     color: white;
     display: flex;
     flex-direction: row;
@@ -263,7 +263,7 @@ export default {
       }
     }
   .day-value {
-    font-size: 0.5rem;
+    font-size: 14px;
     line-height: 1.2rem;
     font-family: "微软雅黑";
   }

+ 7 - 7
src/views/power-change-monitoring/components/BinInfomation.vue

@@ -8,7 +8,7 @@
         </div>
         <div class="battery-yellow-text">
           <p>SOC</p>
-          <p>{{ BatteryOnCar }}%</p>
+          <p>{{ BatteryOnCar | exchangerFilter }}%</p>
         </div>
       </div>
     </div>
@@ -16,17 +16,17 @@
       <div v-for="(item, index) in storeInfoList" :key="index" class="battery-list">
         <div v-if="Carconnection(index)" class="battery-listbg" :class="[greenBattery(index),setBatteryBg(index)]">
           <template v-if="step >= 3 && swapCode === index">
-            <p v-show="swapSoc">SOC  {{ swapSoc }}%</p>
-            <p v-show="swapCurrent">{{ swapCurrent }} A</p>
+            <p v-show="swapSoc">SOC  {{ swapSoc | exchangerFilter }}%</p>
+            <p v-show="swapCurrent">{{ swapCurrent | exchangerFilter }} A</p>
           </template>
           <template v-else>
-            <p v-show="item.soc">SOC  {{ item.soc }}%</p>
-            <p v-show="item.current">{{ item.current }} A</p>
+            <p v-show="item.soc">SOC  {{ item.soc | exchangerFilter }}%</p>
+            <p v-show="item.current">{{ item.current | exchangerFilter }} A</p>
           </template>
         </div>
         <div v-if="swapCode === index" class="battery-defaultcls defaultbg">
-          <p v-show="item.soc && yellowBattery.yellowshow">SOC  {{ item.soc }}%</p>
-          <p v-show="item.current && yellowBattery.yellowshow">{{ item.current }} A</p>
+          <p v-show="item.soc && yellowBattery.yellowshow">SOC  {{ item.soc | exchangerFilter }}%</p>
+          <p v-show="item.current && yellowBattery.yellowshow">{{ item.current | exchangerFilter }} A</p>
         </div>
         <div class="battery-liststatus">
           <img v-show="item.chargerInfoVo.chgState === 0" src="../assets/status0.png">

+ 5 - 3
src/views/power-change-monitoring/components/SubTitle.vue

@@ -14,9 +14,9 @@
           换电时间:<font>{{ swapTime }}</font>
         </div>  
         <div class="handleList"  v-if="swaplogInfo">
-          <div class="plcState"><span>机器人状态:</span>{{ plcState }}</div>
-          <div class="plcState"><span>机器人暂停状态:</span>{{ plcpause?'暂停':'正常' }}</div>
-          <div class="plcState"><span>屏蔽锁止状态:</span>{{ forbidLockState==1?'已屏蔽':'正常' }}</div>
+          <div class="plcState"><span>运行状态:</span>{{ plcState }}</div>
+          <div class="plcState"><span>暂停状态:</span>{{ plcpause?'暂停':'正常' }}</div>
+          <div class="plcState"><span>锁止状态:</span>{{ forbidLockState==1?'已屏蔽':'正常' }}</div>
           <div class="store-list" @click="HandleSwapplc(5)">继续</div>
           <div class="store-list" @click="HandleSwapplc(4)" >暂停</div>
           <div class="store-list" @click="HandleIsLock(1)" >锁止屏蔽</div>
@@ -201,12 +201,14 @@ export default {
   color: #86edab;
   padding-right: 30px;
   line-height: 32px;
+  font-size: 14px;
 }
 .plcState span{
   color: #596189;
 }
 .handleList{
   display: flex;
+  font-size: 14px;
 }
 .timestate{
   display: flex;

+ 1 - 1
src/views/power-change-monitoring/index.vue

@@ -210,7 +210,7 @@
           <div v-for="item in carRecord" :key="item.id" class="record-row">
             <span class="v-plate">{{ item.vehiclePlate }}</span>
             <span class="v-type">{{ item.modelName }}</span>
-            <span class="v-power color-blue">{{ item.swapCapacity }}</span>
+            <span class="v-power color-blue">{{ item.swapCapacity }} kWh</span>
             <span class="v-time">{{ item.swapBeginTime }}</span>
           </div>
         </div>