Commit e491f16a9ef8a551ff8372e6f1d708f0e809ca61

Authored by ww
1 parent ac53e460

fix: device location not refresh infor window after device detail

  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 +}
... ...
... ... @@ -65,7 +65,6 @@
65 65 setDrawerProps({ confirmLoading: true });
66 66 let saveMessage = '添加成功';
67 67 let updateMessage = '修改成功';
68   - console.log(values);
69 68 await saveOrUpdateConfigurationCenter(values, unref(isUpdate));
70 69 closeDrawer();
71 70 emit('success');
... ...
... ... @@ -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,
... ...
... ... @@ -22,6 +22,7 @@ export function useAsyncQueue() {
22 22 if (executeFlag.value) {
23 23 queue.forEach((item) => item());
24 24 executeFlag.value = false;
  25 + clearTask();
25 26 }
26 27 });
27 28
... ...
... ... @@ -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">
... ...