liubiao/dyf-vue-ui
1
0
Fork 0
forked from dyf/dyf-vue-ui
Code Pull Requests Activity

设备定位地图，打点展示

Browse Source
This commit is contained in:
fengerli
2025-09-02 16:33:45 +08:00
parent 1eeb8e7f7c
commit f17e878e0c
7 changed files with 338 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

279
src/views/controlCenter/controlPanel/components/map.vue
View File

@ -2,20 +2,17 @@
<div class="amap_page">
<div ref="mapRef" class="amap-container"></div>
<div class="content_top">
<!-- 左侧列表内容保持不变 -->
<div class="content_layout">
<!-- 左侧设备列表（带复选框） -->
<div class="device_list">
<!-- 全选复选框 -->
<div class="list_header">
<div class="list_header" v-if="!isSingleDevice">
<el-checkbox v-model="checkAll" @change="handleCheckAllChange" label="全选"></el-checkbox>
</div>
<div class="device_item" v-for="(device, index) in effectiveDeviceList" :key="device.id">
<el-checkbox :value="device.id" :model-value="checkedDeviceIds.includes(device.id)"
@update:model-value="(checked: boolean) => handleCheckboxChange(checked, device.id)"
class="device_checkbox" :hidden="isSingleDevice"></el-checkbox>
<!-- 设备项（带复选框） -->
<div class="device_item" v-for="(device, index) in props.deviceList" :key="index">
<!-- 复选框 -->
<el-checkbox :value="device.id" v-model="checkedDeviceIds" class="device_checkbox"></el-checkbox>
<!-- 设备信息 -->
<div class="device_page">
<div class="device_info">
<div class="device_name">{{ device.deviceName }}</div>
@ -25,124 +22,192 @@
{{ device.onlineStatus === 1 ? '在线' : '离线' }}
</div>
</div>
<!-- 控制按钮 -->
<el-button class="control_btn" @click="handleControl(device)">控制</el-button>
</div>
</div>
<div v-if="effectiveDeviceList.length === 0" class="nodata">
<img src="@/assets/images/nodata.png" alt="" class="nodataImg">
<div class="title">暂无数据</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import {deviceVO } from '@/api/controlCenter/controlPanel/types';
import { deviceVO } from '@/api/controlCenter/controlPanel/types';
import { defineProps, ref, watch, onMounted, onUnmounted, nextTick } from 'vue';
import { useRouter, useRoute } from 'vue-router';
const props = defineProps({
deviceList: {
type: Array as PropType<deviceVO[]>, // 用PropType指定数组元素为DeviceItem
type: Array as PropType<deviceVO[]>,
required: false,
default: () => [] // 数组/对象类型的默认值必须用函数返回，避免引用共享
default: () => []
}
});
console.log(props.deviceList);
const router = useRouter();
// 声明高德地图全局类型
const route = useRoute();
declare var AMap: any;
// 地图实例
// 核心状态
const mapRef = ref<HTMLDivElement | null>(null);
let mapInstance: any = null;
// 复选框状态管理
const checkedDeviceIds = ref(); // 存储选中的设备ID
const checkAll = ref(false); // 全选状态
// 全选/取消全选
const handleCheckAllChange = (val: boolean) => {
checkedDeviceIds.value = val
? props.deviceList.map(device => device.id) // 全选：选中所有设备ID
: []; // 取消全选：清空
let infoWindow: any = null; // 信息窗口实例
const singleDeviceId = ref<string | null>(null);
const effectiveDeviceList = ref<deviceVO[]>([]);
const checkedDeviceIds = ref<string[]>([]); // 明确为字符串数组
const checkAll = ref(false);
const isSingleDevice = ref(false);
const activeDeviceName = ref(); // 当前激活的设备名称
// 初始化设备ID
const initSingleDeviceId = () => {
const idFromParams = route.params.deviceId as string;
const idFromQuery = route.query.deviceId as string;
singleDeviceId.value = idFromParams || idFromQuery || null;
isSingleDevice.value = !!singleDeviceId.value;
console.log('单设备模式:', isSingleDevice.value, '设备ID:', singleDeviceId.value);
};
const initDeviceList = () => {
if (!props.deviceList || !props.deviceList.length) {
effectiveDeviceList.value = [];
console.log('设备列表为空');
return;
}
// 监听单个复选框变化，更新全选状态
watch(checkedDeviceIds, (newVal) => {
checkAll.value = newVal.length === props.deviceList.length && props.deviceList.length > 0;
});
// 设备控制事件
const handleControl = (device: any) => {
console.log('控制设备：', device);
const deviceId = device.id;
router.push('/controlCenter/6170/' + deviceId);
};
// 新增：获取地图中心坐标（优先用设备数据，无则用默认）
const getCenterCoord = () => {
// 1. 遍历设备列表，找第一个有有效经纬度的设备
const validDevice = props.deviceList.find(
(device:any) =>
device.longitude !== undefined &&
device.longitude !== null &&
device.latitude !== undefined &&
device.latitude !== null &&
!isNaN(Number(device.longitude)) && // 确保是数字（避免字符串空值/非数字）
!isNaN(Number(device.latitude))
);
// 2. 有有效设备则用它的坐标，否则用默认值
if (validDevice) {
return [Number(validDevice.longitude), Number(validDevice.latitude)]; // 转数字防字符串坐标
if (isSingleDevice.value && singleDeviceId.value) {
const targetDevice = props.deviceList.find(
device => String(device.id) === String(singleDeviceId.value)
);
if (targetDevice) {
effectiveDeviceList.value = [targetDevice]; // 只显示匹配的单个设备
checkedDeviceIds.value = [targetDevice.id];
activeDeviceName.value = targetDevice.deviceName;
} else {
effectiveDeviceList.value = []; // 未找到匹配设备
}
} else {
return [114.4074, 30.5928]; // 默认中心坐标
// 多设备模式：显示所有设备
effectiveDeviceList.value = props.deviceList;
}
};
// 地图初始化（修改center配置）
const initMap = () => {
if (!window.AMap || !mapRef.value) return;
// 2. 调用函数获取中心坐标（不再用固定值）
const centerCoord = getCenterCoord();
// 初始化地图（重点修复部分）
const initMap = async () => {
await nextTick();
if (!window.AMap || !mapRef.value) {
return;
}
// 销毁旧实例
if (mapInstance) mapInstance.destroy();
// 创建地图实例（确保容器DOM已渲染）
mapInstance = new AMap.Map(mapRef.value, {
center: centerCoord, // 改用动态获取的坐标
zoom: 15,
center: getCenterCoord(),
zoom: isSingleDevice.value ? 5 : 5,
resizeEnable: true
});
// 后续的设备打点逻辑不变...
if (Array.isArray(props.deviceList)) {
props.deviceList.forEach(device => {
console.log(device, 'devicedevice');
if (device.longitude && device.latitude) {
new AMap.Marker({
position: [device.longitude, device.latitude],
title: device.deviceName,
map: mapInstance
});
}
// 初始化信息窗口（用于显示设备名称）
infoWindow = new AMap.InfoWindow({
offset: new AMap.Pixel(0, -30) // 偏移量，避免遮挡标记
});
// 渲染标记
renderMarkers();
};
// 获取中心坐标（确保数字类型）
const getCenterCoord = () => {
if (!effectiveDeviceList.value.length) {
return [114.4074, 30.5928];
}
// 遍历找第一个有效坐标
const validDevice = effectiveDeviceList.value.find(device => {
const lng = Number(device.longitude);
const lat = Number(device.latitude);
return !isNaN(lng) && !isNaN(lat) && lng !== 0 && lat !== 0;
});
if (validDevice) {
const lng = Number(validDevice.longitude);
const lat = Number(validDevice.latitude);
return [lng, lat];
}
// 无有效坐标时用默认
return [114.4074, 30.5928];
};
// 渲染标记（核心修复点）
const renderMarkers = () => {
if (!mapInstance || !effectiveDeviceList.value.length) return;
mapInstance.clearMap();
effectiveDeviceList.value.forEach(device => {
const lng = device.longitude !== null && device.longitude !== undefined ? Number(device.longitude) : NaN;
const lat = device.latitude !== null && device.latitude !== undefined ? Number(device.latitude) : NaN;
if (isNaN(lng) || isNaN(lat) || lng === 0 || lat === 0) {
return;
}
// 3. 创建标记（确保绑定到地图实例）
const marker = new AMap.Marker({
position: [lng, lat],
title: device.deviceName,
map: mapInstance,
icon: new AMap.Icon({
size: new AMap.Size(32, 32), // Marker显示尺寸
image: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
imageSize: new AMap.Size(32, 32)
})
});
// 4. 标记点击事件
marker.on('click', () => {
activeDeviceName.value = device.deviceName;
infoWindow.setContent(`<div style="padding:8px">${device.deviceName}</div>`);
infoWindow.open(mapInstance, [lng, lat]);
});
});
};
// 全选处理
const handleCheckAllChange = (val: boolean) => {
if (isSingleDevice.value) return;
checkedDeviceIds.value = val ? effectiveDeviceList.value.map(d => d.id) : [];
};
// 处理单个复选框变更
const handleCheckboxChange = (checked: boolean, deviceId: string) => {
if (isSingleDevice.value) return;
if (checked) {
if (!checkedDeviceIds.value.includes(deviceId)) {
checkedDeviceIds.value.push(deviceId);
}
} else {
const index = checkedDeviceIds.value.indexOf(deviceId);
if (index > -1) {
checkedDeviceIds.value.splice(index, 1);
}
}
};
watch(
() => props.deviceList, // 监听props中的deviceList
(newDeviceList) => {
if (!mapInstance || !Array.isArray(newDeviceList)) return;
// 1. 清除地图上已有的所有标记（避免重复打点）
mapInstance.clearMap();
// 2. 重新添加新的设备标记
newDeviceList.forEach((device:any) => {
console.log(device, 'device');
// 确保设备有经纬度（lng和lat），避免无效打点
if (device.longitude && device.latitude) {
new AMap.Marker({
position: [device.longitude, device.latitude],
title: device.deviceName, // 用设备名当标题（匹配父组件字段）
map: mapInstance,
});
}
});
},
{ deep: true } // 深度监听（如果设备列表里的子对象变化也能触发）
);
// 控制按钮点击
const handleControl = (device: deviceVO) => {
router.push(`/controlCenter/6170/${device.id}`);
};
// 监听路由和设备列表变化
watch(() => [route.params, route.query], () => {
initSingleDeviceId();
initDeviceList();
initMap();
}, { deep: true });
watch(() => props.deviceList, () => {
initDeviceList();
renderMarkers();
}, { deep: true });
// 初始化
onMounted(() => {
initMap();
initSingleDeviceId();
initDeviceList();
initMap();
});
onUnmounted(() => {
@ -151,7 +216,7 @@ onUnmounted(() => {
</script>
<style scoped>
/* 地图容器 */
/* 原有样式保持不变 */
.amap_page {
position: relative;
}
@ -163,6 +228,7 @@ onUnmounted(() => {
width: 100%;
}
/* 设备名称提示框 */
.content_top {
width: 210px;
border-radius: 4px;
@ -175,31 +241,25 @@ onUnmounted(() => {
left: 10px
}
/* 全选行样式 */
/* 其他样式保持不变... */
.list_header {
padding: 12px;
border-bottom: 1px solid #eee;
font-weight: 600;
}
/* 设备项样式 */
.device_item {
padding: 0px 12px;
display: flex;
align-items: center;
/* 复选框与内容间距 */
cursor: default;
transition: background 0.2s;
}
/* 复选框样式 */
.device_checkbox {
flex-shrink: 0;
/* 复选框不压缩 */
}
/* 设备信息区域 */
.device_page {
background-color: rgba(247, 248, 252, 1);
margin-bottom: 5px;
@ -235,7 +295,6 @@ onUnmounted(() => {
color: #f53f3f;
}
/* 控制按钮 */
.control_btn {
font-size: 12px;
padding: 0px 15px;
@ -247,4 +306,16 @@ onUnmounted(() => {
color: rgba(2, 124, 251, 1);
border: none;
}
.nodata{
transform: translate(-1%,100%);
left:50%;
height: 30vh;
}
.nodataImg{
width: 130px;
}
.title{
color: #666;
padding-top: 20px;
}
</style>