Commit e491f16a9ef8a551ff8372e6f1d708f0e809ca61
1 parent
ac53e460
fix: device location not refresh infor window after device detail
Showing
5 changed files
with
77 additions
and
10 deletions
src/hooks/web/useAsyncScript.ts
0 → 100644
| 1 | +import { onUnmounted, ref } from 'vue'; | |
| 2 | + | |
| 3 | +interface ScriptOptions { | |
| 4 | + src: string; | |
| 5 | +} | |
| 6 | + | |
| 7 | +export function useAsyncScript(opts: ScriptOptions) { | |
| 8 | + const isLoading = ref(false); | |
| 9 | + const error = ref(false); | |
| 10 | + const success = ref(false); | |
| 11 | + let script: HTMLScriptElement; | |
| 12 | + | |
| 13 | + const toPromise = () => { | |
| 14 | + return new Promise((resolve, reject) => { | |
| 15 | + script = document.createElement('script'); | |
| 16 | + script.type = 'text/javascript'; | |
| 17 | + script.onload = function () { | |
| 18 | + isLoading.value = false; | |
| 19 | + success.value = true; | |
| 20 | + error.value = false; | |
| 21 | + resolve(''); | |
| 22 | + }; | |
| 23 | + | |
| 24 | + script.onerror = function (err) { | |
| 25 | + isLoading.value = false; | |
| 26 | + success.value = false; | |
| 27 | + error.value = true; | |
| 28 | + reject(err); | |
| 29 | + }; | |
| 30 | + | |
| 31 | + script.src = opts.src; | |
| 32 | + document.head.appendChild(script); | |
| 33 | + }); | |
| 34 | + }; | |
| 35 | + | |
| 36 | + onUnmounted(() => { | |
| 37 | + script && script.remove(); | |
| 38 | + }); | |
| 39 | + | |
| 40 | + return { | |
| 41 | + isLoading, | |
| 42 | + error, | |
| 43 | + success, | |
| 44 | + toPromise, | |
| 45 | + }; | |
| 46 | +} | ... | ... | 
| ... | ... | @@ -57,7 +57,7 @@ | 
| 57 | 57 | </div> | 
| 58 | 58 | <div v-if="deviceDetail?.deviceInfo?.address" class="mt-4"> | 
| 59 | 59 | <p>设备位置</p> | 
| 60 | - <div ref="wrapRef" style="height: 550px; width: 100%"></div> | |
| 60 | + <div ref="mapWrapRef" style="height: 550px; width: 100%"></div> | |
| 61 | 61 | </div> | 
| 62 | 62 | </div> | 
| 63 | 63 | </template> | 
| ... | ... | @@ -65,7 +65,7 @@ | 
| 65 | 65 | import { defineComponent, ref, unref, nextTick } from 'vue'; | 
| 66 | 66 | import { Image, Tooltip } from 'ant-design-vue'; | 
| 67 | 67 | import { descSchema } from '../../config/detail.config'; | 
| 68 | - import { useScript } from '/@/hooks/web/useScript'; | |
| 68 | + import { useAsyncScript } from '/@/hooks/web/useAsyncScript'; | |
| 69 | 69 | import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard'; | 
| 70 | 70 | import { useMessage } from '/@/hooks/web/useMessage'; | 
| 71 | 71 | import { BAI_DU_MAP_URL } from '/@/utils/fnUtils'; | 
| ... | ... | @@ -77,6 +77,7 @@ | 
| 77 | 77 | import { DeviceTypeEnum } from '/@/api/device/model/deviceModel'; | 
| 78 | 78 | |
| 79 | 79 | import wz from '/@/assets/images/wz.png'; | 
| 80 | + import { useAsyncQueue } from '../../../localtion/useAsyncQueue'; | |
| 80 | 81 | export default defineComponent({ | 
| 81 | 82 | components: { | 
| 82 | 83 | Image, | 
| ... | ... | @@ -101,13 +102,30 @@ | 
| 101 | 102 | }); | 
| 102 | 103 | |
| 103 | 104 | // 地图 | 
| 104 | - const wrapRef = ref<HTMLDivElement | null>(null); | |
| 105 | - const { toPromise } = useScript({ src: BAI_DU_MAP_URL }); | |
| 105 | + const mapWrapRef = ref<HTMLDivElement>(); | |
| 106 | 106 | |
| 107 | - async function initMap(longitude, latitude, address) { | |
| 108 | - await toPromise(); | |
| 107 | + const { executeFlag, setTask } = useAsyncQueue(); | |
| 108 | + const { toPromise } = useAsyncScript({ src: BAI_DU_MAP_URL }); | |
| 109 | + | |
| 110 | + async function initMap(longitude: number, latitude: number, address: string) { | |
| 111 | + if (!(window as any).BMap) { | |
| 112 | + setTask(() => markerMap(longitude, latitude, address)); | |
| 113 | + let interval: Nullable<NodeJS.Timer> = setInterval(() => { | |
| 114 | + if ((window as any).BMap) { | |
| 115 | + executeFlag.value = true; | |
| 116 | + clearInterval(interval!); | |
| 117 | + interval = null; | |
| 118 | + } | |
| 119 | + }, 300); | |
| 120 | + await toPromise(); | |
| 121 | + return; | |
| 122 | + } | |
| 123 | + markerMap(longitude, latitude, address); | |
| 124 | + } | |
| 125 | + | |
| 126 | + async function markerMap(longitude: number, latitude: number, address: string) { | |
| 109 | 127 | await nextTick(); | 
| 110 | - const wrapEl = unref(wrapRef); | |
| 128 | + const wrapEl = unref(mapWrapRef); | |
| 111 | 129 | const BMap = (window as any).BMap; | 
| 112 | 130 | if (!wrapEl) return; | 
| 113 | 131 | const map = new BMap.Map(wrapEl); | 
| ... | ... | @@ -132,6 +150,7 @@ | 
| 132 | 150 | map.enableScrollWheelZoom(true); | 
| 133 | 151 | map.addOverlay(marker); | 
| 134 | 152 | } | 
| 153 | + | |
| 135 | 154 | const { createMessage } = useMessage(); | 
| 136 | 155 | const { clipboardRef } = useCopyToClipboard(); | 
| 137 | 156 | const copyTbDeviceId = () => { | 
| ... | ... | @@ -166,7 +185,7 @@ | 
| 166 | 185 | const remoteConnectiondGateway = () => {}; | 
| 167 | 186 | |
| 168 | 187 | return { | 
| 169 | - wrapRef, | |
| 188 | + mapWrapRef, | |
| 170 | 189 | copyTbDeviceId, | 
| 171 | 190 | copyDeviceToken, | 
| 172 | 191 | initMap, | ... | ... | 
| ... | ... | @@ -33,7 +33,9 @@ | 
| 33 | 33 | </Button> | 
| 34 | 34 | </Authority> | 
| 35 | 35 | <Button type="primary" @click="handleOpenTsl"> 物模型TSL </Button> | 
| 36 | - <Button v-if="isShowBtn" type="primary" @click="handleImportModel">导入物模型</Button> | |
| 36 | + <Button v-if="false && isShowBtn" type="primary" @click="handleImportModel" | |
| 37 | + >导入物模型</Button | |
| 38 | + > | |
| 37 | 39 | </div> | 
| 38 | 40 | <div class="flex gap-2"> | 
| 39 | 41 | <Authority :value="ModelOfMatterPermission.RELEASE"> | ... | ... |