From 28f89086442ec1946575a0c00ce37dd297520ff9 Mon Sep 17 00:00:00 2001 From: jiang Date: Mon, 15 Sep 2025 18:06:59 +0800 Subject: [PATCH] =?UTF-8?q?iot=E5=AF=B9=E6=8E=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/home/map.vue | 956 ++++++++++++++++++++++++++++++----------- 1 file changed, 711 insertions(+), 245 deletions(-) diff --git a/src/views/home/map.vue b/src/views/home/map.vue index 891f776..f2c2b44 100644 --- a/src/views/home/map.vue +++ b/src/views/home/map.vue @@ -80,8 +80,8 @@ const getMapDataList = async () => { }) points.value = [...JSON.parse(JSON.stringify(points.value)), ...point] } - getWorkData() - //initMap() + //getWorkData() + initMap() } } @@ -259,6 +259,90 @@ const formatUtcTimeV2 = (utcTime: any, date: any) => { .replace(/\//g, '-')} (北京时间)` } + +// 定位状态类型定义 +type PositionStatus = 'A' | 'V' | string + +// GPS质量类型定义 +type GpsQuality = '0' | '1' | '2' | string + +// 模式指示器类型定义 +type ModeIndicator = 'A' | 'D' | 'E' | 'N' | string + +// 定位来源类型定义 +type PositionSource = 'gnss' | 'lbs' | 'wifi' | string +// 假设type的映射关系如下（根据实际业务调整） +const typeMap = { + '2': '小型数据终端', + '3': '智能工牌', + +} + +// 获取type对应的名称 +const getTypeName = (type: string) => { + // 如果有匹配的名称则返回，否则返回原始值（带提示） + return typeMap[type as keyof typeof typeMap] || `未知类型(${type})` +} +/** + * 解析定位状态文本 + * @param status 定位状态编码 + * @returns 定位状态中文描述 + */ +const getStatusText = (status: PositionStatus): string => { + const statusMap: Record = { + 'A': '有效定位', + 'V': '无效定位', + } + return statusMap[status] || (status || '-') +} + +/** + * 解析GPS质量文本 + * @param quality GPS质量编码 + * @returns GPS质量中文描述 + */ +const getQualityText = (quality: GpsQuality): string => { + const qualityMap: Record = { + '0': '无效', + '1': 'GPS定位', + '2': '差分GPS定位', + } + return qualityMap[quality] || (quality || '-') +} +// 检查是否有电力数据 +const hasPowerData = computed(() => { + return !!mapData.value.aphase || !!mapData.value.bphase || !!mapData.value.cphase +}) +/** + * 解析模式指示器文本 + * @param mode 模式编码 + * @returns 模式中文描述 + */ +const getModeText = (mode: ModeIndicator): string => { + const modeMap: Record = { + 'A': '自主模式', + 'D': '差分模式', + 'E': '估算模式', + 'N': '数据无效', + } + return modeMap[mode] || (mode || '-') +} + +/** + * 解析定位来源文本 + * @param source 定位来源编码 + * @returns 定位来源中文描述 + */ +const getPositionSourceText = (source: PositionSource): string => { + const sourceMap: Record = { + 'gnss': 'GNSS定位', + 'lbs': '基站定位', + 'wifi': 'WiFi定位', + } + return sourceMap[source] || (source || '-') +} + + const initMap = () => { if (window.BMap) { const map = new BMap.Map(mapContainer.value) @@ -267,7 +351,7 @@ const initMap = () => { points.value.forEach((item: any) => { const point = new BMap.Point(item.lng, item.lat) let icon = null - if (item.isWork) { + if (item.item.type == '3') { icon = new BMap.Icon(icon1, new BMap.Size(30, 30), { imageSize: new BMap.Size(30, 30), }) @@ -283,9 +367,10 @@ const initMap = () => { marker.addEventListener('click', () => { // 点击标记点事件 console.log('点击了标记点', item) - if (item.isWork) { - getWorkCardDetails(item.id) + if (item.item.type == '3') { + //getWorkCardDetails(item.id) mapWorkCard.value = true + mapWorkCardData.value = item.item } else { // 打开详情弹框 - 目前没有 mapDialog.value = true @@ -476,260 +561,564 @@ onMounted(async () => { - -
- - - - -
- 设备UUID: {{ mapData.uuid }} + +
+ +
+

