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 | }, |