设备地图调整

src/views/pms/map/DeviceMonitorDrawer.vue

@@ -203,7 +203,7 @@ const renderChart = async () => {
     xAxis: {
       type: 'category',
       // data: result.map(d => formatTime(d.timestamp)),
-      data: result.value.map(item => Object.keys(item)[0]),
+      data: result.value.map(d => dayjs(d.timestamp).format('YYYY-MM-DD HH:mm:ss')),
       axisLabel: { rotate: 45 }, // X轴标签旋转防止重叠
       inverse: true,
     },
@@ -216,10 +216,7 @@ const renderChart = async () => {
     }],
     series: [{
       // data: result.map(d => d.value),
-      data: result.value.map(item => {
-        const key = Object.keys(item)[0]; // 获取当前元素的key
-        return item[key][0][topic.value]; // 提取value数组中第一个对象的属性
-      }),
+      data: result.value.map(d => d.value),
       type: 'line',
       smooth: true,
       areaStyle: {} // 显示区域填充
@@ -245,7 +242,6 @@ const init =async () =>{
   formData.value.lastInlineTime = props.lastLineTime
   formData.value.ifInline = props.ifLine
   formData.value.dept = props.dept
-  debugger
   await IotDeviceApi.getIotDeviceTds(props.id).then(res => {
     specs.value = res
     specs.value = specs.value.sort((a, b) => {

src/views/pms/map/Map.vue

@@ -1,5 +1,15 @@
 <template>
   <div class="map-container">
+    <div class="status-info">
+      <div class="status-item">
+        <span class="online-icon"></span>
+        <span style="font-weight: bold;font-size: 17px">在线数量 {{ inlineCount }}</span>
+      </div>
+      <div class="status-item">
+        <span class="offline-icon"></span>
+        <span style="font-weight: bold;font-size: 17px">离线数量 {{ outlineCount }}</span>
+      </div>
+    </div>
     <div id="baidu-map" ref="mapContainer"></div>
     <div class="map-controls">
       <button @click="zoomIn">{{t('map.amplify')}}</button>
@@ -32,8 +42,6 @@ const drawerVisible = ref<boolean>(false)
 const mapContainer = ref<HTMLElement | null>(null)
 const map = ref<any>(null)
 const mapType = ref<'BMAP_NORMAL_MAP' | 'BMAP_SATELLITE_MAP'>('BMAP_NORMAL_MAP')
-const selectedDevice = ref<IotDeviceVO | null>(null)
-const hoverDevice = ref<IotDeviceVO | null>(null)
 const clusters = ref<Cluster[]>([])
 const deviceId = ref()
 const deviceName = ref('')
@@ -42,6 +50,8 @@ const ifLine = ref()
 const dept = ref('')
 const deviceCode = ref('')
 const { t } = useI18n() // 国际化
+const inlineCount = ref(0)
+const outlineCount = ref(0)
 // 设备数据示例
 const devices = ref<IotDeviceVO[]>()
 
@@ -56,7 +66,7 @@ const initMap = () => {
     if ((window as any).BMap) {
       map.value = new (window as any).BMap.Map(mapContainer.value)
       const point = new (window as any).BMap.Point(104.114129, 37.550339)
-      map.value.centerAndZoom(point, 5.5)
+      map.value.centerAndZoom(point, 5)
 
       map.value.enableScrollWheelZoom(true)
       map.value.setMapType((window as any)[mapType.value])
@@ -84,7 +94,8 @@ const initDeviceMarkers = () => {
   map.value.clearOverlays()
 
   const zoomLevel = map.value.getZoom()
-  if (zoomLevel > 9) {
+  if (zoomLevel > 8) {
+    debugger
     // 高缩放级别下显示单个设备标记
     devices.value.forEach((device) => {
       const point = new (window as any).BMap.Point(device.lng, device.lat)
@@ -92,6 +103,7 @@ const initDeviceMarkers = () => {
       map.value.addOverlay(marker)
     })
   } else {
+    debugger
     // 低缩放级别下进行聚合
     clusters.value = clusterDevices(devices.value, map.value)
     clusters.value.forEach((cluster) => {
@@ -116,9 +128,9 @@ const initDeviceMarkers = () => {
 const createDeviceMarker = (device: IotDeviceVO, point: any) => {
   // 根据设备是否在线选择不同的图标
   const iconUrl = device.ifInline === 3
-    ? import.meta.env.VITE_BASE_URL + '/images/newding.svg'
-    : import.meta.env.VITE_BASE_URL + '/images/newfail.svg';
-
+    ? 'https://iot.deepoil.cc' + '/images/newding.svg'
+    : 'https://iot.deepoil.cc' + '/images/newfail.svg';
+debugger
   const marker = new (window as any).BMap.Marker(point, {
     icon: new (window as any).BMap.Icon(
       iconUrl,
@@ -198,8 +210,8 @@ const createClusterLabel = (cluster: Cluster, point: any) => {
   label.addEventListener('click', () => {
     if (map.value) {
       const currentZoom = map.value.getZoom();
-      const MAX_ZOOM = 19; // 手动设定最大缩放级别
-      const newZoom = Math.min(currentZoom + 3, MAX_ZOOM);
+      const MAX_ZOOM = 12; // 手动设定最大缩放级别
+      const newZoom = Math.min(currentZoom + 2, MAX_ZOOM);
       map.value.setZoom(newZoom);
       map.value.panTo(point);
       initDeviceMarkers(); // 重新计算并显示标记和聚合标签
@@ -237,9 +249,10 @@ const clusterDevices = (devices: IotDeviceVO[], map: any): Cluster[] => {
 }
 
 const getGridSize = (zoom: number): number => {
-  if (zoom <= 5) return 2
-  if (zoom <= 8) return 1
-  if (zoom < 10) return 0.03
+  debugger
+  if (zoom <= 5) return 5
+  if (zoom <= 8) return 3
+  if (zoom < 10) return 0.1
   return 0.1
 }
 
@@ -313,6 +326,8 @@ const toggleMapType = () => {
 const getData = async () => {
   await IotDeviceApi.getMapDevice().then((res) => {
     devices.value = res.filter((item)=> item.lat!=0&&item.lng!=0)
+    outlineCount.value = devices.value.filter((item)=> item.ifInline===4).length
+    inlineCount.value = devices.value.filter((item)=> item.ifInline===3).length
     initMap()
   })
 }
@@ -374,4 +389,44 @@ onBeforeUnmount(() => {
   border-radius: 3px;
   cursor: pointer;
 }
+.status-info {
+  position: absolute;
+  top: 20px;
+  left: 40%;
+  z-index: 1000;
+  background: white;
+  padding: 10px 15px;
+  border-radius: 6px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  display: flex;
+  gap: 20px;
+}
+
+.status-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  height: 50px;
+}
+
+.online-icon {
+  display: inline-block;
+  width: 25px;
+  height: 25px;
+  background-image: url('https://aims.deepoil.cc/images/newding.svg');
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.offline-icon {
+  display: inline-block;
+  width: 25px;
+  height: 25px;
+  background-image: url('https://aims.deepoil.cc/images/newfail.svg');
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
 </style>