一、设备基础信息 （{{ mapData.uuid || '-' }}）

+ + +
+ 设备类型 + {{ getTypeName(mapData.type) || '-' }}
-
- 最后更新时间: {{ formatUtcTimeV2(mapData.utcTime, mapData.date) }} + + +
+ 最后更新时间 + {{ formatUtcTimeV2(mapData.utcTime, mapData.date) || '-' }}
- - - - - -
- 温度: {{ mapData.temperature }}℃ + + +
+ 定位状态 + {{ getStatusText(mapData.status) || '-' }}
-
- 湿度: {{ mapData.humidity }}% + + +
+ 电池电量 + + {{ mapData.soc ? `${Number(mapData.soc).toFixed(2)}%` : '-' }} +
- - - - - -
- 经度: {{ isNaN(Number(mapData.longitude)) ? '' : mapData.longitude - }} N -
-
- 维度: {{ isNaN(Number(mapData.latitude)) ? '' : mapData.latitude - }} E -
-
- 速度: {{ mapData.speedOverGround }} 节 -
-
- 航向: {{ mapData.courseOverGround || 0 }}° -
-
- 海拔: {{ mapData.altitude }} 米 -
- - - - - -
- X轴加速度: {{ mapData.accX }} m/s² -
-
- Y轴加速度: {{ mapData.accY }} m/s² -
-
- Z轴加速度: {{ mapData.accZ }} m/s² -
-
- X轴角度: {{ mapData.gyroX }} 度° -
-
- Y轴角度: {{ mapData.gyroY }} 度° -
-
- Z轴角度: {{ mapData.gyroZ }} 度° -
- - - - - -
-
定位质量: {{ 'GPS定位' }}
-
- 使用卫星数: {{ mapData.numSatellitesUsed }} -
-
水平精度: {{ mapData.hdop }}
-
- - - - - -
- A组 - - B组 - - C组 - -
-
-
-
- 电压: {{ tagData?.voltage }} W -
-
- 电流: {{ tagData?.current }} A -
-
- 有功功率: {{ tagData?.activePower }} V -
-
-
-
- 无功功率: {{ tagData?.reactivePower }} VAR -
-
- 功率因素: {{ tagData?.powerFactor }} -
-
- 频率: {{ tagData?.frequency }} Hz -
-
-
-
- 正向有功: {{ tagData?.forwardActiveEnergy }} kWh -
-
- 正向无功: {{ tagData?.forwardReactiveEnergy }} kvarh -
-
- 反向有功: {{ tagData?.reverseActiveEnergy }} kWh -
-
+ + +
-
-
- 反向无功: {{ tagData?.reverseReactiveEnergy }} kvarh -
-
- 视在功率: {{ tagData?.apparentPower }} VA -
-
- 谐波有功: {{ tagData?.harmonicActivePower }} W -
-
- 基波有功: {{ tagData?.fundamentalActivePower }} W -
-
- 基波无功: {{ tagData?.fundamentalReactivePower }} VAR -
-
+ +
+

二、环境数据

+ + +
+ 温度 + + {{ mapData.temperature ? `${mapData.temperature}℃` : '-' }} +
- - - + + +
+ 湿度 + + {{ mapData.humidity ? `${mapData.humidity}%` : '-' }} + +
+ + +
+ 定位来源 + {{ getPositionSourceText(mapData.positionSource) || '-' }} +
+ + +
+ 定位精度 + + {{ mapData.accuracy ? `${mapData.accuracy}米` : '-' }} + +
+ + +
+ + +
+

三、位置信息

+ + +
+ 经度 + + {{ !isNaN(Number(mapData.longitude)) ? `${mapData.longitude} ${mapData.lonDirection || 'E'}` : '-' }} + +
+ + +
+ 纬度 + + {{ !isNaN(Number(mapData.latitude)) ? `${mapData.latitude} ${mapData.latDirection || 'N'}` : '-' }} + +
+ + +
+ 速度 + + {{ mapData.speedOverGround ? `${mapData.speedOverGround}节` : '-' }} + +
+ + +
+ 航向 + + {{ mapData.courseOverGround ? `${mapData.courseOverGround}°` : '-' }} + +
+ + +
+ 海拔 + + {{ mapData.altitude ? `${mapData.altitude}米` : '-' }} + +
+ + +
+ + +
+

