From c866001f26f8a66b3268ce8a299083650e268d01 Mon Sep 17 00:00:00 2001 From: bb_pan Date: Tue, 27 May 2025 14:04:48 +0800 Subject: [PATCH] =?UTF-8?q?=E5=B7=A5=E7=89=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/img/IOT.png | Bin 0 -> 2697 bytes src/assets/img/work-card.png | Bin 0 -> 4391 bytes src/http/api/map/index.ts | 15 +++++ src/views/home/map.vue | 127 ++++++++++++++++++++++++++++++++--- 4 files changed, 134 insertions(+), 8 deletions(-) create mode 100644 src/assets/img/IOT.png create mode 100644 src/assets/img/work-card.png diff --git a/src/assets/img/IOT.png b/src/assets/img/IOT.png new file mode 100644 index 0000000000000000000000000000000000000000..cd94273ed52f441195e8b04ca7783e14d1a717f0 GIT binary patch literal 2697 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 literal 0 HcmV?d00001 diff --git a/src/http/api/map/index.ts b/src/http/api/map/index.ts index 936ab6c..96f6052 100644 --- a/src/http/api/map/index.ts +++ b/src/http/api/map/index.ts @@ -3,4 +3,19 @@ import { get, post } from '../../index' // 获取坐标点数据 export const getMapData = () => { return get('/material-mall/api/mqtt/latest-data', {}) +} + +// 获取地图设备列表 +export const getIotListApi = () => { + return get('/material-mall/iot/badge/locations', {}) +} + +// 地图登录 +export const mapLoginApi = (data: any) => { + return get('/material-mall/iot/badge/login', data) +} + +// 工牌信息 +export const getBadgeInfoApi = (deviceId: string) => { + return get(`/material-mall/iot/badge/device/${deviceId}`, {}) } \ No newline at end of file diff --git a/src/views/home/map.vue b/src/views/home/map.vue index 0825087..717330e 100644 --- a/src/views/home/map.vue +++ b/src/views/home/map.vue @@ -10,7 +10,9 @@ import { loginNewApi } from 'http/api/home/index' import { getUserInfoAPI } from 'http/api/login/index' import { ElMessage } from 'element-plus' import { wgs84ToGcj02ToBd09Public } from 'utils/map' -import { getMapData } from 'http/api/map' +import { getMapData, mapLoginApi, getIotListApi, getBadgeInfoApi } from 'http/api/map' +import icon1 from '@/assets/img/work-card.png' +import icon2 from '@/assets/img/IOT.png' const router: any = useRouter() const userStore = useStore() @@ -22,12 +24,23 @@ const selectOptions = ref(false) // 分类 const selectOptionsValue = ref('分类筛选') const mapContainer = ref(null) // 地图容器 const mapDialog = ref(false) // 地图弹框 +const mapWorkCard = ref(false) // 工牌信息弹框 +const mapWorkCardData: any = ref({}) // 工牌信息数据 // 标记点 const points: any = ref([]) const mapData = ref() const tagData: any = ref() const tagIndex: any = ref() +// 登录 +const loginApi = async () => { + try { + const res: any = await mapLoginApi({}) + console.log('🚀 ~ loginApi ~ res:', res) + } catch (error) { + console.log('🚀 ~ loginApi ~ error:', error) + } +} // 获取地图数据 const getMapDataList = async () => { try { @@ -46,14 +59,52 @@ const getMapDataList = async () => { id: 4, lng: longitude, lat: latitude, + isWork: false, }) - initMap() + getWorkData() + // initMap() } catch (error) { console.log('🚀 ~ getMapDataList ~ error:', error) + getWorkData() + // initMap() + } +} + +// 获取工牌信息 +const getWorkData = async () => { + try { + await getIotListApi() + } catch (res) { + console.log('🚀 ~ getWorkData ~ res:', res) + if (res.errorCode != 200) { + initMap() + return + } + points.value = res.devices.map((item: any) => { + return { + id: item.user_id, + lng: item.jingdu, + lat: item.weidu, + isWork: true, + } + }) initMap() } } +// 获取工牌详情 +const getWorkCardDetails = async (id: any) => { + try { + await getBadgeInfoApi(id) + } catch (res) { + console.log('🚀 ~ getWorkCardDetails ~ res:', res) + if (res.errorCode != 200) { + return + } + mapWorkCardData.value = res.data[0] + } +} + // 获取公司名称 const getCompanyListData = async () => { const res: any = await getCompanyListApi() @@ -197,19 +248,35 @@ const initMap = () => { // 添加标记点 points.value.forEach((item: any) => { const point = new BMap.Point(item.lng, item.lat) - const marker = new BMap.Marker(point) + let icon = null + if (item.isWork) { + icon = new BMap.Icon(icon1, new BMap.Size(30, 30), { + imageSize: new BMap.Size(30, 30), + }) + } else { + icon = new BMap.Icon(icon2, new BMap.Size(30, 30), { + imageSize: new BMap.Size(30, 30), + }) + } + const marker = icon ? new BMap.Marker(point, { icon }) : new BMap.Marker(point) map.addOverlay(marker) // const label = new BMap.Label(item.name, { offset: new BMap.Size(20, -10) }) // marker.setLabel(label) // 设置标记点名称 marker.addEventListener('click', () => { // 点击标记点事件 - console.log('点击了标记点') - // 打开详情弹框 - 目前没有 - mapDialog.value = true - tagData.value = mapData.value.aphase - tagIndex.value = 1 + console.log('点击了标记点', item) + if (item.isWork) { + getWorkCardDetails(item.id) + mapWorkCard.value = true + } else { + // 打开详情弹框 - 目前没有 + mapDialog.value = true + tagData.value = mapData.value.aphase + tagIndex.value = 1 + } }) }) + map.addControl(new BMap.NavigationControl()) // 添加平移缩放控件 map.centerAndZoom(point, 7) // 设置地图中心点及缩放级别 map.enableScrollWheelZoom(true) // 启用滚轮缩放 // 将贵阳整个地图放大到级别 7 @@ -231,6 +298,7 @@ const handleTag = (tag: number) => { } onMounted(async () => { + loginApi() getMapDataList() if (!tokenNew) { const origin = window.location.href @@ -585,9 +653,52 @@ onMounted(async () => { + + + + + 设备名称: {{ mapWorkCardData.user_name }} + 最近定位时间: {{ mapWorkCardData.sys_time }} + 最近位置更新时间: {{ mapWorkCardData.datetime }} + 最近信号时间: {{ mapWorkCardData.heart_time }} + 超速设置值: {{ mapWorkCardData.sudu }} + 状态: {{ mapWorkCardData.status }} + 激活时间: {{ mapWorkCardData.use_time }} + 电话: {{ mapWorkCardData.tel }} + 车牌号: {{ mapWorkCardData.sex }} + 设备号: {{ mapWorkCardData.sim_id }} + 手机号码: {{ mapWorkCardData.phone }} + 设备ID: {{ mapWorkCardData.user_id }} + 型号: {{ mapWorkCardData.product_type }} + 图标序号: {{ mapWorkCardData.iconType }} + 用户到期时间: {{ mapWorkCardData.out_time }} + 经度: {{ mapWorkCardData.jingdu }} + iccid: {{ mapWorkCardData.su }} + 联系人: {{ mapWorkCardData.owner }} + 经纬度: {{ mapWorkCardData.jingwei }} + 离线报警开关: {{ mapWorkCardData.alarm != 0 ? '开' : '关' }} + 服务商描述: {{ mapWorkCardData.deviceRemark }} + 设备软件版本号: {{ mapWorkCardData.macVersion }} + 视频地址: {{ mapWorkCardData.VideoConfig }} + 高温报警值: {{ mapWorkCardData.HighTempAlarm }} + 低温报警值: {{ mapWorkCardData.LowTempAlarm }} + 厂商编码: {{ mapWorkCardData.VendorCode }} + 业主ID: {{ mapWorkCardData.OwnerId }} + 终端类型: {{ mapWorkCardData.TerminalType }} + 设备编码: {{ mapWorkCardData.DeviceCode }} + 备注: {{ mapWorkCardData.remark }} + +