Showing
1 changed file
with
29 additions
and
22 deletions
| ... | ... | @@ -5,7 +5,7 @@ |
| 5 | 5 | </template> |
| 6 | 6 | |
| 7 | 7 | <script setup lang="ts"> |
| 8 | -import { ref, PropType, toRefs, watch, render, h, onMounted, onUnmounted, reactive} from 'vue' | |
| 8 | +import { ref, PropType, toRefs, watch, render, h, onMounted, onUnmounted, reactive } from 'vue' | |
| 9 | 9 | import AMapLoader from '@amap/amap-jsapi-loader' |
| 10 | 10 | import { CreateComponentType } from '@/packages/index.d' |
| 11 | 11 | import { useChartDataFetch } from '@/hooks' |
| ... | ... | @@ -74,7 +74,7 @@ const initMap = (newData: any) => { |
| 74 | 74 | pitch: pitch.value, // 地图俯仰角度,有效范围 0 度- 83 度 |
| 75 | 75 | skyColor: skyColor.value, |
| 76 | 76 | viewMode: viewMode.value, // 地图模式 |
| 77 | - willReadFrequently: true, | |
| 77 | + willReadFrequently: true, | |
| 78 | 78 | WebGLParams: { |
| 79 | 79 | preserveDrawingBuffer: true, |
| 80 | 80 | } |
| ... | ... | @@ -102,10 +102,10 @@ const initMap = (newData: any) => { |
| 102 | 102 | |
| 103 | 103 | //携带设备的tbDeviceId和别名或者名称 |
| 104 | 104 | const devicePartInfo = reactive<devicePartInfoInterface>({ |
| 105 | - tbDeviceId:'', | |
| 106 | - name:'', | |
| 107 | - alias:'', | |
| 108 | - deviceProfileId:'', | |
| 105 | + tbDeviceId: '', | |
| 106 | + name: '', | |
| 107 | + alias: '', | |
| 108 | + deviceProfileId: '', | |
| 109 | 109 | }) |
| 110 | 110 | |
| 111 | 111 | //创建信息弹窗 |
| ... | ... | @@ -140,25 +140,24 @@ const createInfoWindow = async (extraInfo: dataExtraInfoType) => { |
| 140 | 140 | <div style="display:flex;flex-direction:column;margin:3.5rem 5.5rem 2rem 6.5rem;position:relative;"> |
| 141 | 141 | <div style="display:flex;justify-content:space-between;align-items:center;color:white;"> |
| 142 | 142 | <span style="${textOverflowFontBold}">${alias || name}</span> |
| 143 | - ${ | |
| 144 | - deviceState === 'INACTIVE' | |
| 145 | - ? `<div style="${deviceStateContainer}"> | |
| 143 | + ${deviceState === 'INACTIVE' | |
| 144 | + ? `<div style="${deviceStateContainer}"> | |
| 146 | 145 | <img onclick="handleOpenDrawer()" title="最新数据" style="${deviceStateImg};cursor:pointer;" src="${listView}"/> |
| 147 | 146 | <img style="${deviceStateImg};margin-left:0.3rem" src="${inactive}"/> |
| 148 | 147 | <span style="${deviceStateText}">待激活</span> |
| 149 | 148 | </div>` |
| 150 | - : deviceState === 'ONLINE' | |
| 151 | - ? `<div style="${deviceStateContainer}"> | |
| 149 | + : deviceState === 'ONLINE' | |
| 150 | + ? `<div style="${deviceStateContainer}"> | |
| 152 | 151 | <img onclick="handleOpenDrawer()" title="最新数据" style="${deviceStateImg};cursor:pointer;" src="${listView}"/> |
| 153 | 152 | <img style="${deviceStateImg};margin-left:0.3rem" src="${online}"/> |
| 154 | 153 | <span style="${deviceStateText}">在线</span> |
| 155 | 154 | </div>` |
| 156 | - : `<div style="${deviceStateContainer}"> | |
| 155 | + : `<div style="${deviceStateContainer}"> | |
| 157 | 156 | <img onclick="handleOpenDrawer()" title="最新数据" style="${deviceStateImg};cursor:pointer;" src="${listView}"/> |
| 158 | 157 | <img style="${deviceStateImg};margin-left:0.3rem" src="${offline}"/> |
| 159 | 158 | <span style="${deviceStateText}">离线</span> |
| 160 | 159 | </div>` |
| 161 | - } | |
| 160 | + } | |
| 162 | 161 | </div> |
| 163 | 162 | <div style="display:flex;flex-direction:column;justify-content:space-between;color:white;margin-top:1rem;gap:0.95rem;"> |
| 164 | 163 | <div style="${textOverflow}">所属组织:${organizationDTO.name}</div> |
| ... | ... | @@ -179,16 +178,16 @@ const handleOpenDrawer = async () => { |
| 179 | 178 | deviceLatestTableRef.value?.setDrawerTitle(devicePartInfo.alias || devicePartInfo.name) |
| 180 | 179 | if (!devicePartInfo.tbDeviceId) return |
| 181 | 180 | const resp = await getDeviceLatest(devicePartInfo.tbDeviceId) |
| 182 | - const respGetAttrs = await getProfileAttrs({deviceProfileId: devicePartInfo.deviceProfileId}) | |
| 183 | - deviceLatestTableRef.value?.setValue(resp,respGetAttrs) | |
| 181 | + const respGetAttrs = await getProfileAttrs({ deviceProfileId: devicePartInfo.deviceProfileId }) | |
| 182 | + deviceLatestTableRef.value?.setValue(resp, respGetAttrs) | |
| 184 | 183 | } |
| 185 | 184 | |
| 186 | 185 | onMounted(() => { |
| 187 | - (window as any).handleOpenDrawer = handleOpenDrawer; | |
| 186 | + (window as any).handleOpenDrawer = handleOpenDrawer; | |
| 188 | 187 | }); |
| 189 | 188 | |
| 190 | 189 | onUnmounted(() => { |
| 191 | - (window as any).handleOpenDrawer = null; | |
| 190 | + (window as any).handleOpenDrawer = null; | |
| 192 | 191 | }); |
| 193 | 192 | |
| 194 | 193 | //地图鼠标hover |
| ... | ... | @@ -228,9 +227,10 @@ const dataHandle = (newData: dataJsonType) => { |
| 228 | 227 | offset: new AMapIns.Pixel(-13, 5), |
| 229 | 228 | icon: iconMarker.value |
| 230 | 229 | }) |
| 231 | - // markers.push(markerInstance) 原作者这种方式添加,属于JS API 1.4.8版本的 | |
| 232 | - // markerInstance.setMap(mapIns) | |
| 233 | - mapIns.add(markerInstance) | |
| 230 | + // 原作者这种方式添加,属于JS API 1.4.8版本的 | |
| 231 | + markers.push(markerInstance) | |
| 232 | + markerInstance.setMap(mapIns) | |
| 233 | + // mapIns.add(markerInstance) | |
| 234 | 234 | mapClick(markerInstance, markerItem) |
| 235 | 235 | }) |
| 236 | 236 | } else if (mapMarkerType.value === MarkerEnum.CIRCLE_MARKER) { |
| ... | ... | @@ -288,18 +288,23 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => { |
| 288 | 288 | |
| 289 | 289 | <style> |
| 290 | 290 | /**去除高德地图原生弹窗 */ |
| 291 | -.amap-info-outer, .amap-menu-outer { | |
| 292 | - box-shadow: 0 1px 2px rgba(0,0,0,0)!important; | |
| 291 | +.amap-info-outer, | |
| 292 | +.amap-menu-outer { | |
| 293 | + box-shadow: 0 1px 2px rgba(0, 0, 0, 0) !important; | |
| 293 | 294 | } |
| 295 | + | |
| 294 | 296 | .amap-info-outer { |
| 295 | 297 | background-color: rgba(0, 0, 0, 0) !important; |
| 296 | 298 | } |
| 299 | + | |
| 297 | 300 | .amap-info-close { |
| 298 | 301 | display: none !important; |
| 299 | 302 | } |
| 303 | + | |
| 300 | 304 | .amap-info-content { |
| 301 | 305 | overflow: hidden !important; |
| 302 | 306 | } |
| 307 | + | |
| 303 | 308 | /**去除高德地图原生弹窗*/ |
| 304 | 309 | .amap-info-content .go-border-box { |
| 305 | 310 | position: absolute; |
| ... | ... | @@ -307,6 +312,7 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => { |
| 307 | 312 | top: 0; |
| 308 | 313 | z-index: -100; |
| 309 | 314 | } |
| 315 | + | |
| 310 | 316 | .amap-info-content .go-border-box svg { |
| 311 | 317 | background-color: v-bind(bgColor); |
| 312 | 318 | } |
| ... | ... | @@ -314,6 +320,7 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => { |
| 314 | 320 | <style lang="scss" scoped> |
| 315 | 321 | .chart-amap { |
| 316 | 322 | position: relative; |
| 323 | + | |
| 317 | 324 | .search-box { |
| 318 | 325 | cursor: pointer; |
| 319 | 326 | position: absolute; | ... | ... |