lixuefeng/fengjie-datascreen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat：完善gps功能

Browse Source
This commit is contained in:
zjc
2025-02-24 19:53:09 +08:00
parent 28bf623b48
commit 896a9f9f05
1 changed files with 98 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
src/views/scenic/components/big-map.vue
View File

@@ -36,11 +36,19 @@
@click="handleItem(item, index)"
>
<p class="item__label">{{ item.licenseNumber }}</p>
<p class="item__value"
<div class="item__value"
>{{ item.speed }}km/h
<img v-if="item.status == '行驶'" src="@/assets/images/engine.png" alt="" />
<img v-else src="@/assets/images/unengine.png" alt="" />
</p>
<div
:class="{
'item__hot--primary': item.status == '行驶',
'item__hot--info': item.status != '行驶',
'item__hot--active': current === index
}"
>
</div>
</div>
</li>
<li
v-if="active == 1"
@@ -51,9 +59,19 @@
@click="handleItem(item, index)"
>
<p class="item__label">{{ item.licenseNumber }}</p>
<p class="item__value"
>{{ item.speed }}km/h <img src="@/assets/images/engine.png" alt="" />
</p>
<div class="item__value"
>{{ item.speed }}km/h
<img v-if="item.status == '行驶'" src="@/assets/images/engine.png" alt="" />
<img v-else src="@/assets/images/unengine.png" alt="" />
<div
:class="{
'item__hot--primary': item.status == '行驶',
'item__hot--info': item.status != '行驶',
'item__hot--active': current === index
}"
>
</div>
</div>
</li>
<li
v-if="active == 2"
@@ -64,9 +82,19 @@
@click="handleItem(item, index)"
>
<p class="item__label">{{ item.licenseNumber }}</p>
<p class="item__value"
>{{ item.speed }}km/h <img src="@/assets/images/engine.png" alt="" />
</p>
<div class="item__value"
>{{ item.speed }}km/h
<img v-if="item.status == '行驶'" src="@/assets/images/engine.png" alt="" />
<img v-else src="@/assets/images/unengine.png" alt="" />
<div
:class="{
'item__hot--primary': item.status == '行驶',
'item__hot--info': item.status != '行驶',
'item__hot--active': current === index
}"
>
</div>
</div>
</li>
<li
v-if="active == 3"
@@ -77,9 +105,19 @@
@click="handleItem(item, index)"
>
<p class="item__label">{{ item.licenseNumber }}</p>
<p class="item__value"
>{{ item.speed }}km/h <img src="@/assets/images/engine.png" alt="" />
</p>
<div class="item__value"
>{{ item.speed }}km/h
<img v-if="item.status == '行驶'" src="@/assets/images/engine.png" alt="" />
<img v-else src="@/assets/images/unengine.png" alt="" />
<div
:class="{
'item__hot--primary': item.status == '行驶',
'item__hot--info': item.status != '行驶',
'item__hot--active': current === index
}"
>
</div>
</div>
</li>
</ul>
</div>
@@ -275,33 +313,41 @@
{ immediate: true }
)
const timestampToYMD = (timestamp) => {
const date = new Date(timestamp * 1000)
const year = date.getFullYear()
const month = date.getMonth() + 1
const day = date.getDate()
return `${year}-${month}-${day}`
}
const setHtml = (data) => {
data.gpsTime = timestampToYMD(data?.gpsTime)
// <div class='marker-col'> <img src='${icon16}' /> <p> 18723232323 </p> </div>
// <div class='marker-col'> <img src='${icon18}' /> <p> 3.01KM </p> </div>
let html = `<div class='marker-box'>
<p class='marker-title'> ${data?.licenseNumber} </p>
<div class='marker-header'>
<span class='marker-sim'> ${data?.imei} </span>
<div class='marker-tag'> <div></div> ${data?.status} （${data?.statusTimeDesc}）</div>
<p class='marker-title'> ${data?.licenseNumber} </p>
<div class='marker-header'>
<span class='marker-sim'> ${data?.imei} </span>
<div class='marker-tag'> <div></div> ${data?.status} （${data?.statusTimeDesc}）</div>
</div>
<div class='marker-line'> </div>
<div class='marker-row'>
<div class='marker-col'> <img src='${icon13}' /> <p> ${data?.contactUser} </p> </div>
<div class='marker-col'> <img src='${icon14}' /> <p> ${data?.contactTel} </p> </div>
</div>
<div class='marker-line'> </div>
<div class='marker-row'>
<div class='marker-col'> <img src='${icon13}' /> <p> ${data?.contactUser} </p> </div>
<div class='marker-col'> <img src='${icon14}' /> <p> ${data?.contactTel} </p> </div>
</div>
<div class='marker-row'>
<div class='marker-col'> <img src='${icon15}' /> <p> ${data?.gpsTime} </p> </div>
</div>
<div class='marker-row'>
<div class='marker-col'> <img src='${icon17}' /> <p> ${data?.speed}KM </p> </div>
</div>
<div class='marker-row'>
<div class='marker-col'> <img src='${icon19}' /> <p> ${data?.lng},${data?.lat} </p> </div>
</div>
<div class='marker-row'>
<div class='marker-col'> <img src='${icon20}' /> <p> ${data?.address} </p> </div>
</div>
</div>`
<div class='marker-row'>
<div class='marker-col'> <img src='${icon15}' /> <p> ${data?.gpsTime} </p> </div>
</div>
<div class='marker-row'>
<div class='marker-col'> <img src='${icon17}' /> <p> ${data?.speed}KM </p> </div>
</div>
<div class='marker-row'>
<div class='marker-col'> <img src='${icon19}' /> <p> ${data?.lng},${data?.lat} </p> </div>
</div>
<div class='marker-row'>
<div class='marker-col'> <img src='${icon20}' /> <p> ${data?.address} </p> </div>
</div>
</div>`
return html
}
@@ -348,8 +394,6 @@
tabs.value[1].value = onlineList.value.length
tabs.value[2].value = offlineList.value.length
tabs.value[3].value = staticList.value.length
console.log(list.value, 'list.value')
}
const onInput = debounce((e) => {
@@ -549,9 +593,28 @@
justify-content: space-between;
&__value {
display: flex;
align-items: center;
> img {
width: vw(16);
height: auto;
margin: 0 vw(10);
}
}
&__hot {
width: vw(8);
height: vw(8);
border-radius: 50%;
&--primary {
@extend .item__hot;
background-color: #02f9fa;
}
&--info {
@extend .item__hot;
background-color: #055498;
}
&--active {
@extend .item__hot;
background-color: #ffffff !important;
}
}
&__active {