hanzhengzheng/screenFront
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
hzz 2024-07-03 18:04:08 +08:00
parent b82e7bda9f
commit 156631f864
10 changed files with 300 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/assets/css/iconfont/iconfont.css
View File

@ -1,8 +1,8 @@
@font-face {
font-family: "iconfont"; /* Project id 4404806 */
src: url('iconfont.woff2?t=1704785829971') format('woff2'),
url('iconfont.woff?t=1704785829971') format('woff'),
url('iconfont.ttf?t=1704785829971') format('truetype');
src: url('iconfont.woff2?t=1719991936473') format('woff2'),
url('iconfont.woff?t=1719991936473') format('woff'),
url('iconfont.ttf?t=1719991936473') format('truetype');
}
.iconfont {
@ -13,6 +13,14 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-yuyin:before {
content: "\e905";
}
.icon-luyin1:before {
content: "\e610";
}
.icon-tvoc:before {
content: "\e753";
}

BIN
src/assets/css/iconfont/iconfont.ttf
View File

Binary file not shown.

BIN
src/assets/css/iconfont/iconfont.woff
View File

Binary file not shown.

BIN
src/assets/css/iconfont/iconfont.woff2
View File

Binary file not shown.

95
src/views/Recorder/components/Border.vue Normal file
View File

@ -0,0 +1,95 @@
<template>
<div class="newboder">
<!-- <img class="borderpng" src="" alt=""> -->
<div class="title">
<text class="title-text">{{ title }}</text>
<div class="hr" v-if="hr_show"></div>
</div>
<div class="newboder-content">
<slot></slot>
</div>
</div>
</template>
<script setup lang='ts'>
import { computed } from 'vue'
let prop = defineProps({
title: {
type: String,
default: '裁剪设备'
},
hr_show: {
type:Boolean,
default: false
}
})
// let newTitle = computed(() => {
// return prop.title.split('').join(' ')
// })
</script>
<style scoped>
.newboder {
position: relative;
width: 100%;
height: 100%;
padding: 10px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
background: url(./../image/border.png) no-repeat;
background-size: 100% 100%;
}
.borderpng {
position: absolute;
width: 100%;
height: 100%;
}
.title {
position: relative;
width: 100%;
height: 16%;
padding-left: 10%;
text-align: left;
font-weight: 400;
font-style: normal;
font-size: 30px;
color: rgba(0, 255, 255, 0.996078431372549);
display: flex;
align-items: center;
/* justify-content: center; */
}
.hr {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 4px;
background: url(./../image/hr.png) no-repeat;
background-position: 50%;
}
.title-text {
font-weight: bold;
}
.newboder-content {
width: 100%;
height: 84%;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>

BIN
src/views/Recorder/image/border.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 108 KiB

BIN
src/views/Recorder/image/hr.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.3 KiB

BIN
src/views/Recorder/image/workpiece.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 44 KiB

BIN
src/views/Recorder/image/workpiece.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 111 KiB

237
src/views/Recorder/index.vue
View File

@ -1,41 +1,63 @@
<template>
<div class="container">
<div class="header">
<div class="title">
<header2 ref="headerref" :width="'100%'" :height="'100px'" :title="'游标卡尺物联'" :titleTip="[]"
:typeFun="['time']" :alarmType="[]"></header2>
</div>
</div>
<div class="title">
<header2 ref="headerref" :width="'100%'" :height="'100px'" :title="'游标卡尺物联'" :titleTip="[]" :typeFun="['time']"
:alarmType="[]"></header2>
</div>
</div>
<div class="body-container">
<div class="left-container">
<div class="lt-box">
<el-image :src="workpiece" :preview-src-list="[workpiece]" style="max-width: 100%;height: 500px;"
fit="contain" />
零件图片
</div>
<div class="lb-box">
<!-- <el-image :src="drawing" :preview-src-list="[drawing]" style="max-width: 100%;height: 500px;" fit="contain" /> -->
<!-- <showPdf pdfUrl="./image/drawing.pdf" /> -->
<a style="color: #fff;" href="http://8.130.165.100:9015/profile/upload/2024/06/29/drawing_20240629103947A010.pdf" target="_blank">查看图纸</a>
</div>
<BorderView :title="'工件图纸'">
<div v-show='pdfdata' ref="pdfContainer" style="height: 80%;width: 98%;"></div>
<a :href="pdfdata" target="_blank" style="color: #fff;">查看图纸</a>
</BorderView>
</div>
<div class="right-container">
<div class="lt-box">
<BorderView :title="'工件图片'">
<el-image :src="workpiece" :preview-src-list="[workpiece]" style="max-width: 100%;height: 400px;"
fit="contain" />
</BorderView>
</div>
<div class="input-text">
<div class="" :style="{ width: '150px' }">关键尺寸:</div>
<div class="text">
<el-input v-model="text" input-style="font-size:20px;color:#fff;box-shadow:'0 0 0 1px #fff'" :rows="5" type="textarea" readonly />
<el-input v-model="text" size="large" input-style="font-size:30px;color:#fff;height:60px;" type="text"
readonly />
</div>
</div>
<div style="padding-top:5px;margin-bottom: 10px;"> <!-- 波形绘制区域 -->
<!-- 波形绘制区域 -->
<!-- <div style="padding-top:5px;margin-bottom: 10px;">
<div style="display:inline-block;vertical-align:bottom">
<div style="height:300px;width:600px;" ref="recwave"></div>
</div>
</div>
<div> <!-- 按钮 -->
</div> -->
<div class="item-btn"> <!-- 按钮 -->
<!-- <button @click="recOpen">打开录音,请求权限</button> -->
<el-button type="success" size="large" class="btn-class" @mousedown="recOpen"
@mouseup="recStop">按住录音</el-button>
<!-- | <el-button type="primary" size="large" @click="recPlay">本地试听</el-button> -->
<div class="audio" :class="{'wave-start':is_start}">
<div class="wave"></div>
<div class="wave"></div>
<div class="wave"></div>
<div class="wave"></div>
<div class="wave"></div>
</div>
<el-button size="large" class="btn-class" @mousedown="recOpen" @mouseup="recStop">
<template #icon>
<i class="iconfont icon-yuyin" style="font-size: 80px;"></i>
</template>
</el-button>
<div class="audio " :class="{'wave-start':!!rec}">
<div class="wave"></div>
<div class="wave"></div>
<div class="wave"></div>
<div class="wave"></div>
<div class="wave"></div>
</div>
</div>
</div>
</div>
@ -44,8 +66,11 @@
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { ElMessage } from 'element-plus';
import PDFObject from 'pdfobject'
import header2 from "./components/header2.vue";
import BorderView from './components/Border.vue'
//必须引入的核心
import Recorder from 'recorder-core'
@ -66,10 +91,20 @@ let wave: any = null;
let recwave = ref(null);
let recBlob: any = null
let text = ref('')
let workpiece = require('./image/workpiece.jpg')
let is_start = ref(false)
let workpiece = require('./image/workpiece.png')
// let drawing = require('./image/drawing.png')
//pdf相关
let pdfdata = ref('')
let pdfContainer = ref(null)
let pdfOptions = reactive({ //显示的配置信息
pdfOpenParams: {
toolbar: 0, // 设置为0来隐藏头部工具栏
zoom: 80 //大小设置
},
})
//打开录音，申请录音权限
function recOpen() {
//创建录音对象
@ -87,11 +122,13 @@ function recOpen() {
//打开录音，获得权限
rec.open(() => {
console.log("录音已打开");
if (recwave.value) {//创建音频可视化图形绘制对象
wave = Recorder.WaveView({ elem: recwave.value });
}
//创建音频可视化图形绘制对象
// if (recwave.value) {
// wave = Recorder.WaveView({ elem: recwave.value });
// }
rec.start();
console.log("已开始录音");
is_start.value = true
}, (msg: any, isUserNotAllow: any) => {
//用户拒绝了录音权限，或者浏览器不支持录音
alert((isUserNotAllow ? "UserNotAllow，" : "") + "无法录音:" + msg);
@ -111,6 +148,7 @@ function recStart() {
*/
function recStop() {
if (!rec) { console.error("未打开录音"); return }
is_start.value = false
rec.stop((blob: any, duration: any) => {
//blob就是我们要的录音文件对象，可以上传，或者本地播放
recBlob = blob;
@ -197,7 +235,32 @@ function recPlay() {
setTimeout(function () { URL.revokeObjectURL(audio.src) }, 5000);
}
// function handleWheel(event: any) {
// if (event.deltaY < 0) {
// console.log('鼠标向上滚动');
// } else {
// console.log('鼠标向下滚动');
// }
// // 阻止页面滚动
// event.preventDefault();
// }
function getData() {
pdfdata.value = 'http://8.130.165.100:9015/profile/upload/2024/06/29/drawing_20240629103947A010.pdf'
//渲染PDF的方法，固定格式
if (PDFObject.supportsPDFs) {//检测浏览器是否支持显示pdf
PDFObject.embed(pdfdata.value, pdfContainer.value, pdfOptions);
} else {
ElMessage({
message: '该浏览器不支持切换，请更换浏览器',
type: 'warning'
});
}
}
onMounted(() => {
getData()
// recOpen()
//document.getElementById('app').style.background = '#fff'
})
@ -205,7 +268,9 @@ onUnmounted(() => {
//document.getElementById('app').style.background = 'block'
})
</script>
<style scoped>
<style lang="scss" scoped>
@import "@/assets/css/iconfont/iconfont.css";
.container {
width: 1920px;
height: 1080px;
@ -217,12 +282,14 @@ onUnmounted(() => {
font-size: 28px;
color: #FFFFFF;
background: url('./../../assets/img/bg.jpg') no-repeat center center / 100% 100%;
background-color: #0E0E0E;
background-color: #0E0E0E;
}
.header {
height: 100px;
width: 1920px;
height: 100px;
width: 1920px;
}
.body-container {
width: 1920px;
height: 980px;
@ -231,18 +298,19 @@ onUnmounted(() => {
align-items: center;
}
.left-container {
width: 800px;
width: 950px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
justify-content: center;
align-items: center;
}
.left-container .lt-box {
.right-container .lt-box {
width: 100%;
height: 600px;
height: 400px;
/* border: 1px solid #ccc; */
display: flex;
flex-direction: column;
@ -262,32 +330,115 @@ onUnmounted(() => {
}
.right-container {
width: 800px;
width: 950px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
justify-content: space-between;
align-items: center;
}
.text {
width: 100%;
margin-top: 15px;
text-align: center;
background-color: rgba(255, 255, 255, 0.1);
}
.btn-class {
width: 200px;
height: 100px;
width: 150px;
height: 150px;
font-size: 24px;
font-weight: 700;
border-radius: 20px;
/* font-weight: 700; */
border-radius: 50%;
border: 2px solid skyblue;
}
.input-text {
width: 600px;
width: 950px;
display: flex;
justify-content: center;
align-items: center;
}
.item-btn {
width: 100%;
height: 240px;
display: flex;
justify-content: space-around;
align-items: center;
}
.item-btn .wave-start {
.wave {
animation: audio-wave 2s ease-in-out infinite;
}
}
.item-btn .audio {
display: flex;
justify-content: space-between;
align-items: center;
gap: 18px;
width: 80px;
height: 40px;
.wave {
height: 40px;
display: block;
width: 10px;
height: 6px;
border-radius: 8px;
background: orange;
&:nth-child(1) {
animation-delay: 0.1s;
}
&:nth-child(2) {
animation-delay: 0.2s;
}
&:nth-child(3) {
animation-delay: 0.3s;
}
&:nth-child(4) {
animation-delay: 0.4s;
}
&:nth-child(5) {
animation-delay: 0.5s;
}
}
}
@keyframes audio-wave {
0% {
height: 6px;
transform: translateY(0px);
background: #ff8e3a;
}
25% {
height: 6px;
transform: translateY(0px);
background: #9c73f8;
}
50% {
height: 30px;
transform: translateY(-5px) scaleY(1.5);
background: #ed509e;
}
75% {
height: 6px;
transform: translateY(0px);
background: #9c73f8;
}
100% {
height: 6px;
transform: translateY(0px);
background: #0fccce;
}
}
</style>