四、运动传感器数据

+ + +
+ X轴加速度 + + {{ mapData.accX ? `${Number(mapData.accX).toFixed(2)} m/s²` : '-' }} + +
+ + +
+ Y轴加速度 + + {{ mapData.accY ? `${Number(mapData.accY).toFixed(2)} m/s²` : '-' }} + +
+ + +
+ Z轴加速度 + + {{ mapData.accZ ? `${Number(mapData.accZ).toFixed(2)} m/s²` : '-' }} + +
+ + +
+ 翻滚角 + + {{ mapData.roll ? `${Number(mapData.roll).toFixed(2)}°` : '-' }} + +
+ + +
+ X轴角速度 + + {{ mapData.gyroX ? `${Number(mapData.gyroX).toFixed(2)} rad/s` : '-' }} + +
+ + +
+ Y轴角速度 + + {{ mapData.gyroY ? `${Number(mapData.gyroY).toFixed(2)} rad/s` : '-' }} + +
+ + +
+ Z轴角速度 + + {{ mapData.gyroZ ? `${Number(mapData.gyroZ).toFixed(2)} rad/s` : '-' }} + +
+ + +
+ 俯仰角 + + {{ mapData.pitch ? `${Number(mapData.pitch).toFixed(2)}°` : '-' }} + +
+ + +
+ + +
+

五、定位质量信息

+ + +
+ 定位质量 + {{ getQualityText(mapData.quality) || '-' }} +
+ + +
+ 模式指示器 + {{ getModeText(mapData.modeIndicator) || '-' }} +
+ + +
+ 导航状态 + {{ mapData.navStatus || '-' }} +
+ + +
+ 使用卫星数 + {{ mapData.numSatellitesUsed || '-' }} +
+ + +
+ 水平精度因子 + {{ mapData.hdop || '-' }} +
+ + +
+ GNRMC校验和 + {{ mapData.checksumRMC || '-' }} +
+ + +
+ + +
+

六、电力数据

+ + +
+ + A相 + + + B相 + + + C相 + +
+ + +
+ 电压 + {{ tagData?.voltage ? `${Number(tagData.voltage).toFixed(2)} V` : '-' }} +
+ + +
+ 电流 + {{ tagData?.current ? `${Number(tagData.current).toFixed(2)} A` : '-' }} +
+ + +
+ 有功功率 + {{ tagData?.activePower ? `${Number(tagData.activePower).toFixed(2)} W` : '-' }} +
+ + +
+ 无功功率 + {{ tagData?.reactivePower ? `${Number(tagData.reactivePower).toFixed(2)} VAR` : '-' }} +
+ + +
+ 功率因素 + {{ tagData?.powerFactor ? `${Number(tagData.powerFactor).toFixed(2)}` : '-' }} +
+ + +
+ 频率 + {{ tagData?.frequency ? `${Number(tagData.frequency).toFixed(2)} Hz` : '-' }} +
+ + +
+ 正向有功 + {{ tagData?.forwardActiveEnergy ? `${Number(tagData.forwardActiveEnergy).toFixed(2)} kWh` : '-' }} +
+ + +
+ 正向无功 + {{ tagData?.forwardReactiveEnergy ? `${Number(tagData.forwardReactiveEnergy).toFixed(2)} kvarh` : '-' }} +
+ + +
+ - - - - 设备名称: {{ 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 }} - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+

一、设备基础信息（{{ mapWorkCardData.uuid || '-' }}）

+ + +
+ 设备类型 + + {{ mapWorkCardData.type ? getTypeName(mapWorkCardData.type) : '-' }} + +
+ + +
+ 最后更新时间 + {{ formatUtcTimeV2(mapWorkCardData.utcTime, mapWorkCardData.date) || '-' + }} +
+ + +
+ 定位来源 + {{ getPositionSourceText(mapWorkCardData.positionSource) }} +
+ + +
+ 电池电量 + + {{ mapWorkCardData.soc ? `${Number(mapWorkCardData.soc).toFixed(2)}%` : '-' }} +
+ + +
+ +
+

二、定位核心数据

