修改轮胎生命周期

ruoyi-ui/src/views/tireManagement/lifecycle/index.vue

@@ -3,9 +3,9 @@
     <div class="topLeft">
       <img alt="" src="@/assets/images/lifecycle/tyre.png" style="height: 100%">
       <div
-          style="line-height:26px;margin-left: 10px;width: calc(100% - 150px);display: inline-block;vertical-align:top;">
+          style="color:white;line-height:26px;margin-left: 10px;width: calc(100% - 150px);display: inline-block;vertical-align:top;">
         <div>{{ tireInfo.title }}</div>
-        <div>品牌:{{ tireInfo.info1 }} 规格:{{ tireInfo.info2 }} 花纹:{{ tireInfo.info3 }}</div>
+        <div>品牌：{{ tireInfo.info1 }} 规格：{{ tireInfo.info2 }} 花纹：{{ tireInfo.info3 }}</div>
         <div>
           <span class="yellow">使用时间&nbsp;&nbsp;</span>
           <span>{{ tireInfo.info4 }}&nbsp;&nbsp;</span>
@@ -16,7 +16,7 @@
         </div>
         <div>
           <span class="yellow">预计剩余里程&nbsp;&nbsp;</span>
-          <span>{{ tireInfo.info7 }}&nbsp;&nbsp;</span>
+          <span>{{ tireInfo.info7 }}km&nbsp;&nbsp;</span>
           <span class="yellow">最长连续工作时间&nbsp;&nbsp;</span>
           <span>{{ tireInfo.info8 }}&nbsp;&nbsp;</span>
           <span class="yellow">历史最高胎温&nbsp;&nbsp;</span>
@@ -36,7 +36,7 @@
       <span class="title">已行驶</span>
       <span class="percentage">约占整个生命周期的{{ percentage }}%</span>
       <span class="run">{{ run }}km</span>
-      <div class="runWay" :style="`left:${parseFloat(percentage)}%`"></div>
+      <div :style="`left:${parseFloat(percentage)}%`" class="runWay"></div>
       <div class="bottomWay"></div>
     </div>
     <div ref="way" class="root" @wheel="wayWheel">
@@ -73,20 +73,23 @@ const way = ref()
 const wayWheel = (e) => {
   way.value.scrollLeft += (e.deltaY || 0)
 }
+
 const percentage = '3.33'
+
 const run = '3.33'
+
 const tireInfo = {
   title: 'F35D090D785',
   info1: '品牌',
   info2: '规格',
   info3: '花纹',
-  info4: '使用时间',
-  info5: '最长连续报警时间',
-  info6: '历史最高胎压',
-  info7: '预计剩余里程',
-  info8: '最长连续工作时间',
-  info9: '历史最高胎温',
-  info10: '报警次数',
+  info4: '10h',
+  info5: '10h',
+  info6: '40°C',
+  info7: '666',
+  info8: '10h',
+  info9: '40°C',
+  info10: '1',
   war: [
     {
       type: '高温',
@@ -94,8 +97,6 @@ const tireInfo = {
     }
   ]
 }
-const wayList = ref([])
-const repetitiveBackground = ref(0)
 
 let list = [
   {
@@ -131,6 +132,7 @@ let list = [
     info: '5'
   },
 ]
+
 const fun = () => {
   list = list.sort((a, b) => {
     return a.time - b.time
@@ -150,6 +152,10 @@ const fun = () => {
   wayList.value = arr
   repetitiveBackground.value = Math.ceil(arr.at(-1).step / 10)
 }
+
+const wayList = ref([])
+const repetitiveBackground = ref(0)
+
 fun()
 </script>
 <style lang="scss">
@@ -179,7 +185,7 @@ fun()
     font-size: 20px;
     position: absolute;
     top: 4px;
-    left:8px
+    left: 8px
   }
 
   .percentage {
@@ -187,7 +193,7 @@ fun()
     font-size: 20px;
     position: absolute;
     top: 4px;
-    right:8px
+    right: 8px
   }
 
   .run {
@@ -195,23 +201,25 @@ fun()
     font-size: 28px;
     position: absolute;
     top: 40px;
-    left:8px
+    left: 8px
   }
-  .bottomWay{
+
+  .bottomWay {
     position: absolute;
     width: 100%;
     height: 40px;
     bottom: 0;
     background: url("../../../assets/images/lifecycle/way.png") no-repeat;
-    background-size: 100% 100% ;
+    background-size: 100% 100%;
   }
-  .runWay{
+
+  .runWay {
     position: absolute;
     width: 36px;
     height: 60px;
     bottom: 20px;
     background: url("../../../assets/images/lifecycle/tyre.png") no-repeat;
-    background-size: 100% 100% ;
+    background-size: 100% 100%;
   }
 }