diff --git a/src/assets/img/IOT.png b/src/assets/img/IOT.png new file mode 100644 index 0000000..cd94273 Binary files /dev/null and b/src/assets/img/IOT.png differ diff --git a/src/assets/img/work-card.png b/src/assets/img/work-card.png new file mode 100644 index 0000000..a069883 Binary files /dev/null and b/src/assets/img/work-card.png differ 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 }} + +