diff --git a/public/img/icon4.png b/public/img/icon4.png
new file mode 100644
index 0000000..9510ed8
--- /dev/null
+++ b/public/img/icon4.png
Binary files differ

diff --git a/public/img/icon4.png b/public/img/icon4.png
new file mode 100644
index 0000000..9510ed8
--- /dev/null
+++ b/public/img/icon4.png
Binary files differ
diff --git a/src/components.d.ts b/src/components.d.ts
index a1b0897..ab9c1f9 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -35,6 +35,7 @@
     ImageUpload: typeof import('./components/ImageUpload/index.vue')['default']
     InfoWindow: typeof import('./components/map/infoWindow.vue')['default']
     InfoWindow2: typeof import('./components/map/infoWindow2.vue')['default']
+    InfoWindowHot: typeof import('./components/map/infoWindowHot.vue')['default']
     LineChart: typeof import('./components/Echart/LineChart.vue')['default']
     Map: typeof import('./components/map/index.vue')['default']
     NormalTable: typeof import('./components/NormalTable/index.vue')['default']

diff --git a/public/img/icon4.png b/public/img/icon4.png
new file mode 100644
index 0000000..9510ed8
--- /dev/null
+++ b/public/img/icon4.png
Binary files differ
diff --git a/src/components.d.ts b/src/components.d.ts
index a1b0897..ab9c1f9 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -35,6 +35,7 @@
     ImageUpload: typeof import('./components/ImageUpload/index.vue')['default']
     InfoWindow: typeof import('./components/map/infoWindow.vue')['default']
     InfoWindow2: typeof import('./components/map/infoWindow2.vue')['default']
+    InfoWindowHot: typeof import('./components/map/infoWindowHot.vue')['default']
     LineChart: typeof import('./components/Echart/LineChart.vue')['default']
     Map: typeof import('./components/map/index.vue')['default']
     NormalTable: typeof import('./components/NormalTable/index.vue')['default']
diff --git a/src/components/map/index.vue b/src/components/map/index.vue
index 15929df..fbcdc2f 100644
--- a/src/components/map/index.vue
+++ b/src/components/map/index.vue
@@ -7,7 +7,8 @@
 import AMapLoader from '@amap/amap-jsapi-loader'
 import infoDetail from './infoWindow.vue'
 import infoDetail2 from './infoWindow2.vue'
