newPeter7
3 years ago
57 changed files with 351 additions and 885 deletions
@ -0,0 +1,3 @@ |
|||
<template> |
|||
<router-view /> |
|||
</template> |
|||
@ -1,235 +0,0 @@ |
|||
<template> |
|||
<div class="luyin"> |
|||
<p>录音时长：</p> |
|||
<div style="margin-top:10px;"> |
|||
<el-button type="primary" size="small" @click="startRecorder">开始录音</el-button> |
|||
<el-button type="primary" size="small" @click="pauseRecorder">暂停录音</el-button> |
|||
<el-button type="primary" size="small" @click="endRecorder">停止录音</el-button> |
|||
</div> |
|||
<div style="margin-top:10px;"> |
|||
<el-button type="primary" size="small" @click="playRecorder">播放</el-button> |
|||
<el-button type="primary" size="small" @click="pausePlayRecorder">暂停播放</el-button> |
|||
<el-button type="primary" size="small" @click="resumePlayRecorder">恢复播放</el-button> |
|||
</div> |
|||
<div style="margin-top:10px;"> |
|||
<canvas id="canvas" /> |
|||
<span style="padding: 0 10%;" /> |
|||
<canvas id="playChart" /> |
|||
</div> |
|||
<div style="margin-top:10px;"> |
|||
<el-button type="primary" size="small" @click="getMp3Data()">下载MP3</el-button> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import lamejs from 'lamejs' |
|||
export default { |
|||
data() { |
|||
return { |
|||
// 波浪图-录音 |
|||
drawRecordId: null, |
|||
oCanvas: null, |
|||
ctx: null, |
|||
// 波浪图-播放 |
|||
drawPlayId: null, |
|||
pCanvas: null, |
|||
pCtx: null |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.startCanvas() |
|||
}, |
|||
methods: { |
|||
// 波浪图配置 |
|||
startCanvas() { |
|||
// 录音波浪 |
|||
this.oCanvas = document.getElementById('canvas') |
|||
this.ctx = this.oCanvas.getContext('2d') |
|||
// 播放波浪 |
|||
this.pCanvas = document.getElementById('playChart') |
|||
this.pCtx = this.pCanvas.getContext('2d') |
|||
}, |
|||
// 开始录音 |
|||
startRecorder() { |
|||
this.$recorder.start().then(() => { |
|||
// 开始录音 |
|||
this.drawRecord() // 开始绘制波浪图 |
|||
}, (error) => { |
|||
// 出错了 |
|||
console.log(`${error.name} : ${error.message}`) |
|||
}) |
|||
}, |
|||
// 暂停录音 |
|||
pauseRecorder() { |
|||
this.$recorder.pause() |
|||
this.drawRecordId && cancelAnimationFrame(this.drawRecordId) |
|||
this.drawRecordId = null |
|||
}, |
|||
// 结束录音 |
|||
endRecorder() { |
|||
this.$recorder.stop() |
|||
this.drawRecordId && cancelAnimationFrame(this.drawRecordId) |
|||
this.drawRecordId = null |
|||
this.uploadFile() |
|||
}, |
|||
// 上传录音 |
|||
async uploadFile() { |
|||
const mp3Name = encodeURIComponent('audio_recording_' + new Date().getTime() + '.mp3') |
|||
const formData = new FormData() |
|||
let file = this.convertToMp3(this.$recorder.getWAV()) |
|||
file = new File([file], mp3Name) |
|||
formData.append('file', file) |
|||
formData.append('mp3Name', mp3Name) |
|||
const { data: res } = this.$http({ |
|||
method: 'post', |
|||
url: '', |
|||
headers: { |
|||
'Content-Type': 'multipart/form-data' |
|||
}, |
|||
data: formData |
|||
}) |
|||
console.log(res) |
|||
}, |
|||
// 播放录音 |
|||
playRecorder() { |
|||
this.$recorder.play() |
|||
this.drawPlay() // 绘制波浪图 |
|||
}, |
|||
// 暂停播放 |
|||
pausePlayRecorder() { |
|||
this.$recorder.pausePlay() |
|||
}, |
|||
// 恢复录音播放 |
|||
resumePlayRecorder() { |
|||
this.$recorder.resumePlay() |
|||
this.drawPlay() // 绘制波浪图 |
|||
}, |
|||
// 绘制波浪图-录音 |
|||
drawRecord() { |
|||
// 用requestAnimationFrame稳定60fps绘制 |
|||
this.drawRecordId = requestAnimationFrame(this.drawRecord) |
|||
|
|||
// 实时获取音频大小数据 |
|||
const dataArray = this.$recorder.getRecordAnalyseData() |
|||
const bufferLength = dataArray.length |
|||
|
|||
// 填充背景色 |
|||
this.ctx.fillStyle = 'rgb(255, 255, 255)' |
|||
this.ctx.fillRect(0, 0, this.oCanvas.width, this.oCanvas.height) |
|||
|
|||
// 设定波形绘制颜色 |
|||
this.ctx.lineWidth = 2 |
|||
this.ctx.strokeStyle = 'rgb(152, 199, 255)' |
|||
|
|||
this.ctx.beginPath() |
|||
|
|||
var sliceWidth = this.oCanvas.width * 1.0 / bufferLength // 一个点占多少位置，共有bufferLength个点要绘制 |
|||
var x = 0 // 绘制点的x轴位置 |
|||
|
|||
for (var i = 0; i < bufferLength; i++) { |
|||
var v = dataArray[i] / 128.0 |
|||
var y = v * this.oCanvas.height / 2 |
|||
|
|||
if (i === 0) { |
|||
// 第一个点 |
|||
this.ctx.moveTo(x, y) |
|||
} else { |
|||
// 剩余的点 |
|||
this.ctx.lineTo(x, y) |
|||
} |
|||
// 依次平移，绘制所有点 |
|||
x += sliceWidth |
|||
} |
|||
|
|||
this.ctx.lineTo(this.oCanvas.width, this.oCanvas.height / 2) |
|||
this.ctx.stroke() |
|||
}, |
|||
// 绘制波浪图-播放 |
|||
drawPlay() { |
|||
// 用requestAnimationFrame稳定60fps绘制 |
|||
this.drawPlayId = requestAnimationFrame(this.drawPlay) |
|||
|
|||
// 实时获取音频大小数据 |
|||
const dataArray = this.$recorder.getPlayAnalyseData() |
|||
const bufferLength = dataArray.length |
|||
|
|||
// 填充背景色 |
|||
this.pCtx.fillStyle = 'rgb(255, 255, 255)' |
|||
this.pCtx.fillRect(0, 0, this.pCanvas.width, this.pCanvas.height) |
|||
|
|||
// 设定波形绘制颜色 |
|||
this.pCtx.lineWidth = 2 |
|||
this.pCtx.strokeStyle = 'rgb(152, 199, 255)' |
|||
|
|||
this.pCtx.beginPath() |
|||
|
|||
var sliceWidth = this.pCanvas.width * 1.0 / bufferLength // 一个点占多少位置，共有bufferLength个点要绘制 |
|||
var x = 0 // 绘制点的x轴位置 |
|||
|
|||
for (var i = 0; i < bufferLength; i++) { |
|||
var v = dataArray[i] / 128.0 |
|||
var y = v * this.pCanvas.height / 2 |
|||
|
|||
if (i === 0) { |
|||
// 第一个点 |
|||
this.pCtx.moveTo(x, y) |
|||
} else { |
|||
// 剩余的点 |
|||
this.pCtx.lineTo(x, y) |
|||
} |
|||
// 依次平移，绘制所有点 |
|||
x += sliceWidth |
|||
} |
|||
|
|||
this.pCtx.lineTo(this.pCanvas.width, this.pCanvas.height / 2) |
|||
this.pCtx.stroke() |
|||
}, |
|||
// 下载mp3 |
|||
getMp3Data() { |
|||
const mp3Blob = this.convertToMp3(this.$recorder.getWAV()) |
|||
this.$recorder.download(mp3Blob, 'recorder', 'mp3') |
|||
}, |
|||
// 转mp3 |
|||
convertToMp3(wavDataView) { |
|||
// 获取wav头信息 |
|||
const wav = lamejs.WavHeader.readHeader(wavDataView) // 此处其实可以不用去读wav头信息，毕竟有对应的config配置 |
|||
const { channels, sampleRate } = wav |
|||
const mp3enc = new lamejs.Mp3Encoder(channels, sampleRate, 128) |
|||
// 获取左右通道数据 |
|||
const result = this.$recorder.getChannelData() |
|||
const buffer = [] |
|||
|
|||
const leftData = result.left && new Int16Array(result.left.buffer, 0, result.left.byteLength / 2) |
|||
const rightData = result.right && new Int16Array(result.right.buffer, 0, result.right.byteLength / 2) |
|||
const remaining = leftData.length + (rightData ? rightData.length : 0) |
|||
|
|||
const maxSamples = 1152 |
|||
for (let i = 0; i < remaining; i += maxSamples) { |
|||
const left = leftData.subarray(i, i + maxSamples) |
|||
let right = null |
|||
let mp3buf = null |
|||
|
|||
if (channels === 2) { |
|||
right = rightData.subarray(i, i + maxSamples) |
|||
mp3buf = mp3enc.encodeBuffer(left, right) |
|||
} else { |
|||
mp3buf = mp3enc.encodeBuffer(left) |
|||
} |
|||
|
|||
if (mp3buf.length > 0) { |
|||
buffer.push(mp3buf) |
|||
} |
|||
} |
|||
|
|||
const enc = mp3enc.flush() |
|||
|
|||
if (enc.length > 0) { |
|||
buffer.push(enc) |
|||
} |
|||
|
|||
return new Blob(buffer, { type: 'audio/mp3' }) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -1,81 +0,0 @@ |
|||
<template> |
|||
<div /> |
|||
</template> |
|||
|
|||
<script> |
|||
import Cookies from 'js-cookie' |
|||
export default { |
|||
data() { |
|||
return { |
|||
returnParam: {}, |
|||
currentUser: {}, |
|||
patientInfo: {} |
|||
} |
|||
}, |
|||
created() { |
|||
var searchHref = decodeURIComponent(window.location.search).replace('?', '') |
|||
console.log(searchHref) |
|||
var params = searchHref.split('&') |
|||
params.forEach(param => { |
|||
var paramSplit = param.split('=') |
|||
this.returnParam[paramSplit[0]] = paramSplit[1] |
|||
}) |
|||
console.log(this.returnParam) |
|||
if (this.returnParam.doctorId) { |
|||
this.noPasswordLogin() |
|||
} |
|||
}, |
|||
methods: { |
|||
noPasswordLogin() { |
|||
// https://quguang.huimu.cloud/transfer?patientIdNumber=140108201204070077&doctorId=liucan&hisToken=123456 |
|||
this.$http.post('/noPasswordLogin', { |
|||
doctorId: this.returnParam.doctorId, |
|||
hisToken: this.returnParam.hisToken |
|||
}).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
// this.getCaptcha() |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.currentUser = res.data.currentUser |
|||
Cookies.set('xa-token', res.data.token) |
|||
window.localStorage.setItem('qg-userData', JSON.stringify(res.data.currentUser)) |
|||
this.getHisPatientInfo() |
|||
}).catch(() => { }) |
|||
}, |
|||
// HIS查询患者详情 |
|||
getHisPatientInfo() { |
|||
this.$http.get(`/patient/manage/getHisPatientInfo/${this.returnParam.patientIdNumber}`).then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.patientInfo = res.data |
|||
this.savePatientInfo() |
|||
}).catch(() => {}) |
|||
}, |
|||
async savePatientInfo() { |
|||
const { data: res } = await this.$http.post('/patient/manage', this.patientInfo) |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} |
|||
this.$router.push({ |
|||
path: '/seeDoctor', |
|||
query: { |
|||
info: this.$Base64.encode(JSON.stringify({ |
|||
patientIdNumber: this.returnParam.patientIdNumber, |
|||
patientCentreId: this.currentUser.centreId, |
|||
doctorId: this.returnParam.doctorId, |
|||
title: this.currentUser.position === '医生' ? '门诊' : '分诊' |
|||
})) |
|||
} |
|||
}) |
|||
const findMenuListInterval = setInterval(() => { |
|||
const menuList = window.SITE_CONFIG['menuList'] |
|||
menuList.length > 0 ? clearInterval(findMenuListInterval) : '' |
|||
// 设置菜单激活所在位置 |
|||
window.SITE_CONFIG.menuList.length > 0 ? this.$store.commit('activeIndexFun', res.data[0].id) : '' |
|||
}, 500) |
|||
} |
|||
} |
|||
} |
|||
|
|||
</script> |
|||
Loading…
Reference in new issue