工牌

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}`, {})
 }

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<boolean>(false) // 分类
 const selectOptionsValue = ref<string>('分类筛选')
 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 () => {
             </div>
         </template>
     </el-dialog>
+
+    <!-- 工牌信息弹框 -->
+    <el-dialog v-model="mapWorkCard" title="工牌信息" width="50%">
+        <el-row :gutter="20" class="work-card">
+            <el-col :span="12" :offset="0">设备名称: {{ mapWorkCardData.user_name }}</el-col>
+            <el-col :span="12" :offset="0">最近定位时间: {{ mapWorkCardData.sys_time }}</el-col>
+            <el-col :span="12" :offset="0">最近位置更新时间: {{ mapWorkCardData.datetime }}</el-col>
+            <el-col :span="12" :offset="0">最近信号时间: {{ mapWorkCardData.heart_time }}</el-col>
+            <el-col :span="12" :offset="0">超速设置值: {{ mapWorkCardData.sudu }}</el-col>
+            <el-col :span="12" :offset="0">状态: {{ mapWorkCardData.status }}</el-col>
+            <el-col :span="12" :offset="0">激活时间: {{ mapWorkCardData.use_time }}</el-col>
+            <el-col :span="12" :offset="0">电话: {{ mapWorkCardData.tel }}</el-col>
+            <el-col :span="12" :offset="0">车牌号: {{ mapWorkCardData.sex }}</el-col>
+            <el-col :span="12" :offset="0">设备号: {{ mapWorkCardData.sim_id }}</el-col>
+            <el-col :span="12" :offset="0">手机号码: {{ mapWorkCardData.phone }}</el-col>
+            <el-col :span="12" :offset="0">设备ID: {{ mapWorkCardData.user_id }}</el-col>
+            <el-col :span="12" :offset="0">型号: {{ mapWorkCardData.product_type }}</el-col>
+            <el-col :span="12" :offset="0">图标序号: {{ mapWorkCardData.iconType }}</el-col>
+            <el-col :span="12" :offset="0">用户到期时间: {{ mapWorkCardData.out_time }}</el-col>
+            <el-col :span="12" :offset="0">经度: {{ mapWorkCardData.jingdu }}</el-col>
+            <el-col :span="12" :offset="0">iccid: {{ mapWorkCardData.su }}</el-col>
+            <el-col :span="12" :offset="0">联系人: {{ mapWorkCardData.owner }}</el-col>
+            <el-col :span="12" :offset="0">经纬度: {{ mapWorkCardData.jingwei }}</el-col>
+            <el-col :span="12" :offset="0">离线报警开关: {{ mapWorkCardData.alarm != 0 ? '开' : '关' }}</el-col>
+            <el-col :span="12" :offset="0">服务商描述: {{ mapWorkCardData.deviceRemark }}</el-col>
+            <el-col :span="12" :offset="0">设备软件版本号: {{ mapWorkCardData.macVersion }}</el-col>
+            <el-col :span="12" :offset="0">视频地址: {{ mapWorkCardData.VideoConfig }}</el-col>
+            <el-col :span="12" :offset="0">高温报警值: {{ mapWorkCardData.HighTempAlarm }}</el-col>
+            <el-col :span="12" :offset="0">低温报警值: {{ mapWorkCardData.LowTempAlarm }}</el-col>
+            <el-col :span="12" :offset="0">厂商编码: {{ mapWorkCardData.VendorCode }}</el-col>
+            <el-col :span="12" :offset="0">业主ID: {{ mapWorkCardData.OwnerId }}</el-col>
+            <el-col :span="12" :offset="0">终端类型: {{ mapWorkCardData.TerminalType }}</el-col>
+            <el-col :span="12" :offset="0">设备编码: {{ mapWorkCardData.DeviceCode }}</el-col>
+            <el-col :span="12" :offset="0">备注: {{ mapWorkCardData.remark }}</el-col>
+        </el-row>
+    </el-dialog>
 </template>
 
 <style lang="scss" scoped>
+.work-card {
+    .el-col {
+        margin-bottom: 10px;
+        color: #333;
+        line-height: 1.5;
+    }
+}
 .card-item {
     margin-bottom: 15px;
     text-align: left;