diff --git a/src/assets/highScore/monitoring.png b/src/assets/highScore/monitoring.png
new file mode 100644
index 0000000..c731758
Binary files /dev/null and b/src/assets/highScore/monitoring.png differ
diff --git a/src/assets/highScore/tollStation.png b/src/assets/highScore/tollStation.png
new file mode 100644
index 0000000..10dd664
Binary files /dev/null and b/src/assets/highScore/tollStation.png differ
diff --git a/src/components/Legend/index.vue b/src/components/Legend/index.vue
new file mode 100644
index 0000000..a301d5b
--- /dev/null
+++ b/src/components/Legend/index.vue
@@ -0,0 +1,161 @@
+<template>
+<div class="lanyer">
+        <div>
+          <img src="/src/assets/highScore/mapIcon1.png" />
+          图例名称
+        </div>
+        <div v-for="item in layerList" :key="item.id" class="custom-checkbox">
+          <label>
+            <input type="checkbox" :checked="item.show" @change="toggleLayer(item.layerName)"/>
+            <img :src="item.url" />
+            <span>{{ item.name }}</span>
+          </label>
+        </div>
+      </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+const props = defineProps({
+  chooseBot: {
+    type: String,
+    default: ''
+  }
+});
+const emit = defineEmits(['layer-toggle']);
+const allLayerLists = {
+  default: [
+    {
+      id: 1,
+      layerName: 'warnLayer',
+      name: '事件',
+      show: true,
+      url: new URL('@/assets/highScore/warnicon1.png', import.meta.url).href,
+    },
+    {
+      id: 2,
+      layerName: 'equipmentLayer',
+      name: '设备',
+      show: true,
+      url: new URL('@/assets/highScore/equipment.png', import.meta.url).href,
+    },
+    {
+      id: 3,
+      layerName: 'carLayer',
+      name: '车辆',
+      show: true,
+      url: new URL('@/assets/highScore/caricon.png', import.meta.url).href,
+    },
+    {
+      id: 4,
+      layerName: 'emergencyLayer',
+      name: '应急设施',
+      show: true,
+      url: new URL('@/assets/highScore/Materialsicon.png', import.meta.url).href,
+    },
+  ],
+  charge: [
+    {
+      id: 1,
+      layerName: 'monitoring',
+      name: '监控',
+      show: true,
+      url: new URL('@/assets/highScore/monitoring.png', import.meta.url).href,
+    },
+    {
+      id: 2,
+      layerName: 'peopleLayer',
+      name: '设备',
+      show: true,
+      url: new URL('@/assets/highScore/equipment.png', import.meta.url).href,
+    },
+    {
+      id: 3,
+      layerName: 'carLayer',
+      name: '车辆',
+      show: true,
+      url: new URL('@/assets/highScore/caricon.png', import.meta.url).href,
+    },
+    {
+      id: 4,
+      layerName: 'tollStation',
+      name: '收费站',
+      show: true,
+      url: new URL('@/assets/highScore/tollStation.png', import.meta.url).href,
+    },
+  ],
+};
+const layerList = ref(allLayerLists.default);
+// 根据 chooseBot 过滤图层列表
+const filteredLayerList = computed(() => {
+  return layerList.value.filter(item => item.show);
+});
+
+// 监听 chooseBot 变化
+watch(() => props.chooseBot, (newVal) => {
+  switch(newVal) {
+    case 'charge':
+      layerList.value = allLayerLists.charge;
+      break;
+      case 'dataChart':
+      layerList.value = allLayerLists.charge;
+      break;
+    default:
+      layerList.value = allLayerLists.default;
+  }
+}, { immediate: true });
+
+// 切换图层显示状态
+const toggleLayer = (layerName: string) => {
+  const layer = layerList.value.find(item => item.layerName === layerName);
+  if (layer) {
+    layer.show = !layer.show;
+    emit('layer-toggle', { 
+      layerName, 
+      show: layer.show 
+    });
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.lanyer {
+    padding: 30px 0 0 20px;
+    width: 500.34px;
+    height: 550.65px;
+    color: white;
+    z-index: 9999 !important;
+    position: absolute;
+    bottom: 20%;
+    right: 18%;
+    background: url('@/assets/highScore/lanyerBg.png') no-repeat 0 0/100% 100%;
+    div {
+      font-size: 40px;
+    }
+    .custom-checkbox {
+      margin: 30px 0 20px 80px; /* 调整间距 */
+    }
+
+    .custom-checkbox img {
+      width: 50px;
+      height: 50px;
+      filter: brightness(0.88) contrast(1.22) grayscale(0) hue-rotate(360deg) opacity(1) saturate(1.1) sepia(0.54) invert(0.9);
+    }
+    .custom-checkbox label {
+      display: flex;
+      align-items: center;
+      gap: 25px; /* 调整图标和文字的间距 */
+      cursor: pointer;
+    }
+    .custom-checkbox input[type='checkbox'] {
+      width: 40px;
+      height: 40px;
+      cursor: pointer;
+    }
+
+    .custom-checkbox span {
+      color: white;
+      font-size: 36px;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/MapContainer/index.vue b/src/components/MapContainer/index.vue
index 2a1dd3a..b57338a 100644
--- a/src/components/MapContainer/index.vue
+++ b/src/components/MapContainer/index.vue
@@ -1,24 +1,19 @@
 <template>
-    <div class="map-container">
-        <div id="map-container" ref="mapContainer">
-            <div class="search" v-if="showSearch">
-                <div class="searchText">
-                    <img src="/src/assets/highScore/searchIcon.png" />
-                    <div style="margin-bottom: 10%">
-                        <a-input
-                            v-model:value="keyword"
-                            :bordered="false"
-                            placeholder="搜索"
-                            class="custom-textarea"
-                        />
-                    </div>
-                </div>
-            </div>
+  <div class="map-container">
+    <div id="map-container" ref="mapContainer">
+      <div class="search" v-if="showSearch">
+        <div class="searchText">
+          <img src="/src/assets/highScore/searchIcon.png" />
+          <div style="margin-bottom: 10%">
+            <a-input v-model:value="keyword" :bordered="false" placeholder="搜索" class="custom-textarea" />
+          </div>
         </div>
+      </div>
     </div>
+  </div>
 
-    <Board ref="boardRef" />
-    <DevInfo ref="devRef"></DevInfo>
+  <Board ref="boardRef" />
+  <DevInfo ref="devRef"></DevInfo>
 </template>
 
 <script setup lang="ts">
@@ -31,77 +26,64 @@ const searchValue = ref();
 const boardRef = ref();
 const devRef = ref();
 const router = useRouter();
+import {
+  lineLayerData,
+  lineLayerData1,
+  lineLayerData2,
+  pointData
+} from '../../views/highScore/dailyMonitoring/test';
 const emit = defineEmits(['checkWarring', 'showModal']);
 // const emit1 = defineEmits(['showModal']);
-const layerGroups = reactive<Record<string, { iconLayer: any; textLayer: any }>>({});
+const layerGroups = reactive<Record<string, { iconLayer: any; textLayer: any; }>>({});
 interface LayerConfig {
-    id: string;
-    type:
-        | 'road'
-        | 'tunnel'
-        | 'board'
-        | 'fire'
-        | 'device'
-        | 'highWay'
-        | 'explosives'
-        | 'tourism'
-        | 'ThreeShuttleBus'
-        | 'fireWorks'
-        | 'chemistryCar'
-        | 'warn'
-        | 'people'
-        | 'car'
-        | 'materials';
-    data: any;
-    style?: {
-        color?: string;
-        size?: number;
-        zIndex?: number;
-        opacity?: number;
-    };
-    options?: {
-        iconUrl?: string;
-        borderWidth?: number;
-    };
+  id: string;
+  type:
+  | 'warn'
+  | 'people'
+  | 'car'
+  | 'emergency'
+  | 'equipment';
+  data: any;
+  style?: {
+    color?: string;
+    size?: number;
+    zIndex?: number;
+    opacity?: number;
+  };
+  options?: {
+    iconUrl?: string;
+    borderWidth?: number;
+  };
 }
 interface Props {
-    // 地图配置
-    center?: [number, number];
-    zoom?: number;
-    // 搜索配置
-    showSearch?: boolean;
-    searchPlaceholder?: string;
-    // 地图服务配置
-    tileUrl?: string;
-    amapKey?: string;
-    tdtKey?: string;
-    roadLayer?: LayerConfig;
-    tunnelLayer?: LayerConfig;
-    boardLayer?: LayerConfig;
-    fireLayer?: LayerConfig;
-    deviceLayer?: LayerConfig;
-    highWayLayer?: LayerConfig;
-    explosivesLayer?: LayerConfig;
-    tourismLayer?: LayerConfig;
-    ThreeShuttleBusLayer?: LayerConfig;
-    fireWorksLayer?: LayerConfig;
-    chemistryCarLayer?: LayerConfig;
-    lineLayer?: LayerConfig;
-    warnLayer?: LayerConfig;
-    peopleLayer?: LayerConfig;
-    carLayer?: LayerConfig;
-    materialsLayer?: LayerConfig;
+  // 地图配置
+  center?: [number, number];
+  zoom?: number;
+  // 搜索配置
+  showSearch?: boolean;
+  searchPlaceholder?: string;
+  // 地图服务配置
+  tileUrl?: string;
+  amapKey?: string;
+  tdtKey?: string;
+  lineLayer?: LayerConfig;
+  warnLayer?: LayerConfig;
+  peopleLayer?: LayerConfig;
+  carLayer?: LayerConfig;
+  materialsLayer?: LayerConfig;
+  equipmentLayer?: LayerConfig;
+  emergencyLayer?: LayerConfig;
 }
 
 const props = withDefaults(defineProps<Props>(), {
-    center: () => [106.548817, 29.586823],
-    zoom: 10,
-    showSearch: true,
-    searchPlaceholder: '请输入搜索位置',
-    markerSize: 55,
-    tileUrl: '',
-    amapKey: '890b7bd3ba085d8adf3710dfc6a7b395',
-    tdtKey: '06b92b37abfb8a2f0dd1e623c1715ee5',
+  center: () => [106.548817, 29.586823],
+  zoom: 10,
+  showSearch: true,
+  searchPlaceholder: '请输入搜索位置',
+  markerSize: 55,
+  tileUrl: '',
+  amapKey: '890b7bd3ba085d8adf3710dfc6a7b395',
+  tdtKey: '06b92b37abfb8a2f0dd1e623c1715ee5',
 });
 
 const keyword = ref('');
@@ -110,742 +92,324 @@ const scene = shallowRef<Scene | null>(null);
 const map = shallowRef<any>(null);
 // 初始化L7地图
 const initL7Map = async () => {
-    scene.value = new Scene({
-        id: 'map-container',
-        map: new Map({
-            center: props.center,
-            zoom: props.zoom,
-        }),
-    });
-
-    scene.value.on('loaded', async () => {
-        // 1. 底图图层
-        if (props.tileUrl) {
-            const baseLayer = new RasterLayer({ zIndex: 0 }).source(props.tileUrl, {
-                parser: { type: 'rasterTile', tileSize: 256, dataType: 'image' },
-            });
-            scene.value?.addLayer(baseLayer);
-        }
-        //圆圈
-        if (props.warnLayer) {
-            const pointLayer = new PointLayer()
-                .source({
-                    type: 'FeatureCollection',
-                    features: [
-                        {
-                            type: 'Feature',
-                            properties: {},
-                            geometry: {
-                                type: 'Point',
-                                coordinates: [106.5488177260367, 29.58682303545917],
-                            },
-                        },
-                    ],
-                })
-                .shape('circle')
-                .size(230) // 圆圈直径（像素）
-                .color('#045697') // 填充颜色
-                .style({
-                    stroke: '#04c4cb', // 边框颜色
-                    strokeWidth: 3, // 边框宽度
-                    opacity: 0.5, // 透明度
-                });
-            scene.value?.addLayer(pointLayer);
-        }
-        // 2. 事件图层
-        if (props.warnLayer) {
-            await scene.value.addImage(
-                'warn-icon',
-                new URL('@/assets/coordinated/warnicon.png', import.meta.url).href,
-            );
-            const warnLayer = new PointLayer({
-                zIndex: props.warnLayer.style?.zIndex || 1,
-                name: 'warn-layer',
-                visible: true,
-            })
-
-                .source(props.warnLayer.data, {
-                    parser: {
-                        type: 'json',
-                        x: 'lng',
-                        y: 'lat',
-                    },
-                })
-                .shape('warn-icon')
-                .size(props.warnLayer.style?.size || 2);
-            scene.value?.addLayer(warnLayer);
-            warnLayer.on('click', e => {
-                console.log('事件图层', e);
-                emit('showModal');
-            });
-            layerInstances['warnLayer'] = warnLayer;
-        }
-
-        // 3. 人员图层
-        if (props.peopleLayer) {
-            await scene.value.addImage(
-                'people-icon',
-                new URL('@/assets/coordinated/people.png', import.meta.url).href,
-            );
-
-            const peopleLayer = new PointLayer({
-                zIndex: props.peopleLayer.style?.zIndex || 2,
-                name: 'people-layer',
-                visible: true,
-            })
-                .source(props.peopleLayer.data)
-                .shape('people-icon')
-                .size(props.peopleLayer.style?.size || 50);
-            scene.value?.addLayer(peopleLayer);
-            layerInstances['peopleLayer'] = peopleLayer;
-            peopleLayer.on('click', e => {
-                emit('showModal');
-            });
-        }
-
-        // 4. 车辆图层
-        if (props.carLayer) {
-            await scene.value.addImage(
-                'car-icon',
-                new URL('@/assets/coordinated/car.png', import.meta.url).href,
-            );
-
-            const carLayer = new PointLayer({
-                zIndex: props.carLayer.style?.zIndex || 4,
-                name: 'car-layer',
-                visible: true,
-            })
-                .source(props.carLayer.data)
-                .shape('car-icon')
-                .size(props.carLayer.style?.size || 15)
-                .style({
-                    offsets: [0, 20],
-                });
-            scene.value?.addLayer(carLayer);
-            carLayer.on('click', e => {
-                emit('showModal');
-            });
-            layerInstances['carLayer'] = carLayer;
-        }
-
-        // 5. 物资图层
-        if (props.materialsLayer) {
-            await scene.value.addImage(
-                'materials-icon',
-                new URL('@/assets/coordinated/Materials.png', import.meta.url).href,
-            );
-
-            const materialsLayer = new PointLayer({
-                zIndex: props.materialsLayer.style?.zIndex || 5,
-                name: 'materials-layer',
-                visible: true,
-            })
-                .source(props.materialsLayer.data)
-                .shape('materials-icon')
-                .size(props.materialsLayer.style?.size || 25)
-                .animate({
-                    enable: true,
-                    speed: 1,
-                    rings: 3,
-                });
-            scene.value?.addLayer(materialsLayer);
-            materialsLayer.on('click', e => {
-                emit('showModal');
-            });
-            layerInstances['materialsLayer'] = materialsLayer;
-        }
-
-        // 2. 公路图层（线图层）
-        if (props.roadLayer) {
-            const roadLayer = new LineLayer({
-                zIndex: props.roadLayer.style?.zIndex || 1,
-                name: 'road-layer',
-                visible: true,
-            })
-                .source(props.roadLayer.data)
-                .size(props.roadLayer.style?.size || 2)
-                .color(props.roadLayer.style?.color || '#4a7af0');
-            scene.value?.addLayer(roadLayer);
-            layerInstances['lineLayer'] = roadLayer;
-        }
-
-        // 3. 隧道图层（点图层+文字标注）
-        if (props.tunnelLayer) {
-            await scene.value.addImage(
-                'tunnel-icon',
-                new URL('@/assets/images/traffic/point/tunnel.svg', import.meta.url).href,
-            );
-
-            const tunnelLayer = new PointLayer({
-                zIndex: props.tunnelLayer.style?.zIndex || 2,
-                name: 'tunnel-layer',
-                visible: false,
-            })
-                .source(props.tunnelLayer.data)
-                .shape('tunnel-icon')
-                .size(props.tunnelLayer.style?.size || 50);
-            scene.value?.addLayer(tunnelLayer);
-            layerInstances['tunnelLayer'] = tunnelLayer;
-            tunnelLayer.on('click', e => {
-                console.log('隧道图层', e);
-                router.push('/tunnel/' + e.feature.id);
-            });
-        }
-
-        // 4. 情报板图层
-        if (props.boardLayer) {
-            await scene.value.addImage(
-                'board-icon',
-                new URL('@/assets/images/traffic/point/board.svg', import.meta.url).href,
-            );
-
-            const boardLayer = new PointLayer({
-                zIndex: props.boardLayer.style?.zIndex || 4,
-                name: 'board-layer',
-                visible: false,
-            })
-                .source(props.boardLayer.data)
-                .shape('board-icon')
-                .size(props.boardLayer.style?.size || 15)
-                .style({
-                    offsets: [0, 20],
-                });
-            scene.value?.addLayer(boardLayer);
-            boardLayer.on('click', e => {
-                console.log('情报板图层', e);
-                boardRef.value.open = true;
-            });
-            layerInstances['boardLayer'] = boardLayer;
-        }
-
-        // 5. 火灾图层
-        if (props.fireLayer) {
-            await scene.value.addImage(
-                'fire-icon',
-                new URL('@/assets/images/traffic/point/fire.svg', import.meta.url).href,
-            );
-
-            const fireLayer = new PointLayer({
-                zIndex: props.fireLayer.style?.zIndex || 5,
-                name: 'fire-layer',
-                visible: false,
-            })
-                .source(props.fireLayer.data)
-                .shape('fire-icon')
-                .size(props.fireLayer.style?.size || 25)
-                .animate({
-                    enable: true,
-                    speed: 1,
-                    rings: 3,
-                });
-            scene.value?.addLayer(fireLayer);
-            fireLayer.on('click', e => {
-                console.log('监控', e);
-                devRef.value.open = true;
-            });
-            layerInstances['fireLayer'] = fireLayer;
-        }
-
-        // 6. 隧道分布器图层
-        if (props.deviceLayer) {
-            await scene.value.addImage(
-                'device-icon',
-                new URL('@/assets/images/traffic/point/device.svg', import.meta.url).href,
-            );
-
-            const deviceLayer = new PointLayer({
-                zIndex: props.deviceLayer.style?.zIndex || 6,
-                name: 'device-layer',
-                visible: false,
-            })
-                .source(props.deviceLayer.data)
-                .shape('device-icon')
-                .size(props.deviceLayer.style?.size || 15);
-            scene.value?.addLayer(deviceLayer);
-            deviceLayer.on('click', e => {
-                console.log('监控', e);
-                devRef.value.open = true;
-            });
-            layerInstances['deviceLayer'] = deviceLayer;
-        }
-
-        //7.高速公路文字标注图层
-        if (props.highWayLayer) {
-            // await scene.value.addImage(
-            //     'highWay-icon',
-            //     new URL('@/assets/images/watch/blueBg.png', import.meta.url).href,
-            // );
-            const layer = new PointLayer({
-                zIndex: props.highWayLayer.style?.zIndex || 7,
-                name: 'highWay-layer',
-                visible: true,
-            })
-                .source(props.highWayLayer.data.list, {
-                    parser: {
-                        type: 'json',
-                        x: 'j',
-                        y: 'w',
-                    },
-                })
-                .shape('square')
-                .color('c')
-                .size(15)
-                .style({
-                    stroke: 'white',
-                    strokeWidth: 0.5,
-                });
-            scene.value?.addLayer(layer);
-
-            const highWayLayer = new PointLayer({
-                zIndex: props.highWayLayer.style?.zIndex || 7,
-                name: 'highWay-layer',
-                visible: true,
-            })
-
-                .source(props.highWayLayer.data.list, {
-                    parser: {
-                        type: 'json',
-                        x: 'j',
-                        y: 'w',
-                    },
-                })
-                .shape('m', 'text')
-                // .shape('highWay-icon')
-                .size(props.highWayLayer.style?.size || 15)
-                .color('f')
-                .style({
-                    textAnchor: 'center',
-                    textOffset: [0, 0],
-                    spacing: 2,
-                    padding: [1, 1],
-                    strokeOpacity: 1.0,
-                });
-            scene.value?.addLayer(highWayLayer);
-
-            // const highWayLayer1 = new PointLayer({
-            //     zIndex: props.highWayLayer.style?.zIndex || 7,
-            //     name: 'highWay-layer',
-            //     visible: true,
-            // })
-
-            //     .source(props.highWayLayer.data.list, {
-            //         parser: {
-            //             type: 'json',
-            //             x: 'j',
-            //             y: 'w',
-            //         },
-            //     })
-            //     .shape('m', 'text')
-            //     .size(12)
-            //     .color('f')
-            //     .style({
-            //         textAnchor: 'center',
-            //         textOffset: [0, 0],
-            //         spacing: 2,
-            //         padding: [1, 1],
-            //         strokeOpacity: 1.0,
-            //     });
-            // scene.value?.addLayer(highWayLayer1);
-            layerInstances['highWayLayer'] = highWayLayer;
-        }
-
-        //8.民用爆炸品专用车图层
-        if (props.explosivesLayer) {
-            await scene.value.addImage(
-                'explosives-icon',
-                new URL('@/assets/images/danger/point/1.svg', import.meta.url).href,
-            );
-
-            const iconLayer = new PointLayer({
-                zIndex: props.explosivesLayer.style?.zIndex || 6,
-                name: 'explosives-layer',
-                visible: true,
-            })
-                .source(props.explosivesLayer.data)
-                .shape('explosives-icon')
-                .size(props.explosivesLayer.style?.size || 15);
-
-            const textLayer = new PointLayer({
-                zIndex: props.explosivesLayer.style?.zIndex || 6,
-                name: 'explosives-layer',
-                visible: true,
-            })
-                .source(props.explosivesLayer.data)
-                .shape('text')
-                .size(15)
-                .color('#026b88')
-                .style({
-                    textOffset: [5, 70], // 文本相对锚点的偏移量 [水平, 垂直]
-                    textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
-                    padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
-                    stroke: '#00DCFF', // 描边颜色
-                    strokeWidth: 0.5, // 描边宽度
-                    strokeOpacity: 1.0,
-                });
-            // 添加到场景
-            scene.value?.addLayer(iconLayer);
-            scene.value?.addLayer(textLayer);
-            iconLayer.on('click', e => {
-                emit('checkWarring');
-            });
-            // 保存图层组
-            layerGroups['explosivesLayer'] = {
-                iconLayer,
-                textLayer,
-            };
-        }
-
-        //9.旅游包车图层
-        if (props.tourismLayer) {
-            await scene.value.addImage(
-                'tourism-icon',
-                new URL('@/assets/images/danger/point/2.svg', import.meta.url).href,
-            );
-
-            const iconLayer = new PointLayer({
-                zIndex: props.tourismLayer.style?.zIndex || 6,
-                name: 'tourism-layer',
-                visible: true,
-            })
-                .source(props.tourismLayer.data)
-                .shape('tourism-icon')
-                .size(props.tourismLayer.style?.size || 15);
-            const textLayer = new PointLayer({
-                zIndex: props.tourismLayer.style?.zIndex || 6,
-                name: 'tourism-layer',
-                visible: true,
-            })
-                .source(props.tourismLayer.data)
-                .shape('text')
-                .size(15)
-                .color('#023d7d')
-                .style({
-                    textOffset: [5, 70], // 文本相对锚点的偏移量 [水平, 垂直]
-                    textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
-                    padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
-                    stroke: '#0276b6', // 描边颜色
-                    strokeWidth: 0.5, // 描边宽度
-                    strokeOpacity: 1.0,
-                });
-            // 添加到场景
-            scene.value?.addLayer(iconLayer);
-            scene.value?.addLayer(textLayer);
-            iconLayer.on('click', e => {
-                emit('checkWarring');
-            });
-            // 保存图层组
-            layerGroups['tourismLayer'] = {
-                iconLayer,
-                textLayer,
-            };
-        }
-
-        //10.三类以上班线客车
-        if (props.ThreeShuttleBusLayer) {
-            await scene.value.addImage(
-                'ThreeShuttleBus-icon',
-                new URL('@/assets/images/danger/point/3.svg', import.meta.url).href,
-            );
-
-            const iconLayer = new PointLayer({
-                zIndex: props.ThreeShuttleBusLayer.style?.zIndex || 6,
-                name: 'Three-shuttle-bus-layer',
-                visible: true,
-            })
-                .source(props.ThreeShuttleBusLayer.data)
-                .shape('ThreeShuttleBus-icon')
-                .size(props.ThreeShuttleBusLayer.style?.size || 15);
-            const textLayer = new PointLayer({
-                zIndex: props.ThreeShuttleBusLayer.style?.zIndex || 6,
-                name: 'Three-shuttle-bus-layer',
-                visible: true,
-            })
-                .source(props.ThreeShuttleBusLayer.data)
-                .shape('text')
-                .size(15)
-                .color('#028978')
-                .style({
-                    textOffset: [5, 70], // 文本相对锚点的偏移量 [水平, 垂直]
-                    textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
-                    padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
-                    stroke: '#03a583', // 描边颜色
-                    strokeWidth: 0.5, // 描边宽度
-                    strokeOpacity: 1.0,
-                });
-            // 添加到场景
-            scene.value?.addLayer(iconLayer);
-            scene.value?.addLayer(textLayer);
-            iconLayer.on('click', e => {
-                emit('checkWarring');
-            });
-            // 保存图层组
-            layerGroups['ThreeShuttleBusLayer'] = {
-                iconLayer,
-                textLayer,
-            };
-        }
-
-        //11.烟花爆竹专用车
-        if (props.fireWorksLayer) {
-            await scene.value.addImage(
-                'fireWorks-icon',
-                new URL('@/assets/images/danger/point/4.svg', import.meta.url).href,
-            );
-
-            const iconLayer = new PointLayer({
-                zIndex: props.fireWorksLayer.style?.zIndex || 6,
-                name: 'fire-works-layer',
-                visible: true,
-            })
-                .source(props.fireWorksLayer.data)
-                .shape('fireWorks-icon')
-                .size(props.fireWorksLayer.style?.size || 15);
-
-            const textLayer = new PointLayer({
-                zIndex: props.fireWorksLayer.style?.zIndex || 6,
-                name: 'fire-works-layer',
-                visible: true,
-            })
-                .source(props.fireWorksLayer.data)
-                .shape('text')
-                .size(15)
-                .color('#864a05')
-                .style({
-                    textOffset: [5, 70], // 文本相对锚点的偏移量 [水平, 垂直]
-                    textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
-                    padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
-                    stroke: '#ba7b3d', // 描边颜色
-                    strokeWidth: 0.5, // 描边宽度
-                    strokeOpacity: 1.0,
-                });
-            // 添加到场景
-            scene.value?.addLayer(iconLayer);
-            scene.value?.addLayer(textLayer);
-            iconLayer.on('click', e => {
-                emit('checkWarring');
-            });
-            // 保存图层组
-            layerGroups['fireWorksLayer'] = {
-                iconLayer,
-                textLayer,
-            };
-        }
-
-        //12.危险化学品专用车
-        if (props.chemistryCarLayer) {
-            await scene.value.addImage(
-                'chemistryCar-icon',
-                new URL('@/assets/images/danger/point/5.svg', import.meta.url).href,
-            );
-
-            const iconLayer = new PointLayer({
-                zIndex: props.chemistryCarLayer.style?.zIndex || 6,
-                name: 'chemistry-car-layer',
-                visible: true,
-            })
-                .source(props.chemistryCarLayer.data)
-                .shape('chemistryCar-icon')
-                .size(props.chemistryCarLayer.style?.size || 15);
+  scene.value = new Scene({
+    id: 'map-container',
+    map: new Map({
+      center: props.center,
+      zoom: props.zoom,
+    }),
+  });
+
+  scene.value.on('loaded', async () => {
+    // 1. 底图图层
+    if (props.tileUrl) {
+      const baseLayer = new RasterLayer({ zIndex: 0 }).source(props.tileUrl, {
+        parser: { type: 'rasterTile', tileSize: 256, dataType: 'image' },
+      });
+      scene.value?.addLayer(baseLayer);
+
+        //名字
+      const layer = new PointLayer()
+        .source(pointData.features, {
+          parser: {
+            type: 'json',
+            x: 'j',
+            y: 'w',
+          },
+        })
+        .shape('square')
+        .color('backgoundColor')
+        .size(50);
+      scene.value.addLayer(layer);
+
+      const textLayer = new PointLayer({})
+        .source(pointData.features, {
+          parser: {
+            type: 'json',
+            x: 'j',
+            y: 'w',
+          },
+        })
+        .shape('m', 'text')
+        .size(30)
+        .color('black')
+        .style({
+          textAnchor: 'center',
+          textOffset: [2, -5],
+          spacing: 2,
+          padding: [1, 1],
+          stroke: 'black',
+          strokeWidth: 0.3,
+          strokeOpacity: 1.0,
+          fontFamily: 'Times New Roman',
+          textAllowOverlap: true,
+        });
+        scene.value.addLayer(textLayer);
+      
+      // const lineLayer = new LineLayer({
+      //   name: 'lineLayer',
+      //   visible: true,
+      // })
+      //   .source(lineLayerData)
+      //   .size(5)
+      //   .color('color')
+      //   .style({
+      //     opacity: 1,
+      //   });
+      // scene.value.addLayer(lineLayer);
+
+
+      // const lineLayer1 = new LineLayer({
+      //   name: 'lineLayer',
+      //   visible: true,
+      // })
+      //   .source(lineLayerData1)
+      //   .size(5)
+      //   .color('color')
+      //   .style({
+      //     opacity: 1,
+      //   });
+      // scene.value.addLayer(lineLayer1);
+
+
+      // const lineLayer2 = new LineLayer({
+      //   name: 'lineLayer',
+      //   visible: true,
+      // })
+      //   .source(lineLayerData2)
+      //   .size(5)
+      //   .style({
+      //     opacity: 1,
+      //     sourceColor: '#00887f',
+      //     targetColor: '#00887f',
+      //     linearDir: 'horizontal',
+      //   });
+      // scene.value.addLayer(lineLayer2);
+    }
 
-            const textLayer = new PointLayer({
-                zIndex: props.chemistryCarLayer.style?.zIndex || 6,
-                name: 'chemistry-car-layer',
-                visible: true,
-            })
-                .source(props.chemistryCarLayer.data)
-                .shape('text')
-                .size(15)
-                .color('#902506')
-                .style({
-                    textOffset: [5, 70], // 文本相对锚点的偏移量 [水平, 垂直]
-                    textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
-                    padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
-                    stroke: '#c84724', // 描边颜色
-                    strokeWidth: 0.5, // 描边宽度
-                    strokeOpacity: 1.0,
-                });
-            // 添加到场景
-            scene.value?.addLayer(iconLayer);
-            scene.value?.addLayer(textLayer);
-            iconLayer.on('click', e => {
-                emit('checkWarring');
-            });
-            // 保存图层组
-            layerGroups['chemistryCarLayer'] = {
-                iconLayer,
-                textLayer,
-            };
-        }
+    // 2. 事件图层
+    if (props.warnLayer) {
+      await scene.value.addImage(
+        'warn-icon',
+        new URL('@/assets/highScore/eventLanyer.png', import.meta.url).href,
+      );
+      const warnLayer = new PointLayer({
+        zIndex: props.warnLayer.style?.zIndex || 1,
+        name: 'warn-layer',
+        visible: true,
+      })
+
+        .source(props.warnLayer.data, {
+          parser: {
+            type: 'json',
+            x: 'lng',
+            y: 'lat',
+          },
+        })
+        .shape('warn-icon')
+        .size(props.warnLayer.style?.size || 2);
+      scene.value?.addLayer(warnLayer);
+      warnLayer.on('click', e => {
+        // console.log('事件图层', e);
+        // emit('showModal');
+      });
+      layerInstances['warnLayer'] = warnLayer;
+    }
 
-        // 13.3D弧线
-        if (props.lineLayer) {
-            await scene.value.addImage(
-                'marker',
-                'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*BJ6cTpDcuLcAAAAAAAAAAABkARQnAQ',
-            );
-            const data = {
-                type: 'FeatureCollection',
-                features: [
-                    {
-                        type: 'Feature',
-                        geometry: {
-                            type: 'Point',
-                            coordinates: [106.5828177260367, 29.55982303545917],
-                        },
-                    },
-                ],
-            };
-            const imageLayer = new PointLayer().source(data).shape('marker').size(20).style({
-                zIndex: 10,
-            });
-            const layer = new LineLayer({})
-                .source(props.lineLayer.data, {
-                    parser: {
-                        type: 'json',
-                        x: 'lng1',
-                        y: 'lat1',
-                        x1: 'lng2',
-                        y1: 'lat2',
-                        z: 'height', // 使用高度字段
-                    },
-                })
-                .size(2)
-                .shape('arc3d')
-                .color('#dfe2b4')
-                .style({
-                    zIndex: 1,
-                    curvature: 3.0,
-                });
+    // 3. 设备图层
+    if (props.equipmentLayer) {
+      await scene.value.addImage(
+        'equipmentLayer-icon',
+        new URL('@/assets/highScore/equipmentLanyer.png', import.meta.url).href,
+      );
+
+      const equipmentLayer = new PointLayer({
+        zIndex: props.equipmentLayer.style?.zIndex || 2,
+        name: 'equipmentLayer-layer',
+        visible: true,
+      })
+        .source(props.equipmentLayer.data, {
+          parser: {
+            type: 'json',
+            x: 'lng',
+            y: 'lat',
+          },
+        })
+        .shape('equipmentLayer-icon')
+        .size(props.equipmentLayer.style?.size || 50);
+      scene.value?.addLayer(equipmentLayer);
+      layerInstances['equipmentLayer'] = equipmentLayer;
+      equipmentLayer.on('click', e => {
+        emit('showModal');
+      });
+    }
 
-            // 提取所有终点坐标
-            const endPoints = props.lineLayer.data.map(item => ({
-                lng: item.lng2,
-                lat: item.lat2,
-                name: item.name,
-            }));
+    // 4. 车辆图层
+    if (props.carLayer) {
+      await scene.value.addImage(
+        'car-icon',
+        new URL('@/assets/highScore/carLanyer.png', import.meta.url).href,
+      );
+
+      const carLayer = new PointLayer({
+        zIndex: props.carLayer.style?.zIndex || 4,
+        name: 'car-layer',
+        visible: true,
+      })
+        .source(props.carLayer.data,{
+          parser: {
+            type: 'json',
+            x: 'lng',
+            y: 'lat',
+          },
+        })
+        .shape('car-icon')
+        .size(props.carLayer.style?.size || 15)
+        .style({
+          offsets: [0, 20],
+        });
+      scene.value?.addLayer(carLayer);
+      carLayer.on('click', e => {
+        emit('showModal');
+      });
+      layerInstances['carLayer'] = carLayer;
+    }
 
-            // 添加终点圆点图层
-            const endPointLayer = new PointLayer()
-                .source(endPoints, {
-                    parser: {
-                        type: 'json',
-                        x: 'lng',
-                        y: 'lat',
-                    },
-                })
-                .shape('circle')
-                .size(8)
-                .color('#5289d2')
-                .style({
-                    stroke: '#FFF',
-                    strokeWidth: 2,
-                    zIndex: 10,
-                });
-            scene.value?.addLayer(imageLayer);
-            scene.value?.addLayer(endPointLayer);
-            scene.value?.addLayer(layer);
-        }
-    });
+    // 5. 应急措施图层
+    if (props.emergencyLayer) {
+      await scene.value.addImage(
+        'emergency-icon',
+        new URL('@/assets/highScore/emergencyLanyer.png', import.meta.url).href,
+      );
+
+      const emergencyLayer = new PointLayer({
+        zIndex: props.emergencyLayer.style?.zIndex || 5,
+        name: 'emergency-layer',
+        visible: true,
+      })
+        .source(props.emergencyLayer.data,{
+          parser: {
+            type: 'json',
+            x: 'lng',
+            y: 'lat',
+          },
+        })
+        .shape('emergency-icon')
+        .size(props.emergencyLayer.style?.size || 25)
+      scene.value?.addLayer(emergencyLayer);
+      emergencyLayer.on('click', e => {
+        emit('showModal');
+      });
+      layerInstances['emergencyLayer'] = emergencyLayer;
+    }
+  });
 };
 
 const layerInstances = reactive<Record<string, any>>({});
 
 // 暴露图层控制方法给父组件
 defineExpose({
-    setLayerVisible: (layerName: string, visible: boolean) => {
-        const layer = layerInstances[layerName];
-        if (layer) {
-            visible ? layer.show() : layer.hide();
-        }
-    },
-    setLayerGroupVisible: (groupName: string, visible: boolean) => {
-        const group = layerGroups[groupName];
-        if (group) {
-            group.iconLayer[visible ? 'show' : 'hide']();
-            group.textLayer[visible ? 'show' : 'hide']();
-        }
-    },
+  setLayerVisible: (layerName: string, visible: boolean) => {
+    const layer = layerInstances[layerName];
+    if (layer) {
+      visible ? layer.show() : layer.hide();
+    }
+  },
+  setLayerGroupVisible: (groupName: string, visible: boolean) => {
+    const group = layerGroups[groupName];
+    if (group) {
+      group.iconLayer[visible ? 'show' : 'hide']();
+      group.textLayer[visible ? 'show' : 'hide']();
+    }
+  },
 });
 
 onMounted(() => {
-    initL7Map();
+  initL7Map();
 });
 
 onBeforeUnmount(() => {
-    if (map.value) {
-        map.value.destroy();
-    }
-    if (scene.value) {
-        scene.value.destroy();
-    }
+  if (map.value) {
+    map.value.destroy();
+  }
+  if (scene.value) {
+    scene.value.destroy();
+  }
 });
 </script>
 
 <style lang="less" scoped>
 .map-container {
   position: absolute;
-          top: -2%;
-          left: 7%;
-    width: 6000px;
-    height: 2500px;
-    border-radius: 15% / 50%; /* 使边框变成椭圆形，横轴和纵轴不同的比例 */
-    overflow: hidden; /* 防止内容溢出 */
-    position: relative;
-    filter: brightness(0.88) contrast(1.22) grayscale(0) hue-rotate(360deg) opacity(1) saturate(1.1)
-        sepia(0.54) invert(0.9);
+  top: -2%;
+  left: 7%;
+  width: 6000px;
+  height: 2500px;
+  border-radius: 15% / 50%;
+  /* 使边框变成椭圆形，横轴和纵轴不同的比例 */
+  overflow: hidden;
+  /* 防止内容溢出 */
+  position: relative;
+  filter: brightness(0.88) contrast(1.22) grayscale(0) hue-rotate(360deg) opacity(1) saturate(1.1) sepia(0.54) invert(0.9);
 }
+
 .map-search-input {
-    position: absolute;
-    z-index: 999;
-    top: 10px;
-    left: 10px;
-    padding: 8px;
-    width: 300px;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  position: absolute;
+  z-index: 999;
+  top: 10px;
+  left: 10px;
+  padding: 8px;
+  width: 300px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
 .search {
-    z-index: 9999;
-    position: absolute;
-    top: -4%;
-    left: 0;
-    background: url('/src/assets/highScore/searchBg.png') no-repeat 0 0/100% 100%;
-    width: 250px;
+  z-index: 9999;
+  position: absolute;
+  top: -4%;
+  left: 0;
+  background: url('/src/assets/highScore/searchBg.png') no-repeat 0 0/100% 100%;
+  width: 250px;
+  height: 32px;
+
+  .searchText {
+    width: 246px;
     height: 32px;
-    .searchText {
-        width: 246px;
-        height: 32px;
-        display: flex;
-        position: relative;
-        position: absolute;
-        top: 6%;
-        left: 2%;
-        img {
-            position: absolute;
-            top: 20%;
-            left: 2%;
-            width: 15px;
-            height: 16px;
-        }
-        div {
-            position: absolute;
-            top: -10%;
-            left: 8%;
-        }
-        .custom-textarea::placeholder {
-            color: white;
-            opacity: 1;
-            font-size: 18px;
-        }
-        .ant-input {
-            margin-bottom: 10px;
-            font-size: 18px;
-            // background-color: #0c2237;
-            width: 350px;
-            color: white;
-        }
+    display: flex;
+    position: relative;
+    position: absolute;
+    top: 6%;
+    left: 2%;
+
+    img {
+      position: absolute;
+      top: 20%;
+      left: 2%;
+      width: 15px;
+      height: 16px;
+    }
+
+    div {
+      position: absolute;
+      top: -10%;
+      left: 8%;
+    }
+
+    .custom-textarea::placeholder {
+      color: white;
+      opacity: 1;
+      font-size: 18px;
+    }
+
+    .ant-input {
+      margin-bottom: 10px;
+      font-size: 18px;
+      // background-color: #0c2237;
+      width: 350px;
+      color: white;
     }
+  }
 }
 </style>
diff --git a/src/views/highScore/dailyMonitoring/index.vue b/src/views/highScore/dailyMonitoring/index.vue
index 1dba429..38927bc 100644
--- a/src/views/highScore/dailyMonitoring/index.vue
+++ b/src/views/highScore/dailyMonitoring/index.vue
@@ -23,18 +23,14 @@
           </div>
           <div class="map-data">
             <!-- <div id="watch-map" v-show="chooseBot != 'surveillance'"></div> -->
-             <div v-show="chooseBot != 'surveillance'">
-              <MapContainer
-                :center="[106.5488177260367, 29.58682303545917]"
-                :zoom="13"
-                :showSearch="true"
-                tileUrl="http://192.168.1.37:9999/sys/common/static/vec/{z}/{x}/{y}/tile.png"
-                id="watch-map"
-                ref="mapRef"
-                
-            />
-             </div>
-         
+            <div v-show="chooseBot != 'surveillance'">
+              <MapContainer :center="[106.5488177260367, 29.58682303545917]" :zoom="13" :warn-layer="warnLayerConfig"
+              :emergency-layer="emergencyLayerConfig"
+                :car-layer="carLayerConfig" :equipment-layer="equipmentLayerConfig" :showSearch="true"
+                tileUrl="http://192.168.1.37:9999/sys/common/static/vec/{z}/{x}/{y}/tile.png" id="watch-map"
+                ref="mapRef" />
+            </div>
+
             <surveillance class="watch-video" v-show="chooseBot === 'surveillance'" />
 
             <div class="info-map" v-if="showMapInfo">
@@ -71,7 +67,7 @@
         </div>
       </div>
 
-   
+
       <div v-show="chooseBot === 'tunnel'">
         <tunnel></tunnel>
       </div>
@@ -81,815 +77,638 @@
       <div class="event-detail" v-show="visible">
         <resPonseShowModal @cancel-icon="handleshowModal" />
       </div>
+      <legend1 v-show="chooseBot != 'tunnel' && chooseBot != 'surveillance'" @layer-toggle="handleLayerToggle"
+        :choose-bot="chooseBot"></legend1>
+
 
-      <div class="lanyer" v-show="chooseBot != 'tunnel' && chooseBot != 'surveillance'">
-        <div>
-          <img src="/src/assets/highScore/mapIcon1.png" />
-          图例名称
-        </div>
-        <div v-for="item in layerList" :key="item.id" class="custom-checkbox">
-          <label>
-            <input type="checkbox" :checked="item.show" @change="handleLayer(item.layerName)" />
-            <img :src="item.url" />
-            <span>{{ item.name }}</span>
-          </label>
-        </div>
-      </div>
     </div>
   </div>
 </template>
 <script lang="ts" setup>
-  import { ref, onMounted } from 'vue';
-  import { BaiduMap } from '@antv/l7-maps';
-  import { Scene, LineLayer, PointLayer } from '@antv/l7';
-
-  import { useRouter } from 'vue-router';
-  const router = useRouter();
-  import LeftList from './container/containerLeft.vue';
-  import rightList from './container/containerright.vue';
-  import resPonseLeftList from '../emergencyResponse/container/containerLeft.vue';
-  import resPonserightList from '../emergencyResponse/container/containerright.vue';
-  import resPonseShowModal from '../emergencyResponse/container/showModal.vue';
-  import chargerightList from '../chargeMonitoring/container/containerright.vue';
-  import chargeLeftList from '../chargeMonitoring/container/containerLeft.vue';
-  import holidaysrightList from '../holidays/container/containerright.vue';
-  import holidaysLeftList from '../holidays/container/containerLeft.vue';
-  import dataVisualizationrightList from '../dataVisualization/container/containerright.vue';
-  import dataVisualizationLeftList from '../dataVisualization/container/containerLeft.vue';
-  import surveillancerightList from '../video/container/containerright.vue';
-  import surveillanceLeftList from '../video/container/containerLeft.vue';
-  import surveillance from '../video/container/index.vue';
-  import MapContainer from '../../../components/MapContainer/index.vue';
-  import tunnel from '../tunnelMonitoring/container/index.vue';
-  import bottom from './container/bottom.vue';
-  import {
-    lineLayerData,
-    lineLayerData1,
-    lineLayerData2,
-    pointData,
-    responseData,
-    chargeAddLayer1,
-    chargeAddLayer2,
-    chargeAddLayer3,
-    chargeAddLayer4,
-    dailyAddLayer1,
-    dailyAddLayer2,
-    dailyAddLayer3,
-    dailyAddLayer4,
-  } from './test';
-  const scene = ref();
-  const chooseBot = ref('monitoring');
-  const visible = ref<boolean>(false);
-  const imageLayerRef = ref(null);
-  const isImageAdded = ref<boolean>(false); // 标记图片资源是否已添加
-  const showMapInfo = ref<boolean>(false);
-  const time = ref('');
-  let timer;
-  const action = ref<'map' | 'watch'>('map');
-  const componentLeft = {
-    response: resPonseLeftList,
-    monitoring: LeftList,
-    charge: chargeLeftList,
-    holidays: holidaysLeftList,
-    dataChart: dataVisualizationLeftList,
-    surveillance: surveillanceLeftList,
-  };
-  const componentRight = {
-    response: resPonserightList,
-    monitoring: rightList,
-    charge: chargerightList,
-    holidays: holidaysrightList,
-    dataChart: dataVisualizationrightList,
-    surveillance: surveillancerightList,
-  };
-  const getImageUrl = imagePath => {
-    return new URL(`/src/${imagePath}`, import.meta.url).href;
+import { ref, onMounted } from 'vue';
+import { BaiduMap } from '@antv/l7-maps';
+import { Scene, LineLayer, PointLayer } from '@antv/l7';
+
+import { useRouter } from 'vue-router';
+const router = useRouter();
+import LeftList from './container/containerLeft.vue';
+import rightList from './container/containerright.vue';
+import resPonseLeftList from '../emergencyResponse/container/containerLeft.vue';
+import resPonserightList from '../emergencyResponse/container/containerright.vue';
+import resPonseShowModal from '../emergencyResponse/container/showModal.vue';
+import chargerightList from '../chargeMonitoring/container/containerright.vue';
+import chargeLeftList from '../chargeMonitoring/container/containerLeft.vue';
+import holidaysrightList from '../holidays/container/containerright.vue';
+import holidaysLeftList from '../holidays/container/containerLeft.vue';
+import dataVisualizationrightList from '../dataVisualization/container/containerright.vue';
+import dataVisualizationLeftList from '../dataVisualization/container/containerLeft.vue';
+import surveillancerightList from '../video/container/containerright.vue';
+import surveillanceLeftList from '../video/container/containerLeft.vue';
+import surveillance from '../video/container/index.vue';
+import MapContainer from '../../../components/MapContainer/index.vue';
+import tunnel from '../tunnelMonitoring/container/index.vue';
+import bottom from './container/bottom.vue';
+import legend1 from '../../../components/Legend/index.vue';
+import {
+  pointData,
+  responseData,
+  chargeAddLayer1,
+  chargeAddLayer2,
+  chargeAddLayer3,
+  chargeAddLayer4,
+  dailyAddLayer1,
+  dailyAddLayer2,
+  dailyAddLayer3,
+  dailyAddLayer4,
+} from './test';
+const scene = ref();
+const chooseBot = ref('monitoring');
+const visible = ref<boolean>(false);
+const imageLayerRef = ref(null);
+const isImageAdded = ref<boolean>(false); // 标记图片资源是否已添加
+const showMapInfo = ref<boolean>(false);
+const time = ref('');
+let timer;
+const action = ref<'map' | 'watch'>('map');
+const componentLeft = {
+  response: resPonseLeftList,
+  monitoring: LeftList,
+  charge: chargeLeftList,
+  holidays: holidaysLeftList,
+  dataChart: dataVisualizationLeftList,
+  surveillance: surveillanceLeftList,
 };
-  function getDate() {
-    const weeks = ['天', '一', '二', '三', '四', '五', '六'];
-    const now = new Date();
-    const year = now.getFullYear();
-    const pad = '0';
-
-    const month = (now.getMonth() + 1 + '').padStart(2, pad);
-    const day = (now.getDate() + '').padStart(2, pad);
-    const week = now.getDay();
-    const hours = (now.getHours() + '').padStart(2, pad);
-    const minutes = (now.getMinutes() + '').padStart(2, pad);
-    const seconds = (now.getSeconds() + '').padStart(2, pad);
-    const fn = new Function(
-      'year',
-      'month',
-      'day',
-      'week',
-      'hours',
-      'minutes',
-      'seconds',
-      'return `${year}:${month}:${day} ${hours}:${minutes}:${seconds} 星期${week}`'
-    );
-    const time = fn(year, month, day, weeks[week], hours, minutes, seconds);
-    return time;
-  }
-  timer = setInterval(() => {
-    time.value = getDate();
-  }, 1000);
-
-  const layerList = ref<
-    {
-      id: number;
-      layerName: string;
-      name: string;
-      show: boolean;
-      url: string;
-    }[]
-  >([
-    {
-      id: 1,
-      layerName: 'warnLayer',
-      name: '事件',
-      show: true,
-      url: new URL('@/assets/highScore/warnicon1.png', import.meta.url).href,
-    },
-    {
-      id: 2,
-      layerName: 'peopleLayer',
-      name: '设备',
-      show: true,
-      url: new URL('@/assets/highScore/equipment.png', import.meta.url).href,
-    },
-    {
-      id: 3,
-      layerName: 'carLayer',
-      name: '车辆',
-      show: true,
-      url: new URL('@/assets/highScore/caricon.png', import.meta.url).href,
-    },
-    {
-      id: 4,
-      layerName: 'materialsLayer',
-      name: '应急设施',
-      show: true,
-      url: new URL('@/assets/highScore/Materialsicon.png', import.meta.url).href,
-    },
-  ]);
-  const showModal = () => {
-    visible.value = true;
-  };
-  const changeModal = () => {
-    visible.value = false;
-  };
-
-  const handleshowModal = (e) => {
-    visible.value = e;
-  };
-
-  // 底部导航栏
-  const handleIconSelected = (id) => {
-    changeModal();
-    chooseBot.value = id;
-    console.log('Received ID:', chooseBot);
-    // if (chooseBot.value == 'response') {
-    //   responseAdddLayer();
-    // } else if (chooseBot.value == 'charge') {
-    //   Object.values(chargeAddLayer).forEach((method) => {
-    //     if (typeof method === 'function') {
-    //       method();
-    //     }
-    //   });
-    // } else if (chooseBot.value == 'tunnel') {
-    //   // router.push('/highScore/tunnelMonitoring');
-    // } else if (chooseBot.value == 'holidays') {
-    //   Object.values(chargeAddLayer).forEach((method) => {
-    //     if (typeof method === 'function') {
-    //       method();
-    //     }
-    //   });
-    //   showMapInfo.value = true;
-    // } else {
-    //   showMapInfo.value = false;
-    //   removeImageLayer();
-    // }
-  };
-
-  // 路线图层
-  const adddLayer = {
-    // 线路
-    lineLayer() {
-      const lineLayer = new LineLayer({
-        name: 'lineLayer',
-        visible: true,
-      })
-        .source(lineLayerData)
-        .size(5)
-        .color('color')
-        .style({
-          opacity: 1,
-        });
-      scene.value.addLayer(lineLayer);
-    },
-    lineLayer1() {
-      const lineLayer = new LineLayer({
-        name: 'lineLayer',
-        visible: true,
-      })
-        .source(lineLayerData1)
-        .size(5)
-        .color('color')
-        .style({
-          opacity: 1,
-        });
-      scene.value.addLayer(lineLayer);
-    },
-    lineLayer2() {
-      const lineLayer = new LineLayer({
-        name: 'lineLayer',
-        visible: true,
-      })
-        .source(lineLayerData2)
-        .size(5)
-        .style({
-          opacity: 1,
-          sourceColor: '#00887f',
-          targetColor: '#00887f',
-          linearDir: 'horizontal',
-        });
-      scene.value.addLayer(lineLayer);
-    },
-
-    //名字
-    nameLayer() {
-      const layer = new PointLayer()
-        .source(pointData.features, {
-          parser: {
-            type: 'json',
-            x: 'j',
-            y: 'w',
-          },
-        })
-        .shape('square')
-        .color('backgoundColor')
-        .size(65);
-      scene.value.addLayer(layer);
-
-      const textLayer = new PointLayer({})
-        .source(pointData.features, {
-          parser: {
-            type: 'json',
-            x: 'j',
-            y: 'w',
-          },
-        })
-        .shape('m', 'text')
-        .size(40)
-        .color('black')
-        .style({
-          textAnchor: 'center',
-          textOffset: [2, -5],
-          spacing: 2,
-          padding: [1, 1],
-          stroke: '#ffffff',
-          strokeWidth: 0.3,
-          strokeOpacity: 1.0,
-          fontFamily: 'Times New Roman',
-          textAllowOverlap: true,
-        });
-      scene.value.addLayer(textLayer);
-    },
-  };
-
-  //日常监控图层
-  const dailyAddLayer = {
-    //事件
-    addLayer1() {
-      scene.value.addImage('addLayer1', new URL('@/assets/highScore/eventLanyer.png', import.meta.url).href);
-      const addLayer1 = new PointLayer({
-        name: 'addLayer1',
-        zIndex: 2,
-      })
-        .source(dailyAddLayer1, {
-          parser: {
-            type: 'json',
-            x: 'lng',
-            y: 'lat',
-          },
-        })
-        .shape('addLayer1')
-        .size(88)
-        .style({
-          offsets: [0, 20],
-          raisingHeight: 10,
-        });
-      scene.value.addLayer(addLayer1);
-    },
-
-    //设备
-    addLayer2() {
-      scene.value.addImage('addLayer2', new URL('@/assets/highScore/equipmentLanyer.png', import.meta.url).href);
-      const addLayer2 = new PointLayer({
-        name: 'addLayer2',
-        zIndex: 2,
-      })
-        .source(dailyAddLayer2, {
-          parser: {
-            type: 'json',
-            x: 'lng',
-            y: 'lat',
-          },
-        })
-        .shape('addLayer2')
-        .size(88)
-        .style({
-          offsets: [0, 20],
-          raisingHeight: 10,
-        });
-      scene.value.addLayer(addLayer2);
-    },
-
-    //车辆
-    addLayer3() {
-      scene.value.addImage('addLayer3', new URL('@/assets/highScore/carLanyer.png', import.meta.url).href);
-      const addLayer3 = new PointLayer({
-        name: 'addLayer3',
-        zIndex: 2,
-      })
-        .source(dailyAddLayer3, {
-          parser: {
-            type: 'json',
-            x: 'lng',
-            y: 'lat',
-          },
-        })
-        .shape('addLayer3')
-        .size(88)
-        .style({
-          offsets: [0, 20],
-          raisingHeight: 10,
-        });
-      scene.value.addLayer(addLayer3);
-    },
-
-    //应急设施
-    addLayer4() {
-      scene.value.addImage('addLayer4', new URL('@/assets/highScore/emergencyLanyer.png', import.meta.url).href);
-      const addLayer4 = new PointLayer({
-        name: 'addLayer4',
-        zIndex: 2,
-      })
-        .source(dailyAddLayer4, {
-          parser: {
-            type: 'json',
-            x: 'lng',
-            y: 'lat',
-          },
-        })
-        .shape('addLayer4')
-        .size(88)
-        .style({
-          offsets: [0, 20],
-          raisingHeight: 10,
-        });
-      scene.value.addLayer(addLayer4);
-    },
-  };
-
-  //收费监控图层
-  const chargeAddLayer = {
-    addLayer1() {
-      scene.value.addImage('addLayer1', new URL('@/assets/highScore/charge/LayerIcon.png', import.meta.url).href);
-      const addLayer1 = new PointLayer({
-        name: 'addLayer1',
-        zIndex: 2,
-      })
-        .source(chargeAddLayer1, {
-          parser: {
-            type: 'json',
-            x: 'lng',
-            y: 'lat',
-          },
-        })
-        .shape('addLayer1')
-        .size(88)
-        .style({
-          offsets: [0, 20],
-          raisingHeight: 10,
-        });
-      scene.value.addLayer(addLayer1);
-    },
-
-    addLayer2() {
-      scene.value.addImage('addLayer2', new URL('@/assets/highScore/charge/layerIcon1.png', import.meta.url).href);
-      const addLayer2 = new PointLayer({
-        name: 'addLayer2',
-        zIndex: 2,
-      })
-        .source(chargeAddLayer2, {
-          parser: {
-            type: 'json',
-            x: 'lng',
-            y: 'lat',
-          },
-        })
-        .shape('addLayer2')
-        .size(88)
-        .style({
-          offsets: [0, 20],
-          raisingHeight: 10,
-        });
-      scene.value.addLayer(addLayer2);
-    },
-
-    addLayer3() {
-      scene.value.addImage('addLayer3', new URL('@/assets/highScore/charge/LayerIcon2.png', import.meta.url).href);
-      const addLayer3 = new PointLayer({
-        name: 'addLayer3',
-        zIndex: 2,
+const componentRight = {
+  response: resPonserightList,
+  monitoring: rightList,
+  charge: chargerightList,
+  holidays: holidaysrightList,
+  dataChart: dataVisualizationrightList,
+  surveillance: surveillancerightList,
+};
+const getImageUrl = imagePath => {
+  return new URL(`/src/${imagePath}`, import.meta.url).href;
+};
+function getDate() {
+  const weeks = ['天', '一', '二', '三', '四', '五', '六'];
+  const now = new Date();
+  const year = now.getFullYear();
+  const pad = '0';
+
+  const month = (now.getMonth() + 1 + '').padStart(2, pad);
+  const day = (now.getDate() + '').padStart(2, pad);
+  const week = now.getDay();
+  const hours = (now.getHours() + '').padStart(2, pad);
+  const minutes = (now.getMinutes() + '').padStart(2, pad);
+  const seconds = (now.getSeconds() + '').padStart(2, pad);
+  const fn = new Function(
+    'year',
+    'month',
+    'day',
+    'week',
+    'hours',
+    'minutes',
+    'seconds',
+    'return `${year}:${month}:${day} ${hours}:${minutes}:${seconds} 星期${week}`'
+  );
+  const time = fn(year, month, day, weeks[week], hours, minutes, seconds);
+  return time;
+}
+timer = setInterval(() => {
+  time.value = getDate();
+}, 1000);
+
+const showModal = () => {
+  visible.value = true;
+};
+const changeModal = () => {
+  visible.value = false;
+};
+
+const handleshowModal = (e) => {
+  visible.value = e;
+};
+const mapRef = ref();
+const handleLayerToggle = ({ layerName, show }: { layerName: string; show: boolean; }) => {
+  console.log(`图层 ${layerName} 状态变为: ${show ? '显示' : '隐藏'}`);
+  mapRef.value.setLayerVisible(layerName,show);
+};
+
+// 底部导航栏
+const handleIconSelected = (id) => {
+  changeModal();
+  chooseBot.value = id;
+  console.log('Received ID:', chooseBot);
+};
+
+// 事件图层配置
+const warnLayerConfig = {
+  id: 'warn-layer',
+  type: 'warn',
+  data: dailyAddLayer1,
+  style: {
+    size: 120,
+    zIndex: 2,
+  },
+};
+
+// 设备图层配置
+const equipmentLayerConfig = {
+  id: 'equipment-layer',
+  type: 'equipment',
+  data: dailyAddLayer2,
+  style: {
+    size: 120,
+    zIndex: 2,
+  },
+};
+
+// 车辆图层配置
+const carLayerConfig = {
+  id: 'car-layer',
+  type: 'car',
+  data: dailyAddLayer3,
+  style: {
+    size: 120,
+    zIndex: 2,
+  },
+};
+
+// 应急措施图层配置
+const emergencyLayerConfig = {
+  id: 'emergency-layer',
+  type: 'emergency',
+  data: dailyAddLayer4,
+  style: {
+    size: 120,
+    zIndex: 2,
+  },
+};
+
+//收费监控图层
+const chargeAddLayer = {
+  addLayer1() {
+    scene.value.addImage('addLayer1', new URL('@/assets/highScore/charge/LayerIcon.png', import.meta.url).href);
+    const addLayer1 = new PointLayer({
+      name: 'addLayer1',
+      zIndex: 2,
+    })
+      .source(chargeAddLayer1, {
+        parser: {
+          type: 'json',
+          x: 'lng',
+          y: 'lat',
+        },
       })
-        .source(chargeAddLayer3, {
-          parser: {
-            type: 'json',
-            x: 'lng',
-            y: 'lat',
-          },
-        })
-        .shape('addLayer3')
-        .size(88)
-        .style({
-          offsets: [0, 20],
-          raisingHeight: 10,
-        });
-      scene.value.addLayer(addLayer3);
-    },
-
-    addLayer4() {
-      scene.value.addImage('addLayer4', new URL('@/assets/highScore/charge/LayerIcon3.png', import.meta.url).href);
-      const addLayer4 = new PointLayer({
-        name: 'addLayer4',
-        zIndex: 2,
+      .shape('addLayer1')
+      .size(88)
+      .style({
+        offsets: [0, 20],
+        raisingHeight: 10,
+      });
+    scene.value.addLayer(addLayer1);
+  },
+
+  addLayer2() {
+    scene.value.addImage('addLayer2', new URL('@/assets/highScore/charge/layerIcon1.png', import.meta.url).href);
+    const addLayer2 = new PointLayer({
+      name: 'addLayer2',
+      zIndex: 2,
+    })
+      .source(chargeAddLayer2, {
+        parser: {
+          type: 'json',
+          x: 'lng',
+          y: 'lat',
+        },
       })
-        .source(chargeAddLayer4, {
-          parser: {
-            type: 'json',
-            x: 'lng',
-            y: 'lat',
-          },
-        })
-        .shape('addLayer4')
-        .size(88)
-        .style({
-          offsets: [0, 20],
-          raisingHeight: 10,
-        });
-      scene.value.addLayer(addLayer4);
-    },
-  };
-
-  //应急处理图层
-  const responseAdddLayer = () => {
-    if (!isImageAdded.value) {
-      scene.value.addImage('response', new URL('@/assets/highScore/record/event.png', import.meta.url).href);
-      isImageAdded.value = true;
-    }
-    if (imageLayerRef.value) {
-      scene.value.removeLayer(imageLayerRef.value);
-    }
+      .shape('addLayer2')
+      .size(88)
+      .style({
+        offsets: [0, 20],
+        raisingHeight: 10,
+      });
+    scene.value.addLayer(addLayer2);
+  },
 
-    imageLayerRef.value = new PointLayer({
-      name: 'responseLayer',
-      zIndex: 1,
+  addLayer3() {
+    scene.value.addImage('addLayer3', new URL('@/assets/highScore/charge/LayerIcon2.png', import.meta.url).href);
+    const addLayer3 = new PointLayer({
+      name: 'addLayer3',
+      zIndex: 2,
     })
-      .source(responseData, {
+      .source(chargeAddLayer3, {
         parser: {
           type: 'json',
           x: 'lng',
           y: 'lat',
         },
       })
-      .shape('response')
-      .size(80)
+      .shape('addLayer3')
+      .size(88)
       .style({
         offsets: [0, 20],
         raisingHeight: 10,
+      });
+    scene.value.addLayer(addLayer3);
+  },
+
+  addLayer4() {
+    scene.value.addImage('addLayer4', new URL('@/assets/highScore/charge/LayerIcon3.png', import.meta.url).href);
+    const addLayer4 = new PointLayer({
+      name: 'addLayer4',
+      zIndex: 2,
+    })
+      .source(chargeAddLayer4, {
+        parser: {
+          type: 'json',
+          x: 'lng',
+          y: 'lat',
+        },
       })
-      .on('click', (e) => {
-        console.log('事件图层', e);
-        showModal();
+      .shape('addLayer4')
+      .size(88)
+      .style({
+        offsets: [0, 20],
+        raisingHeight: 10,
       });
-    console.log('2222');
-    scene.value.addLayer(imageLayerRef.value);
-  };
-
-  const removeImageLayer = () => {
-    if (imageLayerRef.value) {
-      scene.value.removeLayer(imageLayerRef.value);
-      imageLayerRef.value = null; // 重置引用
-    }
-  };
-  onMounted(() => {
-    // router.push('/highScore/dailyMonitoring');
-    scene.value = new Scene({
-      id: 'watch-map',
-      map: new BaiduMap({
-        center: [106.5488177260367, 29.58682303545917],
-        zoom: 30,
-        style: '344b005fd5b4220a55241c25e7733e81',
-        logoVisible: false,
-      }),
-    });
-    Object.values(adddLayer).forEach((method) => {
-      if (typeof method === 'function') {
-        method();
-      }
-    });
+    scene.value.addLayer(addLayer4);
+  },
+};
 
-    Object.values(dailyAddLayer).forEach((method) => {
-      if (typeof method === 'function') {
-        method();
-      }
+//应急处理图层
+const responseAdddLayer = () => {
+  if (!isImageAdded.value) {
+    scene.value.addImage('response', new URL('@/assets/highScore/record/event.png', import.meta.url).href);
+    isImageAdded.value = true;
+  }
+  if (imageLayerRef.value) {
+    scene.value.removeLayer(imageLayerRef.value);
+  }
+
+  imageLayerRef.value = new PointLayer({
+    name: 'responseLayer',
+    zIndex: 1,
+  })
+    .source(responseData, {
+      parser: {
+        type: 'json',
+        x: 'lng',
+        y: 'lat',
+      },
+    })
+    .shape('response')
+    .size(80)
+    .style({
+      offsets: [0, 20],
+      raisingHeight: 10,
+    })
+    .on('click', (e) => {
+      console.log('事件图层', e);
+      showModal();
     });
-  });
+  console.log('2222');
+  scene.value.addLayer(imageLayerRef.value);
+};
+
+const removeImageLayer = () => {
+  if (imageLayerRef.value) {
+    scene.value.removeLayer(imageLayerRef.value);
+    imageLayerRef.value = null; // 重置引用
+  }
+};
+onMounted(() => {
+
+
+});
 </script>
 <style lang="less" scoped>
-  @import './dailyMonitoring.less';
-  .watch-bottom {
-    z-index: 9999 !important;
-    position: absolute;
-    bottom: 3%;
-    left: 35%;
+@import './dailyMonitoring.less';
+
+.watch-bottom {
+  z-index: 9999 !important;
+  position: absolute;
+  bottom: 3%;
+  left: 35%;
+}
+
+.lanyer {
+  padding: 30px 0 0 20px;
+  width: 500.34px;
+  height: 550.65px;
+  color: white;
+  z-index: 9999 !important;
+  position: absolute;
+  bottom: 20%;
+  right: 18%;
+  background: url('@/assets/highScore/lanyerBg.png') no-repeat 0 0/100% 100%;
+
+  div {
+    font-size: 40px;
+  }
+
+  .custom-checkbox {
+    margin: 30px 0 20px 80px;
+    /* 调整间距 */
+  }
+
+  .custom-checkbox img {
+    width: 50px;
+    height: 50px;
+  }
+
+  .custom-checkbox label {
+    display: flex;
+    align-items: center;
+    gap: 25px;
+    /* 调整图标和文字的间距 */
+    cursor: pointer;
+  }
+
+  .custom-checkbox input[type='checkbox'] {
+    width: 40px;
+    height: 40px;
+    cursor: pointer;
   }
-  .lanyer {
-    padding: 30px 0 0 20px;
-    width: 500.34px;
-    height: 550.65px;
+
+  .custom-checkbox span {
     color: white;
-    z-index: 9999 !important;
-    position: absolute;
-    bottom: 20%;
-    right: 18%;
-    background: url('@/assets/highScore/lanyerBg.png') no-repeat 0 0/100% 100%;
-    div {
-      font-size: 40px;
-    }
-    .custom-checkbox {
-      margin: 30px 0 20px 80px; /* 调整间距 */
-    }
+    font-size: 36px;
+  }
+}
 
-    .custom-checkbox img {
-      width: 50px;
-      height: 50px;
-    }
-    .custom-checkbox label {
-      display: flex;
-      align-items: center;
-      gap: 25px; /* 调整图标和文字的间距 */
-      cursor: pointer;
-    }
-    .custom-checkbox input[type='checkbox'] {
-      width: 40px;
-      height: 40px;
-      cursor: pointer;
-    }
+.time {
+  width: 898px;
+  height: 88px;
+  font-family:
+    HarmonyOS Sans,
+    HarmonyOS Sans;
+  font-weight: 400;
+  color: #ffffff;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+  position: absolute;
+  right: 1%;
+  top: 53%;
 
-    .custom-checkbox span {
-      color: white;
-      font-size: 36px;
-    }
+  span {
+    font-size: 66px;
   }
-  .time {
-    width: 898px;
-    height: 88px;
-    font-family:
-      HarmonyOS Sans,
-      HarmonyOS Sans;
-    font-weight: 400;
-    color: #ffffff;
-    text-align: left;
-    font-style: normal;
-    text-transform: none;
-    position: absolute;
-    right: 1%;
-    top: 53%;
-    span {
-      font-size: 66px;
-    }
+}
+
+.event-detail {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 9999;
+}
+
+.flipped {
+  transform: rotate(180deg);
+  transition: transform 0.3s ease;
+}
+
+.watch-mode {
+  width: 100%;
+  height: 100%;
+  padding: 50px 150px;
+  display: flex;
+
+  .watch-left,
+  .watch-right {
+    width: 25%;
+    height: 100%;
   }
-  .event-detail {
+
+  .control-top {
+    width: 30vmin;
+    height: 8%;
     position: absolute;
-    top: 50%;
     left: 50%;
-    transform: translate(-50%, -50%);
-    z-index: 9999;
-  }
-  .flipped {
-    transform: rotate(180deg);
-    transition: transform 0.3s ease;
+    top: 120%;
+    transform: translateX(-50%);
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    z-index: 999;
+    background: url(/src/assets/coordinated/tcBg1.png) no-repeat 0 0 / 100% 100%;
   }
-  .watch-mode {
-    width: 100%;
-    height: 100%;
-    padding: 50px 150px;
+
+  .control {
+    width: 80vmin;
+    height: 10vmin;
+    position: absolute;
+    bottom: -44%;
+    left: 50%;
+    transform: translateX(-50%);
     display: flex;
-    .watch-left,
-    .watch-right {
-      width: 25%;
-      height: 100%;
-    }
-    .control-top {
-      width: 30vmin;
-      height: 8%;
-      position: absolute;
-      left: 50%;
-      top: 120%;
-      transform: translateX(-50%);
-      display: flex;
-      justify-content: space-evenly;
-      align-items: center;
-      z-index: 999;
-      background: url(/src/assets/coordinated/tcBg1.png) no-repeat 0 0 / 100% 100%;
+    justify-content: space-evenly;
+    align-items: center;
+    z-index: 999;
+    background: url('@/assets/coordinated/tcBg.png') no-repeat 0 0/100% 100%;
+
+    .layer {
+      margin: 0 10px;
+      font-size: 18px;
+
+      img {
+        width: 20px;
+        height: 20px;
+        vertical-align: middle;
+        margin-right: 5px;
+      }
     }
-    .control {
-      width: 80vmin;
-      height: 10vmin;
+  }
+
+  .watch-center {
+    flex: 1;
+    margin-right: 10px;
+    margin-top: 30px;
+    position: relative;
+
+    .map-select {
+      width: 114px;
+      height: 877px;
+      background: linear-gradient(270deg, #002746 0%, #005fa8 100%);
+      border-radius: 0px 0px 0px 0px;
+      border: 1px solid rgba(13, 205, 255, 0.33);
+      opacity: 0.8;
       position: absolute;
-      bottom: -44%;
-      left: 50%;
-      transform: translateX(-50%);
-      display: flex;
-      justify-content: space-evenly;
-      align-items: center;
-      z-index: 999;
-      background: url('@/assets/coordinated/tcBg.png') no-repeat 0 0/100% 100%;
-      .layer {
-        margin: 0 10px;
-        font-size: 18px;
-        img {
-          width: 20px;
-          height: 20px;
-          vertical-align: middle;
-          margin-right: 5px;
-        }
+      top: 3%;
+      left: 2%;
+
+      img {
+        margin-top: 45%;
       }
     }
-    .watch-center {
-      flex: 1;
-      margin-right: 10px;
-      margin-top: 30px;
+
+    .map-data {
+      height: 80%;
       position: relative;
-      .map-select {
-        width: 114px;
-        height: 877px;
-        background: linear-gradient(270deg, #002746 0%, #005fa8 100%);
-        border-radius: 0px 0px 0px 0px;
-        border: 1px solid rgba(13, 205, 255, 0.33);
-        opacity: 0.8;
+
+      .watch-video {
         position: absolute;
-        top: 3%;
-        left: 2%;
-        img {
-          margin-top: 45%;
-        }
+        top: -6%;
+        left: -15%;
+        width: 130%;
+        height: 120%;
       }
-      .map-data {
-        height: 80%;
-        position: relative;
-        .watch-video {
-          position: absolute;
-          top: -6%;
-          left: -15%;
-          width: 130%;
-          height: 120%;
+
+      .info-map {
+        display: flex;
+        z-index: 9998 !important;
+        position: absolute;
+        top: 10%;
+        left: 23%;
+
+        .info1 {
+          width: 1300px;
+          height: 200px;
+          background: url('@/assets/highScore/holidays/mapInfoBg.png') no-repeat 0 0/100% 100%;
         }
-        .info-map {
+
+        .title {
           display: flex;
-          z-index: 9998 !important;
-          position: absolute;
-          top: 10%;
-          left: 23%;
-          .info1 {
-            width: 1300px;
-            height: 200px;
-            background: url('@/assets/highScore/holidays/mapInfoBg.png') no-repeat 0 0/100% 100%;
-          }
-          .title {
-            display: flex;
-            justify-content: space-evenly;
-            text-align: left;
-            padding: 2% 0 0 0;
-            div {
-              font-weight: 500;
-              font-size: 34px;
-              color: #ffffff;
-            }
-          }
-          .num {
-            display: flex;
-            justify-content: space-evenly;
-            div {
-              font-weight: 500;
-              font-size: 34px;
-              color: #ffffff;
-              span {
-                width: 200px;
-                height: 200px;
-                background-color: #00807e;
-                color: white;
-                font-size: 50px;
-              }
-            }
+          justify-content: space-evenly;
+          text-align: left;
+          padding: 2% 0 0 0;
+
+          div {
+            font-weight: 500;
+            font-size: 34px;
+            color: #ffffff;
           }
         }
-        .data {
-          position: absolute;
-          top: 10px;
-          right: 0;
-          width: 9.5vmin;
-          height: 57vmin;
-          padding: 10px 0;
-          background-color: rgba(31, 67, 101, 0.8);
-          .item {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            margin-bottom: 10px;
-            .data-value {
-              width: 6.5vmin;
-              height: 6.5vmin;
-              line-height: 6.5vmin;
-              font-weight: 500;
-              font-size: 20px;
-              text-align: center;
-              background: url('@/assets/images/watch/circle-bg.png') no-repeat 0 0/100% 100%;
-            }
-            .data-name {
-              font-size: 14px;
+
+        .num {
+          display: flex;
+          justify-content: space-evenly;
+
+          div {
+            font-weight: 500;
+            font-size: 34px;
+            color: #ffffff;
+
+            span {
+              width: 200px;
+              height: 200px;
+              background-color: #00807e;
+              color: white;
+              font-size: 50px;
             }
           }
         }
       }
-      .car-statistics {
-        margin-top: 2px;
-        width: 100%;
-        height: 28vmin;
-        padding: 0 10px;
-        background-color: rgba(6, 30, 72, 0.8);
-        .title {
-          height: 40px;
-          line-height: 40px;
-          font-size: 20px;
-          padding: 0 10px;
-          font-weight: 700;
-          color: #84caff;
-          background: url('@/assets/images/watch/title-bg.png') no-repeat 0 0/100% 100%;
-        }
-        .content {
+
+      .data {
+        position: absolute;
+        top: 10px;
+        right: 0;
+        width: 9.5vmin;
+        height: 57vmin;
+        padding: 10px 0;
+        background-color: rgba(31, 67, 101, 0.8);
+
+        .item {
           display: flex;
-          justify-content: space-between;
+          flex-direction: column;
           align-items: center;
-          height: 25vmin;
-          padding: 1%;
-          box-sizing: border-box;
-          .left {
-            margin-right: 10px;
-            .car {
-              display: flex;
-              margin-bottom: 25px;
-              img {
-                height: 6vmin;
-              }
-              .name {
-                min-width: 22vmin;
-                height: 3.5vmin;
-                line-height: 3.5vmin;
-                padding: 0 10px;
-                background-color: rgba(31, 61, 84, 0.7);
-                margin-bottom: 10px;
-              }
-              .value {
-                color: #91bcf3;
-                font-weight: 600;
-                font-size: 18px;
-                .unit {
-                  color: #fff;
-                  font-size: 12px;
-                  margin-left: 2%;
-                }
-              }
-            }
+          margin-bottom: 10px;
+
+          .data-value {
+            width: 6.5vmin;
+            height: 6.5vmin;
+            line-height: 6.5vmin;
+            font-weight: 500;
+            font-size: 20px;
+            text-align: center;
+            background: url('@/assets/images/watch/circle-bg.png') no-repeat 0 0/100% 100%;
           }
-          .right {
-            .right-title {
-              width: 19vmin;
+
+          .data-name {
+            font-size: 14px;
+          }
+        }
+      }
+    }
+
+    .car-statistics {
+      margin-top: 2px;
+      width: 100%;
+      height: 28vmin;
+      padding: 0 10px;
+      background-color: rgba(6, 30, 72, 0.8);
+
+      .title {
+        height: 40px;
+        line-height: 40px;
+        font-size: 20px;
+        padding: 0 10px;
+        font-weight: 700;
+        color: #84caff;
+        background: url('@/assets/images/watch/title-bg.png') no-repeat 0 0/100% 100%;
+      }
+
+      .content {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        height: 25vmin;
+        padding: 1%;
+        box-sizing: border-box;
+
+        .left {
+          margin-right: 10px;
+
+          .car {
+            display: flex;
+            margin-bottom: 25px;
+
+            img {
               height: 6vmin;
-              line-height: 6vmin;
-              text-align: center;
-              background: url('@/assets/images/watch/statistics3.png') no-repeat 0 0/100% 100%;
             }
-            #percent-chart {
-              width: 60vmin;
-              height: 19vmin;
+
+            .name {
+              min-width: 22vmin;
+              height: 3.5vmin;
+              line-height: 3.5vmin;
+              padding: 0 10px;
+              background-color: rgba(31, 61, 84, 0.7);
+              margin-bottom: 10px;
+            }
+
+            .value {
+              color: #91bcf3;
+              font-weight: 600;
+              font-size: 18px;
+
+              .unit {
+                color: #fff;
+                font-size: 12px;
+                margin-left: 2%;
+              }
             }
           }
         }
+
+        .right {
+          .right-title {
+            width: 19vmin;
+            height: 6vmin;
+            line-height: 6vmin;
+            text-align: center;
+            background: url('@/assets/images/watch/statistics3.png') no-repeat 0 0/100% 100%;
+          }
+
+          #percent-chart {
+            width: 60vmin;
+            height: 19vmin;
+          }
+        }
       }
     }
   }
+}
 </style>
diff --git a/src/views/highScore/dailyMonitoring/test.ts b/src/views/highScore/dailyMonitoring/test.ts
index c620bd5..a6ce063 100644
--- a/src/views/highScore/dailyMonitoring/test.ts
+++ b/src/views/highScore/dailyMonitoring/test.ts
@@ -4,11 +4,15 @@ export const lineLayerData = {
     {
       geometry: {
         coordinates: [
-          [106.548357837707, 29.58680219459827, 3],
-          [106.5484601219108, 29.58680682983413, 3],
-          [106.5484601219108, 29.58680682983413, 3],
-          [106.5485623058675, 29.58681146052703, 3],
-          [106.5486644902761, 29.58681609124043, 3],
+          [106.540, 29.580, 3],
+          [106.542, 29.581, 3],
+          [106.544, 29.582, 3],
+          [106.546, 29.583, 3],
+          [106.548, 29.584, 3],
+          [106.550, 29.585, 3],
+          [106.552, 29.586, 3],
+          [106.554, 29.587, 3],
+          [106.556, 29.588, 3]
         ],
         type: 'LineString',
       },
@@ -16,22 +20,20 @@ export const lineLayerData = {
         color: '#ffff00', // 黄色
         UserID: 0,
         z: 3,
+        width: 5 // 增加线宽
       },
       type: 'Feature',
     },
-
     {
       geometry: {
         coordinates: [
-          [106.5486644902761, 29.58681609124043, 3],
-          [106.5488177260367, 29.58682303545917, 3],
-          [106.5489199317008, 29.5868276671358, 3],
-          [106.5490220371176, 29.58683229426947, 3],
-          [106.5490730902784, 29.58683460785685, 3],
-          [106.5490730902784, 29.58683660785685, 3],
-          [106.5490730902784, 29.58683860785685, 3],
-          [106.5490730902784, 29.58684060785685, 3],
-          [106.5490730902784, 29.58684260785685, 3],
+          [106.556, 29.588, 3],
+          [106.558, 29.589, 3],
+          [106.560, 29.590, 3],
+          [106.562, 29.591, 3],
+          [106.564, 29.592, 3],
+          [106.566, 29.593, 3],
+          [106.568, 29.594, 3]
         ],
         type: 'LineString',
       },
@@ -39,49 +41,53 @@ export const lineLayerData = {
         color: 'red',
         UserID: 0,
         z: 3,
+        width: 5 // 增加线宽
       },
       type: 'Feature',
     },
   ],
 };
+
 export const lineLayerData1 = {
   type: 'FeatureCollection',
   features: [
     {
       geometry: {
         coordinates: [
-          [106.5472909339584, 29.58596744065201, 3],
-          [106.5472909339584, 29.58616744065201, 3],
-          [106.5472909339584, 29.58636744065201, 3],
+          [106.540, 29.595, 3],
+          [106.545, 29.595, 3],
+          [106.550, 29.595, 3],
+          [106.555, 29.595, 3],
+          [106.560, 29.595, 3],
+          [106.565, 29.595, 3],
+          [106.570, 29.595, 3]
         ],
-        // type: "LineString"
         type: 'LineString',
       },
       properties: {
         color: '#ffff00', // 黄色
         UserID: 0,
         z: 3,
+        width: 5
       },
       type: 'Feature',
     },
     {
       geometry: {
         coordinates: [
-          [106.5472909339584, 29.58636744065201, 3],
-          [106.5472909439584, 29.58666744065201, 3],
-          [106.5472509439584, 29.58696744065201, 3],
-          [106.5472609339584, 29.58726744065201, 3],
-          [106.5472909339584, 29.58746744065201, 3],
-          [106.5472909339584, 29.58766744065201, 3],
-          [106.5472909339584, 29.58776744065201, 3],
+          [106.570, 29.595, 3],
+          [106.570, 29.590, 3],
+          [106.570, 29.585, 3],
+          [106.570, 29.580, 3],
+          [106.570, 29.575, 3]
         ],
-        // type: "LineString"
         type: 'LineString',
       },
       properties: {
         color: 'red',
         UserID: 0,
         z: 3,
+        width: 5
       },
       type: 'Feature',
     },
@@ -94,29 +100,40 @@ export const lineLayerData2 = {
     {
       geometry: {
         coordinates: [
-          [106.5486909339584, 29.58556744065201, 3],
-          [106.5484909339584, 29.58596744065201, 3],
-          [106.5484909339584, 29.58616744065201, 3],
-          [106.5484909339584, 29.58636744065201, 3],
-          [106.5484909339584, 29.58666744065201, 3],
-          [106.5484909339584, 29.58696744065201, 3],
-          [106.5484909339584, 29.58676744065201, 3],
-          [106.5484909339584, 29.58686744065201, 3],
-          [106.5484909339584, 29.58696744065201, 3],
-          [106.5484909339584, 29.58706744065201, 3],
-          [106.5484909339584, 29.58716744065201, 3],
-          [106.5484909339584, 29.58726744065201, 3],
-          [106.5484909339584, 29.58746744065201, 3],
-          [106.5484909339584, 29.58756744065201, 3],
-          [106.5484909339584, 29.58766744065201, 3],
-          [106.5484909339584, 29.58776744065201, 3],
+          [106.545, 29.580, 3],
+          [106.550, 29.585, 3],
+          [106.555, 29.590, 3],
+          [106.560, 29.595, 3],
+          [106.565, 29.600, 3],
+          [106.570, 29.605, 3],
+          [106.575, 29.610, 3]
+        ],
+        type: 'LineString',
+      },
+      properties: {
+        color: '#00ff00', // 绿色
+        UserID: 0,
+        z: 3,
+        width: 8 // 更宽的线
+      },
+      type: 'Feature',
+    },
+    {
+      geometry: {
+        coordinates: [
+          [106.575, 29.610, 3],
+          [106.570, 29.615, 3],
+          [106.565, 29.620, 3],
+          [106.560, 29.625, 3],
+          [106.555, 29.630, 3]
         ],
-        // type: "LineString"
         type: 'LineString',
       },
       properties: {
+        color: '#0000ff', // 蓝色
         UserID: 0,
         z: 3,
+        width: 8
       },
       type: 'Feature',
     },
@@ -127,136 +144,134 @@ export const pointData = {
   type: 'FeatureCollection',
   features: [
     {
-      w: 29.58596744065201,
+      w: 29.54702303545917,
       t: 24.6,
       l: 11,
       m: 'G234',
-      j: 106.5484909339584,
+      j: 106.6812177260367,
       h: '59838',
       backgoundColor: 'red',
     },
     {
-      w: 29.58596744065201,
+      w: 29.60702303545917,
       t: 24.6,
       l: 11,
-      m: 'G241',
-      j: 106.5472909339584,
+      m: 'G234',
+      j: 106.6812177260367,
       h: '59838',
       backgoundColor: 'red',
     },
     {
-      w: 29.58798044065201,
+      w: 29.60702303545917,
       t: 24.6,
       l: 11,
-      m: 'G241',
-      j: 106.5472909339584,
+      m: 'G234',
+      j: 106.6312177260367,
       h: '59838',
       backgoundColor: 'red',
     },
-
     {
-      w: 29.58648044065201,
+      w: 29.65702303545917,
       t: 24.6,
       l: 11,
       m: 'G234',
-      j: 106.5468909339584,
+      j: 106.6022177260367,
       h: '59838',
       backgoundColor: 'red',
     },
     {
-      w: 29.58728044065201,
+      w: 29.65702303545917,
       t: 24.6,
       l: 11,
       m: 'G234',
-      j: 106.5478909339584,
+      j: 106.5622177260367,
       h: '59838',
       backgoundColor: 'red',
     },
     {
-      w: 29.58768044065201,
+      w: 29.63702303545917,
       t: 24.6,
       l: 11,
       m: 'G234',
-      j: 106.5479909339584,
+      j: 106.5822177260367,
       h: '59838',
       backgoundColor: 'red',
     },
     {
-      w: 29.58608044065201,
+      w: 29.58702303545917,
       t: 24.6,
       l: 11,
       m: 'G234',
-      j: 106.5490909339584,
+      j: 106.6022177260367,
       h: '59838',
       backgoundColor: 'red',
     },
     {
-      w: 29.58668044065201,
+      w: 29.55702303545917,
       t: 24.6,
       l: 11,
       m: 'G234',
-      j: 106.5489909339584,
+      j: 106.6022177260367,
       h: '59838',
       backgoundColor: 'red',
     },
     {
-      w: 29.58650044065201,
+      w: 29.65702303545917,
       t: 24.6,
       l: 11,
-      m: 'x456',
-      j: 106.5476909339584,
+      m: 'G234',
+      j: 106.4822177260367,
       h: '59838',
-      backgoundColor: 'skyblue',
+      backgoundColor: 'red',
     },
     {
-      w: 29.58682044065201,
+      w: 29.62702303545917,
       t: 24.6,
       l: 11,
       m: 'x456',
-      j: 106.5480909339584,
+      j: 106.5222177260367,
       h: '59838',
       backgoundColor: 'skyblue',
     },
     {
-      w: 29.58742044065201, //上下，大是越上
+      w: 29.60702303545917,
       t: 24.6,
       l: 11,
       m: 'x456',
-      j: 106.5486909339584, //左右，大是往右偏
+      j: 106.5822177260367,
       h: '59838',
       backgoundColor: 'skyblue',
     },
     {
-      w: 29.58672044065201,
+      w: 29.62702303545917,
       t: 24.6,
       l: 11,
       m: 'x456',
-      j: 106.5494909339584,
+      j: 106.6222177260367,
       h: '59838',
       backgoundColor: 'skyblue',
     },
 
     {
-      w: 29.58582044065201,
+      w: 29.56702303545917,
       t: 24.6,
       l: 11,
       m: 'x456',
-      j: 106.5492909339584,
+      j: 106.5622177260367,
       h: '59838',
       backgoundColor: 'skyblue',
     },
-
     {
-      w: 29.58722044065201,
+      w: 29.56702303545917,
       t: 24.6,
       l: 11,
       m: 'x456',
-      j: 106.5498909339584,
+      j: 106.5622177260367,
       h: '59838',
       backgoundColor: 'skyblue',
     },
     {
-      w: 29.58742044065201,
+      w: 29.53742044065201,
       t: 24.6,
       l: 11,
       m: 'x456',
@@ -265,83 +280,74 @@ export const pointData = {
       backgoundColor: 'skyblue',
     },
     {
-      w: 29.58742044065201,
-      t: 24.6,
-      l: 11,
-      m: 'S234',
-      j: 106.55072909339584,
-      h: '59838',
-      backgoundColor: 'yellow',
-    },
-    {
-      w: 29.58762044065201,
+      w: 29.59702303545917,
       t: 24.6,
       l: 11,
-      m: 'S234',
-      j: 106.55122909339584,
+      m: 'x456',
+      j: 106.5022177260367,
       h: '59838',
-      backgoundColor: 'yellow',
+      backgoundColor: 'skyblue',
     },
     {
-      w: 29.58662044065201,
+      w: 29.57702303545917,
       t: 24.6,
       l: 11,
-      m: 'S234',
-      j: 106.55122909339584,
+      m: 'x456',
+      j: 106.4822177260367,
       h: '59838',
-      backgoundColor: 'yellow',
+      backgoundColor: 'skyblue',
     },
     {
-      w: 29.58682044065201,
+      w: 29.62702303545917,
       t: 24.6,
       l: 11,
       m: 'S234',
-      j: 106.5498909339584,
+      j: 106.4822177260367,
       h: '59838',
       backgoundColor: 'yellow',
     },
     {
-      w: 29.58662044065201,
+      w: 29.60702303545917,
       t: 24.6,
       l: 11,
       m: 'S234',
-      j: 106.5496909339584,
+      j: 106.462177260367,
       h: '59838',
       backgoundColor: 'yellow',
     },
     {
-      w: 29.58762044065201,
+      w: 29.54702303545917,
       t: 24.6,
       l: 11,
       m: 'S234',
-      j: 106.5498909339584,
+      j: 106.462177260367,
       h: '59838',
       backgoundColor: 'yellow',
     },
     {
-      w: 29.58792044065201,
+      w: 29.52702303545917,
       t: 24.6,
       l: 11,
       m: 'S234',
-      j: 106.5496909339584,
+      j: 106.442177260367,
       h: '59838',
       backgoundColor: 'yellow',
     },
     {
-      w: 29.58792044065201,
+      w: 29.56702303545917,
       t: 24.6,
       l: 11,
       m: 'S234',
-      j: 106.5500909339584,
+      j: 106.522177260367,
       h: '59838',
       backgoundColor: 'yellow',
     },
     {
-      w: 29.58792044065201,
+      w: 29.56702303545917,
       t: 24.6,
       l: 11,
       m: 'S234',
-      j: 106.5480909339584,
+      j: 106.542177260367,
       h: '59838',
       backgoundColor: 'yellow',
     },
@@ -620,46 +626,54 @@ export const chargeAddLayer4 = [
 
 export const dailyAddLayer1 = [
   {
-    lng: 106.5509177260367, // 中心点经度
-    lat: 29.58742303545917, // 中心点纬度
+    lng: 106.5509177260367,
+    lat: 29.62742303545917, 
+  },
+  {
+    lng: 106.4309177260367, 
+    lat: 29.63942303545917,
   },
 ];
 
 export const dailyAddLayer2 = [
   {
-    lng: 106.5509177260367, // 中心点经度
-    lat: 29.58622303545917, // 中心点纬度
+    lng: 106.6089177260367, 
+    lat: 29.52922303545917, 
   },
   {
-    lng: 106.5509177260367, // 中心点经度
-    lat: 29.58622303545917, // 中心点纬度
+    lng: 106.6689177260367, 
+    lat: 29.51522303545917, 
+  },
+  {
+    lng: 106.4889177260367, 
+    lat: 29.53922303545917, 
   },
 ];
 
 //车辆
 export const dailyAddLayer3 = [
   {
-    lng: 106.5509177260367, // 中心点经度
-    lat: 29.58712303545917, // 中心点纬度
+    lng: 106.6509177260367,
+    lat: 29.58712303545917, 
   },
   {
-    lng: 106.5469177260367, // 中心点经度
-    lat: 29.58712303545917, // 中心点纬度
+    lng: 106.4069177260367, 
+    lat: 29.57712303545917,
   },
   {
-    lng: 106.5469177260367, // 中心点经度
-    lat: 29.58602303545917, // 中心点纬度
+    lng: 106.4269177260367, 
+    lat: 29.50712303545917,
   },
 ];
 
 //应急设施
 export const dailyAddLayer4 = [
   {
-    lng: 106.5512177260367, // 中心点经度
-    lat: 29.58702303545917, // 中心点纬度
+    lng: 106.7012177260367, 
+    lat: 29.57702303545917, 
   },
   {
-    lng: 106.5505177260367, // 中心点经度
-    lat: 29.58682303545917, // 中心点纬度
+    lng: 106.6312177260367, 
+    lat: 29.55702303545917, 
   },
 ];