|
|
|
@ -41,14 +41,16 @@
|
|
|
|
|
<div v-if="tyreDataList.includes(`${index+1}-1-1`)"
|
|
|
|
|
style="border-radius: 10%;width:100%;height:100%;background-color:green;vertical-align:top">
|
|
|
|
|
<div style="white-space:nowrap;width: 100%;color:#fff;font-size: 0.7vw;line-height: 33px">
|
|
|
|
|
<div class="icon1" />{{ tyreList.filter(e => e.tyrePositionS === (`${index + 1}-1-1`))[0].temperature }}
|
|
|
|
|
<div class="icon1"/>
|
|
|
|
|
{{ tyreList.filter(e => e.tyrePositionS === (`${index + 1}-1-1`))[0].temperature }}
|
|
|
|
|
</div>
|
|
|
|
|
<div style="white-space:nowrap;width: 100%;color:#fff;font-size: 0.7vw;line-height: 33px">
|
|
|
|
|
<div class="icon2" />{{ tyreList.filter(e => e.tyrePositionS === (`${index + 1}-1-1`))[0].pressure }}
|
|
|
|
|
<div class="icon2"/>
|
|
|
|
|
{{ tyreList.filter(e => e.tyrePositionS === (`${index + 1}-1-1`))[0].pressure }}
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <div style="white-space:nowrap;width: 100%;color:#fff;font-size: 0.7vw;line-height: 33px">-->
|
|
|
|
|
<!-- 花纹:{{ tyreList.filter(e => e.tyrePositionS === (`${index + 1}-1-1`))[0].pattern }}-->
|
|
|
|
|
<!-- </div>-->
|
|
|
|
|
<!-- <div style="white-space:nowrap;width: 100%;color:#fff;font-size: 0.7vw;line-height: 33px">-->
|
|
|
|
|
<!-- 花纹:{{ tyreList.filter(e => e.tyrePositionS === (`${index + 1}-1-1`))[0].pattern }}-->
|
|
|
|
|
<!-- </div>-->
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
@ -57,14 +59,16 @@
|
|
|
|
|
<div v-if="tyreDataList.includes(`${index+1}-1-2`)"
|
|
|
|
|
style="border-radius: 10%;width:100%;height:100%;background-color:green;vertical-align: top">
|
|
|
|
|
<div style="white-space:nowrap;width: 100%;color:#fff;font-size: 0.7vw;line-height: 33px">
|
|
|
|
|
<div class="icon1" />{{ tyreList.filter(e => e.tyrePositionS === (`${index + 1}-1-2`))[0].temperature }}
|
|
|
|
|
<div class="icon1"/>
|
|
|
|
|
{{ tyreList.filter(e => e.tyrePositionS === (`${index + 1}-1-2`))[0].temperature }}
|
|
|
|
|
</div>
|
|
|
|
|
<div style="white-space:nowrap;width: 100%;color:#fff;font-size: 0.7vw;line-height: 33px">
|
|
|
|
|
<div class="icon2" />{{ tyreList.filter(e => e.tyrePositionS === (`${index + 1}-1-2`))[0].pressure }}
|
|
|
|
|
<div class="icon2"/>
|
|
|
|
|
{{ tyreList.filter(e => e.tyrePositionS === (`${index + 1}-1-2`))[0].pressure }}
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <div style="white-space:nowrap;width: 100%;color:#fff;font-size: 0.7vw;line-height: 33px">-->
|
|
|
|
|
<!-- 花纹:{{ tyreList.filter(e => e.tyrePositionS === (`${index + 1}-1-2`))[0].pattern }}-->
|
|
|
|
|
<!-- </div>-->
|
|
|
|
|
<!-- <div style="white-space:nowrap;width: 100%;color:#fff;font-size: 0.7vw;line-height: 33px">-->
|
|
|
|
|
<!-- 花纹:{{ tyreList.filter(e => e.tyrePositionS === (`${index + 1}-1-2`))[0].pattern }}-->
|
|
|
|
|
<!-- </div>-->
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<img sizes="100% 100%" src="@/assets/images/zhou.png"
|
|
|
|
@ -75,14 +79,16 @@
|
|
|
|
|
<div v-if="tyreDataList.includes(`${index+1}-2-2`)"
|
|
|
|
|
style="border-radius: 10%;width:100%;height:100%;background-color:green;vertical-align:top">
|
|
|
|
|
<div style="white-space:nowrap;width: 100%;color:#fff;font-size: 0.7vw;line-height: 33px">
|
|
|
|
|
<div class="icon1" />{{ tyreList.filter(e => e.tyrePositionS === (`${index + 1}-2-2`))[0].temperature }}
|
|
|
|
|
<div class="icon1"/>
|
|
|
|
|
{{ tyreList.filter(e => e.tyrePositionS === (`${index + 1}-2-2`))[0].temperature }}
|
|
|
|
|
</div>
|
|
|
|
|
<div style="white-space:nowrap;width: 100%;color:#fff;font-size: 0.7vw;line-height: 33px">
|
|
|
|
|
<div class="icon2" />{{ tyreList.filter(e => e.tyrePositionS === (`${index + 1}-2-2`))[0].pressure }}
|
|
|
|
|
<div class="icon2"/>
|
|
|
|
|
{{ tyreList.filter(e => e.tyrePositionS === (`${index + 1}-2-2`))[0].pressure }}
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <div style="white-space:nowrap;width: 100%;color:#fff;font-size: 0.7vw;line-height: 33px">-->
|
|
|
|
|
<!-- 花纹:{{ tyreList.filter(e => e.tyrePositionS === (`${index + 1}-2-2`))[0].pattern }}-->
|
|
|
|
|
<!-- </div>-->
|
|
|
|
|
<!-- <div style="white-space:nowrap;width: 100%;color:#fff;font-size: 0.7vw;line-height: 33px">-->
|
|
|
|
|
<!-- 花纹:{{ tyreList.filter(e => e.tyrePositionS === (`${index + 1}-2-2`))[0].pattern }}-->
|
|
|
|
|
<!-- </div>-->
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
@ -91,14 +97,16 @@
|
|
|
|
|
<div v-if="tyreDataList.includes(`${index+1}-2-1`)"
|
|
|
|
|
style="border-radius: 10%;width:100%;height:100%;background-color:green;vertical-align:top">
|
|
|
|
|
<div style="white-space:nowrap;width: 100%;color:#fff;font-size: 0.7vw;line-height: 33px">
|
|
|
|
|
<div class="icon1" />{{ tyreList.filter(e => e.tyrePositionS === (`${index + 1}-2-1`))[0].temperature }}
|
|
|
|
|
<div class="icon1"/>
|
|
|
|
|
{{ tyreList.filter(e => e.tyrePositionS === (`${index + 1}-2-1`))[0].temperature }}
|
|
|
|
|
</div>
|
|
|
|
|
<div style="white-space:nowrap;width: 100%;color:#fff;font-size: 0.7vw;line-height: 33px">
|
|
|
|
|
<div class="icon2" />{{ tyreList.filter(e => e.tyrePositionS === (`${index + 1}-2-1`))[0].pressure }}
|
|
|
|
|
<div class="icon2"/>
|
|
|
|
|
{{ tyreList.filter(e => e.tyrePositionS === (`${index + 1}-2-1`))[0].pressure }}
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <div style="white-space:nowrap;width: 100%;color:#fff;font-size: 0.7vw;line-height: 33px">-->
|
|
|
|
|
<!-- 花纹:{{ tyreList.filter(e => e.tyrePositionS === (`${index + 1}-2-1`))[0].pattern }}-->
|
|
|
|
|
<!-- </div>-->
|
|
|
|
|
<!-- <div style="white-space:nowrap;width: 100%;color:#fff;font-size: 0.7vw;line-height: 33px">-->
|
|
|
|
|
<!-- 花纹:{{ tyreList.filter(e => e.tyrePositionS === (`${index + 1}-2-1`))[0].pattern }}-->
|
|
|
|
|
<!-- </div>-->
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
@ -319,7 +327,6 @@ AMapLoader.load({
|
|
|
|
|
center: [116.397428, 39.90923], //初始化地图中心点位置
|
|
|
|
|
});
|
|
|
|
|
}).catch(e => {
|
|
|
|
|
console.log(e);
|
|
|
|
|
})
|
|
|
|
|
proxy.$nextTick(async () => {
|
|
|
|
|
pageId.value = $router?.currentRoute?.value?.query?.id
|
|
|
|
@ -355,10 +362,9 @@ const getList = async () => {
|
|
|
|
|
const tableChange = async (e) => {
|
|
|
|
|
pageId.value = e.id
|
|
|
|
|
const {data: info} = await getCarGpsList({id: pageId.value})
|
|
|
|
|
console.log(info)
|
|
|
|
|
cardInfo.value = {
|
|
|
|
|
carLicense: info.carLicense,
|
|
|
|
|
name:info.carQueue
|
|
|
|
|
name: info.carQueue
|
|
|
|
|
}
|
|
|
|
|
let TireRow1 = info.cartype?.split('T')[1]?.split('|').filter(e => e !== '') || []
|
|
|
|
|
let title = []
|
|
|
|
@ -374,7 +380,6 @@ const tableChange = async (e) => {
|
|
|
|
|
})
|
|
|
|
|
tyreList.value = tyreListData
|
|
|
|
|
tyreDataList.value = tyreListData.map(e => e.tyrePositionS)
|
|
|
|
|
console.log(tyreList.value)
|
|
|
|
|
let timeOut = () => {
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
if (map) {
|
|
|
|
@ -456,16 +461,23 @@ const resetQuery = () => {
|
|
|
|
|
tableRef1.value.setCurrentRow()
|
|
|
|
|
}
|
|
|
|
|
const setMarker = (res) => {
|
|
|
|
|
markers.value ? map.remove(markers.value) : ''
|
|
|
|
|
console.log(res)
|
|
|
|
|
let pathRow = [[res.longitude, res.latitude]]
|
|
|
|
|
markers.value && map.remove(markers.value)
|
|
|
|
|
AMap.convertFrom(pathRow, 'gps', function (status, result) {
|
|
|
|
|
if (result.info === 'ok') {
|
|
|
|
|
let lnglats = result.locations.map(e => [e.lng, e.lat]);
|
|
|
|
|
markers.value = new AMap.Marker({
|
|
|
|
|
content: '<div class="markerIcon" />',
|
|
|
|
|
position: [res.longitude, res.latitude],
|
|
|
|
|
position: lnglats[0],
|
|
|
|
|
anchor: 'bottom-center',
|
|
|
|
|
offset: new AMap.Pixel(0, 0),
|
|
|
|
|
});
|
|
|
|
|
map.add(markers.value)
|
|
|
|
|
map.setFitView()
|
|
|
|
|
map.setZoom(8)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
onBeforeUnmount(() => {
|
|
|
|
|
map.destroy()
|
|
|
|
@ -534,7 +546,8 @@ onBeforeUnmount(() => {
|
|
|
|
|
.el-descriptions__label {
|
|
|
|
|
width: 170px;
|
|
|
|
|
}
|
|
|
|
|
.icon1{
|
|
|
|
|
|
|
|
|
|
.icon1 {
|
|
|
|
|
margin-left: 5px;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
vertical-align: top;
|
|
|
|
@ -546,7 +559,8 @@ onBeforeUnmount(() => {
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
background-image: url('@/assets/images/temperature.png')
|
|
|
|
|
}
|
|
|
|
|
.icon2{
|
|
|
|
|
|
|
|
|
|
.icon2 {
|
|
|
|
|
margin-left: 5px;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
vertical-align: top;
|
|
|
|
|