Showing
1 changed file
with
21 additions
and
3 deletions
@@ -18,8 +18,8 @@ | @@ -18,8 +18,8 @@ | ||
18 | <div ref="wrapRef" style="height: 400px; width: 90%" class="ml-6"></div> | 18 | <div ref="wrapRef" style="height: 400px; width: 90%" class="ml-6"></div> |
19 | </div> | 19 | </div> |
20 | <div class="mt-4"> | 20 | <div class="mt-4"> |
21 | - <a-button type="primary" class="mr-4">复制设备ID</a-button> | ||
22 | - <a-button type="primary">复制访问令牌</a-button> | 21 | + <a-button type="primary" class="mr-4" @click="copyDeviceId">复制设备ID</a-button> |
22 | + <a-button type="primary" @click="copyToken">复制访问令牌</a-button> | ||
23 | </div> | 23 | </div> |
24 | </div> | 24 | </div> |
25 | </template> | 25 | </template> |
@@ -28,6 +28,8 @@ | @@ -28,6 +28,8 @@ | ||
28 | import { Image, Table } from 'ant-design-vue'; | 28 | import { Image, Table } from 'ant-design-vue'; |
29 | import { columns } from '../../config/detail.config'; | 29 | import { columns } from '../../config/detail.config'; |
30 | import { useScript } from '/@/hooks/web/useScript'; | 30 | import { useScript } from '/@/hooks/web/useScript'; |
31 | + import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard'; | ||
32 | + import { useMessage } from '/@/hooks/web/useMessage'; | ||
31 | export default defineComponent({ | 33 | export default defineComponent({ |
32 | components: { | 34 | components: { |
33 | Image, | 35 | Image, |
@@ -39,7 +41,7 @@ | @@ -39,7 +41,7 @@ | ||
39 | required: true, | 41 | required: true, |
40 | }, | 42 | }, |
41 | }, | 43 | }, |
42 | - setup() { | 44 | + setup(props) { |
43 | const BAI_DU_MAP_URL = | 45 | const BAI_DU_MAP_URL = |
44 | 'https://api.map.baidu.com/getscript?v=3.0&ak=7uOPPyAHn2Y2ZryeQqHtcRqtIY374vKa'; | 46 | 'https://api.map.baidu.com/getscript?v=3.0&ak=7uOPPyAHn2Y2ZryeQqHtcRqtIY374vKa'; |
45 | const wrapRef = ref<HTMLDivElement | null>(null); | 47 | const wrapRef = ref<HTMLDivElement | null>(null); |
@@ -79,10 +81,26 @@ | @@ -79,10 +81,26 @@ | ||
79 | map.enableScrollWheelZoom(true); | 81 | map.enableScrollWheelZoom(true); |
80 | map.addOverlay(marker); | 82 | map.addOverlay(marker); |
81 | } | 83 | } |
84 | + const { createMessage } = useMessage(); | ||
85 | + const { clipboardRef } = useCopyToClipboard(); | ||
86 | + const copyDeviceId = () => { | ||
87 | + clipboardRef.value = props.deviceDetail.id; | ||
88 | + if (unref(clipboardRef)) { | ||
89 | + createMessage.success('复制成功~'); | ||
90 | + } | ||
91 | + }; | ||
92 | + const copyToken = () => { | ||
93 | + clipboardRef.value = props.deviceDetail.token; | ||
94 | + if (unref(clipboardRef)) { | ||
95 | + createMessage.success('复制成功~'); | ||
96 | + } | ||
97 | + }; | ||
82 | 98 | ||
83 | return { | 99 | return { |
84 | columns, | 100 | columns, |
85 | wrapRef, | 101 | wrapRef, |
102 | + copyDeviceId, | ||
103 | + copyToken, | ||
86 | initMap, | 104 | initMap, |
87 | }; | 105 | }; |
88 | }, | 106 | }, |