新增轮胎生命周期

ruoyi-ui/src/api/tireManagement/lifecycle.js

@@ -0,0 +1,19 @@
+import request from '@/utils/request'
+
+// 查询列表
+export function listBaseCar(query) {
+    return request({
+        url: '/basecar/car/list',
+        method: 'get',
+        params: query
+    })
+}
+// 查询列表
+export function getCarGpsList(query) {
+    return request({
+        url: '/basecar/car/getCarGpsList',
+        method: 'get',
+        params: query
+    })
+}
+

ruoyi-ui/src/views/realTimeMonitoring/carMonitoring/index.vue

@@ -24,7 +24,7 @@
             </span>
           </div>
           <div style="width: 100px;float:left;">
-            <span style="font-weight: 600;font-size: 20px;line-height: 100px">单车监控</span>
+            <span style="font-weight: 600;font-size: 20px;line-height: 40px">单车监控</span>
           </div>
           <div style="width: calc(50% - 50px);float:left;">
             <span style="font-weight: 600;font-size: 16px;color:#cba658;line-height: 100px">
@@ -119,6 +119,7 @@ import {useI18n} from "vue-i18n";
 import {ref} from 'vue'
 import {useRouter} from 'vue-router';
 import {parseTime} from "@/utils/ruoyi";
+import {onBeforeUnmount} from "@vue/runtime-core";
 
 const {proxy} = getCurrentInstance();
 const $router = useRouter();
@@ -242,6 +243,10 @@ const setMarker = (res) => {
   map.setFitView()
   map.setZoom(8)
 }
