forked from dyf/dyf-vue-ui
控制中心，设备控制页面功能开发
This commit is contained in:
fengerli
218
src/views/controlCenter/controlPanel/components/map.vue
Normal file
218
src/views/controlCenter/controlPanel/components/map.vue
Normal file
@ -0,0 +1,218 @@
|
||||
<template>
|
||||
<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">
|
||||
<el-checkbox v-model="checkAll" @change="handleCheckAllChange" label="全选"></el-checkbox>
|
||||
</div>
|
||||
|
||||
<!-- 设备项（带复选框） -->
|
||||
<div class="device_item" v-for="device in deviceList" :key="device.id">
|
||||
<!-- 复选框 -->
|
||||
<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.name }}</div>
|
||||
<div class="device_model">{{ device.model }}</div>
|
||||
<div class="device_status" :class="{ online: device.status === '在线', offline: device.status === '离线' }">
|
||||
{{ device.status }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 控制按钮 -->
|
||||
<el-button class="control_btn" @click="handleControl(device)">控制</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const router = useRouter();
|
||||
// 声明高德地图全局类型
|
||||
declare var AMap: any;
|
||||
|
||||
// 高德Key与安全密钥
|
||||
const AMAP_KEY = '90bc158992feb8ccd0145e168cab1307';
|
||||
const AMAP_SECURITY_CODE = '5ed9004cb461cd463580b02a775c8d91';
|
||||
|
||||
// 地图实例
|
||||
const mapRef = ref<HTMLDivElement | null>(null);
|
||||
let mapInstance: any = null;
|
||||
|
||||
// 模拟设备数据
|
||||
const deviceList = ref([
|
||||
{ id: 1, name: '6170一号', model: 'BJQ6170', status: '在线', lng: 114.4074, lat: 30.5928 },
|
||||
{ id: 2, name: '6170二号', model: 'BJQ6170', status: '在线', lng: 114.4174, lat: 30.5928 },
|
||||
{ id: 3, name: '6170三号', model: 'BJQ6170', status: '离线', lng: 114.4074, lat: 30.6028 },
|
||||
{ id: 4, name: '6170四号', model: 'BJQ6170', status: '在线', lng: 114.4174, lat: 30.6028 },
|
||||
]);
|
||||
|
||||
// 复选框状态管理
|
||||
const checkedDeviceIds = ref<number[]>([]); // 存储选中的设备ID
|
||||
const checkAll = ref(false); // 全选状态
|
||||
|
||||
// 全选/取消全选
|
||||
const handleCheckAllChange = (val: boolean) => {
|
||||
checkedDeviceIds.value = val
|
||||
? deviceList.value.map(device => device.id) // 全选：选中所有设备ID
|
||||
: []; // 取消全选：清空
|
||||
};
|
||||
|
||||
// 监听单个复选框变化，更新全选状态
|
||||
watch(checkedDeviceIds, (newVal) => {
|
||||
checkAll.value = newVal.length === deviceList.value.length && deviceList.value.length > 0;
|
||||
});
|
||||
|
||||
// 设备控制事件
|
||||
const handleControl = (device: any) => {
|
||||
console.log('控制设备：', device);
|
||||
const deviceId = device.id;
|
||||
router.push('/controlCenter/6170/' + deviceId);
|
||||
};
|
||||
|
||||
// 地图初始化（保持不变）
|
||||
const initMap = () => {
|
||||
if (!window.AMap || !mapRef.value) return;
|
||||
|
||||
mapInstance = new AMap.Map(mapRef.value, {
|
||||
center: [114.4074, 30.5928],
|
||||
zoom: 15,
|
||||
resizeEnable: true
|
||||
});
|
||||
|
||||
// 设备标记点
|
||||
deviceList.value.forEach(device => {
|
||||
new AMap.Marker({
|
||||
position: [device.lng, device.lat],
|
||||
title: device.name,
|
||||
map: mapInstance
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
window._AMapSecurityConfig = { securityJsCode: AMAP_SECURITY_CODE };
|
||||
if (window.AMap) {
|
||||
initMap();
|
||||
} else {
|
||||
const script = document.createElement('script');
|
||||
script.src = `https://webapi.amap.com/maps?v=2.0&key=${AMAP_KEY}`;
|
||||
script.onload = initMap;
|
||||
document.head.appendChild(script);
|
||||
}
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
if (mapInstance) mapInstance.destroy();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 地图容器 */
|
||||
.amap_page {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.amap-container {
|
||||
height: 640px;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.content_top {
|
||||
width: 210px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0px 0px 6px 0px rgba(0, 34, 96, 0.1);
|
||||
background: rgba(255, 255, 255, 1);
|
||||
height: 620px;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 10px;
|
||||
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;
|
||||
width: 84%;
|
||||
padding: 5px;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.device_name {
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.device_model {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.device_status {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.online {
|
||||
color: #00b42a;
|
||||
}
|
||||
|
||||
.offline {
|
||||
color: #f53f3f;
|
||||
}
|
||||
|
||||
/* 控制按钮 */
|
||||
.control_btn {
|
||||
font-size: 12px;
|
||||
padding: 0px 15px;
|
||||
flex-shrink: 0;
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
bottom: 10px;
|
||||
background: rgba(2, 124, 251, 0.06);
|
||||
color: rgba(2, 124, 251, 1);
|
||||
border:none;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user