语音排队叫号系统广泛用于银行，餐饮，医院等场景。本系统采用layui框架完成，前端体验不错，基于角色实现了权限管理，实现了数据库菜单无限级扩展和菜单链接动态控制，系统实现扫码排队，语音叫号等功能。
开发语言：c#
数据库：sql rver2017
开发工具：vs2019
技术：asp.net+layui
带验证码的登录界面，背景可替换。
基于角色的权限管理。
系统具有打印和导出数据表格的功能。
支持筛选列和组合查询。
系统实现换肤功能。
<%@ 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="rver"><meta http-equiv="content-type" content="text/html; chart=utf-8"/><title>夜鹰排队叫号系统v1.0</title><meta chart="utf-8"/><meta name="renderer" content="webkit"/><meta http-equiv="x-ua-com小211大学名单patible" 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"><fieldt class="table-arch-fieldt"><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">业务类型：</label><div class="layui-input-inline"><lect name="butype" lay-verify="required"><option value="0" lected="lected">全部</option><option value="1">个人业务</option><option value="2">对公业务</option> </lect> </div></div><div class="layui-inline"><label class="layui-form-label">关键字</label><div class="layui-input-inline"><input type="text" name="archkey" 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-arch-btn"><i class="layui-icon"></i> 搜 索</button></div></div></form></div></fieldt><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" chart="utf-8"></script><script>layui.u(['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", widt历史的选择读后感h: 50 }, { field: 'id', width: 80, title: 'id' },{ field: 'createtime', width: 200, title: '创建时间' },{ 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: '状态'}, { field: 'memo', title: '备注(点击单元格改备注)', event: 'tmemo' },{ field: 'calltime', title: '最后一次叫号时间', hide: true },{ field: 'finishtime', title: '业务完成时间', hide: true },{ field: 'optname', title: '业务办理人员',hide: true },{ field: 'opturid', title: '业务办理人员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);//根据每一行的status字段，设置当前行的背景颜色if (value.bustatus =="1") {$('.layui-table tr[data-index="' + i + '"]').css({ 'background-color': 'red','color':'#fff'});} el if (value.bustatus =="2") {$('.layui-table tr[data-index="' + i + '"]').css({ 'background-color': '#3cb371', 'color': '#fff'});} el if (value.bustatus == "3"){$('.layui-table tr[data-index="' + i + '"]').css({ 'background-color': '#ccc', 'color': '#fff'});}});} });// 监听搜索操作form.on('submit(data-arch-btn)', function (data) {//执行搜索重载table.reload('currenttableid', {page: {curr: 1}, where: {butype: data.field.butype,archkey: data.field.archkey}}, 'data');return fal;});/*** toolbar监听事件*/table.on('toolbar(currenttablefilter)', function (obj) {if (obj.event === 'add') { // 监听添加操作var index = layer.open({title: '新增用户',type: 2,zindex: layer.zindex,id: 'lay_layuiproadd', //设定一个id，防止重复弹出shade: 0.1,maxmin: true,// shadeclo: true,area: ['60%', '520px'],content: '../page/table/tblineupadd.aspx',success: function (layero, index) {layer.ttop(layero);}});$(window).on("resize", function () {layer.full(index);});} el if (obj.event === 'delete') { // 监听删除操作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 postasync: true, //是否使用异步请求的方式timeout: 5000, //请求超时的时间，以毫秒计data: {rnum: 10,ids: ids},datatype: 'json',success: function (data) {console.log(obj);layer.alert("删除成功");table.reload('currenttableid', {})}});});} el if (obj.event === 'edit') {var checkstatus = table.checkstatus('currenttableid');var dataarray = checkstatus.data;console.log(dataarray);if (dataarray.len差旅费报销制度gth > 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);}el {$(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.ttop(layero);//关键点：父窗口调用子页面的getformobj函数，返回子页面的form对象，然后重绘子页面的数据。var iframewin = window[layero.find('iframe')[0]['name']];var o = iframewin.getformobj();o.render();}});}el {layer.msg('请先勾选一条要编辑的数据');}} el 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);}el {$(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.ttop(layero);//关键点：父窗口调用子页面的getformobj函数，返回子页面的form对象，然后重绘子页面的数据。var iframewin = window[layero.find('iframe')[0]['name']];var o = iframewin.getformobj();o.render();}});}el {layer.msg('请先勾选一条要编辑的数据');}}});//监听单元格编辑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 postasync: true, //是否使用异步请求的方式timeout: 5000, //请求超时的时间，以毫秒计data: {rnum: "11",id:data.id,value:v,field:currentfield},datatype: 'json', //预期的服务器返回参数类型beforend: function () {},success: function (data) {layer.msg("修改成功");},error: function () {},complete: function () {}});});//监听表格复选框选择table.on('checkbox(currenttablefilter)', function (obj) {//console.log(obj)});function getwindowvoice(){ // 获取浏览器中语音 (中文 + 本地服务)return window.speechsynthesis.getvoices().find(item => item.localrvice && item.lang === 'zh-cn');}table.on('tool(currenttablefilter)', function (obj) {var data = obj.data;if (obj.event === 'classnum') {const synth = window.speechsynthesisconst message = new speechsynthesisutterance();function voice_playback(text) {message.text = text;message.lang = 'zh';message.volume = 1; // 声音音量：1message.rate = 1; // 语速：1message.pitch = 1; // 音高：1message.voice = getwindowvoice(); // 使用本地服务合成语音(若是获取不到 请异步获取, 加一个ttimeout)//synth.cancel(message);window.speechsynthesis.cancel();synth.speak(message)}/** text – 要合成的文字内容，字符串* lang – 使用的语言，字符串， 例如：“zh-cn”* voiceuri – 指定希望使用的声音和服务，字符串* volume – 声音的音量，区间范围是0到1，默认是1* rate – 语速，数值，默认值是1，范围是0.1到10，表示语速的倍数，例如2表示正常语速的两倍。* pitch – 表示说话的音高，数值，范围从0（最小）到2（最大）。默认值为1*/var s = "请" + obj.data.linenum + "号顾客" + obj.data.custname + "到" + obj.data.windownumstr + "号窗口办理业务";voice_playback(s);tstatus("4", obj.data.id, obj.tr);return fal;} el if (obj.event === 'classfinish') {tstatus("5", obj.data.id, obj.tr);return fal;} el if (obj.event === 'classovertime') {tstatus("6", obj.data.id, obj.tr);return fal;}el if (obj.event === 'tmemo') {layer.prompt({formtype: 2, title: '修改用户【' + data.custname + '】的备注', value: data.memo}, function (value, index) {layer.clo(index);$.ajax({url: '../ajax.ashx', //要请求的url地址type: 'post', //请求方法 get or postasync: true, //是否使用异步请求的方式timeout: 5000, //请求超时的时间，以毫秒计data: {rnum:"7",id: obj.data.id,memo: value},datatype: 'json', //预期的服务器返回参数类型beforend: function () {},success: function (data) {//console.log(data);//同步更新表格中缓存对应的值obj.update({memo: value});},error: function () {},complete: function () {}});});}el 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);}el {$(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.ttop(layero);//关键点：父窗口调用子页面的getformobj函数，返回子页面的form对象，然后重绘子页面的数据。var iframewin = window[layero.find('iframe')[0]['name']];var o = iframewin.getformobj();o.render();}});}});function tstatus(currentrnum,currentid,objtr) {$.ajax({url: '../ajax.ashx', //要请求的url地址type: 'post', //请求方法 get or postasync: true, //是否使用异步请求的方式timeout: 5000, //请求超时的时间，以毫秒计data: {rnum: currentrnum,id: currentid},datatype: 'json', //预期的服务器返回参数类型beforend: function () {},success: function (data) {//console.log(data);switch (currentrnum) {ca "4": $(objtr).css({ "background-color": "red", "color": "#fff" }); $(objtr).find("td[data-field='bustatusstr']").find("div").text("办理中"); break;ca "5": $(objtr).css({ "background-color": "#3cb371", "color": "#fff" });$(objtr).find("td[data-field='bustatusstr']").find("div").text("已完成"); break;ca "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实现语音排队叫号系统的详细内容，更多关于javascript语音排队叫号系统的资料请关注www.887551.com其它相关文章！
本文发布于:2023-04-04 07:59:07，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/8dcba1ac52e5ed8b2815f3685945bfc3.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：JavaScript实现语音排队叫号系统.doc
本文 PDF 下载地址：JavaScript实现语音排队叫号系统.pdf
| 留言与评论（共有 0 条评论） |
