JavaScript to implement voice queuing system
introduceVoice queuing system is widely used in banks, restaurants, hospitals and other scenarios. This system is completed using the Layui framework, with a good front-end experience. It implements role-based permission management, unlimited level expansion of database menus and dynamic control of menu links. The system also implements functions such as code scanning queuing and voice calling. Development language: C# Database: sql server 2017 Development tools: vs2019 Technology: asp.net+layui Key FeaturesLogin interface with verification code and replaceable background. Role-based permission management. The system has the function of printing and exporting data tables. Supports filtering columns and combined queries. The system implements the skin-changing function. Effect display
Key Code
<%@ 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>Nighthawk Queuing System 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>Search Information</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">Business type:</label>
<div class="layui-input-inline">
<select name="BuType" lay-verify="required">
<option value="0" selected="selected">All</option>
<option value="1">Personal business</option>
<option value="2">Corporate business</option>
</select>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">Keywords</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> Search</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"> Add</button>
<button class="layui-btn layui-btn-sm layui-btn-normal data-add-btn" lay-event="edit"> Edit</button>
<button class="layui-btn layui-btn-sm layui-btn-normal data-add-btn" lay-event="delete"> Delete</button>
<button class="layui-btn layui-btn-sm layui-btn-normal data-add-btn" lay-event="showdetail"> View</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">Call number</a>
<a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="classfinish">Complete</a>
<a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="classovertime">Expired</a>
<a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="showview">View</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: 'Tips',
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: 'Creation time' },
{ field: 'CustName', width: 100, title: 'Customer Name'},
{ field: 'CustIDCard', width:200, title: 'ID card' },
{ field: 'CustTel', width: 120, title: 'Customer Phone', edit: 'text'},
{ field: 'LineNum', width: 60, title: 'Line number' },
{ field: 'WindowNumStr', width: 120, title: 'Current window' },
{ field: 'BuType', title: 'Type', width: 120, hide: true },
{ field: 'BuTypeStr', title: 'Type', width: 120},
{ field: 'BuStatusStr', width: 80, title: 'Status'},
{ field: 'Memo', title: 'Memo (click on the cell to change the memo)', event: 'setMemo' },
{ field: 'CallTime', title: 'Last call time', hide: true },
{ field: 'FinishTime', title: 'Business completion time', hide: true },
{ field: 'OptName', title: 'Business processing personnel', hide: true },
{ field: 'OptUserId', title: 'Business processing personnel ID', hide: true },
{ field: 'WindowNum', title: 'Window number', hide: true },
{ field: 'LineNum', title: 'Queue number', hide: true },
{title: 'Operation', 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);
// According to the status field of each row, set the background color of the current row 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'});
}
});
}
});
// Listen for search operations form.on('submit(data-search-btn)', function (data) {
//Execute search reload table.reload('currentTableId', {
page: {
curr: 1
}
, where: {
BuType: data.field.BuType,
SearchKey: data.field.SearchKey
}
}, 'data');
return false;
});
/**
* Toolbar listener events */
table.on('toolbar(currentTableFilter)', function (obj) {
if (obj.event === 'add') { // Listen for add operations var index = layer.open({
title: 'New User',
type: 2,
zIndex: layer.zIndex,
id: 'LAY_layuiproadd', //Set an id to prevent repeated pop-ups 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') { // Listen for delete operations 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('Are you sure you want to delete this record? Once deleted, it cannot be restored!', { icon: 3, title: 'Prompt' }, function (index) {
$.ajax({
url: '../Ajax.ashx', //URL address to request type: 'POST', //Request method GET or POST
async: true, //Whether to use asynchronous request method timeout: 5000, //Request timeout, in milliseconds data: {
rnum: 10,
ids: ids
},
dataType: 'json',
success: function (data) {
console.log(obj);
layer.alert("Deleted successfully");
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 // Here we take iframe as an example, title: 'Edit User'
, area: ['60%', '520px']
, shade: 0.1
, maxmin: true
, id: 'LAY_layuipro' //Set an id to prevent repeated pop-ups, 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);
//Key point: The parent window calls the getformobj function of the child page, returns the form object of the child page, and then redraws the data of the child page.
var iframeWin = window[layero.find('iframe')[0]['name']];
var o = iframeWin.getformobj();
o.render();
}
});
}
else {
layer.msg('Please check the data you want to edit first');
}
} else if (obj.event === 'showdetail') {
var checkStatus = table.checkStatus('currentTableId');
var dataarray = checkStatus.data;
if (dataarray.length > 0) {
layer.open({
type: 2
, title: 'View User'
, area: ['50%', '520px']
, shade: 0.1
, maxmin: true
, id: 'layuiproview' //Set an id to prevent repeated pop-ups, 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);
//Key point: The parent window calls the getformobj function of the child page, returns the form object of the child page, and then redraws the data of the child page.
var iframeWin = window[layero.find('iframe')[0]['name']];
var o = iframeWin.getformobj();
o.render();
}
});
}
else {
layer.msg('Please check the data you want to edit first');
}
}
});
//Monitor cell editing table.on('edit(currentTableFilter)', function (obj) {
var v = obj.value; //Get the modified value var data = obj.data; //Get all key values in the row var CurrentField = obj.field; //Modified field $.ajax({
url: '../Ajax.ashx', //URL address to request type: 'POST', //Request method GET or POST
async: true, //Whether to use asynchronous request method timeout: 5000, //Request timeout, in milliseconds data: {
rnum: "11",
id:data.ID,
value:v,
Field:CurrentField
},
dataType: 'json', // expected server return parameter type beforeSend: function () {
},
success: function (data) {
layer.msg("Modification successful");
},
error: function () {
},
complete: function () {
}
});
});
//Listen to the table checkbox selection table.on('checkbox(currentTableFilter)', function (obj) {
//console.log(obj)
});
function getWindowVoice()
{ // Get the voice in the browser (Chinese + local service)
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; // Sound volume: 1
message.rate = 1; // Speech rate: 1
message.pitch = 1; // Pitch: 1
message.voice = getWindowVoice(); // Use local service to synthesize voice (if it cannot be obtained, please obtain it asynchronously, add a setTimeout)
//synth.cancel(message);
window.speechSynthesis.cancel();
synth.speak(message)
}
/*
* text – the text content to be synthesized, a string * lang – the language to be used, a string, for example: "zh-cn"
* voiceURI – specifies the voice and service you want to use, a string * volume – the volume of the voice, ranging from 0 to 1, the default is 1
* rate – speaking rate, numerical value, the default value is 1, the range is 0.1 to 10, indicating the multiple of speaking rate, for example, 2 means twice the normal speaking rate.
* pitch – represents the pitch of the voice, a numerical value ranging from 0 (minimum) to 2 (maximum). The default value is 1
*/
var s = "Please" + obj.data.LineNum + "Customer No." + obj.data.CustName + "Go to" + obj.data.WindowNumStr + "Window No. to handle business";
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: 'Modify user [' + data.CustName + ']'
, value: data.Memo
}, function (value, index) {
layer.close(index);
$.ajax({
url: '../Ajax.ashx', //URL address to request type: 'POST', //Request method GET or POST
async: true, //Whether to use asynchronous request method timeout: 5000, //Request timeout, in milliseconds data: {
rnum:"7",
id: obj.data.ID,
memo: value
},
dataType: 'json', // expected server return parameter type beforeSend: function () {
},
success: function (data) {
//console.log(data);
//Synchronously update the corresponding value in the cache in the table obj.update({
Memo: value
});
},
error: function () {
},
complete: function () {
}
});
});
}
else if (obj.event === 'showview') {
layer.open({
type: 2
, title: 'View User'
, area: ['50%', '520px']
, shade: 0.1
, maxmin: true
, id: 'layuiproview' //Set an id to prevent repeated pop-ups, 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);
//Key point: The parent window calls the getformobj function of the child page, returns the form object of the child page, and then redraws the data of the child page.
var iframeWin = window[layero.find('iframe')[0]['name']];
var o = iframeWin.getformobj();
o.render();
}
});
}
});
function setstatus(currentrnum,currentid,objtr) {
$.ajax({
url: '../Ajax.ashx', //URL address to request type: 'POST', //Request method GET or POST
async: true, //Whether to use asynchronous request method timeout: 5000, //Request timeout, in milliseconds data: {
rnum: currentrnum,
id: currentid
},
dataType: 'json', // expected server return parameter type 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("Processing"); break;
case "5": $(objtr).css({ "background-color": "#3cb371", "color": "#fff" });$(objtr).find("td[data-field='BuStatusStr']").find("div").text("Completed"); break;
case "6": $(objtr).css({ "background-color": "#ccc", "color": "#fff" }); $(objtr).find("td[data-field='BuStatusStr']").find("div").text("Expired"); break;
}
},
error: function () {
},
complete: function () {
}
});
}
});
</script>
</body>
</html>The above is the details of JavaScript's voice queuing system. For more information about JavaScript's voice queuing system, please pay attention to other related articles on 123WORDPRESS.COM! You may also be interested in:
|
<<: A brief discussion on front-end network, JavaScript optimization and development tips
>>: Detailed steps to install Hadoop cluster under Linux
Recommend
WeChat applet implements a simple handwritten signature component
Table of contents background: need: Effect 1. Ide...
Mysql modify stored procedure related permissions issue
When using MySQL database, you often encounter su...
Detailed explanation of MySQL DEFINER usage
Table of contents Preface: 1.Brief introduction t...
A brief discussion on two methods of achieving semi-transparent background color in CSS
When laying out the page, in order to give users ...
The whole process record of Vue export Excel function
Table of contents 1. Front-end leading process: 2...
Tutorial on using prepare, execute and deallocate statements in MySQL
Preface MySQL officially refers to prepare, execu...
Pure CSS to change the color of the picture
The css technique for changing the color of an im...
vmware installation error VMware Workstation failed to start VMware Authorization Service
Background: I want to install a SAP ECC server an...
HTML table markup tutorial (2): table border attributes BORDER
By default, the border of the table is 0, and we ...
How to use Font Awesome 5 in Vue development projects
Table of contents Install Dependencies Configurat...
Detailed explanation of how to implement login function by combining React with Antd's Form component
Table of contents 1. React combined with Antd to ...
How to remove the dotted border when clicking a link in FireFox
I encountered several browser compatibility issue...
How to modify the port mapping of a running Docker container
Preface When docker run creates and runs a contai...
A brief analysis of MySQL backup and recovery
Table of contents 1. Introduction 2. Simple defin...
How to achieve centered layout in CSS layout
1. Set the parent container to a table and the ch...