BatteryStatus.vue 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190
  1. <template>
  2. <div>
  3. <!-- <div class="communication">
  4. <div><img src="../assets/cangwei.png" />{{storeCode}}号仓位</div>
  5. <div :class="statustext[1]">{{statustext[0]}}</div>
  6. </div> -->
  7. <div class="battery-number">
  8. <span>电池编号</span><span>{{sn}}</span>
  9. </div>
  10. <div class="percent">
  11. <div><span>{{soc | exchangerFilter}}</span></div>
  12. <div>%</div>
  13. </div>
  14. <div class="line"><span></span><span></span></div>
  15. <div class="power">
  16. <div class="power-percent">
  17. <span v-for="item in 100" :key="item" :style="{'backgroundColor': soc >= item ? setcolor :''}"></span>
  18. </div>
  19. <div class="power-text">
  20. <span>电池电量</span>
  21. <span v-if="showCode ==0">预计 <em>{{chgEstimatedTime}}</em> 分钟后充满</span>
  22. </div>
  23. </div>
  24. </div>
  25. </template>
  26. <script>
  27. export default {
  28. name: "BatteryStatus",
  29. props:['storeCode','comState','sn','chgEstimatedTime','soc','showCode'],
  30. computed:{
  31. statustext(){
  32. if(this.comState===1){
  33. return ['通讯正常','success']
  34. }else{
  35. return ['通讯异常','warning']
  36. }
  37. },
  38. setcolor(){
  39. if(this.soc<=30 && this.soc > 0){
  40. return '#ce4545'
  41. }else if(this.soc > 30 && this.soc <= 70){
  42. return '#f8dc4b'
  43. }else if(this.soc > 70){
  44. return '#44ab41'
  45. }
  46. }
  47. }
  48. };
  49. </script>
  50. <style lang="scss" scoped>
  51. .communication {
  52. display: flex;
  53. justify-content: space-between;
  54. div {
  55. line-height: 36px;
  56. font-size: 16px;
  57. font-weight: 600;
  58. height: 36px;
  59. text-align: center;
  60. }
  61. @media screen and (min-width: 1024px) and (max-width: 1153px) {
  62. div{
  63. font-weight: normal;
  64. font-size: 12px;
  65. white-space:nowrap;
  66. transform: scale(0.9);
  67. }
  68. }
  69. div:first-child {
  70. background-color: #1b263a;
  71. border: #25334d solid 1px;
  72. color: white;
  73. line-height: 34px;
  74. text-align: left;
  75. padding: 0 5px;
  76. img {
  77. vertical-align: middle;
  78. width: 30px;
  79. height: 30px;
  80. }
  81. @media screen and (min-width: 1024px) and (max-width: 1153px) {
  82. img{
  83. transform: scale(1.1);
  84. margin-bottom: 3px;
  85. }
  86. }
  87. }
  88. .success {
  89. color: #92fdb9;
  90. text-align: right;
  91. }
  92. .warning {
  93. color: #ff4d4f;
  94. text-align: right;
  95. }
  96. }
  97. .battery-number {
  98. margin-top: 16px;
  99. display: flex;
  100. :last-child {
  101. color: white;
  102. padding-left: 10px;
  103. font-size: 14px;
  104. font-weight: 600;
  105. }
  106. }
  107. .percent {
  108. margin-top: 16px;
  109. display: flex;
  110. div:first-child {
  111. background-color: #181e2a;
  112. width: 90%;
  113. border-radius: 5px;
  114. height: 10px;
  115. span {
  116. color: white;
  117. font-weight: 600;
  118. font-size: 16px;
  119. position: relative;
  120. bottom: 5px;
  121. }
  122. }
  123. :last-child {
  124. position: relative;
  125. bottom: 4px;
  126. width: 30px;
  127. text-align: right;
  128. font-weight: 500;
  129. }
  130. }
  131. .line {
  132. display: flex;
  133. :first-child {
  134. width: 1%;
  135. background-color: white;
  136. height: 2px;
  137. }
  138. :last-child {
  139. height: 2px;
  140. width: 97%;
  141. background-color: #14172a;
  142. margin-left: 5px;
  143. }
  144. }
  145. .power {
  146. display: flex;
  147. flex-direction: column;
  148. margin-top: 10px;
  149. .power-percent {
  150. width: 100%;
  151. display: flex;
  152. span {
  153. background-color: #1e2535;
  154. height: 6px;
  155. width: 2px;
  156. margin-right: 1px;
  157. }
  158. }
  159. .power-text {
  160. display: flex;
  161. width: 100%;
  162. margin-top: 1.2vh;
  163. margin-bottom: 0.8vh;
  164. justify-content: space-between;
  165. em {
  166. color: #246CF9;
  167. font-weight: 500;
  168. font-style: normal;
  169. }
  170. }
  171. }
  172. </style>