新增轮胎生命周期

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

@@ -1,35 +1,36 @@
 <template>
   <div>
-    <el-tree :data="treeData" :props="treeDefaultProps" class="tree" @node-click="treeClick" />
+    <el-tree :data="treeData" :props="treeDefaultProps" class="tree" @node-click="treeClick"/>
     <div id="container" class="container2"></div>
   </div>
 </template>
 
 <script setup>
 import AMapLoader from '@amap/amap-jsapi-loader';
-import { getCarGpsList, listBasetyre } from '@/api/realTimeMonitoring/vehicleMonitoring'
+import {getCarGpsList, listBasetyre} from '@/api/realTimeMonitoring/vehicleMonitoring'
-import { parseTime } from "@/utils/ruoyi";
+import {parseTime} from "@/utils/ruoyi";
+import {onBeforeUnmount} from "@vue/runtime-core";
 
 const {proxy} = getCurrentInstance();
 let map = null
 const treeData = ref([])
 const markers = ref([])
-const treeDefaultProps = { label: 'title', children: 'baseCarList' }
+const treeDefaultProps = {label: 'title', children: 'baseCarList'}
 const treeClick = (data) => {
   if (!data.baseCarList) {
     map.remove(markers.value);
     markers.value = []
-    setMarker({ id: data.id }, 14)
+    setMarker({id: data.id}, 14)
   } else {
     map.remove(markers.value);
     markers.value = []
-    setMarker({ queueId: data.id }, 8)
+    setMarker({queueId: data.id}, 8)
   }
 }
 
 window.$tab = proxy.$tab
 const setMarker = async (data, zoom) => {
-  const { data: markerArr } = await getCarGpsList(data)
+  const {data: markerArr} = await getCarGpsList(data)
   markerArr.forEach((e, index) => {
 
     // 点标记
@@ -42,11 +43,11 @@ const setMarker = async (data, zoom) => {
         direction: 'top',
         content: `<div class='info'>${e.carLicense || ''} - <span style="color: ${e.state === 0 ? 'green">在线' : 'red">离线'}</span></div><div class='info' onClick='function a(i){console.log(window.$tab);window.$tab.openPage("carMonitoring"+"?id="+i,"/realTimeMonitoring") }a("${e.id}")'>监控 ${e.three || ''}</div><div class='info'>${parseTime(e.laseRuntime) || ''}</div>`, //设置文本标注内容
       },
-      extData:{
+      extData: {
-        id:'123'
+        id: '123'
       }
     });
-    markers.value[index].on('click',(e)=>{
+    markers.value[index].on('click', (e) => {
       console.log(e.target._opts.extData)
     })
   })
@@ -72,13 +73,13 @@ AMapLoader.load({
 
 
   // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
-  map.addControl(new AMap.ToolBar({ position: 'LT' }));
+  map.addControl(new AMap.ToolBar({position: 'LT'}));
 
   // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
   map.addControl(new AMap.Scale());
 
   // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
-  map.addControl(new AMap.HawkEye({ isOpen: true }));
+  map.addControl(new AMap.HawkEye({isOpen: true}));
 
   // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
   map.addControl(new AMap.MapType());
@@ -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>