JavaScript實現(xiàn)語音排隊叫號系統(tǒng)
更新時間：2021年12月28日 15:01:57 作者：夜鷹教程網(wǎng)
語音排隊叫號系統(tǒng)廣泛用于銀行，餐飲，醫(yī)院等場景。本文主要介紹了通過JavaScript實現(xiàn)的語音排隊叫號系統(tǒng)，有掃碼排隊，語音叫號等功能。需要的可以參考一下
介紹
語音排隊叫號系統(tǒng)廣泛用于銀行，餐飲，醫(yī)院等場景。本系統(tǒng)采用Layui框架完成，前端體驗不錯，基于角色實現(xiàn)了權(quán)限管理，實現(xiàn)了數(shù)據(jù)庫菜單無限級擴展和菜單鏈接動態(tài)控制，系統(tǒng)實現(xiàn)掃碼排隊，語音叫號等功能。
開發(fā)語言：C#?
數(shù)據(jù)庫：sql server2017
開發(fā)工具：vs2019
技術(shù)：asp.net+layui
主要功能
帶驗證碼的登錄界面，背景可替換。
基于角色的權(quán)限管理。
系統(tǒng)具有打印和導出數(shù)據(jù)表格的功能。
支持篩選列和組合查詢。
系統(tǒng)實現(xiàn)換膚功能。?
效果展示
關鍵代碼
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TbLineUpList.aspx.cs" Inherits="PaiDuiSys.page.TbLineUpList" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>夜鷹排隊叫號系統(tǒng)v1.0</title>
<meta charset="utf-8"/>
<meta name="renderer" content="webkit"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" rel="external nofollow" media="all"/>
<link rel="stylesheet" href="../css/public.css" rel="external nofollow" media="all"/>
</head>
<body>
<div class="layuimini-container">
<div class="layuimini-main">
<fieldset class="table-search-fieldset">
<legend>搜索信息</legend>
<div style="margin: 10px 10px 10px 10px">
<form id="form1" class="layui-form layui-form-pane" action="">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">業(yè)務類型：</label>
<div class="layui-input-inline">
<select name="BuType" lay-verify="required">
<option value="0" selected="selected">全部</option>
<option value="1">個人業(yè)務</option>
<option value="2">對公業(yè)務</option>
</select>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">關鍵字</label>
<div class="layui-input-inline">
<input type="text" name="SearchKey" autocomplete="off" class="layui-input"/>
</div>
</div>
<div class="layui-inline">
<button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
</div>
</div>
</form>
</div>
</fieldset>
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm layui-btn-normal data-add-btn" lay-event="add"> 添加 </button>
<button class="layui-btn layui-btn-sm layui-btn-normal data-add-btn" lay-event="edit"> 編輯 </button>
<button class="layui-btn layui-btn-sm layui-btn-normal data-add-btn" lay-event="delete"> 刪除 </button>
<button class="layui-btn layui-btn-sm layui-btn-normal data-add-btn" lay-event="showdetail"> 查看 </button>
</div>
</script>
<table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
</div>
<script type="text/html" id="currentTableBar">
<a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="classnum">叫號</a>
<a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="classfinish">完成</a>
<a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="classovertime">過期</a>
<a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="showview">查看</a>
</script>
</div>
<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
layui.use(['form', 'table'], function () {
var $ = layui.jquery;
form = layui.form;
table = layui.table;
layer = layui.layer;
table.render({
elem: '#currentTableId',
url: '../Ajax.ashx?rnum=2',
toolbar: '#toolbarDemo',
defaultToolbar: ['filter', 'exports', 'print', {
title: '提示',
layEvent: 'LAYTABLE_TIPS',
icon: 'layui-icon-tips'
}],
cellMinWidth: 80,
cols: [[
{ type: "checkbox", width: 50 },
{ field: 'ID', width: 80, title: 'ID' },
{ field: 'CreateTime', width: 200, title: '創(chuàng)建時間' },
{ field: 'CustName', width: 100, title: '客戶姓名'},
{ field: 'CustIDCard', width:200, title: '身份證' },
{ field: 'CustTel', width: 120, title: '客戶電話' ,edit: 'text'},
{ field: 'LineNum', width: 60, title: '排號' },
{ field: 'WindowNumStr', width: 120, title: '當前窗口' },
{ field: 'BuType', title: '類型', width: 120,hide: true },
{ field: 'BuTypeStr', title: '類型', width: 120},
{ field: 'BuStatusStr', width: 80, title: '狀態(tài)'},
{ field: 'Memo', title: '備注(點擊單元格改備注)', event: 'setMemo' },
{ field: 'CallTime', title: '最后一次叫號時間', hide: true },
{ field: 'FinishTime', title: '業(yè)務完成時間', hide: true },
{ field: 'OptName', title: '業(yè)務辦理人員',hide: true },
{ field: 'OptUserId', title: '業(yè)務辦理人員ID', hide: true },
{ field: 'WindowNum', title: '窗口號', hide: true },
{ field: 'LineNum', title: '排隊號', hide: true },
{title: '操作', width:300, toolbar: '#currentTableBar', align: "center"}
]],
limits: [10, 15, 20, 25, 50, 100],
limit: 10,
page: true,
skin: 'line',
done(res, curr, count) {
let data = res.data;
data.forEach((value, i) => {
//console.log(value.BuStatus);
//根據(jù)每一行的status字段，設置當前行的背景顏色
if (value.BuStatus =="1") {
$('.layui-table tr[data-index="' + i + '"]').css({ 'background-color': 'red','color':'#fff'});
} else if (value.BuStatus =="2") {
$('.layui-table tr[data-index="' + i + '"]').css({ 'background-color': '#3cb371', 'color': '#fff'});
} else if (value.BuStatus == "3"){
$('.layui-table tr[data-index="' + i + '"]').css({ 'background-color': '#ccc', 'color': '#fff'});
}
});
}
});
// 監(jiān)聽搜索操作
form.on('submit(data-search-btn)', function (data) {
//執(zhí)行搜索重載
table.reload('currentTableId', {
page: {
curr: 1
}
, where: {
BuType: data.field.BuType,
SearchKey: data.field.SearchKey
}
}, 'data');
return false;
});
/**
* toolbar監(jiān)聽事件
*/
table.on('toolbar(currentTableFilter)', function (obj) {
if (obj.event === 'add') { // 監(jiān)聽添加操作
var index = layer.open({
title: '新增用戶',
type: 2,
zIndex: layer.zIndex,
id: 'LAY_layuiproadd', //設定一個id，防止重復彈出
shade: 0.1,
maxmin: true,
// shadeClose: true,
area: ['60%', '520px'],
content: '../page/table/TbLineUpAdd.aspx',
success: function (layero, index) {
layer.setTop(layero);
}
});
$(window).on("resize", function () {
layer.full(index);
});
} else if (obj.event === 'delete') { // 監(jiān)聽刪除操作
var checkStatus = table.checkStatus('currentTableId');
var dataarray = checkStatus.data;
var ids = "0";
for (var i = 0; i < dataarray.length; i++) {
ids += "," + dataarray[i].ID;
}
ids += ",0";
layer.confirm('確定刪除該記錄嗎？一旦刪除不能恢復!', { icon: 3, title: '提示' }, function (index) {
$.ajax({
url: '../Ajax.ashx', //要請求的url地址
type: 'POST', //請求方法 GET or POST
async: true, //是否使用異步請求的方式
timeout: 5000, //請求超時的時間，以毫秒計
data: {
rnum: 10,
ids: ids
},
dataType: 'json',
success: function (data) {
console.log(obj);
layer.alert("刪除成功");
table.reload('currentTableId', {})
}
});
});
} else if (obj.event === 'edit') {
var checkStatus = table.checkStatus('currentTableId');
var dataarray = checkStatus.data;
console.log(dataarray);
if (dataarray.length > 0) {
layer.open({
type: 2 //此處以iframe舉例
, title: '編輯用戶'
, area: ['60%', '520px']
, shade: 0.1
, maxmin: true
, id: 'LAY_layuipro' //設定一個id，防止重復彈出
, content: '../page/table/TbLineUpEdit.aspx'
, zIndex: layer.zIndex
, success: function (layero, index) {
var item = dataarray[0];
var body = layer.getChildFrame('body', index);
console.log(o);
body.find("[name='rid']").val(item.ID);
body.find("[name='CustName']").val(item.CustName);
body.find("input[name='CustIDCard']").val(item.CustIDCard);
console.log(item.BuType);
console.log(body.find("input[name='BuType'][value='2']"));
if (item.BuType == "1") {
body.find("input[name='BuType'][value='1']").prop("checked", true);
}
else {
$(body).find("input[name='BuType'][value='2']").prop("checked", true);
}
body.find("[name='CustTel']").val(item.CustTel);
body.find("[name='Memo']").val(item.Memo);
layer.setTop(layero);
//關鍵點：父窗口調(diào)用子頁面的getformobj函數(shù)，返回子頁面的form對象，然后重繪子頁面的數(shù)據(jù)。
var iframeWin = window[layero.find('iframe')[0]['name']];
var o = iframeWin.getformobj();
o.render();
}
});
}
else {
layer.msg('請先勾選一條要編輯的數(shù)據(jù)');
}
} else if (obj.event === 'showdetail') {
var checkStatus = table.checkStatus('currentTableId');
var dataarray = checkStatus.data;
if (dataarray.length > 0) {
layer.open({
type: 2
, title: '查看用戶'
, area: ['50%', '520px']
, shade: 0.1
, maxmin: true
, id: 'layuiproview' //設定一個id，防止重復彈出
, content: '../page/table/TbLineUpView.aspx'
, zIndex: layer.zIndex
, success: function (layero, index) {
var item = dataarray[0];
var body = layer.getChildFrame('body', index);
console.log(item);
body.find("[name='rid']").val(item.ID);
body.find("[name='CustName']").val(item.CustName);
body.find("input[name='CustIDCard']").val(item.CustIDCard);
body.find("input[name='CreateTime']").val(item.CreateTime);
body.find("input[name='CallTime']").val(item.CallTime);
body.find("input[name='FinishTime']").val(item.FinishTime);
body.find("input[name='OptName']").val(item.OptName);
body.find("input[name='LineNum']").val(item.LineNum);
body.find("input[name='WindowNum']").val(item.WindowNum);
if (item.BuType == "1") {
body.find("input[name='BuType'][value='1']").prop("checked", true);
}
else {
$(body).find("input[name='BuType'][value='2']").prop("checked", true);
}
body.find("[name='CustTel']").val(item.CustTel);
body.find("[name='Memo']").val(item.Memo);
layer.setTop(layero);
//關鍵點：父窗口調(diào)用子頁面的getformobj函數(shù)，返回子頁面的form對象，然后重繪子頁面的數(shù)據(jù)。
var iframeWin = window[layero.find('iframe')[0]['name']];
var o = iframeWin.getformobj();
o.render();
}
});
}
else {
layer.msg('請先勾選一條要編輯的數(shù)據(jù)');
}
}
});
//監(jiān)聽單元格編輯
table.on('edit(currentTableFilter)', function (obj) {
var v = obj.value; //得到修改后的值
var data = obj.data;//得到所在行所有鍵值
var CurrentField = obj.field; //修改的字段
$.ajax({
url: '../Ajax.ashx', //要請求的url地址
type: 'POST', //請求方法 GET or POST
async: true, //是否使用異步請求的方式
timeout: 5000, //請求超時的時間，以毫秒計
data: {
rnum: "11",
id:data.ID,
value:v,
Field:CurrentField
},
dataType: 'json', //預期的服務器返回參數(shù)類型
beforeSend: function () {
},
success: function (data) {
layer.msg("修改成功");
},
error: function () {
},
complete: function () {
}
});
});
//監(jiān)聽表格復選框選擇
table.on('checkbox(currentTableFilter)', function (obj) {
//console.log(obj)
});
function getWindowVoice()
{ // 獲取瀏覽器中語音 (中文 + 本地服務)
return window.speechSynthesis.getVoices().find(item => item.localService && item.lang === 'zh-CN');
}
table.on('tool(currentTableFilter)', function (obj) {
var data = obj.data;
if (obj.event === 'classnum') {
const synth = window.speechSynthesis
const message = new SpeechSynthesisUtterance();
function voice_playback(text) {
message.text = text;
message.lang = 'zh';
message.volume = 1; // 聲音音量：1
message.rate = 1; // 語速：1
message.pitch = 1; // 音高：1
message.voice = getWindowVoice(); // 使用本地服務合成語音(若是獲取不到 請異步獲取, 加一個setTimeout)
//synth.cancel(message);
window.speechSynthesis.cancel();
synth.speak(message)
}
/*
* text – 要合成的文字內(nèi)容，字符串
* lang – 使用的語言，字符串， 例如：“zh-cn”
* voiceURI – 指定希望使用的聲音和服務，字符串
* volume – 聲音的音量，區(qū)間范圍是0到1，默認是1
* rate – 語速，數(shù)值，默認值是1，范圍是0.1到10，表示語速的倍數(shù)，例如2表示正常語速的兩倍。
* pitch – 表示說話的音高，數(shù)值，范圍從0（最?。┑?（最大）。默認值為1
*/
var s = "請" + obj.data.LineNum + "號顧客" + obj.data.CustName + "到" + obj.data.WindowNumStr + "號窗口辦理業(yè)務";
voice_playback(s);
setstatus("4", obj.data.ID, obj.tr);
return false;
} else if (obj.event === 'classfinish') {
setstatus("5", obj.data.ID, obj.tr);
return false;
} else if (obj.event === 'classovertime') {
setstatus("6", obj.data.ID, obj.tr);
return false;
}
else if (obj.event === 'setMemo') {
layer.prompt({
formType: 2
, title: '修改用戶【' + data.CustName + '】的備注'
, value: data.Memo
}, function (value, index) {
layer.close(index);
$.ajax({
url: '../Ajax.ashx', //要請求的url地址
type: 'POST', //請求方法 GET or POST
async: true, //是否使用異步請求的方式
timeout: 5000, //請求超時的時間，以毫秒計
data: {
rnum:"7",
id: obj.data.ID,
memo: value
},
dataType: 'json', //預期的服務器返回參數(shù)類型
beforeSend: function () {
},
success: function (data) {
//console.log(data);
//同步更新表格中緩存對應的值
obj.update({
Memo: value
});
},
error: function () {
},
complete: function () {
}
});
});
}
else if (obj.event === 'showview') {
layer.open({
type: 2
, title: '查看用戶'
, area: ['50%', '520px']
, shade: 0.1
, maxmin: true
, id: 'layuiproview' //設定一個id，防止重復彈出
, content: '../page/table/TbLineUpView.aspx'
, zIndex: layer.zIndex
, success: function (layero, index) {
var item = obj.data;
var body = layer.getChildFrame('body', index);
body.find("[name='rid']").val(item.ID);
body.find("[name='CustName']").val(item.CustName);
body.find("input[name='CustIDCard']").val(item.CustIDCard);
body.find("input[name='CreateTime']").val(item.CreateTime);
body.find("input[name='CallTime']").val(item.CallTime);
body.find("input[name='FinishTime']").val(item.FinishTime);
body.find("input[name='OptName']").val(item.OptName);
body.find("input[name='LineNum']").val(item.LineNum);
body.find("input[name='WindowNum']").val(item.WindowNum);
if (item.BuType == "1") {
body.find("input[name='BuType'][value='1']").prop("checked", true);
}
else {
$(body).find("input[name='BuType'][value='2']").prop("checked", true);
}
body.find("[name='CustTel']").val(item.CustTel);
body.find("[name='Memo']").val(item.Memo);
layer.setTop(layero);
//關鍵點：父窗口調(diào)用子頁面的getformobj函數(shù)，返回子頁面的form對象，然后重繪子頁面的數(shù)據(jù)。
var iframeWin = window[layero.find('iframe')[0]['name']];
var o = iframeWin.getformobj();
o.render();
}
});
}
});
function setstatus(currentrnum,currentid,objtr) {
$.ajax({
url: '../Ajax.ashx', //要請求的url地址
type: 'POST', //請求方法 GET or POST
async: true, //是否使用異步請求的方式
timeout: 5000, //請求超時的時間，以毫秒計
data: {
rnum: currentrnum,
id: currentid
},
dataType: 'json', //預期的服務器返回參數(shù)類型
beforeSend: function () {
},
success: function (data) {
//console.log(data);
switch (currentrnum) {
case "4": $(objtr).css({ "background-color": "red", "color": "#fff" }); $(objtr).find("td[data-field='BuStatusStr']").find("div").text("辦理中"); break;
case "5": $(objtr).css({ "background-color": "#3cb371", "color": "#fff" });$(objtr).find("td[data-field='BuStatusStr']").find("div").text("已完成"); break;
case "6": $(objtr).css({ "background-color": "#ccc", "color": "#fff" }); $(objtr).find("td[data-field='BuStatusStr']").find("div").text("已過期"); break;
}
},
error: function () {
},
complete: function () {
}
});
}
});
</script>
</body>
</html>
以上就是JavaScript實現(xiàn)語音排隊叫號系統(tǒng)的詳細內(nèi)容，更多關于JavaScript語音排隊叫號系統(tǒng)的資料請關注腳本之家其它相關文章！
相關文章
Bootstrap table學習筆記（2） 前后端分頁模糊查詢
這篇文章主要為大家分享了Bootstrap table學習筆記，前后端分頁模糊查詢，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要為大家詳細介紹了Openlayers實現(xiàn)地圖的基本操作，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
在平時工作開發(fā)中，大部分開發(fā)人員都花費大量的時間在維護其他人員的代碼。很難從頭開始開發(fā)新代碼，很多情況下都是以他人成果為基礎的，或者新增修改需求，自己寫的代碼也會被其他開發(fā)人員調(diào)用，所以寫好一份高質(zhì)量可維護的代碼就顯得十分重要。2021-05-05
這篇文章主要為大家詳細介紹了js圖片輪播手動切換效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-11-11
JS前端知識點總結(jié)之內(nèi)置對象，日期對象和定時器相關操作
這篇文章主要介紹了JS前端知識點總結(jié)之內(nèi)置對象，日期對象和定時器相關操作,簡單總結(jié)分析了JS內(nèi)置對象，日期對象和定時器相關對象方法及使用技巧,需要的朋友可以參考下2019-07-07
這篇文章主要為大家詳細介紹了JS canvas實現(xiàn)畫板和簽字板功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-02-02
這篇文章主要介紹了javascript 事件處理示例分享,需要的朋友可以參考下2014-12-12
Bootstrap Metronic完全響應式管理模板之菜單欄學習筆記
這篇文章主要介紹了Bootstrap Metronic完全響應式管理模板之菜單欄學習筆記，感興趣的小伙伴們可以參考一下2016-07-07
zepto中使用swipe.js制作輪播圖附swipeUp,swipeDown不起效果問題
Swipe JS 是一個輕量級的移動滑動組件，支持 1:1 的觸摸移動，阻力以及防滑性能都不錯，可以讓移動web應用展現(xiàn)更多的內(nèi)容，能解決我們對于移動Web對滑動的需求。下面小編給大家介紹zepto中使用swipe.js制作輪播圖附swipeUp,swipeDown不起效果問題，需要朋友可以參考下2015-08-08
這篇文章主要介紹了JS將滑動門改為選項卡（需鼠標點擊）的實現(xiàn)方法,涉及JavaScript頁面元素遍歷及樣式替換的相關技巧,再通過onmouseover與onclick即可分別實現(xiàn)滑動門與選項卡兩種效果,需要的朋友可以參考下2015-09-09