dyf-vue-ui/src/views/controlCenter/controlPanel/components/map.vue

<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>