Showing
8 changed files
with
238 additions
and
1 deletions
| ... | @@ -15,6 +15,7 @@ declare module '@vue/runtime-core' { | ... | @@ -15,6 +15,7 @@ declare module '@vue/runtime-core' { |
| 15 | ElButton: typeof import('element-plus/es')['ElButton'] | 15 | ElButton: typeof import('element-plus/es')['ElButton'] |
| 16 | ElInput: typeof import('element-plus/es')['ElInput'] | 16 | ElInput: typeof import('element-plus/es')['ElInput'] |
| 17 | ElOption: typeof import('element-plus/es')['ElOption'] | 17 | ElOption: typeof import('element-plus/es')['ElOption'] |
| 18 | + ElProgress: typeof import('element-plus/es')['ElProgress'] | ||
| 18 | ElSelect: typeof import('element-plus/es')['ElSelect'] | 19 | ElSelect: typeof import('element-plus/es')['ElSelect'] |
| 19 | Floor: typeof import('./src/components/Floor/index.vue')['default'] | 20 | Floor: typeof import('./src/components/Floor/index.vue')['default'] |
| 20 | InfoPopup: typeof import('./src/components/InfoPopup.vue')['default'] | 21 | InfoPopup: typeof import('./src/components/InfoPopup.vue')['default'] | ... | ... |
| 1 | /* | 1 | /* |
| 2 | * @Date: 2023-05-29 11:10:19 | 2 | * @Date: 2023-05-29 11:10:19 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2025-01-26 09:55:58 | 4 | + * @LastEditTime: 2025-02-10 16:04:07 |
| 5 | * @FilePath: /map-demo/src/route.js | 5 | * @FilePath: /map-demo/src/route.js |
| 6 | * @Description: 文件描述 | 6 | * @Description: 文件描述 |
| 7 | */ | 7 | */ |
| ... | @@ -84,4 +84,32 @@ export default [ | ... | @@ -84,4 +84,32 @@ export default [ |
| 84 | title: '瓦片切图工具', | 84 | title: '瓦片切图工具', |
| 85 | }, | 85 | }, |
| 86 | }, | 86 | }, |
| 87 | + { | ||
| 88 | + path: '/xyx', | ||
| 89 | + component: () => import('@/views/xyx/index.vue'), | ||
| 90 | + meta: { | ||
| 91 | + title: '首页', | ||
| 92 | + }, | ||
| 93 | + }, | ||
| 94 | + { | ||
| 95 | + path: '/by', | ||
| 96 | + component: () => import('@/views/by/map.vue'), | ||
| 97 | + meta: { | ||
| 98 | + title: '地图', | ||
| 99 | + }, | ||
| 100 | + }, | ||
| 101 | + { | ||
| 102 | + path: '/by/scan', | ||
| 103 | + component: () => import('@/views/by/scan.vue'), | ||
| 104 | + meta: { | ||
| 105 | + title: '扫描', | ||
| 106 | + }, | ||
| 107 | + }, | ||
| 108 | + { | ||
| 109 | + path: '/by/info', | ||
| 110 | + component: () => import('@/views/by/info.vue'), | ||
| 111 | + meta: { | ||
| 112 | + title: '详情页', | ||
| 113 | + }, | ||
| 114 | + }, | ||
| 87 | ]; | 115 | ]; | ... | ... |
src/views/by/index.vue
0 → 100644
| 1 | +<!-- | ||
| 2 | + * @Date: 2024-09-14 17:48:55 | ||
| 3 | + * @LastEditors: hookehuyr hookehuyr@gmail.com | ||
| 4 | + * @LastEditTime: 2024-09-21 23:04:40 | ||
| 5 | + * @FilePath: /map-demo/src/views/bieyuan/index.vue | ||
| 6 | + * @Description: 文件描述 | ||
| 7 | +--> | ||
| 8 | +<template> | ||
| 9 | + <div class="index-page"> | ||
| 10 | + <div style="display: flex; flex-direction: column; align-items: center;"> | ||
| 11 | + <van-image | ||
| 12 | + width="12rem" | ||
| 13 | + height="12rem" | ||
| 14 | + fit="contain" | ||
| 15 | + src="https://cdn.ipadbiz.cn/bieyuan/map/icon/index_logo@3x.png" | ||
| 16 | + /> | ||
| 17 | + <div style="margin-top: 2rem; font-size: 0.95rem; letter-spacing: 5px; color: #47525F;">山水逢甘露,静心遇桃源</div> | ||
| 18 | + </div> | ||
| 19 | + <div @click="goTo" style="border: 1px solid #DD7850; padding: 0.8rem 5.5rem; border-radius: 5px; font-size: 1.15rem; color: #DD7850; background-color: white;">进 入</div> | ||
| 20 | + </div> | ||
| 21 | +</template> | ||
| 22 | + | ||
| 23 | +<script setup> | ||
| 24 | +import { ref } from 'vue' | ||
| 25 | +import { useRoute, useRouter } from 'vue-router' | ||
| 26 | + | ||
| 27 | +//import { } from '@/utils/generateModules.js' | ||
| 28 | +//import { } from '@/utils/generateIcons.js' | ||
| 29 | +//import { } from '@/composables' | ||
| 30 | +const $route = useRoute(); | ||
| 31 | +const $router = useRouter(); | ||
| 32 | + | ||
| 33 | +const goTo = () => { | ||
| 34 | + $router.push({ | ||
| 35 | + path: './map', | ||
| 36 | + query: { | ||
| 37 | + id: $route.query.id | ||
| 38 | + } | ||
| 39 | + }); | ||
| 40 | + // 进入标记 | ||
| 41 | + localStorage.setItem('first_in_bieyuan', 1); | ||
| 42 | +} | ||
| 43 | + | ||
| 44 | +onMounted(() => { | ||
| 45 | + // 记录第一次进入页面,之后判断是否第一次进入,直接跳转到MAP页面 | ||
| 46 | + if (localStorage.getItem('first_in_bieyuan') === '1') { | ||
| 47 | + $router.push({ | ||
| 48 | + path: './map', | ||
| 49 | + query: { | ||
| 50 | + id: $route.query.id | ||
| 51 | + } | ||
| 52 | + }); | ||
| 53 | + } | ||
| 54 | +}); | ||
| 55 | +</script> | ||
| 56 | + | ||
| 57 | +<style lang="less" scoped> | ||
| 58 | + .index-page { | ||
| 59 | + height: 100vh; | ||
| 60 | + display: flex; | ||
| 61 | + flex-direction: column; | ||
| 62 | + justify-content: space-evenly; | ||
| 63 | + align-items: center; | ||
| 64 | + background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), | ||
| 65 | + url('https://cdn.ipadbiz.cn/bieyuan/map/MAP@3x.png'); | ||
| 66 | + background-size: contain; | ||
| 67 | + } | ||
| 68 | +</style> |
src/views/by/info.vue
0 → 100644
This diff is collapsed. Click to expand it.
src/views/by/info_w.vue
0 → 100644
This diff is collapsed. Click to expand it.
src/views/by/map.vue
0 → 100644
This diff is collapsed. Click to expand it.
src/views/by/scan.vue
0 → 100644
| 1 | +<!-- | ||
| 2 | + * @Date: 2024-09-15 11:45:13 | ||
| 3 | + * @LastEditors: hookehuyr hookehuyr@gmail.com | ||
| 4 | + * @LastEditTime: 2024-09-18 11:15:56 | ||
| 5 | + * @FilePath: /map-demo/src/views/bieyuan/scan.vue | ||
| 6 | + * @Description: 文件描述 | ||
| 7 | +--> | ||
| 8 | +<template> | ||
| 9 | + <div class="scan-page"> | ||
| 10 | + <!--<div class="scan_wrapper"> | ||
| 11 | + <div class="scan_box"> | ||
| 12 | + <!~~ 镜头区域 ~~> | ||
| 13 | + <video ref="video" id="video" class="scan-video" autoplay></video> | ||
| 14 | + </div> | ||
| 15 | + <div @click="openScan" class="scan_text">点击扫描二维码查看详情</div> | ||
| 16 | + </div> | ||
| 17 | + <div class="sys_logo"> | ||
| 18 | + <van-image | ||
| 19 | + width="3rem" | ||
| 20 | + height="3rem" | ||
| 21 | + fit="contain" | ||
| 22 | + src="https://cdn.ipadbiz.cn/bieyuan/map/icon/scan_logo.png" | ||
| 23 | + /> | ||
| 24 | + </div>--> | ||
| 25 | + | ||
| 26 | + <video ref="video" id="video" class="video vjs-fluid" autoplay></video> | ||
| 27 | + <div v-show="tipShow" class="tip">{{tipMsg}}</div> | ||
| 28 | + </div> | ||
| 29 | +</template> | ||
| 30 | + | ||
| 31 | +<script setup> | ||
| 32 | +import { ref } from "vue"; | ||
| 33 | +import { useRoute, useRouter } from "vue-router"; | ||
| 34 | + | ||
| 35 | +const $route = useRoute(); | ||
| 36 | +const $router = useRouter(); | ||
| 37 | + | ||
| 38 | +import { BrowserMultiFormatReader } from "@zxing/library"; | ||
| 39 | +// import axios from 'axios' | ||
| 40 | +const codeReader = ref(null); | ||
| 41 | + | ||
| 42 | +const scanText = ref(""); | ||
| 43 | +// 初始化相机 | ||
| 44 | +const openScan = () => { | ||
| 45 | + codeReader.value = new BrowserMultiFormatReader(); | ||
| 46 | + codeReader.value | ||
| 47 | + .getVideoInputDevices() | ||
| 48 | + .then((videoDevices) => { | ||
| 49 | + let firstDeviceId = videoDevices[videoDevices.length - 1].deviceId; | ||
| 50 | + if (videoDevices.length > 1) { | ||
| 51 | + // 一般通过判断摄像头列表项里的 label 字段,'camera2 0, facing back' 字符串含有 'back' 和 '0',大部分机型是这样,如果有些机型没有,那就还是默认获取最后一个 | ||
| 52 | + firstDeviceId = videoDevices.find((el) => { | ||
| 53 | + return el.label.indexOf("back") > -1 && el.label.indexOf("0") > -1; | ||
| 54 | + }) | ||
| 55 | + ? videoDevices.find((el) => { | ||
| 56 | + return el.label.indexOf("back") > -1 && el.label.indexOf("0") > -1; | ||
| 57 | + }).deviceId | ||
| 58 | + : videoDevices[videoDevices.length - 1].deviceId; | ||
| 59 | + } | ||
| 60 | + decodeFromInputVideoFunc(firstDeviceId); | ||
| 61 | + }) | ||
| 62 | + .catch((err) => { | ||
| 63 | + console.log(err); | ||
| 64 | + }); | ||
| 65 | +}; | ||
| 66 | + | ||
| 67 | +// 扫码 | ||
| 68 | +const decodeFromInputVideoFunc = (firstDeviceId) => { | ||
| 69 | + // 使用摄像头扫描 | ||
| 70 | + codeReader.value.reset(); // 重置 | ||
| 71 | + codeReader.value.decodeFromInputVideoDeviceContinuously( | ||
| 72 | + firstDeviceId, | ||
| 73 | + "video", | ||
| 74 | + (result, err) => { | ||
| 75 | + if (result) { | ||
| 76 | + alert(result.text); | ||
| 77 | + console.log("扫码结果", result); | ||
| 78 | + scanText.value = result.text; | ||
| 79 | + if (scanText.value) { | ||
| 80 | + // 识别成功关闭摄像头 | ||
| 81 | + codeReader.value.reset(); | ||
| 82 | + codeReader.value.stopContinuousDecodeFromInputVideoDevice(); | ||
| 83 | + } | ||
| 84 | + } | ||
| 85 | + } | ||
| 86 | + ); | ||
| 87 | +}; | ||
| 88 | + | ||
| 89 | +onMounted(() => {}); | ||
| 90 | +</script> | ||
| 91 | + | ||
| 92 | + | ||
| 93 | +<style lang="less" scoped> | ||
| 94 | +.scan-page { | ||
| 95 | + position: relative; | ||
| 96 | + height: 100vh; | ||
| 97 | + .scan_wrapper { | ||
| 98 | + display: flex; | ||
| 99 | + padding: 1rem; | ||
| 100 | + flex-direction: column; | ||
| 101 | + align-items: center; | ||
| 102 | + padding-top: 5rem; | ||
| 103 | + .scan_box { | ||
| 104 | + padding: 1rem; | ||
| 105 | + background-image: url('https://cdn.ipadbiz.cn/bieyuan/map/icon/scan_bg.png'); | ||
| 106 | + background-size: contain; | ||
| 107 | + background-repeat: no-repeat; | ||
| 108 | + background-position: center center; | ||
| 109 | + height: 20rem; | ||
| 110 | + width: 90%; | ||
| 111 | + position: relative; | ||
| 112 | + overflow: hidden; /* 确保溢出内容被隐藏 */ | ||
| 113 | + box-sizing: border-box; /* 包括 padding 在内的尺寸计算 */ | ||
| 114 | + .scan-video { | ||
| 115 | + object-fit: cover; /* 保持视频内容的比例,同时填满容器 */ | ||
| 116 | + position: absolute; /* 确保视频覆盖整个容器 */ | ||
| 117 | + top: -1rem; | ||
| 118 | + left: -1rem; | ||
| 119 | + width: calc(100% - 2rem); /* 视频宽度减去左右1rem的padding */ | ||
| 120 | + height: calc(100% - 2rem); /* 视频高度减去上下1rem的padding */ | ||
| 121 | + padding: 2rem; | ||
| 122 | + object-fit: cover; /* 保持视频比例,同时填充容器 */ | ||
| 123 | + } | ||
| 124 | + } | ||
| 125 | + .scan_text { | ||
| 126 | + font-size: 0.9rem; | ||
| 127 | + color: #DD7850; | ||
| 128 | + padding: 0.5rem 1rem; | ||
| 129 | + margin: 1rem; | ||
| 130 | + border: 1px solid #DD7850; | ||
| 131 | + border-radius: 5px; | ||
| 132 | + } | ||
| 133 | + } | ||
| 134 | + .sys_logo { | ||
| 135 | + position: absolute; | ||
| 136 | + bottom: 3rem; | ||
| 137 | + left: calc(50% - 1.5rem); | ||
| 138 | + } | ||
| 139 | +} | ||
| 140 | +</style> |
src/views/xyx/index.vue
0 → 100644
This diff is collapsed. Click to expand it.
-
Please register or login to post a comment