Commit 7fa0b727 by huangqy

假如音频模块

parent 8711ef40
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>金锭生产防伪管理系统</title> <title>贵金属生产管理系统</title>
</head> </head>
<body> <body>
<noscript> <noscript>
......
...@@ -2,6 +2,8 @@ ...@@ -2,6 +2,8 @@
<div class="body" :style="'height:' + height + 'px'"> <div class="body" :style="'height:' + height + 'px'">
<div class="inner_border"> <div class="inner_border">
<el-card :style="'height:' + (height - 60) + 'px; overflow-y: auto; position:relative;'"> <el-card :style="'height:' + (height - 60) + 'px; overflow-y: auto; position:relative;'">
<audio controls="controls" hidden src="../../assets/error.mp3" ref="audio"></audio>
<audio controls="controls" hidden src="../../assets/success.mp3" ref="audio1"></audio>
<el-form :inline="true" :model="searchData" size="medium" label-position="left"> <el-form :inline="true" :model="searchData" size="medium" label-position="left">
<el-row type="flex" justify="space-between" align="middle"> <el-row type="flex" justify="space-between" align="middle">
<el-col> <el-col>
...@@ -86,7 +88,7 @@ ...@@ -86,7 +88,7 @@
</el-card> </el-card>
<el-dialog :append-to-body="true" title="生产自检" :visible.sync="dialogVisible" @close="dialogClose()" width="1000px" :close-on-click-modal="false"> <el-dialog :append-to-body="true" title="生产自检" :visible.sync="dialogVisible" @close="dialogClose()" width="1200px" :close-on-click-modal="false">
<el-card> <el-card>
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<span style="font-size: 20px;flex: 1">已自检数: <span style="color: green;font-size: 20px;">{{ formData.checkedNum }} </span></span> <span style="font-size: 20px;flex: 1">已自检数: <span style="color: green;font-size: 20px;">{{ formData.checkedNum }} </span></span>
...@@ -104,7 +106,7 @@ ...@@ -104,7 +106,7 @@
<div style="max-height: 130px;overflow:auto"> <div style="max-height: 130px;overflow:auto">
<ul> <ul>
<li v-for="item in logList" style="margin-top: 8px;" :key="item.time + item.log"> <li v-for="item in logList" style="margin-top: 8px;" :key="item.time + item.log">
<div style="display: flex;justify-content: center;align-items: center"> <div style="display: flex;justify-content: center;align-items: center" :class="item.status === 1 ? 'greenFont': 'redFont' ">
<div style="flex: 1;line-height: 16px; font-size: 16px;text-align: center">{{ item.log }}</div> <div style="flex: 1;line-height: 16px; font-size: 16px;text-align: center">{{ item.log }}</div>
<div style="flex: 1;line-height: 16px; font-size: 16px;text-align: center">{{ item.time }}</div> <div style="flex: 1;line-height: 16px; font-size: 16px;text-align: center">{{ item.time }}</div>
</div> </div>
...@@ -115,8 +117,8 @@ ...@@ -115,8 +117,8 @@
</el-card> </el-card>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<a-button @click="dialogVisible = false" ghost type="danger">取 消</a-button> <a-button @click="dialogVisible = false" ghost type="danger" size="large">取 消</a-button>
<a-button type="primary" ghost @click="bindBatch()" style="margin-left: 10px;" :loading="loading">自 检</a-button> <a-button type="primary" ghost @click="bindBatch()" style="margin-left: 20px;" :loading="loading" size="large">自 检</a-button>
</span> </span>
</el-dialog> </el-dialog>
</div> </div>
...@@ -226,9 +228,11 @@ export default { ...@@ -226,9 +228,11 @@ export default {
}, },
websocketOnopen(e) { websocketOnopen(e) {
this.logList.unshift({time: this.parseTime(new Date()), log: 'WebSocket连接建立' }) this.logList.unshift({time: this.parseTime(new Date()), log: 'WebSocket连接建立', status: 1 })
}, },
websocketOnerror: function (e) { websocketOnerror: function (e) {
this.logList.unshift({time: this.parseTime(new Date()), log: '写入服务连接失败', status: 2 })
this.$refs.audio.play()
console.log("WebSocket连接发生错误"); console.log("WebSocket连接发生错误");
}, },
websocketOnclose: function (e) { websocketOnclose: function (e) {
...@@ -252,7 +256,6 @@ export default { ...@@ -252,7 +256,6 @@ export default {
// obj = obj.substring(index+3, obj.length) // obj = obj.substring(index+3, obj.length)
// var sendObj = { Uid: this.uid, Data: obj } // var sendObj = { Uid: this.uid, Data: obj }
var sendObj = { Uid: this.uid, Data: backMessObj.Code } var sendObj = { Uid: this.uid, Data: backMessObj.Code }
console.log(JSON.stringify({Cmd: 3, Data: sendObj}))
this.websock.send(JSON.stringify({Cmd: 3, Data: sendObj})) this.websock.send(JSON.stringify({Cmd: 3, Data: sendObj}))
} }
else if (backMessObj.Cmd === 254) { else if (backMessObj.Cmd === 254) {
...@@ -261,14 +264,17 @@ export default { ...@@ -261,14 +264,17 @@ export default {
this.websock.send(JSON.stringify({Cmd: 1, Data: ''})) this.websock.send(JSON.stringify({Cmd: 1, Data: ''}))
}, 1000) }, 1000)
} else { } else {
this.logList.unshift({time: this.parseTimes(new Date()), log: backMessObj.Data.Message }) this.$refs.audio.play()
this.logList.unshift({time: this.parseTimes(new Date()), log: backMessObj.Data.Message, status: 2 })
setTimeout(() => alert(backMessObj.Data.Message), 500)
} }
} }
}, },
async tagCheck(productCode) { async tagCheck(productCode) {
const { data: res } = await this.$axios.post('/api/tag/check', { tagUid: this.uid, productCode: productCode }) const { data: res } = await this.$axios.post('/api/tag/check', { tagUid: this.uid, productCode: productCode })
if (res.code != 99200) return this.$message.error(res.message) if (res.code != 99200) return this.$message.error(res.message)
this.logList.unshift({time: this.parseTimes(new Date()), log: '自检成功' }) this.logList.unshift({time: this.parseTimes(new Date()), log: '自检成功', status: 1 })
this.$refs.audio1.play()
this.findNumber() this.findNumber()
}, },
async findNumber() { async findNumber() {
...@@ -312,4 +318,10 @@ export default { ...@@ -312,4 +318,10 @@ export default {
align-items: center; align-items: center;
text-align: center; text-align: center;
} }
.greenFont {
color: green;
}
.redFont {
color: red;
}
</style> </style>
...@@ -4,6 +4,8 @@ ...@@ -4,6 +4,8 @@
<div class="inner_border"> <div class="inner_border">
<!-- 主体区域 - 卡片视图 --> <!-- 主体区域 - 卡片视图 -->
<el-card :style="'height:' + (height - 60) + 'px;overflow-y: auto;position:relative;'"> <el-card :style="'height:' + (height - 60) + 'px;overflow-y: auto;position:relative;'">
<audio controls="controls" hidden src="../../assets/error.mp3" ref="audio"></audio>
<audio controls="controls" hidden src="../../assets/success.mp3" ref="audio1"></audio>
<!-- 查询功能区域 --> <!-- 查询功能区域 -->
<el-form :inline="true" :model="searchData" size="medium" label-position="left" > <el-form :inline="true" :model="searchData" size="medium" label-position="left" >
<el-row type="flex" justify="space-between" align="middle"> <el-row type="flex" justify="space-between" align="middle">
...@@ -100,7 +102,7 @@ ...@@ -100,7 +102,7 @@
:title="title" :title="title"
:visible.sync="dialogVisible" :visible.sync="dialogVisible"
@close="dialogClose()" @close="dialogClose()"
width="800px" width="1000px"
:close-on-click-modal="false" :close-on-click-modal="false"
> >
<!-- 表单区域 --> <!-- 表单区域 -->
...@@ -159,13 +161,13 @@ ...@@ -159,13 +161,13 @@
</el-dialog> </el-dialog>
<el-dialog :append-to-body="true" title="数据绑定" :visible.sync="bindVisible" @close="bindDialogClose()" width="1000px" :close-on-click-modal="false"> <el-dialog :append-to-body="true" title="数据绑定" :visible.sync="bindVisible" @close="bindDialogClose()" width="1200px" :close-on-click-modal="false">
<el-card> <el-card>
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<span style="font-size: 20px;flex: 1">生产总数: <span style="color: green;font-size: 20px;">{{ bindForm.total }} </span></span> <span style="font-size: 20px;flex: 1">生产总数: <span style="color: green;font-size: 20px;">{{ bindForm.total }} </span></span>
<span style="font-size: 20px;flex: 1">已绑定数量: <span style="color: red;font-size: 20px;">{{ bindForm.doneNum }} </span></span> <span style="font-size: 20px;flex: 1">已绑定数量: <span style="color: red;font-size: 20px;">{{ bindForm.doneNum }} </span></span>
</div> </div>
<el-descriptions direction="vertical" border :column="5"> <el-descriptions direction="vertical" border :column="5" size="medium">
<el-descriptions-item label="批次号" :labelStyle="{'text-align': 'center'}" :contentStyle="{'text-align': 'center'}">{{ bindForm.batchNo }}</el-descriptions-item> <el-descriptions-item label="批次号" :labelStyle="{'text-align': 'center'}" :contentStyle="{'text-align': 'center'}">{{ bindForm.batchNo }}</el-descriptions-item>
<el-descriptions-item label="产品名称" :labelStyle="{'text-align': 'center'}" :contentStyle="{'text-align': 'center'}">{{ bindForm.productName }}</el-descriptions-item> <el-descriptions-item label="产品名称" :labelStyle="{'text-align': 'center'}" :contentStyle="{'text-align': 'center'}">{{ bindForm.productName }}</el-descriptions-item>
<el-descriptions-item label="规格" :labelStyle="{'text-align': 'center'}" :contentStyle="{'text-align': 'center'}">{{ bindForm.spec }}</el-descriptions-item> <el-descriptions-item label="规格" :labelStyle="{'text-align': 'center'}" :contentStyle="{'text-align': 'center'}">{{ bindForm.spec }}</el-descriptions-item>
...@@ -177,10 +179,10 @@ ...@@ -177,10 +179,10 @@
<div style="max-height: 130px;overflow:auto"> <div style="max-height: 130px;overflow:auto">
<ul> <ul>
<li v-for="item in logList" style="margin-top: 8px;" :key="item.time + item.log"> <li v-for="item in logList" style="margin-top: 8px;" :key="item.time + item.log">
<div style="display: flex;justify-content: center;align-items: center"> <div style="display: flex;justify-content: center;align-items: center" :class="item.status === 1 ? 'greenFont': 'redFont' ">
<div style="flex: 1;line-height: 16px; font-size: 16px;text-align: center">{{ item.log }}</div> <div style="flex: 1;line-height: 16px; font-size: 16px;text-align: center">{{ item.log }}</div>
<div style="flex: 1;line-height: 16px; font-size: 16px;text-align: center">{{ item.time }}</div> <div style="flex: 1;line-height: 16px; font-size: 16px;text-align: center">{{ item.time }}</div>
</div> </div>
</li> </li>
</ul> </ul>
</div> </div>
...@@ -188,8 +190,8 @@ ...@@ -188,8 +190,8 @@
</el-card> </el-card>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<a-button @click="bindVisible = false" ghost type="danger">取 消</a-button> <a-button @click="bindVisible = false" ghost type="danger" size="large">取 消</a-button>
<a-button type="primary" ghost @click="bindBatch()" style="margin-left: 10px;" :loading="loading">绑 定</a-button> <a-button type="primary" ghost @click="bindBatch()" style="margin-left: 20px;" :loading="loading" size="large">绑 定</a-button>
</span> </span>
</el-dialog> </el-dialog>
</el-card> </el-card>
...@@ -199,24 +201,24 @@ ...@@ -199,24 +201,24 @@
<script> <script>
import initData from '../../mixins/initData' import initData from '../../mixins/initData'
import Speech from 'speak-tts' // import Speech from 'speak-tts'
const speech = new Speech() // will throw an exception if not browser supported // const speech = new Speech() // will throw an exception if not browser supported
if(speech.hasBrowserSupport()) { // returns a boolean // if(speech.hasBrowserSupport()) { // returns a boolean
console.log("speech synthesis supported") // console.log("speech synthesis supported")
} // }
speech.init({ // speech.init({
'volume': 1, // 'volume': 1,
'lang': 'zh-CN', // 'lang': 'zh-CN',
'rate': 1, // 'rate': 1,
'pitch': 1, // 'pitch': 1,
'voice':'Google 普通话(中国大陆)', // 'voice':'Google 普通话(中国大陆)',
'splitSentences': true, // 'splitSentences': true,
'listeners': { // 'listeners': {
'onvoiceschanged': (voices) => { // 'onvoiceschanged': (voices) => {
console.log("Event voiceschanged", voices) // console.log("Event voiceschanged", voices)
} // }
} // }
}) // })
export default { export default {
mixins: [initData], mixins: [initData],
data () { data () {
...@@ -245,23 +247,22 @@ export default { ...@@ -245,23 +247,22 @@ export default {
methods: { methods: {
speak(text) { speak(text) {
console.log(text)
speech.speak({ speech.speak({
text: text, text: text,
queue: true, // current speech will be interrupted, queue: true, // current speech will be interrupted,
listeners: { listeners: {
onstart: () => { onstart: () => {
console.log("Start utterance") console.log("Start utterance")
}, },
onend: () => { onend: () => {
console.log("End utterance") console.log("End utterance")
}, },
onresume: () => { onresume: () => {
console.log("Resume utterance") console.log("Resume utterance")
}, },
onboundary: (event) => { onboundary: (event) => {
console.log(event.name + ' boundary reached after ' + event.elapsedTime + ' milliseconds.') console.log(event.name + ' boundary reached after ' + event.elapsedTime + ' milliseconds.')
} }
} }
}).then(() => { }).then(() => {
console.log("Success !") console.log("Success !")
...@@ -382,9 +383,11 @@ export default { ...@@ -382,9 +383,11 @@ export default {
this.bindVisible = true this.bindVisible = true
}, },
websocketOnopen(e) { websocketOnopen(e) {
this.logList.unshift({time: this.parseTime(new Date()), log: 'WebSocket连接建立' }) this.logList.unshift({time: this.parseTime(new Date()), log: '写入服务连接建立', status: 1 })
}, },
websocketOnerror: function (e) { websocketOnerror: function (e) {
this.logList.unshift({time: this.parseTime(new Date()), log: '写入服务连接失败', status: 2 })
this.$refs.audio.play()
console.log("WebSocket连接发生错误"); console.log("WebSocket连接发生错误");
}, },
websocketOnclose: function (e) { websocketOnclose: function (e) {
...@@ -398,13 +401,14 @@ export default { ...@@ -398,13 +401,14 @@ export default {
this.updateContent(backMessObj.Data.Access, backMessObj.Data.Data) this.updateContent(backMessObj.Data.Access, backMessObj.Data.Data)
} else if (backMessObj.Cmd === 1){ } else if (backMessObj.Cmd === 1){
if (this.oldUid !== this.newUid) { if (this.oldUid !== this.newUid) {
this.logList.unshift({time: this.parseTime(new Date()), log: '读取到UID:' + backMessObj.Data }) // this.logList.unshift({time: this.parseTime(new Date()), log: '读取到UID:' + backMessObj.Data })
} }
this.updateUid(backMessObj.Data) this.updateUid(backMessObj.Data)
} }
else if (backMessObj.Cmd === 4){ else if (backMessObj.Cmd === 4){
this.speak('D') //this.speak('D')
this.logList.unshift({time: this.parseTime(new Date()), log: '标签成功写入生产数据' }) this.$refs.audio1.play()
this.logList.unshift({time: this.parseTime(new Date()), log: '写入成功', status: 1 })
this.bindForm.doneNum ++ this.bindForm.doneNum ++
this.oldUid = this.newUid this.oldUid = this.newUid
setTimeout(() => { setTimeout(() => {
...@@ -417,8 +421,10 @@ export default { ...@@ -417,8 +421,10 @@ export default {
this.websock.send(JSON.stringify({Cmd: 1, Data: ''})) this.websock.send(JSON.stringify({Cmd: 1, Data: ''}))
}, 1000) }, 1000)
} else { } else {
this.logList.unshift({time: this.parseTime(new Date()), log: backMessObj.Data.Message }) this.logList.unshift({time: this.parseTime(new Date()), log: backMessObj.Data.Message, status: 2 })
this.speak(backMessObj.Data.Message + ',请重新绑定') this.$refs.audio.play()
setTimeout(() => alert(backMessObj.Data.Message), 500)
// this.speak(backMessObj.Data.Message + ',请重新绑定')
} }
} }
}, },
...@@ -441,8 +447,8 @@ export default { ...@@ -441,8 +447,8 @@ export default {
this.websock.send(JSON.stringify({Cmd: 4, Data: {Access: password, Data: res.data.content, Code: res.data.productCode } })) this.websock.send(JSON.stringify({Cmd: 4, Data: {Access: password, Data: res.data.content, Code: res.data.productCode } }))
}, },
bindBatch() { bindBatch() {
this.loading = true this.loading = true
this.websock.send(JSON.stringify({Cmd: 1, Data: ''})) this.websock.send(JSON.stringify({Cmd: 1, Data: ''}))
} }
} }
} }
...@@ -454,4 +460,10 @@ export default { ...@@ -454,4 +460,10 @@ export default {
align-items: center; align-items: center;
text-align: center; text-align: center;
} }
.greenFont {
color: green;
}
.redFont {
color: red;
}
</style> </style>
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<el-header class="ltk-header"> <el-header class="ltk-header">
<div class="logo"> <div class="logo">
<img src="../assets/logo.png" alt="logo" /> <img src="../assets/logo.png" alt="logo" />
<span>金锭生产防伪管理系统</span> <span>贵金属生产管理系统</span>
</div> </div>
<div class="time_box" @click="cut"> <div class="time_box" @click="cut">
<bo-time></bo-time> <bo-time></bo-time>
......
<template> <template>
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<el-header class="ltk-header"> <el-header class="ltk-header">
<div class="logo" @click="goHome()"> <div class="logo" @click="goHome()">
<img src="../assets/logo.png" alt="logo" /> <img src="../assets/logo.png" alt="logo" />
<span>金锭生产防伪管理系统</span> <span>贵金属生产管理系统</span>
</div> </div>
<div class="time_box" @click="cut"> <div class="time_box" @click="cut">
<bo-time></bo-time> <bo-time></bo-time>
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论