update

src/assets/css/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4404806 */
-  src: url('iconfont.woff2?t=1704785829971') format('woff2'),
+  src: url('iconfont.woff2?t=1719991936473') format('woff2'),
-       url('iconfont.woff?t=1704785829971') format('woff'),
+       url('iconfont.woff?t=1719991936473') format('woff'),
-       url('iconfont.ttf?t=1704785829971') format('truetype');
+       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";
 }

src/views/Recorder/components/Border.vue

@@ -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>
+  

src/views/Recorder/index.vue

@@ -2,40 +2,62 @@
   <div class="container">
     <div class="header">
       <div class="title">
-                <header2 ref="headerref" :width="'100%'" :height="'100px'" :title="'游标卡尺物联'" :titleTip="[]"
+        <header2 ref="headerref" :width="'100%'" :height="'100px'" :title="'游标卡尺物联'" :titleTip="[]" :typeFun="['time']"
-                    :typeFun="['time']" :alarmType="[]"></header2>
+          :alarmType="[]"></header2>
       </div>
     </div>
     <div class="body-container">
       <div class="left-container">
-        <div class="lt-box">
+        <BorderView :title="'工件图纸'">
-          <el-image :src="workpiece" :preview-src-list="[workpiece]" style="max-width: 100%;height: 500px;"
+          <div v-show='pdfdata' ref="pdfContainer" style="height: 80%;width: 98%;"></div>
-            fit="contain" />
+          <a :href="pdfdata" target="_blank" style="color: #fff;">查看图纸</a>
-            零件图片
+        </BorderView>
-        </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>
       </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 is_start = ref(false)
-let workpiece = require('./image/workpiece.jpg')
+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;
@@ -219,10 +284,12 @@ onUnmounted(() => {
   background: url('./../../assets/img/bg.jpg') no-repeat center center / 100% 100%;
   background-color: #0E0E0E;
 }
+
 .header {
   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;
+  width: 150px;
-  height: 100px;
+  height: 150px;
   font-size: 24px;
-  font-weight: 700;
+  /* font-weight: 700; */
-  border-radius: 20px;
+  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>