|
@@ -56,7 +56,7 @@ const initMap = () => {
|
|
|
if ((window as any).BMap) {
|
|
if ((window as any).BMap) {
|
|
|
map.value = new (window as any).BMap.Map(mapContainer.value)
|
|
map.value = new (window as any).BMap.Map(mapContainer.value)
|
|
|
const point = new (window as any).BMap.Point(104.114129, 37.550339)
|
|
const point = new (window as any).BMap.Point(104.114129, 37.550339)
|
|
|
- map.value.centerAndZoom(point, 6)
|
|
|
|
|
|
|
+ map.value.centerAndZoom(point, 5.5)
|
|
|
|
|
|
|
|
map.value.enableScrollWheelZoom(true)
|
|
map.value.enableScrollWheelZoom(true)
|
|
|
map.value.setMapType((window as any)[mapType.value])
|
|
map.value.setMapType((window as any)[mapType.value])
|
|
@@ -117,13 +117,13 @@ const initDeviceMarkers = () => {
|
|
|
const createDeviceMarker = (device: IotDeviceVO, point: any) => {
|
|
const createDeviceMarker = (device: IotDeviceVO, point: any) => {
|
|
|
// 根据设备是否在线选择不同的图标
|
|
// 根据设备是否在线选择不同的图标
|
|
|
const iconUrl = device.ifInline === 3
|
|
const iconUrl = device.ifInline === 3
|
|
|
- ? 'https://iot.deepoil.cc/images/dinggreen.svg'
|
|
|
|
|
- : 'https://iot.deepoil.cc/images/dingout.svg';
|
|
|
|
|
|
|
+ ? 'https://iot.deepoil.cc/images/newding.svg'
|
|
|
|
|
+ : 'https://iot.deepoil.cc/images/newfail.svg';
|
|
|
|
|
|
|
|
const marker = new (window as any).BMap.Marker(point, {
|
|
const marker = new (window as any).BMap.Marker(point, {
|
|
|
icon: new (window as any).BMap.Icon(
|
|
icon: new (window as any).BMap.Icon(
|
|
|
iconUrl,
|
|
iconUrl,
|
|
|
- new (window as any).BMap.Size(40, 40),
|
|
|
|
|
|
|
+ new (window as any).BMap.Size(40, 47),
|
|
|
{
|
|
{
|
|
|
anchor: new (window as any).BMap.Size(25, 40)
|
|
anchor: new (window as any).BMap.Size(25, 40)
|
|
|
// imageOffset: new (window as any).BMap.Size(0, -5)
|
|
// imageOffset: new (window as any).BMap.Size(0, -5)
|
|
@@ -162,10 +162,13 @@ const createClusterLabel = (cluster: Cluster, point: any) => {
|
|
|
`
|
|
`
|
|
|
document.head.appendChild(style)
|
|
document.head.appendChild(style)
|
|
|
|
|
|
|
|
|
|
+ // 根据 cluster.count 的值设置不同的背景颜色
|
|
|
|
|
+ const backgroundColor = cluster.count > 10 ? '#1d4eed' : '#f67d1a';
|
|
|
|
|
+
|
|
|
// 初始样式
|
|
// 初始样式
|
|
|
label.setStyle({
|
|
label.setStyle({
|
|
|
color: '#fff',
|
|
color: '#fff',
|
|
|
- backgroundColor: 'blue',
|
|
|
|
|
|
|
+ backgroundColor: backgroundColor,
|
|
|
borderRadius: '50%',
|
|
borderRadius: '50%',
|
|
|
width: '50px',
|
|
width: '50px',
|
|
|
height: '50px',
|
|
height: '50px',
|
|
@@ -188,7 +191,7 @@ const createClusterLabel = (cluster: Cluster, point: any) => {
|
|
|
|
|
|
|
|
// 鼠标移出样式
|
|
// 鼠标移出样式
|
|
|
const normalStyle = {
|
|
const normalStyle = {
|
|
|
- backgroundColor: '#c38f65',
|
|
|
|
|
|
|
+ backgroundColor: backgroundColor,
|
|
|
transform: 'scale(1)'
|
|
transform: 'scale(1)'
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -250,7 +253,7 @@ const showDeviceInfoWindow = (device: IotDeviceVO, point: any) => {
|
|
|
<p><strong>设备编码:</strong> ${device.deviceCode}</p>
|
|
<p><strong>设备编码:</strong> ${device.deviceCode}</p>
|
|
|
<p><strong>设备名称:</strong> ${device.deviceName}</p>
|
|
<p><strong>设备名称:</strong> ${device.deviceName}</p>
|
|
|
<p><strong>所在部门:</strong> ${res.name}</p>
|
|
<p><strong>所在部门:</strong> ${res.name}</p>
|
|
|
- <p><strong>位置:</strong> ${device.location}</p>
|
|
|
|
|
|
|
+ <p><strong>位置:</strong> ${device.location?device.location.replaceAll('"',''):''}</p>
|
|
|
<p><strong>状态:</strong> ${getDictLabel(DICT_TYPE.PMS_DEVICE_STATUS, device.deviceStatus)}</p>
|
|
<p><strong>状态:</strong> ${getDictLabel(DICT_TYPE.PMS_DEVICE_STATUS, device.deviceStatus)}</p>
|
|
|
<p><strong>是否在线:</strong> ${getDictLabel(DICT_TYPE.IOT_DEVICE_STATUS, device.ifInline)}</p>
|
|
<p><strong>是否在线:</strong> ${getDictLabel(DICT_TYPE.IOT_DEVICE_STATUS, device.ifInline)}</p>
|
|
|
<p><strong>最后在线时间:</strong> ${device.lastInlineTime}</p>
|
|
<p><strong>最后在线时间:</strong> ${device.lastInlineTime}</p>
|
|
@@ -347,7 +350,7 @@ onBeforeUnmount(() => {
|
|
|
.map-container {
|
|
.map-container {
|
|
|
position: relative;
|
|
position: relative;
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
- height: 100vh;
|
|
|
|
|
|
|
+ height: 90vh;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
#baidu-map {
|
|
#baidu-map {
|