+ + +
+ 定位状态 + {{ getStatusText(mapWorkCardData.status) }} +
+ + +
+ 纬度值 + {{ mapWorkCardData.latitude || '-' }} +
+ + +
+ 经度值 + {{ mapWorkCardData.longitude || '-' }} +
+ + +
+ 定位精度 + {{ mapWorkCardData.accuracy ? `${mapWorkCardData.accuracy}米` : '-' + }} +
+ + +
+ GPS质量指示 + {{ getQualityText(mapWorkCardData.quality) }} +
+ + +
+ 使用卫星数量 + {{ mapWorkCardData.numSatellitesUsed || '-' }} +
+ + +
+ 水平精度因子（HDOP） + {{ mapWorkCardData.hdop || '-' }} +
+ + +
+ 模式指示器 + {{ getModeText(mapWorkCardData.modeIndicator) }} +
+ + +
+ 导航状态 + {{ mapWorkCardData.navStatus || '-' }} +
+ + +
+ 地面速率/航向 + + {{ mapWorkCardData.speedOverGround ? `${mapWorkCardData.speedOverGround}节` : '无数据' }} / + {{ mapWorkCardData.courseOverGround ? `${mapWorkCardData.courseOverGround}°` : '无数据' }} + +
+ + +
+ + +
+

三、传感器采集数据

+ + +
+ X轴加速度 + {{ mapWorkCardData.accX ? `${Number(mapWorkCardData.accX).toFixed(2)} m/s²` : '-' + }} +
+ + +
+ Y轴加速度 + {{ mapWorkCardData.accY ? `${Number(mapWorkCardData.accY).toFixed(2)} m/s²` : '-' + }} +
+ + +
+ Z轴加速度 + {{ mapWorkCardData.accZ ? `${Number(mapWorkCardData.accZ).toFixed(2)} m/s²` : '-' + }} +
+ + +
+ 翻滚角 + {{ mapWorkCardData.roll ? `${Number(mapWorkCardData.roll).toFixed(2)}°` : '-' + }} +
+ + +
+ X轴角速度 + {{ mapWorkCardData.gyroX ? `${Number(mapWorkCardData.gyroX).toFixed(2)} rad/s` : '-' + }} +
+ + +
+ Y轴角速度 + {{ mapWorkCardData.gyroY ? `${Number(mapWorkCardData.gyroY).toFixed(2)} rad/s` : '-' + }} +
+ + +
+ Z轴角速度 + {{ mapWorkCardData.gyroZ ? `${Number(mapWorkCardData.gyroZ).toFixed(2)} rad/s` : '-' + }} +
+ + +
+ 俯仰角 + {{ mapWorkCardData.pitch ? `${Number(mapWorkCardData.pitch).toFixed(2)}°` : '-' + }} +
+ + +
+
+ @@ -1061,4 +1450,81 @@ onMounted(async () => { .el-carousel--horizontal { border-radius: 14px; } + +/* 全屏弹窗基础样式 */ + + +/* 数据分区样式 */ +.data-section { + margin-bottom: 25px; + padding: 16px; + background-color: #fff; + border-radius: 8px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); +} + +/* 分区标题样式 */ +.section-heading { + margin-bottom: 15px; + padding-left: 12px; + font-size: 16px; + font-weight: 700; + color: #1890ff; + border-left: 3px solid #1890ff; +} + +/* 分区内容样式 */ +.section-content { + padding: 10px 0; +} + +/* 数据项样式 */ +.data-item { + padding: 12px 8px; + border-bottom: 1px dashed #f0f0f0; +} + +.data-item:last-child { + border-bottom: none; +} + +/* 数据项标签样式 */ +.item-label { + display: inline-block; + width: 45%; + font-size: 14px; + color: #6b7280; +} + +/* 数据项值样式 */ +.item-value { + font-size: 14px; + color: #1f2329; + font-weight: 500; +} + +/* 未启用功能项样式 */ +.disabled-item { + padding: 8px 0; + font-size: 14px; + color: #86909c; +} + +/* 底部按钮区样式 */ +.dialog-footer { + text-align: right; + padding: 10px 35px 20px; + background-color: #fff; + border-top: 1px solid #f0f0f0; +} + +/* 滚动条优化 */ +.iot-data-container::-webkit-scrollbar { + width: 8px; +} + +.iot-data-container::-webkit-scrollbar-track { + background-color: #f1f1f1; + border-radius: 4px; +}