新增轮胎生命周期
夜笙歌
2 years ago
parent
def60f21ce
commit
e30ed3f9bf
@ -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
|
||||
})
|
||||
}
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 96 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 818 B |
@ -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">使用时间 </span>
|
||||
<span>{{ tireInfo.info4 }} </span>
|
||||
<span class="yellow">最长连续报警时间 </span>
|
||||
<span>{{ tireInfo.info5 }} </span>
|
||||
<span class="yellow">历史最高胎压 </span>
|
||||
<span>{{ tireInfo.info6 }} </span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="yellow">预计剩余里程 </span>
|
||||
<span>{{ tireInfo.info7 }} </span>
|
||||
<span class="yellow">最长连续工作时间 </span>
|
||||
<span>{{ tireInfo.info8 }} </span>
|
||||
<span class="yellow">历史最高胎温 </span>
|
||||
<span>{{ tireInfo.info9 }} </span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="yellow">报警次数 </span>
|
||||
<span>{{ tireInfo.info10 }} </span>
|
||||
<div v-for="item in tireInfo.war" style="display: inline-block">
|
||||
<span>{{ item.type }} </span>
|
||||
<span>{{ item.num }} </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>
|
||||
Loading…
Reference in New Issue