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"> | ... | ... |