hookehuyr

新增别院和西园寺的模版-重新建立文件夹调整

......@@ -15,6 +15,7 @@ declare module '@vue/runtime-core' {
ElButton: typeof import('element-plus/es')['ElButton']
ElInput: typeof import('element-plus/es')['ElInput']
ElOption: typeof import('element-plus/es')['ElOption']
ElProgress: typeof import('element-plus/es')['ElProgress']
ElSelect: typeof import('element-plus/es')['ElSelect']
Floor: typeof import('./src/components/Floor/index.vue')['default']
InfoPopup: typeof import('./src/components/InfoPopup.vue')['default']
......
/*
* @Date: 2023-05-29 11:10:19
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-01-26 09:55:58
* @LastEditTime: 2025-02-10 16:04:07
* @FilePath: /map-demo/src/route.js
* @Description: 文件描述
*/
......@@ -84,4 +84,32 @@ export default [
title: '瓦片切图工具',
},
},
{
path: '/xyx',
component: () => import('@/views/xyx/index.vue'),
meta: {
title: '首页',
},
},
{
path: '/by',
component: () => import('@/views/by/map.vue'),
meta: {
title: '地图',
},
},
{
path: '/by/scan',
component: () => import('@/views/by/scan.vue'),
meta: {
title: '扫描',
},
},
{
path: '/by/info',
component: () => import('@/views/by/info.vue'),
meta: {
title: '详情页',
},
},
];
......
<!--
* @Date: 2024-09-14 17:48:55
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-09-21 23:04:40
* @FilePath: /map-demo/src/views/bieyuan/index.vue
* @Description: 文件描述
-->
<template>
<div class="index-page">
<div style="display: flex; flex-direction: column; align-items: center;">
<van-image
width="12rem"
height="12rem"
fit="contain"
src="https://cdn.ipadbiz.cn/bieyuan/map/icon/index_logo@3x.png"
/>
<div style="margin-top: 2rem; font-size: 0.95rem; letter-spacing: 5px; color: #47525F;">山水逢甘露,静心遇桃源</div>
</div>
<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;">进&nbsp;入</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
//import { } from '@/utils/generateModules.js'
//import { } from '@/utils/generateIcons.js'
//import { } from '@/composables'
const $route = useRoute();
const $router = useRouter();
const goTo = () => {
$router.push({
path: './map',
query: {
id: $route.query.id
}
});
// 进入标记
localStorage.setItem('first_in_bieyuan', 1);
}
onMounted(() => {
// 记录第一次进入页面,之后判断是否第一次进入,直接跳转到MAP页面
if (localStorage.getItem('first_in_bieyuan') === '1') {
$router.push({
path: './map',
query: {
id: $route.query.id
}
});
}
});
</script>
<style lang="less" scoped>
.index-page {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
url('https://cdn.ipadbiz.cn/bieyuan/map/MAP@3x.png');
background-size: contain;
}
</style>
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
<!--
* @Date: 2024-09-15 11:45:13
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-09-18 11:15:56
* @FilePath: /map-demo/src/views/bieyuan/scan.vue
* @Description: 文件描述
-->
<template>
<div class="scan-page">
<!--<div class="scan_wrapper">
<div class="scan_box">
<!~~ 镜头区域 ~~>
<video ref="video" id="video" class="scan-video" autoplay></video>
</div>
<div @click="openScan" class="scan_text">点击扫描二维码查看详情</div>
</div>
<div class="sys_logo">
<van-image
width="3rem"
height="3rem"
fit="contain"
src="https://cdn.ipadbiz.cn/bieyuan/map/icon/scan_logo.png"
/>
</div>-->
<video ref="video" id="video" class="video vjs-fluid" autoplay></video>
<div v-show="tipShow" class="tip">{{tipMsg}}</div>
</div>
</template>
<script setup>
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
const $route = useRoute();
const $router = useRouter();
import { BrowserMultiFormatReader } from "@zxing/library";
// import axios from 'axios'
const codeReader = ref(null);
const scanText = ref("");
// 初始化相机
const openScan = () => {
codeReader.value = new BrowserMultiFormatReader();
codeReader.value
.getVideoInputDevices()
.then((videoDevices) => {
let firstDeviceId = videoDevices[videoDevices.length - 1].deviceId;
if (videoDevices.length > 1) {
// 一般通过判断摄像头列表项里的 label 字段,'camera2 0, facing back' 字符串含有 'back' 和 '0',大部分机型是这样,如果有些机型没有,那就还是默认获取最后一个
firstDeviceId = videoDevices.find((el) => {
return el.label.indexOf("back") > -1 && el.label.indexOf("0") > -1;
})
? videoDevices.find((el) => {
return el.label.indexOf("back") > -1 && el.label.indexOf("0") > -1;
}).deviceId
: videoDevices[videoDevices.length - 1].deviceId;
}
decodeFromInputVideoFunc(firstDeviceId);
})
.catch((err) => {
console.log(err);
});
};
// 扫码
const decodeFromInputVideoFunc = (firstDeviceId) => {
// 使用摄像头扫描
codeReader.value.reset(); // 重置
codeReader.value.decodeFromInputVideoDeviceContinuously(
firstDeviceId,
"video",
(result, err) => {
if (result) {
alert(result.text);
console.log("扫码结果", result);
scanText.value = result.text;
if (scanText.value) {
// 识别成功关闭摄像头
codeReader.value.reset();
codeReader.value.stopContinuousDecodeFromInputVideoDevice();
}
}
}
);
};
onMounted(() => {});
</script>
<style lang="less" scoped>
.scan-page {
position: relative;
height: 100vh;
.scan_wrapper {
display: flex;
padding: 1rem;
flex-direction: column;
align-items: center;
padding-top: 5rem;
.scan_box {
padding: 1rem;
background-image: url('https://cdn.ipadbiz.cn/bieyuan/map/icon/scan_bg.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
height: 20rem;
width: 90%;
position: relative;
overflow: hidden; /* 确保溢出内容被隐藏 */
box-sizing: border-box; /* 包括 padding 在内的尺寸计算 */
.scan-video {
object-fit: cover; /* 保持视频内容的比例,同时填满容器 */
position: absolute; /* 确保视频覆盖整个容器 */
top: -1rem;
left: -1rem;
width: calc(100% - 2rem); /* 视频宽度减去左右1rem的padding */
height: calc(100% - 2rem); /* 视频高度减去上下1rem的padding */
padding: 2rem;
object-fit: cover; /* 保持视频比例,同时填充容器 */
}
}
.scan_text {
font-size: 0.9rem;
color: #DD7850;
padding: 0.5rem 1rem;
margin: 1rem;
border: 1px solid #DD7850;
border-radius: 5px;
}
}
.sys_logo {
position: absolute;
bottom: 3rem;
left: calc(50% - 1.5rem);
}
}
</style>
This diff is collapsed. Click to expand it.