完善功能
This commit is contained in:
zjc
@@ -1,8 +1,41 @@
|
||||
<template>
|
||||
<div class="dialog">
|
||||
<el-dialog v-model="modelValue" align-center :modal="false" :show-close="false">
|
||||
<div id="big-car-ship" class="big-car-ship" />
|
||||
<img class="close" src="@/assets/images/close.png" @click="modelValue = false" />
|
||||
<div class="flex">
|
||||
<div class="list-box">
|
||||
<title2 title="车船" />
|
||||
<el-input v-model="value" clearable placeholder="设备号/设备名称SIM卡号">
|
||||
<template #suffix>
|
||||
<img src="@/assets/images/search-icon-1.png" alt="" />
|
||||
</template>
|
||||
</el-input>
|
||||
<ul class="tabs">
|
||||
<li
|
||||
class="tab-item"
|
||||
:class="{ 'tab-item__active': active == index }"
|
||||
v-for="(item, index) in tabs"
|
||||
:key="index"
|
||||
@click="handleTab(index)"
|
||||
>
|
||||
{{ item.label }}({{ item.value }})
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="list">
|
||||
<li
|
||||
class="item"
|
||||
:class="{ item__active: current === index }"
|
||||
v-for="(item, index) in carList"
|
||||
:key="index"
|
||||
@click="handleItem(item, index)"
|
||||
>
|
||||
<p class="item__label">{{ item.license_number }}</p>
|
||||
<p class="item__value">31km/h <img src="@/assets/images/engine.png" alt="" /> </p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="big-car-ship" class="big-car-ship" />
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
@@ -38,12 +71,34 @@
|
||||
|
||||
let lat = ref('')
|
||||
let lng = ref('')
|
||||
let value = ref('')
|
||||
let active = ref(0)
|
||||
let current = ref('')
|
||||
let scenicChange = null
|
||||
let carOverlays = ref([])
|
||||
let shipOverlays = ref([])
|
||||
let lastInfoBox = ref()
|
||||
let infoBox = ref()
|
||||
let currentMarker = ref()
|
||||
let tabs = ref([
|
||||
{
|
||||
label: '所有',
|
||||
value: '101'
|
||||
},
|
||||
{
|
||||
label: '在线',
|
||||
value: '30'
|
||||
},
|
||||
{
|
||||
label: '离线',
|
||||
value: '15'
|
||||
},
|
||||
{
|
||||
label: '未启用',
|
||||
value: '56'
|
||||
}
|
||||
])
|
||||
|
||||
watch(
|
||||
() => modelValue.value,
|
||||
(val) => {
|
||||
@@ -81,7 +136,7 @@
|
||||
if (
|
||||
currentMarker.value &&
|
||||
infoBox.value &&
|
||||
props.carList[i].sim == currentMarker.value.target.sim
|
||||
props.carList[i].sim == currentMarker.value.sim
|
||||
) {
|
||||
infoBox.value.setContent(setHtml(props.carList[i]))
|
||||
infoBox.value.setPosition({
|
||||
@@ -96,6 +151,7 @@
|
||||
if (item.lng && item.lat) {
|
||||
addMarker(carIcon, [item.lng, item.lat], [36, 50])
|
||||
marker.value.addEventListener('click', (e) => {
|
||||
e.sim = e.target.sim
|
||||
currentMarker.value = e
|
||||
let obj = props.carList.find((item) => item.sim == e.target.sim)
|
||||
setInfoBox(e.latLng, obj)
|
||||
@@ -126,7 +182,7 @@
|
||||
if (
|
||||
currentMarker.value &&
|
||||
infoBox.value &&
|
||||
props.shipList[i].sim == currentMarker.value.target.sim
|
||||
props.shipList[i].sim == currentMarker.value.sim
|
||||
) {
|
||||
infoBox.value.setContent(setHtml(props.shipList[i]))
|
||||
infoBox.value.setPosition({
|
||||
@@ -156,12 +212,11 @@
|
||||
)
|
||||
|
||||
const setHtml = (data) => {
|
||||
console.log(data, 'data')
|
||||
let html = `<div class='marker-box'>
|
||||
<p class='marker-title'> ${data?.license_number} </p>
|
||||
<div class='marker-header'>
|
||||
<span class='marker-sim'> ${data?.imei} </span>
|
||||
<div class='marker-tag'> <div></div> ${data.status} (${data.status_time_desc})</div>
|
||||
<div class='marker-tag'> <div></div> ${data.status} （${data.status_time_desc}）</div>
|
||||
</div>
|
||||
<div class='marker-line'> </div>
|
||||
<div class='marker-row'>
|
||||
@@ -180,7 +235,7 @@
|
||||
<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> 重庆市奉节县(重庆市奉节县白帝城.瞿塘峡景区内.白帝城东南218米） </p> </div>
|
||||
<div class='marker-col'> <img src='${icon20}' /> <p> ${data.address} </p> </div>
|
||||
</div>
|
||||
</div>`
|
||||
return html
|
||||
@@ -204,6 +259,17 @@
|
||||
infoBox.value.open(e)
|
||||
}
|
||||
|
||||
const handleItem = (e, index) => {
|
||||
current.value = index
|
||||
currentMarker.value = carOverlays.value.find((item) => item.sim == e.sim)
|
||||
setInfoBox(new BMapGL.Point(e.lng, e.lat), e)
|
||||
}
|
||||
|
||||
const handleTab = (index) => {
|
||||
if (active.value == index) return
|
||||
active.value = index
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
scenicChange = PubSub.subscribe('scenicChange', (msg, data) => {
|
||||
lat.value = data.lat
|
||||
@@ -265,7 +331,10 @@
|
||||
font-weight: 400;
|
||||
font-size: vw(13);
|
||||
color: #0096ff;
|
||||
background: #0b4599;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #0b4599;
|
||||
border-radius: vw(23);
|
||||
border: vw(1) solid #0096ff;
|
||||
}
|
||||
@@ -300,6 +369,45 @@
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="scss">
|
||||
:deep(.el-input__inner) {
|
||||
height: vh(32);
|
||||
color: #fff;
|
||||
}
|
||||
:deep(.el-input__wrapper) {
|
||||
margin-top: vh(8);
|
||||
font-size: vw(16);
|
||||
border-radius: vw(2);
|
||||
border: vw(1) solid #0096ff;
|
||||
box-shadow: none !important;
|
||||
background: rgba(217, 217, 217, 0);
|
||||
}
|
||||
.tabs {
|
||||
display: flex;
|
||||
border-bottom: vw(1) solid #0a4190;
|
||||
.tab-item {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
height: vh(44);
|
||||
font-weight: 600;
|
||||
font-size: vw(14);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.tab-item__active {
|
||||
color: #00d0ff;
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: vw(40);
|
||||
height: vh(2);
|
||||
background: #00d0ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
:deep(.BMap_cpyCtrl) {
|
||||
display: none;
|
||||
}
|
||||
@@ -309,22 +417,70 @@
|
||||
.dialog {
|
||||
:deep(.el-dialog) {
|
||||
width: vw(2540);
|
||||
height: vh(900);
|
||||
padding: vh(40) vw(40);
|
||||
padding: vw(8);
|
||||
background-image: url('@/assets/images/dialog-bg.png') !important;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
:deep(.el-dialog__header) {
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
.list-box {
|
||||
margin-right: vw(10);
|
||||
background-image: url('@/assets/images/bg-3.png');
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.list {
|
||||
width: vw(330);
|
||||
height: vh(690);
|
||||
padding-top: vh(10);
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
/* 滚动条整体样式 */
|
||||
&::-webkit-scrollbar {
|
||||
width: vw(10); /* 滚动条的宽度 */
|
||||
}
|
||||
/* 滚动条轨道 */
|
||||
&::-webkit-scrollbar-track {
|
||||
background: 'transparent'; /* 轨道的背景色 */
|
||||
}
|
||||
/* 滚动条滑块 */
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
|
||||
border-radius: 5px; /* 滑块的圆角 */
|
||||
}
|
||||
.item {
|
||||
cursor: pointer;
|
||||
font-weight: 400;
|
||||
font-size: vw(14);
|
||||
height: vh(30);
|
||||
padding: 0 vw(20);
|
||||
color: #0096ff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
&__value {
|
||||
display: flex;
|
||||
> img {
|
||||
width: vw(16);
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
&__active {
|
||||
color: #fff !important;
|
||||
background-color: #055498;
|
||||
}
|
||||
}
|
||||
}
|
||||
.big-car-ship {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
height: vh(820);
|
||||
}
|
||||
.close {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: vw(20);
|
||||
top: vh(20);
|
||||
top: vw(20);
|
||||
width: vw(60);
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user