-import { electricityBranch, electricityNode, getElectricityListAll, getMonitorStationList } from '@/api/api/index'
+import infoDetailHot from './infoWindowHot.vue'
+import { electricityBranch, electricityNode, getDeviceListPage, getElectricityListAll, getMonitorStationList } from '@/api/api/index'
 const publicPath = import.meta.env.BASE_URL
 // 设置安全密钥
 window._AMapSecurityConfig = {
@@ -33,11 +34,16 @@
 // 光伏数组
 const markerArr1 = ref([
 ])
+// 用热坐标数组
+const markerArrHot = ref()
+const markerArrHotInfo = ref()
 // 信息窗体
 const infoWindow = ref()
 const infoWindow2 = ref()
+const infoWindowHot = ref()
 const windowInfoRef = ref()
 const windowInfoRef2 = ref()
+const windowInfoHotRef = ref()
 const markerArrInfo = ref()
 const markerArrInfo1 = ref()
 // 折现节点坐标
@@ -53,7 +59,7 @@
 const AMap1 = ref()
 // 图层实例
 const layer = ref()
-const flag = ref(true)
+const flag = ref(false)
 // 切换图层
 const changeLayerGrop = () => {
   if (flag.value) {
@@ -64,211 +70,256 @@
   }
   flag.value = !flag.value
 }
-defineExpose({ changeLayerGrop, flag })
 // 初始化地图
-const initMap = () => {
-  AMapLoader.load({
+const initMap = async () => {
+  await AMapLoader.load({
     key: '40849e82b4e33f5255b17372520c954d', // 后期需替换
     version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
     plugins: ['AMap.Scale', 'AMap.MouseTool', 'AMap.ToolBar'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
-  })
-    .then((AMap) => {
-      AMap1.value = AMap
-      // 初始化地图
-      map.value = new AMap.Map('map', {
-        viewMode: '3D', //  是否为3D地图模式
-        zoom: 17, // 初始化地图级别
-        center: [111.765785, 40.718114],
-        resizeEnable: true,
-      })
-      // 图层实例
-      layer.value = new AMap.TileLayer.Satellite()
-      // 地图绑定右击事件
-      map.value.on('mousedown', clickHandler)
-      // 电网支路标记点绘制
-      for (let i = 0; i < markerArr.value.length; i++) {
-        const icon = new AMap.Icon({
-          size: new AMap.Size(36, 36), // 图标尺寸
-          image: `${publicPath}img/icon1.png`, // Icon的图像
-          imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
-          imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
-        })
-        const marker = new AMap.Marker({
-          zooms: [16, 20], // 缩放
-          position: markerArr.value[i], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
-          map: map.value,
-          icon,
-          offset: new AMap.Pixel(3, -30),
-        })
-        // 支路点详细信息// 信息窗体
-        infoWindow.value = new AMap.InfoWindow({
-          isCustom: true, // 自定义信息窗体
-          content: windowInfoRef.value.$el, // 窗体内容(vue组件)
-          offset: new AMap.Pixel(9, -5), // 偏移
-        })
-        marker.on('click', (e) => {
-          // 打开信息窗口
-          infoWindow.value.open(map.value, e.lnglat)
-          // 初始化信息窗口
-          windowInfoRef.value.initialize({
-            overlay: e.target,
-            infoWindow: infoWindow.value,
-            info: markerArrInfo.value[i],
-          })
-        })
-        // 标记点文本标记
-        marker.setLabel({
-          offset: new AMap.Pixel(-10, -2), // 设置文本标注偏移量
-          content: `<div>${markerArrInfo.value[i].nodeName}</div>`, // 设置文本标注内容
-          direction: 'right', // 设置文本标注方位
-        })
-        map.value.add([marker])
-      }
-      // 光伏标记点及光伏绘制
-      for (let i = 0; i < markerArr1.value.length; i++) {
-        const icon = new AMap.Icon({
-          size: new AMap.Size(36, 36), // 图标尺寸
-          image: `${publicPath}img/icon2.png`, // Icon的图像
-          imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
-          imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
-        })
-        const marker = new AMap.Marker({
-          zooms: [16, 20],
-          position: markerArr1.value[i], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
-          map: map.value,
-          icon,
-          offset: new AMap.Pixel(-20, -20),
-        })
-        // 信息窗体
-        infoWindow2.value = new AMap.InfoWindow({
-          isCustom: true, // 自定义信息窗体
-          content: windowInfoRef2.value.$el, // 窗体内容(vue组件)
-          offset: new AMap.Pixel(9, -5), // 偏移
-        })
-        marker.on('click', (e) => {
-          // 打开信息窗口
-          infoWindow2.value.open(map.value, e.lnglat)
-          // 初始化信息窗口
-          windowInfoRef2.value.initialize({
-            overlay: e.target,
-            infoWindow: infoWindow2.value,
-            info: markerArrInfo1.value[i],
-          })
-        })
-        // 标记点的文本
-        marker.setLabel({
-          zooms: [16, 20],
-          offset: new AMap.Pixel(-10, -2), // 设置文本标注偏移量
-          content: `<div>${markerArrInfo1.value[i].stationName}</div>`, // 设置文本标注内容
-          direction: 'right', // 设置文本标注方位
-        })
-        map.value.add([marker])
-        // 绘制电网和节点连线
-        const path = markerArrInfo1.value.map((item) => {
-          return [[Number(item.lng), Number(item.lat)], [Number(item.nodeLng), Number(item.nodeLat)]]
-        })
-        const polyline = new AMap.Polyline({
-          path,
-          strokeColor: '#03A382',
-          strokeStyle: 'dashed',
-          strokeDasharray: [10, 3],
-          lineJoin: 'round',
-          lineCap: 'round',
-          zIndex: 50,
-          zooms: [16, 20],
-        })
-        polyline.setMap(map.value)
-        map.value.add(polyline)
-      }
-      // 电网支路折线绘制
-      for (let i = 0; i < lineArr.value.length; i++) {
-        // console.log(lineArr.value[i])
-        const path = lineArr.value.map(item => item.branchNodeInfos)
-        const line = path.map(item => (
-          item.map((child) => {
-            return ([[child.flng, child.flat], [child.tlng, child.tlat], child.status2])
-          })
-        ))
-        line.forEach((item) => {
-          item.forEach((child) => {
-            const path = [child[0], child[1]]
-            const polyline = new AMap.Polyline({
-              path,
-              // isOutline: true,
-              strokeColor: child[2] === 1 ? '#008d68' : '#000',
-              // strokeOpacity: 1,
-              strokeWeight: 3,
-              // 折线样式还支持 'dashed'
-              strokeStyle: child[2] !== 1 ? 'dashed' : 'dashed ',
-              // strokeStyle是dashed时有效
-              strokeDasharray: [10, 3],
-              lineJoin: 'round',
-              showDir: child[2] === 1,
-              // lineCap: 'square',
-              lineCap: 'round',
-              zIndex: 50,
-              zooms: [16, 20],
-
-            })
-            // 离线支路连接添加开关图标
-            if (child[2] === 0) {
-              const data = [(Number(child[0][0]) + Number(child[1][0])) / 2, (Number(child[0][1]) + Number(child[1][1])) / 2]
-              const icon = new AMap.Icon({
-                size: new AMap.Size(36, 36), // 图标尺寸
-                image: `${publicPath}img/icon3.png`, // Icon的图像
-                imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
-                imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
-              })
-              const marker = new AMap.Marker({
-                zooms: [16, 20],
-                position: data, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
-                map: map.value,
-                icon,
-                offset: new AMap.Pixel(-20, -20),
-              })
-              map.value.add([marker])
-            }
-            polyline.setMap(map.value)
-            map.value.add(polyline)
-          })
-        })
-        // 添加支路折线文本
-        // 创建纯文本标记
-        // const textArr = path.map(item => (
-        //   item.map((child) => {
-        //     return ([[(Number(child.flng) + Number(child.tlng)) / 2, (Number(child.flat) + Number(child.tlat)) / 2], child.flowRate])
-        //   })
-        // ))
-        // textArr.forEach((item) => {
-        //   // console.log(item, 'item')
-        //   item.forEach((child) => {
-        //     const icon = new AMap.Icon({
-        //       size: new AMap.Size(36, 36), // 图标尺寸
-        //       // image: '', // Icon的图像
-        //       imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
-        //       imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
-        //     })
-        //     // const content = '<div>111</div>'
-        //     const marker = new AMap.Marker({
-        //       position: child[0], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
-        //       map: map.value,
-        //       content: '<span></span>',
-        //       offset: new AMap.Pixel(-20, -20),
-        //     })
-        //     marker.setLabel({
-        //       offset: new AMap.Pixel(-10, -2), // 设置文本标注偏移量
-        //       content: `<div>${`${child[1]}kgCO2/h`}</div>`, // 设置文本标注内容
-        //       direction: 'right', // 设置文本标注方位
-        //     })
-        //     map.value.add([marker])
-        //   })
-        // })
-      }
+  }).then((AMap) => {
+    AMap1.value = AMap
+    // 初始化地图
+    map.value = new AMap.Map('map', {
+      viewMode: '3D', //  是否为3D地图模式
+      zoom: 17, // 初始化地图级别
+      center: [111.765785, 40.718114],
+      resizeEnable: true,
     })
+    // 图层实例
+    layer.value = new AMap.TileLayer.Satellite()
+    map.value.addLayer(layer.value)
+    // 地图绑定右击事件
+    map.value.on('mousedown', clickHandler)
+  })
     .catch((e) => {
       console.log(e)
     })
 }
+// 绘制用电监测相关
+const useElectricity = () => {
+  const AMap = AMap1.value
+  // 电网支路标记点绘制
+  for (let i = 0; i < markerArr.value.length; i++) {
+    const icon = new AMap.Icon({
+      size: new AMap.Size(36, 36), // 图标尺寸
+      image: `${publicPath}img/icon1.png`, // Icon的图像
+      imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
+      imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
+    })
+    const marker = new AMap.Marker({
+      zooms: [16, 20], // 缩放
+      position: markerArr.value[i], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+      map: map.value,
+      icon,
+      offset: new AMap.Pixel(3, -30),
+    })
+    // 支路点详细信息// 信息窗体
+    infoWindow.value = new AMap.InfoWindow({
+      isCustom: true, // 自定义信息窗体
+      content: windowInfoRef.value.$el, // 窗体内容(vue组件)
+      offset: new AMap.Pixel(9, -5), // 偏移
+    })
+    marker.on('click', (e) => {
+      // 打开信息窗口
+      infoWindow.value.open(map.value, e.lnglat)
+      // 初始化信息窗口
+      windowInfoRef.value.initialize({
+        overlay: e.target,
+        infoWindow: infoWindow.value,
+        info: markerArrInfo.value[i],
+      })
+    })
+    // 标记点文本标记
+    marker.setLabel({
+      offset: new AMap.Pixel(-10, -2), // 设置文本标注偏移量
+      content: `<div>${markerArrInfo.value[i].nodeName}</div>`, // 设置文本标注内容
+      direction: 'right', // 设置文本标注方位
+    })
+    map.value.add([marker])
+  }
+  // 光伏标记点及光伏绘制
+  for (let i = 0; i < markerArr1.value.length; i++) {
+    const icon = new AMap.Icon({
+      size: new AMap.Size(36, 36), // 图标尺寸
+      image: `${publicPath}img/icon2.png`, // Icon的图像
+      imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
+      imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
+    })
+    const marker = new AMap.Marker({
+      zooms: [16, 20],
+      position: markerArr1.value[i], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+      map: map.value,
+      icon,
+      offset: new AMap.Pixel(-20, -20),
+    })
+    // 信息窗体
+    infoWindow2.value = new AMap.InfoWindow({
+      isCustom: true, // 自定义信息窗体
+      content: windowInfoRef2.value.$el, // 窗体内容(vue组件)
+      offset: new AMap.Pixel(9, -5), // 偏移
+    })
+    marker.on('click', (e) => {
+      // 打开信息窗口
+      infoWindow2.value.open(map.value, e.lnglat)
+      // 初始化信息窗口
+      windowInfoRef2.value.initialize({
+        overlay: e.target,
+        infoWindow: infoWindow2.value,
+        info: markerArrInfo1.value[i],
+      })
+    })
+    // 标记点的文本
+    marker.setLabel({
+      zooms: [16, 20],
+      offset: new AMap.Pixel(-10, -2), // 设置文本标注偏移量
+      content: `<div>${markerArrInfo1.value[i].stationName}</div>`, // 设置文本标注内容
+      direction: 'right', // 设置文本标注方位
+    })
+    map.value.add([marker])
+    // 绘制电网和节点连线
+    const path = markerArrInfo1.value.map((item) => {
+      return [[Number(item.lng), Number(item.lat)], [Number(item.nodeLng), Number(item.nodeLat)]]
+    })
+    const polyline = new AMap.Polyline({
+      path,
+      strokeColor: '#03A382',
+      strokeStyle: 'dashed',
+      strokeDasharray: [10, 3],
+      lineJoin: 'round',
+      lineCap: 'round',
+      zIndex: 50,
+      zooms: [16, 20],
+    })
+    polyline.setMap(map.value)
+    map.value.add(polyline)
+  }
+  // 电网支路折线绘制
+  for (let i = 0; i < lineArr.value.length; i++) {
+    // console.log(lineArr.value[i])
+    const path = lineArr.value.map(item => item.branchNodeInfos)
+    const line = path.map(item => (
+      item.map((child) => {
+        return ([[child.flng, child.flat], [child.tlng, child.tlat], child.status2])
+      })
+    ))
+    line.forEach((item) => {
+      item.forEach((child) => {
+        const path = [child[0], child[1]]
+        const polyline = new AMap.Polyline({
+          path,
+          // isOutline: true,
+          strokeColor: child[2] === 1 ? '#008d68' : '#000',
+          // strokeOpacity: 1,
+          strokeWeight: 3,
+          // 折线样式还支持 'dashed'
+          strokeStyle: child[2] !== 1 ? 'dashed' : 'dashed ',
+          // strokeStyle是dashed时有效
+          strokeDasharray: [10, 3],
+          lineJoin: 'round',
+          showDir: child[2] === 1,
+          // lineCap: 'square',
+          lineCap: 'round',
+          zIndex: 50,
+          zooms: [16, 20],
+
+        })
+        // 离线支路连接添加开关图标
+        if (child[2] === 0) {
+          const data = [(Number(child[0][0]) + Number(child[1][0])) / 2, (Number(child[0][1]) + Number(child[1][1])) / 2]
+          const icon = new AMap.Icon({
+            size: new AMap.Size(36, 36), // 图标尺寸
+            image: `${publicPath}img/icon3.png`, // Icon的图像
+            imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
+            imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
+          })
+          const marker = new AMap.Marker({
+            zooms: [16, 20],
+            position: data, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+            map: map.value,
+            icon,
+            offset: new AMap.Pixel(-20, -20),
+          })
+          map.value.add([marker])
+        }
+        polyline.setMap(map.value)
+        map.value.add(polyline)
+      })
+    })
+    // 添加支路折线文本
+    // 创建纯文本标记
+    // const textArr = path.map(item => (
+    //   item.map((child) => {
+    //     return ([[(Number(child.flng) + Number(child.tlng)) / 2, (Number(child.flat) + Number(child.tlat)) / 2], child.flowRate])
+    //   })
+    // ))
+    // textArr.forEach((item) => {
+    //   // console.log(item, 'item')
+    //   item.forEach((child) => {
+    //     const icon = new AMap.Icon({
+    //       size: new AMap.Size(36, 36), // 图标尺寸
+    //       // image: '', // Icon的图像
+    //       imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
+    //       imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
+    //     })
+    //     // const content = '<div>111</div>'
+    //     const marker = new AMap.Marker({
+    //       position: child[0], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+    //       map: map.value,
+    //       content: '<span></span>',
+    //       offset: new AMap.Pixel(-20, -20),
+    //     })
+    //     marker.setLabel({
+    //       offset: new AMap.Pixel(-10, -2), // 设置文本标注偏移量
+    //       content: `<div>${`${child[1]}kgCO2/h`}</div>`, // 设置文本标注内容
+    //       direction: 'right', // 设置文本标注方位
+    //     })
+    //     map.value.add([marker])
+    //   })
+    // })
+  }
+}
+// 绘制用热监测相关
+const useHot = () => {
+  for (let i = 0; i < markerArrHot.value.length; i++) {
+    const AMap = AMap1.value
+    const icon = new AMap.Icon({
+      size: new AMap.Size(36, 36), // 图标尺寸
+      image: `${publicPath}img/icon4.png`, // Icon的图像
+      imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
+      imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
+    })
+    const marker = new AMap.Marker({
+      zooms: [16, 20], // 缩放
+      position: markerArrHot.value[i], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+      map: map.value,
+      icon,
+      offset: new AMap.Pixel(3, -30),
+    })
+    // 支路点详细信息// 信息窗体
+    infoWindowHot.value = new AMap.InfoWindow({
+      isCustom: true, // 自定义信息窗体
+      content: windowInfoHotRef.value.$el, // 窗体内容(vue组件)
+      offset: new AMap.Pixel(9, -5), // 偏移
+    })
+    marker.on('click', (e) => {
+      // 打开信息窗口
+      infoWindowHot.value.open(map.value, e.lnglat)
+      // 初始化信息窗口
+      windowInfoHotRef.value.initialize({
+        overlay: e.target,
+        infoWindow: infoWindowHot.value,
+        info: markerArrHotInfo.value[i],
+      })
+    })
+    // 标记点文本标记
+    marker.setLabel({
+      offset: new AMap.Pixel(-10, -2), // 设置文本标注偏移量
+      content: `<div>${markerArrHotInfo.value[i].deviceName}</div>`, // 设置文本标注内容
+      direction: 'right', // 设置文本标注方位
+    })
+    map.value.add([marker])
+  }
+}
 onMounted(async () => {
   // 获取电网列表
   try {
@@ -289,11 +340,22 @@
     markerArr1.value = list1.data.map(item => ([Number(item.lng), Number(item.lat)]))
     markerArrInfo1.value = list1.data
     // 初始化地图
-    initMap()
+    await initMap()
+    useElectricity()
   }
   catch (error) {
     initMap()
   }
+  // 获取用热数据
+  getDeviceListPage({
+    offset: 1,
+    limit: 999,
+    ptn: '',
+    deviceType: '2',
+  }).then((res) => {
+    markerArrHotInfo.value = res.data.rows
+    markerArrHot.value = res.data.rows.map(item => ([Number(item.lng), Number(item.lat)]))
+  })
   // getElectricityListAll().then((res) => {
   //   // 电网列表
   //   electricityList.value = res.data
@@ -312,12 +374,27 @@
   //   }
   // })
 })
+// 用电检测/用热监测 默认用电
+const flagType = ref(true)
+// 切换用电检测/用热监测
+const changeFlagType = () => {
+  map.value.clearMap()
+  if (flagType.value) {
+    useHot()
+  }
+  else {
+    useElectricity()
+  }
+  flagType.value = !flagType.value
+}
+defineExpose({ changeLayerGrop, changeFlagType, flag })
 </script>
 
 <template>
   <div id="map" />
   <info-detail ref="windowInfoRef" />
   <info-detail2 ref="windowInfoRef2" />
+  <info-detail-hot ref="windowInfoHotRef" />
 </template>
 
 <style scoped>

diff --git a/public/img/icon4.png b/public/img/icon4.png
new file mode 100644
index 0000000..9510ed8
--- /dev/null
+++ b/public/img/icon4.png
Binary files differ
diff --git a/src/components.d.ts b/src/components.d.ts
index a1b0897..ab9c1f9 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -35,6 +35,7 @@
     ImageUpload: typeof import('./components/ImageUpload/index.vue')['default']
     InfoWindow: typeof import('./components/map/infoWindow.vue')['default']
     InfoWindow2: typeof import('./components/map/infoWindow2.vue')['default']
+    InfoWindowHot: typeof import('./components/map/infoWindowHot.vue')['default']
     LineChart: typeof import('./components/Echart/LineChart.vue')['default']
     Map: typeof import('./components/map/index.vue')['default']
     NormalTable: typeof import('./components/NormalTable/index.vue')['default']
diff --git a/src/components/map/index.vue b/src/components/map/index.vue
index 15929df..fbcdc2f 100644
--- a/src/components/map/index.vue
+++ b/src/components/map/index.vue
@@ -7,7 +7,8 @@
 import AMapLoader from '@amap/amap-jsapi-loader'
 import infoDetail from './infoWindow.vue'
 import infoDetail2 from './infoWindow2.vue'
-import { electricityBranch, electricityNode, getElectricityListAll, getMonitorStationList } from '@/api/api/index'
+import infoDetailHot from './infoWindowHot.vue'
+import { electricityBranch, electricityNode, getDeviceListPage, getElectricityListAll, getMonitorStationList } from '@/api/api/index'
 const publicPath = import.meta.env.BASE_URL
 // 设置安全密钥
 window._AMapSecurityConfig = {
@@ -33,11 +34,16 @@
 // 光伏数组
 const markerArr1 = ref([
 ])
+// 用热坐标数组
+const markerArrHot = ref()
+const markerArrHotInfo = ref()
 // 信息窗体
 const infoWindow = ref()
 const infoWindow2 = ref()
+const infoWindowHot = ref()
 const windowInfoRef = ref()
 const windowInfoRef2 = ref()
+const windowInfoHotRef = ref()
 const markerArrInfo = ref()
 const markerArrInfo1 = ref()
 // 折现节点坐标
@@ -53,7 +59,7 @@
 const AMap1 = ref()
 // 图层实例
 const layer = ref()
-const flag = ref(true)
+const flag = ref(false)
 // 切换图层
 const changeLayerGrop = () => {
   if (flag.value) {
@@ -64,211 +70,256 @@
   }
   flag.value = !flag.value
 }
-defineExpose({ changeLayerGrop, flag })
 // 初始化地图
-const initMap = () => {
-  AMapLoader.load({
+const initMap = async () => {
+  await AMapLoader.load({
     key: '40849e82b4e33f5255b17372520c954d', // 后期需替换
     version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
     plugins: ['AMap.Scale', 'AMap.MouseTool', 'AMap.ToolBar'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
-  })
-    .then((AMap) => {
-      AMap1.value = AMap
-      // 初始化地图
-      map.value = new AMap.Map('map', {
-        viewMode: '3D', //  是否为3D地图模式
-        zoom: 17, // 初始化地图级别
-        center: [111.765785, 40.718114],
-        resizeEnable: true,
-      })
-      // 图层实例
-      layer.value = new AMap.TileLayer.Satellite()
-      // 地图绑定右击事件
-      map.value.on('mousedown', clickHandler)
-      // 电网支路标记点绘制
-      for (let i = 0; i < markerArr.value.length; i++) {
-        const icon = new AMap.Icon({
-          size: new AMap.Size(36, 36), // 图标尺寸
-          image: `${publicPath}img/icon1.png`, // Icon的图像
-          imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
-          imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
-        })
-        const marker = new AMap.Marker({
-          zooms: [16, 20], // 缩放
-          position: markerArr.value[i], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
-          map: map.value,
-          icon,
-          offset: new AMap.Pixel(3, -30),
-        })
-        // 支路点详细信息// 信息窗体
-        infoWindow.value = new AMap.InfoWindow({
-          isCustom: true, // 自定义信息窗体
-          content: windowInfoRef.value.$el, // 窗体内容(vue组件)
-          offset: new AMap.Pixel(9, -5), // 偏移
-        })
-        marker.on('click', (e) => {
-          // 打开信息窗口
-          infoWindow.value.open(map.value, e.lnglat)
-          // 初始化信息窗口
-          windowInfoRef.value.initialize({
-            overlay: e.target,
-            infoWindow: infoWindow.value,
-            info: markerArrInfo.value[i],
-          })
-        })
-        // 标记点文本标记
-        marker.setLabel({
-          offset: new AMap.Pixel(-10, -2), // 设置文本标注偏移量
-          content: `<div>${markerArrInfo.value[i].nodeName}</div>`, // 设置文本标注内容
-          direction: 'right', // 设置文本标注方位
-        })
-        map.value.add([marker])
-      }
-      // 光伏标记点及光伏绘制
-      for (let i = 0; i < markerArr1.value.length; i++) {
-        const icon = new AMap.Icon({
-          size: new AMap.Size(36, 36), // 图标尺寸
-          image: `${publicPath}img/icon2.png`, // Icon的图像
-          imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
-          imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
-        })
-        const marker = new AMap.Marker({
-          zooms: [16, 20],
-          position: markerArr1.value[i], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
-          map: map.value,
-          icon,
-          offset: new AMap.Pixel(-20, -20),
-        })
-        // 信息窗体
-        infoWindow2.value = new AMap.InfoWindow({
-          isCustom: true, // 自定义信息窗体
-          content: windowInfoRef2.value.$el, // 窗体内容(vue组件)
-          offset: new AMap.Pixel(9, -5), // 偏移
-        })
-        marker.on('click', (e) => {
-          // 打开信息窗口
-          infoWindow2.value.open(map.value, e.lnglat)
-          // 初始化信息窗口
-          windowInfoRef2.value.initialize({
-            overlay: e.target,
-            infoWindow: infoWindow2.value,
-            info: markerArrInfo1.value[i],
-          })
-        })
-        // 标记点的文本
-        marker.setLabel({
-          zooms: [16, 20],
-          offset: new AMap.Pixel(-10, -2), // 设置文本标注偏移量
-          content: `<div>${markerArrInfo1.value[i].stationName}</div>`, // 设置文本标注内容
-          direction: 'right', // 设置文本标注方位
-        })
-        map.value.add([marker])
-        // 绘制电网和节点连线
-        const path = markerArrInfo1.value.map((item) => {
-          return [[Number(item.lng), Number(item.lat)], [Number(item.nodeLng), Number(item.nodeLat)]]
-        })
-        const polyline = new AMap.Polyline({
-          path,
-          strokeColor: '#03A382',
-          strokeStyle: 'dashed',
-          strokeDasharray: [10, 3],
-          lineJoin: 'round',
-          lineCap: 'round',
-          zIndex: 50,
-          zooms: [16, 20],
-        })
-        polyline.setMap(map.value)
-        map.value.add(polyline)
-      }
-      // 电网支路折线绘制
-      for (let i = 0; i < lineArr.value.length; i++) {
-        // console.log(lineArr.value[i])
-        const path = lineArr.value.map(item => item.branchNodeInfos)
-        const line = path.map(item => (
-          item.map((child) => {
-            return ([[child.flng, child.flat], [child.tlng, child.tlat], child.status2])
-          })
-        ))
-        line.forEach((item) => {
-          item.forEach((child) => {
-            const path = [child[0], child[1]]
-            const polyline = new AMap.Polyline({
-              path,
-              // isOutline: true,
-              strokeColor: child[2] === 1 ? '#008d68' : '#000',
-              // strokeOpacity: 1,
-              strokeWeight: 3,
-              // 折线样式还支持 'dashed'
-              strokeStyle: child[2] !== 1 ? 'dashed' : 'dashed ',
-              // strokeStyle是dashed时有效
-              strokeDasharray: [10, 3],
-              lineJoin: 'round',
-              showDir: child[2] === 1,
-              // lineCap: 'square',
-              lineCap: 'round',
-              zIndex: 50,
-              zooms: [16, 20],
-
-            })
-            // 离线支路连接添加开关图标
-            if (child[2] === 0) {
-              const data = [(Number(child[0][0]) + Number(child[1][0])) / 2, (Number(child[0][1]) + Number(child[1][1])) / 2]
-              const icon = new AMap.Icon({
-                size: new AMap.Size(36, 36), // 图标尺寸
-                image: `${publicPath}img/icon3.png`, // Icon的图像
-                imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
-                imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
-              })
-              const marker = new AMap.Marker({
-                zooms: [16, 20],
-                position: data, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
-                map: map.value,
-                icon,
-                offset: new AMap.Pixel(-20, -20),
-              })
-              map.value.add([marker])
-            }
-            polyline.setMap(map.value)
-            map.value.add(polyline)
-          })
-        })
-        // 添加支路折线文本
-        // 创建纯文本标记
-        // const textArr = path.map(item => (
-        //   item.map((child) => {
-        //     return ([[(Number(child.flng) + Number(child.tlng)) / 2, (Number(child.flat) + Number(child.tlat)) / 2], child.flowRate])
-        //   })
-        // ))
-        // textArr.forEach((item) => {
-        //   // console.log(item, 'item')
-        //   item.forEach((child) => {
-        //     const icon = new AMap.Icon({
-        //       size: new AMap.Size(36, 36), // 图标尺寸
-        //       // image: '', // Icon的图像
-        //       imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
-        //       imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
-        //     })
-        //     // const content = '<div>111</div>'
-        //     const marker = new AMap.Marker({
-        //       position: child[0], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
-        //       map: map.value,
-        //       content: '<span></span>',
-        //       offset: new AMap.Pixel(-20, -20),
-        //     })
-        //     marker.setLabel({
-        //       offset: new AMap.Pixel(-10, -2), // 设置文本标注偏移量
-        //       content: `<div>${`${child[1]}kgCO2/h`}</div>`, // 设置文本标注内容
-        //       direction: 'right', // 设置文本标注方位
-        //     })
-        //     map.value.add([marker])
-        //   })
-        // })
-      }
+  }).then((AMap) => {
+    AMap1.value = AMap
+    // 初始化地图
+    map.value = new AMap.Map('map', {
+      viewMode: '3D', //  是否为3D地图模式
+      zoom: 17, // 初始化地图级别
+      center: [111.765785, 40.718114],
+      resizeEnable: true,
     })
+    // 图层实例
+    layer.value = new AMap.TileLayer.Satellite()
+    map.value.addLayer(layer.value)
+    // 地图绑定右击事件
+    map.value.on('mousedown', clickHandler)
+  })
     .catch((e) => {
       console.log(e)
     })
 }
+// 绘制用电监测相关
+const useElectricity = () => {
+  const AMap = AMap1.value
+  // 电网支路标记点绘制
+  for (let i = 0; i < markerArr.value.length; i++) {
+    const icon = new AMap.Icon({
+      size: new AMap.Size(36, 36), // 图标尺寸
+      image: `${publicPath}img/icon1.png`, // Icon的图像
+      imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
+      imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
+    })
+    const marker = new AMap.Marker({
+      zooms: [16, 20], // 缩放
+      position: markerArr.value[i], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+      map: map.value,
+      icon,
+      offset: new AMap.Pixel(3, -30),
+    })
+    // 支路点详细信息// 信息窗体
+    infoWindow.value = new AMap.InfoWindow({
+      isCustom: true, // 自定义信息窗体
+      content: windowInfoRef.value.$el, // 窗体内容(vue组件)
+      offset: new AMap.Pixel(9, -5), // 偏移
+    })
+    marker.on('click', (e) => {
+      // 打开信息窗口
+      infoWindow.value.open(map.value, e.lnglat)
+      // 初始化信息窗口
+      windowInfoRef.value.initialize({
+        overlay: e.target,
+        infoWindow: infoWindow.value,
+        info: markerArrInfo.value[i],
+      })
+    })
+    // 标记点文本标记
+    marker.setLabel({
+      offset: new AMap.Pixel(-10, -2), // 设置文本标注偏移量
+      content: `<div>${markerArrInfo.value[i].nodeName}</div>`, // 设置文本标注内容
+      direction: 'right', // 设置文本标注方位
+    })
+    map.value.add([marker])
+  }
+  // 光伏标记点及光伏绘制
+  for (let i = 0; i < markerArr1.value.length; i++) {
+    const icon = new AMap.Icon({
+      size: new AMap.Size(36, 36), // 图标尺寸
+      image: `${publicPath}img/icon2.png`, // Icon的图像
+      imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
+      imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
+    })
+    const marker = new AMap.Marker({
+      zooms: [16, 20],
+      position: markerArr1.value[i], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+      map: map.value,
+      icon,
+      offset: new AMap.Pixel(-20, -20),
+    })
+    // 信息窗体
+    infoWindow2.value = new AMap.InfoWindow({
+      isCustom: true, // 自定义信息窗体
+      content: windowInfoRef2.value.$el, // 窗体内容(vue组件)
+      offset: new AMap.Pixel(9, -5), // 偏移
+    })
+    marker.on('click', (e) => {
+      // 打开信息窗口
+      infoWindow2.value.open(map.value, e.lnglat)
+      // 初始化信息窗口
+      windowInfoRef2.value.initialize({
+        overlay: e.target,
+        infoWindow: infoWindow2.value,
+        info: markerArrInfo1.value[i],
+      })
+    })
+    // 标记点的文本
+    marker.setLabel({
+      zooms: [16, 20],
+      offset: new AMap.Pixel(-10, -2), // 设置文本标注偏移量
+      content: `<div>${markerArrInfo1.value[i].stationName}</div>`, // 设置文本标注内容
+      direction: 'right', // 设置文本标注方位
+    })
+    map.value.add([marker])
+    // 绘制电网和节点连线
+    const path = markerArrInfo1.value.map((item) => {
+      return [[Number(item.lng), Number(item.lat)], [Number(item.nodeLng), Number(item.nodeLat)]]
+    })
+    const polyline = new AMap.Polyline({
+      path,
+      strokeColor: '#03A382',
+      strokeStyle: 'dashed',
+      strokeDasharray: [10, 3],
+      lineJoin: 'round',
+      lineCap: 'round',
+      zIndex: 50,
+      zooms: [16, 20],
+    })
+    polyline.setMap(map.value)
+    map.value.add(polyline)
+  }
+  // 电网支路折线绘制
+  for (let i = 0; i < lineArr.value.length; i++) {
+    // console.log(lineArr.value[i])
+    const path = lineArr.value.map(item => item.branchNodeInfos)
+    const line = path.map(item => (
+      item.map((child) => {
+        return ([[child.flng, child.flat], [child.tlng, child.tlat], child.status2])
+      })
+    ))
+    line.forEach((item) => {
+      item.forEach((child) => {
+        const path = [child[0], child[1]]
+        const polyline = new AMap.Polyline({
+          path,
+          // isOutline: true,
+          strokeColor: child[2] === 1 ? '#008d68' : '#000',
+          // strokeOpacity: 1,
+          strokeWeight: 3,
+          // 折线样式还支持 'dashed'
+          strokeStyle: child[2] !== 1 ? 'dashed' : 'dashed ',
+          // strokeStyle是dashed时有效
+          strokeDasharray: [10, 3],
+          lineJoin: 'round',
+          showDir: child[2] === 1,
+          // lineCap: 'square',
+          lineCap: 'round',
+          zIndex: 50,
+          zooms: [16, 20],
+
+        })
+        // 离线支路连接添加开关图标
+        if (child[2] === 0) {
+          const data = [(Number(child[0][0]) + Number(child[1][0])) / 2, (Number(child[0][1]) + Number(child[1][1])) / 2]
+          const icon = new AMap.Icon({
+            size: new AMap.Size(36, 36), // 图标尺寸
+            image: `${publicPath}img/icon3.png`, // Icon的图像
+            imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
+            imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
+          })
+          const marker = new AMap.Marker({
+            zooms: [16, 20],
+            position: data, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+            map: map.value,
+            icon,
+            offset: new AMap.Pixel(-20, -20),
+          })
+          map.value.add([marker])
+        }
+        polyline.setMap(map.value)
+        map.value.add(polyline)
+      })
+    })
+    // 添加支路折线文本
+    // 创建纯文本标记
+    // const textArr = path.map(item => (
+    //   item.map((child) => {
+    //     return ([[(Number(child.flng) + Number(child.tlng)) / 2, (Number(child.flat) + Number(child.tlat)) / 2], child.flowRate])
+    //   })
+    // ))
+    // textArr.forEach((item) => {
+    //   // console.log(item, 'item')
+    //   item.forEach((child) => {
+    //     const icon = new AMap.Icon({
+    //       size: new AMap.Size(36, 36), // 图标尺寸
+    //       // image: '', // Icon的图像
+    //       imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
+    //       imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
+    //     })
+    //     // const content = '<div>111</div>'
+    //     const marker = new AMap.Marker({
+    //       position: child[0], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+    //       map: map.value,
+    //       content: '<span></span>',
+    //       offset: new AMap.Pixel(-20, -20),
+    //     })
+    //     marker.setLabel({
+    //       offset: new AMap.Pixel(-10, -2), // 设置文本标注偏移量
+    //       content: `<div>${`${child[1]}kgCO2/h`}</div>`, // 设置文本标注内容
+    //       direction: 'right', // 设置文本标注方位
+    //     })
+    //     map.value.add([marker])
+    //   })
+    // })
+  }
+}
+// 绘制用热监测相关
+const useHot = () => {
+  for (let i = 0; i < markerArrHot.value.length; i++) {
+    const AMap = AMap1.value
+    const icon = new AMap.Icon({
+      size: new AMap.Size(36, 36), // 图标尺寸
+      image: `${publicPath}img/icon4.png`, // Icon的图像
+      imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
+      imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
+    })
+    const marker = new AMap.Marker({
+      zooms: [16, 20], // 缩放
+      position: markerArrHot.value[i], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+      map: map.value,
+      icon,
+      offset: new AMap.Pixel(3, -30),
+    })
+    // 支路点详细信息// 信息窗体
+    infoWindowHot.value = new AMap.InfoWindow({
+      isCustom: true, // 自定义信息窗体
+      content: windowInfoHotRef.value.$el, // 窗体内容(vue组件)
+      offset: new AMap.Pixel(9, -5), // 偏移
+    })
+    marker.on('click', (e) => {
+      // 打开信息窗口
+      infoWindowHot.value.open(map.value, e.lnglat)
+      // 初始化信息窗口
+      windowInfoHotRef.value.initialize({
+        overlay: e.target,
+        infoWindow: infoWindowHot.value,
+        info: markerArrHotInfo.value[i],
+      })
+    })
+    // 标记点文本标记
+    marker.setLabel({
+      offset: new AMap.Pixel(-10, -2), // 设置文本标注偏移量
+      content: `<div>${markerArrHotInfo.value[i].deviceName}</div>`, // 设置文本标注内容
+      direction: 'right', // 设置文本标注方位
+    })
+    map.value.add([marker])
+  }
+}
 onMounted(async () => {
   // 获取电网列表
   try {
@@ -289,11 +340,22 @@
     markerArr1.value = list1.data.map(item => ([Number(item.lng), Number(item.lat)]))
     markerArrInfo1.value = list1.data
     // 初始化地图
-    initMap()
+    await initMap()
+    useElectricity()
   }
   catch (error) {
     initMap()
   }
+  // 获取用热数据
+  getDeviceListPage({
+    offset: 1,
+    limit: 999,
+    ptn: '',
+    deviceType: '2',
+  }).then((res) => {
+    markerArrHotInfo.value = res.data.rows
+    markerArrHot.value = res.data.rows.map(item => ([Number(item.lng), Number(item.lat)]))
+  })
   // getElectricityListAll().then((res) => {
   //   // 电网列表
   //   electricityList.value = res.data
@@ -312,12 +374,27 @@
   //   }
   // })
 })
+// 用电检测/用热监测 默认用电
+const flagType = ref(true)
+// 切换用电检测/用热监测
+const changeFlagType = () => {
+  map.value.clearMap()
+  if (flagType.value) {
+    useHot()
+  }
+  else {
+    useElectricity()
+  }
+  flagType.value = !flagType.value
+}
+defineExpose({ changeLayerGrop, changeFlagType, flag })
 </script>
 
 <template>
   <div id="map" />
   <info-detail ref="windowInfoRef" />
   <info-detail2 ref="windowInfoRef2" />
+  <info-detail-hot ref="windowInfoHotRef" />
 </template>
 
 <style scoped>
diff --git a/src/components/map/infoWindowHot.vue b/src/components/map/infoWindowHot.vue
new file mode 100644
index 0000000..30f915e
--- /dev/null
+++ b/src/components/map/infoWindowHot.vue
@@ -0,0 +1,80 @@
+<!--
+  Description: 高德地图信息窗体 - 用热
+  Author: 李亚光
+  Date: 2023-05-10
+ -->
+<script lang="ts" setup name="infoWindow">
+const overlay = ref()
+const infoWindow = ref()
+const info = ref()
+// 初始化
+const initialize = (e) => {
+  overlay.value = e.overlay
+  infoWindow.value = e.infoWindow
+  info.value = e.info
+  console.log(e, '123')
+}
+defineExpose({ initialize })
+// 关闭
+const close = () => {
+  infoWindow.value.close()
+}
+</script>
+
+<template>
+  <div class="container">
+    <div class="title">
+      <div class="text">
+        {{ info?.deviceName }}
+      </div>
+      <div class="close" @click="close">
+        x
+      </div>
+    </div>
+    <div class="item">
+      <span>设备编号 : {{ info?.deviceNo }}</span>  <span>设备类型 : {{ info?.deviceTypeName }}</span>
+    </div>
+    <div class="item">
+      <span>所属分区 : {{ info?.ptnName }}</span>  <span>监测对象 : {{ info?.monitorObjName }}</span>
+    </div>
+    <div class="item">
+      <span>安装位置 : {{ info?.installLocaltion }}</span>  <span>安装时间 : {{ info?.installTime }}</span>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.container {
+  width: 340px;
+  height: 140px;
+  padding: 10px;
+  background-color: #fff;
+  border: 1px solid #6d9ece;
+
+  .title {
+    font-size: 16px;
+    font-weight: 700;
+    padding: 0 10px;
+    display: flex;
+    justify-content: space-between;
+
+    .close {
+      color: #ccc;
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+
+  .item {
+    padding: 0 5px;
+    color: #111213;
+    font-size: 14px;
+    margin: 10px;
+    border-bottom: 1px solid #ccc;
+    display: flex;
+    justify-content: space-between;
+  }
+}
+</style>

diff --git a/public/img/icon4.png b/public/img/icon4.png
new file mode 100644
index 0000000..9510ed8
--- /dev/null
+++ b/public/img/icon4.png
Binary files differ
diff --git a/src/components.d.ts b/src/components.d.ts
index a1b0897..ab9c1f9 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -35,6 +35,7 @@
     ImageUpload: typeof import('./components/ImageUpload/index.vue')['default']
     InfoWindow: typeof import('./components/map/infoWindow.vue')['default']
     InfoWindow2: typeof import('./components/map/infoWindow2.vue')['default']
+    InfoWindowHot: typeof import('./components/map/infoWindowHot.vue')['default']
     LineChart: typeof import('./components/Echart/LineChart.vue')['default']
     Map: typeof import('./components/map/index.vue')['default']
     NormalTable: typeof import('./components/NormalTable/index.vue')['default']
diff --git a/src/components/map/index.vue b/src/components/map/index.vue
index 15929df..fbcdc2f 100644
--- a/src/components/map/index.vue
+++ b/src/components/map/index.vue
@@ -7,7 +7,8 @@
 import AMapLoader from '@amap/amap-jsapi-loader'
 import infoDetail from './infoWindow.vue'
 import infoDetail2 from './infoWindow2.vue'
-import { electricityBranch, electricityNode, getElectricityListAll, getMonitorStationList } from '@/api/api/index'
+import infoDetailHot from './infoWindowHot.vue'
+import { electricityBranch, electricityNode, getDeviceListPage, getElectricityListAll, getMonitorStationList } from '@/api/api/index'
 const publicPath = import.meta.env.BASE_URL
 // 设置安全密钥
 window._AMapSecurityConfig = {
@@ -33,11 +34,16 @@
 // 光伏数组
 const markerArr1 = ref([
 ])
+// 用热坐标数组
+const markerArrHot = ref()
+const markerArrHotInfo = ref()
 // 信息窗体
 const infoWindow = ref()
 const infoWindow2 = ref()
+const infoWindowHot = ref()
 const windowInfoRef = ref()
 const windowInfoRef2 = ref()
+const windowInfoHotRef = ref()
 const markerArrInfo = ref()
 const markerArrInfo1 = ref()
 // 折现节点坐标
@@ -53,7 +59,7 @@
 const AMap1 = ref()
 // 图层实例
 const layer = ref()
-const flag = ref(true)
+const flag = ref(false)
 // 切换图层
 const changeLayerGrop = () => {
   if (flag.value) {
@@ -64,211 +70,256 @@
   }
   flag.value = !flag.value
 }
-defineExpose({ changeLayerGrop, flag })
 // 初始化地图
-const initMap = () => {
-  AMapLoader.load({
+const initMap = async () => {
+  await AMapLoader.load({
     key: '40849e82b4e33f5255b17372520c954d', // 后期需替换
     version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
     plugins: ['AMap.Scale', 'AMap.MouseTool', 'AMap.ToolBar'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
-  })
-    .then((AMap) => {
-      AMap1.value = AMap
-      // 初始化地图
-      map.value = new AMap.Map('map', {
-        viewMode: '3D', //  是否为3D地图模式
-        zoom: 17, // 初始化地图级别
-        center: [111.765785, 40.718114],
-        resizeEnable: true,
-      })
-      // 图层实例
-      layer.value = new AMap.TileLayer.Satellite()
-      // 地图绑定右击事件
-      map.value.on('mousedown', clickHandler)
-      // 电网支路标记点绘制
-      for (let i = 0; i < markerArr.value.length; i++) {
-        const icon = new AMap.Icon({
-          size: new AMap.Size(36, 36), // 图标尺寸
-          image: `${publicPath}img/icon1.png`, // Icon的图像
-          imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
-          imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
-        })
-        const marker = new AMap.Marker({
-          zooms: [16, 20], // 缩放
-          position: markerArr.value[i], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
-          map: map.value,
-          icon,
-          offset: new AMap.Pixel(3, -30),
-        })
-        // 支路点详细信息// 信息窗体
-        infoWindow.value = new AMap.InfoWindow({
-          isCustom: true, // 自定义信息窗体
-          content: windowInfoRef.value.$el, // 窗体内容(vue组件)
-          offset: new AMap.Pixel(9, -5), // 偏移
-        })
-        marker.on('click', (e) => {
-          // 打开信息窗口
-          infoWindow.value.open(map.value, e.lnglat)
-          // 初始化信息窗口
-          windowInfoRef.value.initialize({
-            overlay: e.target,
-            infoWindow: infoWindow.value,
-            info: markerArrInfo.value[i],
-          })
-        })
-        // 标记点文本标记
-        marker.setLabel({
-          offset: new AMap.Pixel(-10, -2), // 设置文本标注偏移量
-          content: `<div>${markerArrInfo.value[i].nodeName}</div>`, // 设置文本标注内容
-          direction: 'right', // 设置文本标注方位
-        })
-        map.value.add([marker])
-      }
-      // 光伏标记点及光伏绘制
-      for (let i = 0; i < markerArr1.value.length; i++) {
-        const icon = new AMap.Icon({
-          size: new AMap.Size(36, 36), // 图标尺寸
-          image: `${publicPath}img/icon2.png`, // Icon的图像
-          imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
-          imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
-        })
-        const marker = new AMap.Marker({
-          zooms: [16, 20],
-          position: markerArr1.value[i], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
-          map: map.value,
-          icon,
-          offset: new AMap.Pixel(-20, -20),
-        })
-        // 信息窗体
-        infoWindow2.value = new AMap.InfoWindow({
-          isCustom: true, // 自定义信息窗体
-          content: windowInfoRef2.value.$el, // 窗体内容(vue组件)
-          offset: new AMap.Pixel(9, -5), // 偏移
-        })
-        marker.on('click', (e) => {
-          // 打开信息窗口
-          infoWindow2.value.open(map.value, e.lnglat)
-          // 初始化信息窗口
-          windowInfoRef2.value.initialize({
-            overlay: e.target,
-            infoWindow: infoWindow2.value,
-            info: markerArrInfo1.value[i],
-          })
-        })
-        // 标记点的文本
-        marker.setLabel({
-          zooms: [16, 20],
-          offset: new AMap.Pixel(-10, -2), // 设置文本标注偏移量
-          content: `<div>${markerArrInfo1.value[i].stationName}</div>`, // 设置文本标注内容
-          direction: 'right', // 设置文本标注方位
-        })
-        map.value.add([marker])
-        // 绘制电网和节点连线
-        const path = markerArrInfo1.value.map((item) => {
-          return [[Number(item.lng), Number(item.lat)], [Number(item.nodeLng), Number(item.nodeLat)]]
-        })
-        const polyline = new AMap.Polyline({
-          path,
-          strokeColor: '#03A382',
-          strokeStyle: 'dashed',
-          strokeDasharray: [10, 3],
-          lineJoin: 'round',
-          lineCap: 'round',
-          zIndex: 50,
-          zooms: [16, 20],
-        })
-        polyline.setMap(map.value)
-        map.value.add(polyline)
-      }
-      // 电网支路折线绘制
-      for (let i = 0; i < lineArr.value.length; i++) {
-        // console.log(lineArr.value[i])
-        const path = lineArr.value.map(item => item.branchNodeInfos)
-        const line = path.map(item => (
-          item.map((child) => {
-            return ([[child.flng, child.flat], [child.tlng, child.tlat], child.status2])
-          })
-        ))
-        line.forEach((item) => {
-          item.forEach((child) => {
-            const path = [child[0], child[1]]
-            const polyline = new AMap.Polyline({
-              path,
-              // isOutline: true,
-              strokeColor: child[2] === 1 ? '#008d68' : '#000',
-              // strokeOpacity: 1,
-              strokeWeight: 3,
-              // 折线样式还支持 'dashed'
-              strokeStyle: child[2] !== 1 ? 'dashed' : 'dashed ',
-              // strokeStyle是dashed时有效
-              strokeDasharray: [10, 3],
-              lineJoin: 'round',
-              showDir: child[2] === 1,
-              // lineCap: 'square',
-              lineCap: 'round',
-              zIndex: 50,
-              zooms: [16, 20],
-
-            })
-            // 离线支路连接添加开关图标
-            if (child[2] === 0) {
-              const data = [(Number(child[0][0]) + Number(child[1][0])) / 2, (Number(child[0][1]) + Number(child[1][1])) / 2]
-              const icon = new AMap.Icon({
-                size: new AMap.Size(36, 36), // 图标尺寸
-                image: `${publicPath}img/icon3.png`, // Icon的图像
-                imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
-                imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
-              })
-              const marker = new AMap.Marker({
-                zooms: [16, 20],
-                position: data, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
-                map: map.value,
-                icon,
-                offset: new AMap.Pixel(-20, -20),
-              })
-              map.value.add([marker])
-            }
-            polyline.setMap(map.value)
-            map.value.add(polyline)
-          })
-        })
-        // 添加支路折线文本
-        // 创建纯文本标记
-        // const textArr = path.map(item => (
-        //   item.map((child) => {
-        //     return ([[(Number(child.flng) + Number(child.tlng)) / 2, (Number(child.flat) + Number(child.tlat)) / 2], child.flowRate])
-        //   })
-        // ))
-        // textArr.forEach((item) => {
-        //   // console.log(item, 'item')
-        //   item.forEach((child) => {
-        //     const icon = new AMap.Icon({
-        //       size: new AMap.Size(36, 36), // 图标尺寸
-        //       // image: '', // Icon的图像
-        //       imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
-        //       imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
-        //     })
-        //     // const content = '<div>111</div>'
-        //     const marker = new AMap.Marker({
-        //       position: child[0], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
-        //       map: map.value,
-        //       content: '<span></span>',
-        //       offset: new AMap.Pixel(-20, -20),
-        //     })
-        //     marker.setLabel({
-        //       offset: new AMap.Pixel(-10, -2), // 设置文本标注偏移量
-        //       content: `<div>${`${child[1]}kgCO2/h`}</div>`, // 设置文本标注内容
-        //       direction: 'right', // 设置文本标注方位
-        //     })
-        //     map.value.add([marker])
-        //   })
-        // })
-      }
+  }).then((AMap) => {
+    AMap1.value = AMap
+    // 初始化地图
+    map.value = new AMap.Map('map', {
+      viewMode: '3D', //  是否为3D地图模式
+      zoom: 17, // 初始化地图级别
+      center: [111.765785, 40.718114],
+      resizeEnable: true,
     })
+    // 图层实例
+    layer.value = new AMap.TileLayer.Satellite()
+    map.value.addLayer(layer.value)
+    // 地图绑定右击事件
+    map.value.on('mousedown', clickHandler)
+  })
     .catch((e) => {
       console.log(e)
     })
 }
+// 绘制用电监测相关
+const useElectricity = () => {
+  const AMap = AMap1.value
+  // 电网支路标记点绘制
+  for (let i = 0; i < markerArr.value.length; i++) {
+    const icon = new AMap.Icon({
+      size: new AMap.Size(36, 36), // 图标尺寸
+      image: `${publicPath}img/icon1.png`, // Icon的图像
+      imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
+      imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
+    })
+    const marker = new AMap.Marker({
+      zooms: [16, 20], // 缩放
+      position: markerArr.value[i], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+      map: map.value,
+      icon,
+      offset: new AMap.Pixel(3, -30),
+    })
+    // 支路点详细信息// 信息窗体
+    infoWindow.value = new AMap.InfoWindow({
+      isCustom: true, // 自定义信息窗体
+      content: windowInfoRef.value.$el, // 窗体内容(vue组件)
+      offset: new AMap.Pixel(9, -5), // 偏移
+    })
+    marker.on('click', (e) => {
+      // 打开信息窗口
+      infoWindow.value.open(map.value, e.lnglat)
+      // 初始化信息窗口
+      windowInfoRef.value.initialize({
+        overlay: e.target,
+        infoWindow: infoWindow.value,
+        info: markerArrInfo.value[i],
+      })
+    })
+    // 标记点文本标记
+    marker.setLabel({
+      offset: new AMap.Pixel(-10, -2), // 设置文本标注偏移量
+      content: `<div>${markerArrInfo.value[i].nodeName}</div>`, // 设置文本标注内容
+      direction: 'right', // 设置文本标注方位
+    })
+    map.value.add([marker])
+  }
+  // 光伏标记点及光伏绘制
+  for (let i = 0; i < markerArr1.value.length; i++) {
+    const icon = new AMap.Icon({
+      size: new AMap.Size(36, 36), // 图标尺寸
+      image: `${publicPath}img/icon2.png`, // Icon的图像
+      imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
+      imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
+    })
+    const marker = new AMap.Marker({
+      zooms: [16, 20],
+      position: markerArr1.value[i], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+      map: map.value,
+      icon,
+      offset: new AMap.Pixel(-20, -20),
+    })
+    // 信息窗体
+    infoWindow2.value = new AMap.InfoWindow({
+      isCustom: true, // 自定义信息窗体
+      content: windowInfoRef2.value.$el, // 窗体内容(vue组件)
+      offset: new AMap.Pixel(9, -5), // 偏移
+    })
+    marker.on('click', (e) => {
+      // 打开信息窗口
+      infoWindow2.value.open(map.value, e.lnglat)
+      // 初始化信息窗口
+      windowInfoRef2.value.initialize({
+        overlay: e.target,
+        infoWindow: infoWindow2.value,
+        info: markerArrInfo1.value[i],
+      })
+    })
+    // 标记点的文本
+    marker.setLabel({
+      zooms: [16, 20],
+      offset: new AMap.Pixel(-10, -2), // 设置文本标注偏移量
+      content: `<div>${markerArrInfo1.value[i].stationName}</div>`, // 设置文本标注内容
+      direction: 'right', // 设置文本标注方位
+    })
+    map.value.add([marker])
+    // 绘制电网和节点连线
+    const path = markerArrInfo1.value.map((item) => {
+      return [[Number(item.lng), Number(item.lat)], [Number(item.nodeLng), Number(item.nodeLat)]]
+    })
+    const polyline = new AMap.Polyline({
+      path,
+      strokeColor: '#03A382',
+      strokeStyle: 'dashed',
+      strokeDasharray: [10, 3],
+      lineJoin: 'round',
+      lineCap: 'round',
+      zIndex: 50,
+      zooms: [16, 20],
+    })
+    polyline.setMap(map.value)
+    map.value.add(polyline)
+  }
+  // 电网支路折线绘制
+  for (let i = 0; i < lineArr.value.length; i++) {
+    // console.log(lineArr.value[i])
+    const path = lineArr.value.map(item => item.branchNodeInfos)
+    const line = path.map(item => (
+      item.map((child) => {
+        return ([[child.flng, child.flat], [child.tlng, child.tlat], child.status2])
+      })
+    ))
+    line.forEach((item) => {
+      item.forEach((child) => {
+        const path = [child[0], child[1]]
+        const polyline = new AMap.Polyline({
+          path,
+          // isOutline: true,
+          strokeColor: child[2] === 1 ? '#008d68' : '#000',
+          // strokeOpacity: 1,
+          strokeWeight: 3,
+          // 折线样式还支持 'dashed'
+          strokeStyle: child[2] !== 1 ? 'dashed' : 'dashed ',
+          // strokeStyle是dashed时有效
+          strokeDasharray: [10, 3],
+          lineJoin: 'round',
+          showDir: child[2] === 1,
+          // lineCap: 'square',
+          lineCap: 'round',
+          zIndex: 50,
+          zooms: [16, 20],
+
+        })
+        // 离线支路连接添加开关图标
+        if (child[2] === 0) {
+          const data = [(Number(child[0][0]) + Number(child[1][0])) / 2, (Number(child[0][1]) + Number(child[1][1])) / 2]
+          const icon = new AMap.Icon({
+            size: new AMap.Size(36, 36), // 图标尺寸
+            image: `${publicPath}img/icon3.png`, // Icon的图像
+            imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
+            imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
+          })
+          const marker = new AMap.Marker({
+            zooms: [16, 20],
+            position: data, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+            map: map.value,
+            icon,
+            offset: new AMap.Pixel(-20, -20),
+          })
+          map.value.add([marker])
+        }
+        polyline.setMap(map.value)
+        map.value.add(polyline)
+      })
+    })
+    // 添加支路折线文本
+    // 创建纯文本标记
+    // const textArr = path.map(item => (
+    //   item.map((child) => {
+    //     return ([[(Number(child.flng) + Number(child.tlng)) / 2, (Number(child.flat) + Number(child.tlat)) / 2], child.flowRate])
+    //   })
+    // ))
+    // textArr.forEach((item) => {
+    //   // console.log(item, 'item')
+    //   item.forEach((child) => {
+    //     const icon = new AMap.Icon({
+    //       size: new AMap.Size(36, 36), // 图标尺寸
+    //       // image: '', // Icon的图像
+    //       imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
+    //       imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
+    //     })
+    //     // const content = '<div>111</div>'
+    //     const marker = new AMap.Marker({
+    //       position: child[0], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+    //       map: map.value,
+    //       content: '<span></span>',
+    //       offset: new AMap.Pixel(-20, -20),
+    //     })
+    //     marker.setLabel({
+    //       offset: new AMap.Pixel(-10, -2), // 设置文本标注偏移量
+    //       content: `<div>${`${child[1]}kgCO2/h`}</div>`, // 设置文本标注内容
+    //       direction: 'right', // 设置文本标注方位
+    //     })
+    //     map.value.add([marker])
+    //   })
+    // })
+  }
+}
+// 绘制用热监测相关
+const useHot = () => {
+  for (let i = 0; i < markerArrHot.value.length; i++) {
+    const AMap = AMap1.value
+    const icon = new AMap.Icon({
+      size: new AMap.Size(36, 36), // 图标尺寸
+      image: `${publicPath}img/icon4.png`, // Icon的图像
+      imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
+      imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
+    })
+    const marker = new AMap.Marker({
+      zooms: [16, 20], // 缩放
+      position: markerArrHot.value[i], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+      map: map.value,
+      icon,
+      offset: new AMap.Pixel(3, -30),
+    })
+    // 支路点详细信息// 信息窗体
+    infoWindowHot.value = new AMap.InfoWindow({
+      isCustom: true, // 自定义信息窗体
+      content: windowInfoHotRef.value.$el, // 窗体内容(vue组件)
+      offset: new AMap.Pixel(9, -5), // 偏移
+    })
+    marker.on('click', (e) => {
+      // 打开信息窗口
+      infoWindowHot.value.open(map.value, e.lnglat)
+      // 初始化信息窗口
+      windowInfoHotRef.value.initialize({
+        overlay: e.target,
+        infoWindow: infoWindowHot.value,
+        info: markerArrHotInfo.value[i],
+      })
+    })
+    // 标记点文本标记
+    marker.setLabel({
+      offset: new AMap.Pixel(-10, -2), // 设置文本标注偏移量
+      content: `<div>${markerArrHotInfo.value[i].deviceName}</div>`, // 设置文本标注内容
+      direction: 'right', // 设置文本标注方位
+    })
+    map.value.add([marker])
+  }
+}
 onMounted(async () => {
   // 获取电网列表
   try {
@@ -289,11 +340,22 @@
     markerArr1.value = list1.data.map(item => ([Number(item.lng), Number(item.lat)]))
     markerArrInfo1.value = list1.data
     // 初始化地图
-    initMap()
+    await initMap()
+    useElectricity()
   }
   catch (error) {
     initMap()
   }
+  // 获取用热数据
+  getDeviceListPage({
+    offset: 1,
+    limit: 999,
+    ptn: '',
+    deviceType: '2',
+  }).then((res) => {
+    markerArrHotInfo.value = res.data.rows
+    markerArrHot.value = res.data.rows.map(item => ([Number(item.lng), Number(item.lat)]))
+  })
   // getElectricityListAll().then((res) => {
   //   // 电网列表
   //   electricityList.value = res.data
@@ -312,12 +374,27 @@
   //   }
   // })
 })
+// 用电检测/用热监测 默认用电
+const flagType = ref(true)
+// 切换用电检测/用热监测
+const changeFlagType = () => {
+  map.value.clearMap()
+  if (flagType.value) {
+    useHot()
+  }
+  else {
+    useElectricity()
+  }
+  flagType.value = !flagType.value
+}
+defineExpose({ changeLayerGrop, changeFlagType, flag })
 </script>
 
 <template>
   <div id="map" />
   <info-detail ref="windowInfoRef" />
   <info-detail2 ref="windowInfoRef2" />
+  <info-detail-hot ref="windowInfoHotRef" />
 </template>
 
 <style scoped>
diff --git a/src/components/map/infoWindowHot.vue b/src/components/map/infoWindowHot.vue
new file mode 100644
index 0000000..30f915e
--- /dev/null
+++ b/src/components/map/infoWindowHot.vue
@@ -0,0 +1,80 @@
+<!--
+  Description: 高德地图信息窗体 - 用热
+  Author: 李亚光
+  Date: 2023-05-10
+ -->
+<script lang="ts" setup name="infoWindow">
+const overlay = ref()
+const infoWindow = ref()
+const info = ref()
+// 初始化
+const initialize = (e) => {
+  overlay.value = e.overlay
+  infoWindow.value = e.infoWindow
+  info.value = e.info
+  console.log(e, '123')
+}
+defineExpose({ initialize })
+// 关闭
+const close = () => {
+  infoWindow.value.close()
+}
+</script>
+
+<template>
+  <div class="container">
+    <div class="title">
+      <div class="text">
+        {{ info?.deviceName }}
+      </div>
+      <div class="close" @click="close">
+        x
+      </div>
+    </div>
+    <div class="item">
+      <span>设备编号 : {{ info?.deviceNo }}</span>  <span>设备类型 : {{ info?.deviceTypeName }}</span>
+    </div>
+    <div class="item">
+      <span>所属分区 : {{ info?.ptnName }}</span>  <span>监测对象 : {{ info?.monitorObjName }}</span>
+    </div>
+    <div class="item">
+      <span>安装位置 : {{ info?.installLocaltion }}</span>  <span>安装时间 : {{ info?.installTime }}</span>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.container {
+  width: 340px;
+  height: 140px;
+  padding: 10px;
+  background-color: #fff;
+  border: 1px solid #6d9ece;
+
+  .title {
+    font-size: 16px;
+    font-weight: 700;
+    padding: 0 10px;
+    display: flex;
+    justify-content: space-between;
+
+    .close {
+      color: #ccc;
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+
+  .item {
+    padding: 0 5px;
+    color: #111213;
+    font-size: 14px;
+    margin: 10px;
+    border-bottom: 1px solid #ccc;
+    display: flex;
+    justify-content: space-between;
+  }
+}
+</style>
diff --git a/src/router/routes.ts b/src/router/routes.ts
index 9f10482..6f295be 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -134,6 +134,16 @@
   },
   {
     meta: {
+      title: '数据管理',
+      icon: '',
+      auth: '/dataset',
+    },
+    children: [
+      ...dataRoute,
+    ],
+  },
+  {
+    meta: {
       title: '碳足迹监测',
       icon: '',
       auth: '/footprint',
@@ -194,16 +204,6 @@
   // },
   {
     meta: {
-      title: '数据管理',
-      icon: '',
-      auth: '/dataset',
-    },
-    children: [
-      ...dataRoute,
-    ],
-  },
-  {
-    meta: {
       title: '系统设置',
       icon: '',
       auth: '/system',

diff --git a/public/img/icon4.png b/public/img/icon4.png
new file mode 100644
index 0000000..9510ed8
--- /dev/null
+++ b/public/img/icon4.png
Binary files differ
diff --git a/src/components.d.ts b/src/components.d.ts
index a1b0897..ab9c1f9 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -35,6 +35,7 @@
     ImageUpload: typeof import('./components/ImageUpload/index.vue')['default']
     InfoWindow: typeof import('./components/map/infoWindow.vue')['default']
     InfoWindow2: typeof import('./components/map/infoWindow2.vue')['default']
+    InfoWindowHot: typeof import('./components/map/infoWindowHot.vue')['default']
     LineChart: typeof import('./components/Echart/LineChart.vue')['default']
     Map: typeof import('./components/map/index.vue')['default']
     NormalTable: typeof import('./components/NormalTable/index.vue')['default']
diff --git a/src/components/map/index.vue b/src/components/map/index.vue
index 15929df..fbcdc2f 100644
--- a/src/components/map/index.vue
+++ b/src/components/map/index.vue
@@ -7,7 +7,8 @@
 import AMapLoader from '@amap/amap-jsapi-loader'
 import infoDetail from './infoWindow.vue'
 import infoDetail2 from './infoWindow2.vue'
-import { electricityBranch, electricityNode, getElectricityListAll, getMonitorStationList } from '@/api/api/index'
+import infoDetailHot from './infoWindowHot.vue'
+import { electricityBranch, electricityNode, getDeviceListPage, getElectricityListAll, getMonitorStationList } from '@/api/api/index'
 const publicPath = import.meta.env.BASE_URL
 // 设置安全密钥
 window._AMapSecurityConfig = {
@@ -33,11 +34,16 @@
 // 光伏数组
 const markerArr1 = ref([
 ])
+// 用热坐标数组
+const markerArrHot = ref()
+const markerArrHotInfo = ref()
 // 信息窗体
 const infoWindow = ref()
 const infoWindow2 = ref()
+const infoWindowHot = ref()
 const windowInfoRef = ref()
 const windowInfoRef2 = ref()
+const windowInfoHotRef = ref()
 const markerArrInfo = ref()
 const markerArrInfo1 = ref()
 // 折现节点坐标
@@ -53,7 +59,7 @@
 const AMap1 = ref()
 // 图层实例
 const layer = ref()
-const flag = ref(true)
+const flag = ref(false)
 // 切换图层
 const changeLayerGrop = () => {
   if (flag.value) {
@@ -64,211 +70,256 @@
   }
   flag.value = !flag.value
 }
-defineExpose({ changeLayerGrop, flag })
 // 初始化地图
-const initMap = () => {
-  AMapLoader.load({
+const initMap = async () => {
+  await AMapLoader.load({
     key: '40849e82b4e33f5255b17372520c954d', // 后期需替换
     version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
     plugins: ['AMap.Scale', 'AMap.MouseTool', 'AMap.ToolBar'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
-  })
-    .then((AMap) => {
-      AMap1.value = AMap
-      // 初始化地图
-      map.value = new AMap.Map('map', {
-        viewMode: '3D', //  是否为3D地图模式
-        zoom: 17, // 初始化地图级别
-        center: [111.765785, 40.718114],
-        resizeEnable: true,
-      })
-      // 图层实例
-      layer.value = new AMap.TileLayer.Satellite()
-      // 地图绑定右击事件
-      map.value.on('mousedown', clickHandler)
-      // 电网支路标记点绘制
-      for (let i = 0; i < markerArr.value.length; i++) {
-        const icon = new AMap.Icon({
-          size: new AMap.Size(36, 36), // 图标尺寸
-          image: `${publicPath}img/icon1.png`, // Icon的图像
-          imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
-          imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
-        })
-        const marker = new AMap.Marker({
-          zooms: [16, 20], // 缩放
-          position: markerArr.value[i], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
-          map: map.value,
-          icon,
-          offset: new AMap.Pixel(3, -30),
-        })
-        // 支路点详细信息// 信息窗体
-        infoWindow.value = new AMap.InfoWindow({
-          isCustom: true, // 自定义信息窗体
-          content: windowInfoRef.value.$el, // 窗体内容(vue组件)
-          offset: new AMap.Pixel(9, -5), // 偏移
-        })
-        marker.on('click', (e) => {
-          // 打开信息窗口
-          infoWindow.value.open(map.value, e.lnglat)
-          // 初始化信息窗口
-          windowInfoRef.value.initialize({
-            overlay: e.target,
-            infoWindow: infoWindow.value,
-            info: markerArrInfo.value[i],
-          })
-        })
-        // 标记点文本标记
-        marker.setLabel({
-          offset: new AMap.Pixel(-10, -2), // 设置文本标注偏移量
-          content: `<div>${markerArrInfo.value[i].nodeName}</div>`, // 设置文本标注内容
-          direction: 'right', // 设置文本标注方位
-        })
-        map.value.add([marker])
-      }
-      // 光伏标记点及光伏绘制
-      for (let i = 0; i < markerArr1.value.length; i++) {
-        const icon = new AMap.Icon({
-          size: new AMap.Size(36, 36), // 图标尺寸
-          image: `${publicPath}img/icon2.png`, // Icon的图像
-          imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
-          imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
-        })
-        const marker = new AMap.Marker({
-          zooms: [16, 20],
-          position: markerArr1.value[i], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
-          map: map.value,
-          icon,
-          offset: new AMap.Pixel(-20, -20),
-        })
-        // 信息窗体
-        infoWindow2.value = new AMap.InfoWindow({
-          isCustom: true, // 自定义信息窗体
-          content: windowInfoRef2.value.$el, // 窗体内容(vue组件)
-          offset: new AMap.Pixel(9, -5), // 偏移
-        })
-        marker.on('click', (e) => {
-          // 打开信息窗口
-          infoWindow2.value.open(map.value, e.lnglat)
-          // 初始化信息窗口
-          windowInfoRef2.value.initialize({
-            overlay: e.target,
-            infoWindow: infoWindow2.value,
-            info: markerArrInfo1.value[i],
-          })
-        })
-        // 标记点的文本
-        marker.setLabel({
-          zooms: [16, 20],
-          offset: new AMap.Pixel(-10, -2), // 设置文本标注偏移量
-          content: `<div>${markerArrInfo1.value[i].stationName}</div>`, // 设置文本标注内容
-          direction: 'right', // 设置文本标注方位
-        })
-        map.value.add([marker])
-        // 绘制电网和节点连线
-        const path = markerArrInfo1.value.map((item) => {
-          return [[Number(item.lng), Number(item.lat)], [Number(item.nodeLng), Number(item.nodeLat)]]
-        })
-        const polyline = new AMap.Polyline({
-          path,
-          strokeColor: '#03A382',
-          strokeStyle: 'dashed',
-          strokeDasharray: [10, 3],
-          lineJoin: 'round',
-          lineCap: 'round',
-          zIndex: 50,
-          zooms: [16, 20],
-        })
-        polyline.setMap(map.value)
-        map.value.add(polyline)
-      }
-      // 电网支路折线绘制
-      for (let i = 0; i < lineArr.value.length; i++) {
-        // console.log(lineArr.value[i])
-        const path = lineArr.value.map(item => item.branchNodeInfos)
-        const line = path.map(item => (
-          item.map((child) => {
-            return ([[child.flng, child.flat], [child.tlng, child.tlat], child.status2])
-          })
-        ))
-        line.forEach((item) => {
-          item.forEach((child) => {
-            const path = [child[0], child[1]]
-            const polyline = new AMap.Polyline({
-              path,
-              // isOutline: true,
-              strokeColor: child[2] === 1 ? '#008d68' : '#000',
-              // strokeOpacity: 1,
-              strokeWeight: 3,
-              // 折线样式还支持 'dashed'
-              strokeStyle: child[2] !== 1 ? 'dashed' : 'dashed ',
-              // strokeStyle是dashed时有效
-              strokeDasharray: [10, 3],
-              lineJoin: 'round',
-              showDir: child[2] === 1,
-              // lineCap: 'square',
-              lineCap: 'round',
-              zIndex: 50,
-              zooms: [16, 20],
-
-            })
-            // 离线支路连接添加开关图标
-            if (child[2] === 0) {
-              const data = [(Number(child[0][0]) + Number(child[1][0])) / 2, (Number(child[0][1]) + Number(child[1][1])) / 2]
-              const icon = new AMap.Icon({
-                size: new AMap.Size(36, 36), // 图标尺寸
-                image: `${publicPath}img/icon3.png`, // Icon的图像
-                imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
-                imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
-              })
-              const marker = new AMap.Marker({
-                zooms: [16, 20],
-                position: data, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
-                map: map.value,
-                icon,
-                offset: new AMap.Pixel(-20, -20),
-              })
-              map.value.add([marker])
-            }
-            polyline.setMap(map.value)
-            map.value.add(polyline)
-          })
-        })
-        // 添加支路折线文本
-        // 创建纯文本标记
-        // const textArr = path.map(item => (
-        //   item.map((child) => {
-        //     return ([[(Number(child.flng) + Number(child.tlng)) / 2, (Number(child.flat) + Number(child.tlat)) / 2], child.flowRate])
-        //   })
-        // ))
-        // textArr.forEach((item) => {
-        //   // console.log(item, 'item')
-        //   item.forEach((child) => {
-        //     const icon = new AMap.Icon({
-        //       size: new AMap.Size(36, 36), // 图标尺寸
-        //       // image: '', // Icon的图像
-        //       imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
-        //       imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
-        //     })
-        //     // const content = '<div>111</div>'
-        //     const marker = new AMap.Marker({
-        //       position: child[0], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
-        //       map: map.value,
-        //       content: '<span></span>',
-        //       offset: new AMap.Pixel(-20, -20),
-        //     })
-        //     marker.setLabel({
-        //       offset: new AMap.Pixel(-10, -2), // 设置文本标注偏移量
-        //       content: `<div>${`${child[1]}kgCO2/h`}</div>`, // 设置文本标注内容
-        //       direction: 'right', // 设置文本标注方位
-        //     })
-        //     map.value.add([marker])
-        //   })
-        // })
-      }
+  }).then((AMap) => {
+    AMap1.value = AMap
+    // 初始化地图
+    map.value = new AMap.Map('map', {
+      viewMode: '3D', //  是否为3D地图模式
+      zoom: 17, // 初始化地图级别
+      center: [111.765785, 40.718114],
+      resizeEnable: true,
     })
+    // 图层实例
+    layer.value = new AMap.TileLayer.Satellite()
+    map.value.addLayer(layer.value)
+    // 地图绑定右击事件
+    map.value.on('mousedown', clickHandler)
+  })
     .catch((e) => {
       console.log(e)
     })
 }
+// 绘制用电监测相关
+const useElectricity = () => {
+  const AMap = AMap1.value
+  // 电网支路标记点绘制
+  for (let i = 0; i < markerArr.value.length; i++) {
+    const icon = new AMap.Icon({
+      size: new AMap.Size(36, 36), // 图标尺寸
+      image: `${publicPath}img/icon1.png`, // Icon的图像
+      imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
+      imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
+    })
+    const marker = new AMap.Marker({
+      zooms: [16, 20], // 缩放
+      position: markerArr.value[i], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+      map: map.value,
+      icon,
+      offset: new AMap.Pixel(3, -30),
+    })
+    // 支路点详细信息// 信息窗体
+    infoWindow.value = new AMap.InfoWindow({
+      isCustom: true, // 自定义信息窗体
+      content: windowInfoRef.value.$el, // 窗体内容(vue组件)
+      offset: new AMap.Pixel(9, -5), // 偏移
+    })
+    marker.on('click', (e) => {
+      // 打开信息窗口
+      infoWindow.value.open(map.value, e.lnglat)
+      // 初始化信息窗口
+      windowInfoRef.value.initialize({
+        overlay: e.target,
+        infoWindow: infoWindow.value,
+        info: markerArrInfo.value[i],
+      })
+    })
+    // 标记点文本标记
+    marker.setLabel({
+      offset: new AMap.Pixel(-10, -2), // 设置文本标注偏移量
+      content: `<div>${markerArrInfo.value[i].nodeName}</div>`, // 设置文本标注内容
+      direction: 'right', // 设置文本标注方位
+    })
+    map.value.add([marker])
+  }
+  // 光伏标记点及光伏绘制
+  for (let i = 0; i < markerArr1.value.length; i++) {
+    const icon = new AMap.Icon({
+      size: new AMap.Size(36, 36), // 图标尺寸
+      image: `${publicPath}img/icon2.png`, // Icon的图像
+      imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
+      imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
+    })
+    const marker = new AMap.Marker({
+      zooms: [16, 20],
+      position: markerArr1.value[i], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+      map: map.value,
+      icon,
+      offset: new AMap.Pixel(-20, -20),
+    })
+    // 信息窗体
+    infoWindow2.value = new AMap.InfoWindow({
+      isCustom: true, // 自定义信息窗体
+      content: windowInfoRef2.value.$el, // 窗体内容(vue组件)
+      offset: new AMap.Pixel(9, -5), // 偏移
+    })
+    marker.on('click', (e) => {
+      // 打开信息窗口
+      infoWindow2.value.open(map.value, e.lnglat)
+      // 初始化信息窗口
+      windowInfoRef2.value.initialize({
+        overlay: e.target,
+        infoWindow: infoWindow2.value,
+        info: markerArrInfo1.value[i],
+      })
+    })
+    // 标记点的文本
+    marker.setLabel({
+      zooms: [16, 20],
+      offset: new AMap.Pixel(-10, -2), // 设置文本标注偏移量
+      content: `<div>${markerArrInfo1.value[i].stationName}</div>`, // 设置文本标注内容
+      direction: 'right', // 设置文本标注方位
+    })
+    map.value.add([marker])
+    // 绘制电网和节点连线
+    const path = markerArrInfo1.value.map((item) => {
+      return [[Number(item.lng), Number(item.lat)], [Number(item.nodeLng), Number(item.nodeLat)]]
+    })
+    const polyline = new AMap.Polyline({
+      path,
+      strokeColor: '#03A382',
+      strokeStyle: 'dashed',
+      strokeDasharray: [10, 3],
+      lineJoin: 'round',
+      lineCap: 'round',
+      zIndex: 50,
+      zooms: [16, 20],
+    })
+    polyline.setMap(map.value)
+    map.value.add(polyline)
+  }
+  // 电网支路折线绘制
+  for (let i = 0; i < lineArr.value.length; i++) {
+    // console.log(lineArr.value[i])
+    const path = lineArr.value.map(item => item.branchNodeInfos)
+    const line = path.map(item => (
+      item.map((child) => {
+        return ([[child.flng, child.flat], [child.tlng, child.tlat], child.status2])
+      })
+    ))
+    line.forEach((item) => {
+      item.forEach((child) => {
+        const path = [child[0], child[1]]
+        const polyline = new AMap.Polyline({
+          path,
+          // isOutline: true,
+          strokeColor: child[2] === 1 ? '#008d68' : '#000',
+          // strokeOpacity: 1,
+          strokeWeight: 3,
+          // 折线样式还支持 'dashed'
+          strokeStyle: child[2] !== 1 ? 'dashed' : 'dashed ',
+          // strokeStyle是dashed时有效
+          strokeDasharray: [10, 3],
+          lineJoin: 'round',
+          showDir: child[2] === 1,
+          // lineCap: 'square',
+          lineCap: 'round',
+          zIndex: 50,
+          zooms: [16, 20],
+
+        })
+        // 离线支路连接添加开关图标
+        if (child[2] === 0) {
+          const data = [(Number(child[0][0]) + Number(child[1][0])) / 2, (Number(child[0][1]) + Number(child[1][1])) / 2]
+          const icon = new AMap.Icon({
+            size: new AMap.Size(36, 36), // 图标尺寸
+            image: `${publicPath}img/icon3.png`, // Icon的图像
+            imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
+            imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
+          })
+          const marker = new AMap.Marker({
+            zooms: [16, 20],
+            position: data, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+            map: map.value,
+            icon,
+            offset: new AMap.Pixel(-20, -20),
+          })
+          map.value.add([marker])
+        }
+        polyline.setMap(map.value)
+        map.value.add(polyline)
+      })
+    })
+    // 添加支路折线文本
+    // 创建纯文本标记
+    // const textArr = path.map(item => (
+    //   item.map((child) => {
+    //     return ([[(Number(child.flng) + Number(child.tlng)) / 2, (Number(child.flat) + Number(child.tlat)) / 2], child.flowRate])
+    //   })
+    // ))
+    // textArr.forEach((item) => {
+    //   // console.log(item, 'item')
+    //   item.forEach((child) => {
+    //     const icon = new AMap.Icon({
+    //       size: new AMap.Size(36, 36), // 图标尺寸
+    //       // image: '', // Icon的图像
+    //       imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
+    //       imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
+    //     })
+    //     // const content = '<div>111</div>'
+    //     const marker = new AMap.Marker({
+    //       position: child[0], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+    //       map: map.value,
+    //       content: '<span></span>',
+    //       offset: new AMap.Pixel(-20, -20),
+    //     })
+    //     marker.setLabel({
+    //       offset: new AMap.Pixel(-10, -2), // 设置文本标注偏移量
+    //       content: `<div>${`${child[1]}kgCO2/h`}</div>`, // 设置文本标注内容
+    //       direction: 'right', // 设置文本标注方位
+    //     })
+    //     map.value.add([marker])
+    //   })
+    // })
+  }
+}
+// 绘制用热监测相关
+const useHot = () => {
+  for (let i = 0; i < markerArrHot.value.length; i++) {
+    const AMap = AMap1.value
+    const icon = new AMap.Icon({
+      size: new AMap.Size(36, 36), // 图标尺寸
+      image: `${publicPath}img/icon4.png`, // Icon的图像
+      imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
+      imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
+    })
+    const marker = new AMap.Marker({
+      zooms: [16, 20], // 缩放
+      position: markerArrHot.value[i], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+      map: map.value,
+      icon,
+      offset: new AMap.Pixel(3, -30),
+    })
+    // 支路点详细信息// 信息窗体
+    infoWindowHot.value = new AMap.InfoWindow({
+      isCustom: true, // 自定义信息窗体
+      content: windowInfoHotRef.value.$el, // 窗体内容(vue组件)
+      offset: new AMap.Pixel(9, -5), // 偏移
+    })
+    marker.on('click', (e) => {
+      // 打开信息窗口
+      infoWindowHot.value.open(map.value, e.lnglat)
+      // 初始化信息窗口
+      windowInfoHotRef.value.initialize({
+        overlay: e.target,
+        infoWindow: infoWindowHot.value,
+        info: markerArrHotInfo.value[i],
+      })
+    })
+    // 标记点文本标记
+    marker.setLabel({
+      offset: new AMap.Pixel(-10, -2), // 设置文本标注偏移量
+      content: `<div>${markerArrHotInfo.value[i].deviceName}</div>`, // 设置文本标注内容
+      direction: 'right', // 设置文本标注方位
+    })
+    map.value.add([marker])
+  }
+}
 onMounted(async () => {
   // 获取电网列表
   try {
@@ -289,11 +340,22 @@
     markerArr1.value = list1.data.map(item => ([Number(item.lng), Number(item.lat)]))
     markerArrInfo1.value = list1.data
     // 初始化地图
-    initMap()
+    await initMap()
+    useElectricity()
   }
   catch (error) {
     initMap()
   }
+  // 获取用热数据
+  getDeviceListPage({
+    offset: 1,
+    limit: 999,
+    ptn: '',
+    deviceType: '2',
+  }).then((res) => {
+    markerArrHotInfo.value = res.data.rows
+    markerArrHot.value = res.data.rows.map(item => ([Number(item.lng), Number(item.lat)]))
+  })
   // getElectricityListAll().then((res) => {
   //   // 电网列表
   //   electricityList.value = res.data
@@ -312,12 +374,27 @@
   //   }
   // })
 })
+// 用电检测/用热监测 默认用电
+const flagType = ref(true)
+// 切换用电检测/用热监测
+const changeFlagType = () => {
+  map.value.clearMap()
+  if (flagType.value) {
+    useHot()
+  }
+  else {
+    useElectricity()
+  }
+  flagType.value = !flagType.value
+}
+defineExpose({ changeLayerGrop, changeFlagType, flag })
 </script>
 
 <template>
   <div id="map" />
   <info-detail ref="windowInfoRef" />
   <info-detail2 ref="windowInfoRef2" />
+  <info-detail-hot ref="windowInfoHotRef" />
 </template>
 
 <style scoped>
diff --git a/src/components/map/infoWindowHot.vue b/src/components/map/infoWindowHot.vue
new file mode 100644
index 0000000..30f915e
--- /dev/null
+++ b/src/components/map/infoWindowHot.vue
@@ -0,0 +1,80 @@
+<!--
+  Description: 高德地图信息窗体 - 用热
+  Author: 李亚光
+  Date: 2023-05-10
+ -->
+<script lang="ts" setup name="infoWindow">
+const overlay = ref()
+const infoWindow = ref()
+const info = ref()
+// 初始化
+const initialize = (e) => {
+  overlay.value = e.overlay
+  infoWindow.value = e.infoWindow
+  info.value = e.info
+  console.log(e, '123')
+}
+defineExpose({ initialize })
+// 关闭
+const close = () => {
+  infoWindow.value.close()
+}
+</script>
+
+<template>
+  <div class="container">
+    <div class="title">
+      <div class="text">
+        {{ info?.deviceName }}
+      </div>
+      <div class="close" @click="close">
+        x
+      </div>
+    </div>
+    <div class="item">
+      <span>设备编号 : {{ info?.deviceNo }}</span>  <span>设备类型 : {{ info?.deviceTypeName }}</span>
+    </div>
+    <div class="item">
+      <span>所属分区 : {{ info?.ptnName }}</span>  <span>监测对象 : {{ info?.monitorObjName }}</span>
+    </div>
+    <div class="item">
+      <span>安装位置 : {{ info?.installLocaltion }}</span>  <span>安装时间 : {{ info?.installTime }}</span>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.container {
+  width: 340px;
+  height: 140px;
+  padding: 10px;
+  background-color: #fff;
+  border: 1px solid #6d9ece;
+
+  .title {
+    font-size: 16px;
+    font-weight: 700;
+    padding: 0 10px;
+    display: flex;
+    justify-content: space-between;
+
+    .close {
+      color: #ccc;
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+
+  .item {
+    padding: 0 5px;
+    color: #111213;
+    font-size: 14px;
+    margin: 10px;
+    border-bottom: 1px solid #ccc;
+    display: flex;
+    justify-content: space-between;
+  }
+}
+</style>
diff --git a/src/router/routes.ts b/src/router/routes.ts
index 9f10482..6f295be 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -134,6 +134,16 @@
   },
   {
     meta: {
+      title: '数据管理',
+      icon: '',
+      auth: '/dataset',
+    },
+    children: [
+      ...dataRoute,
+    ],
+  },
+  {
+    meta: {
       title: '碳足迹监测',
       icon: '',
       auth: '/footprint',
@@ -194,16 +204,6 @@
   // },
   {
     meta: {
-      title: '数据管理',
-      icon: '',
-      auth: '/dataset',
-    },
-    children: [
-      ...dataRoute,
-    ],
-  },
-  {
-    meta: {
       title: '系统设置',
       icon: '',
       auth: '/system',
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index f902885..0bb95a0 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -14,6 +14,13 @@
 const change = () => {
   mapRef.value.changeLayerGrop()
 }
+// 当前展示
+const current = ref(true)
+watch(() => current.value, (newVal) => {
+  mapRef.value.changeFlagType()
+})
+// 当前图层
+const layer = ref('卫星图层')
 </script>
 
 <template>
@@ -21,7 +28,22 @@
     <!-- 地图 -->
     <guadmap ref="mapRef" />
     <!-- 按钮 -->
+    <div class="btn1">
+      <el-radio-group v-model="current">
+        <el-radio-button :label="true">
+          用电监测
+        </el-radio-button>
+        <el-radio-button :label="false">
+          用热监测
+        </el-radio-button>
+      </el-radio-group>
+    </div>
     <div class="btn">
+      <!-- <el-radio-group v-model="layer">
+        <el-radio-button label="卫星图层" @click="change">
+          卫星图层
+        </el-radio-button>
+      </el-radio-group> -->
       <el-button @click="change">
         {{ mapRef?.flag ? '卫星图层' : '默认图层' }}
       </el-button>
@@ -33,6 +55,12 @@
 .btn {
   position: absolute;
   right: 20px;
+  bottom: 20px;
+}
+
+.btn1 {
+  position: absolute;
+  right: 20px;
   top: 20px;
 }
 </style>