+onBeforeUnmount(() => {
+  map.destroy()
+  map = null
+})
 </script>
 <style lang="scss">
 .container1 {

ruoyi-ui/src/views/realTimeMonitoring/vehicleMonitoring/index.vue

@@ -9,6 +9,7 @@
 import AMapLoader from '@amap/amap-jsapi-loader';
 import {getCarGpsList, listBasetyre} from '@/api/realTimeMonitoring/vehicleMonitoring'
 import {parseTime} from "@/utils/ruoyi";
+import {onBeforeUnmount} from "@vue/runtime-core";
 
 const {proxy} = getCurrentInstance();
 let map = null
@@ -94,7 +95,10 @@ listBasetyre().then(e => {
   treeData.value = newObj
   console.log(newObj)
 })
-
+onBeforeUnmount(() => {
+  map.destroy()
+  map = null
+})
 </script>
 <style>
 .tree {

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

@@ -0,0 +1,285 @@
+<template>
+  <div class="index">
+    <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;">
+        <div>{{ tireInfo.title }}</div>
+        <div>品牌:{{ tireInfo.info1 }} 规格:{{ tireInfo.info2 }} 花纹:{{ tireInfo.info3 }}</div>
+        <div>
+          <span class="yellow">使用时间&nbsp;&nbsp;</span>
+          <span>{{ tireInfo.info4 }}&nbsp;&nbsp;</span>
+          <span class="yellow">最长连续报警时间&nbsp;&nbsp;</span>
+          <span>{{ tireInfo.info5 }}&nbsp;&nbsp;</span>
+          <span class="yellow">历史最高胎压&nbsp;&nbsp;</span>
+          <span>{{ tireInfo.info6 }}&nbsp;&nbsp;</span>
+        </div>
+        <div>
+          <span class="yellow">预计剩余里程&nbsp;&nbsp;</span>
+          <span>{{ tireInfo.info7 }}&nbsp;&nbsp;</span>
+          <span class="yellow">最长连续工作时间&nbsp;&nbsp;</span>
+          <span>{{ tireInfo.info8 }}&nbsp;&nbsp;</span>
+          <span class="yellow">历史最高胎温&nbsp;&nbsp;</span>
+          <span>{{ tireInfo.info9 }}&nbsp;&nbsp;</span>
+        </div>
+        <div>
+          <span class="yellow">报警次数&nbsp;&nbsp;</span>
+          <span>{{ tireInfo.info10 }}&nbsp;&nbsp;</span>
+          <div v-for="item in tireInfo.war" style="display: inline-block">
+            <span>{{ item.type }}&nbsp;&nbsp;</span>
+            <span>{{ item.num }}&nbsp;&nbsp;</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="topRight">
+      <span class="title">已行驶</span>
+      <span class="percentage">约占整个生命周期的{{ percentage }}%</span>
+      <span class="run">{{ run }}km</span>
+      <div class="runWay" :style="`left:${parseFloat(percentage)}%`"></div>
+      <div class="bottomWay"></div>
+    </div>
+    <div ref="way" class="root" @wheel="wayWheel">
+      <div class="way">
+        <div v-for="(item,index) in repetitiveBackground" :style="'left:'+index*100+'%'" class="bg">
+        </div>
+      </div>
+      <div v-for="(i,index) in wayList" :style="`left:${(i.step)*10}%`" class="mark">
+        <div class="dot"></div>
+        <div :style="'transform: translate(-50%, calc(-'+(index%2===0?1:'')+'00% - 40px))'" class="wire">
+          <div :style="'top:'+(index%2===0?'':1)+'00%;'" class="info">
+            <div style="width:100%">
+              <span>
+                <Aim style="display:inline-block;position: absolute;top: 10px;left:4px" width="20"/>
+                <span style="margin-left:26px;font-size:18px;line-height: 40px">注册</span>
+              </span>
+            </div>
+            <div>{{ parseTime(new Date(i.time), '{y}-{m}-{d}') }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import AMapLoader from '@amap/amap-jsapi-loader';
+import {getCarGpsList, listBaseCar} from '@/api/tireManagement/lifecycle'
+import {parseTime} from "@/utils/ruoyi";
+import {onBeforeUnmount} from "@vue/runtime-core";
+
+const {proxy} = getCurrentInstance();
+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: '报警次数',
+  war: [
+    {
+      type: '高温',
+      num: 1
+    }
+  ]
+}
+const wayList = ref([])
+const repetitiveBackground = ref(0)
+
+let list = [
+  {
+    time: 1678059835735,
+    info: '123'
+  },
+  {
+    time: 1658170035735,
+    info: '2'
+  },
+  {
+    time: 1678259824735,
+    info: '3'
+  },
+  {
+    time: 1678154445735,
+    info: '4'
+  },
+  {
+    time: 1678199843735,
+    info: '5'
+  },
+  {
+    time: 1678199843735,
+    info: '5'
+  },
+  {
+    time: 1678199843735,
+    info: '5'
+  },
+  {
+    time: 1678199843735,
+    info: '5'
+  },
+]
+const fun = () => {
+  list = list.sort((a, b) => {
+    return a.time - b.time
+  })
+  let arr = []
+  list.forEach((e, index) => {
+    let step = (e.time - list[index - 1]?.time) / 1000 / 60 / 60 / 24 || 0
+    if (step > 1) {
+      step = 1 + ((step - 1) / 100)
+    } else {
+      step = 1
+    }
+    step += arr[index - 1]?.step || 0
+    arr[index] = {...e, step}
+  })
+  console.log(arr)
+  wayList.value = arr
+  repetitiveBackground.value = Math.ceil(arr.at(-1).step / 10)
+}
+fun()
+</script>
+<style lang="scss">
+.yellow {
+  color: yellow;
+}
+
+.topLeft {
+  width: 65%;
+  height: 20vh;
+  position: absolute;
+  top: 10px;
+  left: 10px
+}
+
+.topRight {
+  width: 30%;
+  height: 150px;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  border-radius: 14px;
+  background-color: rgba(19, 117, 142, 0.4);
+
+  .title {
+    color: #fff;
+    font-size: 20px;
+    position: absolute;
+    top: 4px;
+    left:8px
+  }
+
+  .percentage {
+    color: #fff;
+    font-size: 20px;
+    position: absolute;
+    top: 4px;
+    right:8px
+  }
+
+  .run {
+    color: #fff;
+    font-size: 28px;
+    position: absolute;
+    top: 40px;
+    left:8px
+  }
+  .bottomWay{
+    position: absolute;
+    width: 100%;
+    height: 40px;
+    bottom: 0;
+    background: url("../../../assets/images/lifecycle/way.png") no-repeat;
+    background-size: 100% 100% ;
+  }
+  .runWay{
+    position: absolute;
+    width: 36px;
+    height: 60px;
+    bottom: 20px;
+    background: url("../../../assets/images/lifecycle/tyre.png") no-repeat;
+    background-size: 100% 100% ;
+  }
+}
+
+.index {
+  width: 100%;
+  height: calc(100vh - 84px);
+  background: url("../../../assets/images/lifecycle/bg.jpg") no-repeat;
+  background-size: 100% 100%;
+}
+
+.root::-webkit-scrollbar {
+  height: 0;
+}
+
+.root {
+  position: absolute;
+  width: 100%;
+  bottom: 0;
+  height: calc(80vh - 84px);
+  overflow-x: auto;
+  overflow-y: hidden;
+
+  .way {
+    position: absolute;
+    white-space: nowrap;
+    top: 50%;
+    width: 100%;
+    height: 77px;
+    transform: translateY(calc(-100% + 17px + 30px));
+
+  }
+
+  .bg {
+    position: absolute;
+    float: left;
+    display: inline-block;
+    width: 100%;
+    height: 60px;
+    background: url("../../../assets/images/lifecycle/way.png") no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .mark {
+    position: absolute;
+    top: calc(50% + 30px);
+
+    .dot {
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      background-color: #fff;
+      transform: translate(-50%, -35px);
+    }
+
+    .wire {
+      width: 4px;
+      height: 20vh;
+      background-color: #fff;
+
+      .info {
+        position: absolute;
+        width: 200px;
+        height: 70px;
+        border-radius: 10px;
+        background-color: #ffffff;
+        transform: translate(-50%, -50%);
+      }
+    }
+  }
+}
+</style>