einführenSprachwarteschlangensysteme werden häufig in Banken, Restaurants, Krankenhäusern und anderen Bereichen eingesetzt. Dieses System wird durch das Layui-Framework mit einer guten Front-End-Erfahrung vervollständigt. Es implementiert rollenbasiertes Berechtigungsmanagement, unbegrenzte Erweiterung von Datenbankmenüs und dynamische Steuerung von Menülinks. Das System implementiert auch Funktionen wie Code-Scan-Warteschlangen und Sprachanrufe. Entwicklungssprache: C# Datenbank: SQL Server 2017 Entwicklungstools: vs2019 Technologie: asp.net+layui HauptmerkmaleAnmeldeoberfläche mit Bestätigungscode und austauschbarem Hintergrund. Rollenbasiertes Berechtigungsmanagement. Das System verfügt über die Funktion zum Drucken und Exportieren von Datentabellen. Unterstützt das Filtern von Spalten und kombinierten Abfragen. Das System implementiert die Hautwechselfunktion. EffektanzeigeSchlüsselcode<%@ 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="Inhaltstyp" content="text/html; charset=utf-8"/> <title>Nighthawk-Warteschlangensystem v1.0</title> <meta charset="utf-8"/> <meta name="renderer" content="webkit"/> <meta http-equiv="X-UA-kompatibel" content="IE=edge,chrome=1"/> <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1, Maximalmaßstab=1"/> <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" rel="externes Nofollow" media="alle"/> <link rel="stylesheet" href="../css/public.css" rel="externes Nofollow" media="alle"/> </Kopf> <Text> <div Klasse="layuimini-container"> <div Klasse="layuimini-main"> <Feldsatz Klasse="Tabellensuchfeldsatz"> <legend>Suchinformationen</legend> <div Stil="Rand: 10px 10px 10px 10px"> <form id="form1" class="layui-form layui-form-pane" action=""> <div Klasse="layui-form-item"> <div Klasse="layui-inline"> <label class="layui-form-label">Geschäftsart:</label> <div Klasse="layui-input-inline"> <Name auswählen="BuType" lay-verify="erforderlich"> <option value="0" selected="selected">Alle</option> <option value="1">Privatgeschäft</option> <option value="2">Unternehmensgeschäft</option> </Auswählen> </div> </div> <div Klasse="layui-inline"> <label class="layui-form-label">Schlüsselwörter</label> <div Klasse="layui-input-inline"> <input type="text" name="Suchschlüssel" autocomplete="off" class="layui-input"/> </div> </div> <div Klasse="layui-inline"> <button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> Suchen</button> </div> </div> </form> </div> </Feldsatz> <script type="text/html" id="toolbarDemo"> <div Klasse="layui-btn-container"> <button class="layui-btn layui-btn-sm layui-btn-normal data-add-btn" lay-event="add"> Hinzufügen</button> <button class="layui-btn layui-btn-sm layui-btn-normal data-add-btn" lay-event="edit"> Bearbeiten</button> <button class="layui-btn layui-btn-sm layui-btn-normal data-add-btn" lay-event="delete"> Löschen</button> <button class="layui-btn layui-btn-sm layui-btn-normal data-add-btn" lay-event="showdetail"> Anzeigen</button> </div> </Skript> <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">Rufnummer</a> <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="classfinish">Abgeschlossen</a> <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="classovertime">Abgelaufen</a> <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="showview">Anzeigen</a> </Skript> </div> <script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script> <Skript> layui.use(['Formular', 'Tabelle'], Funktion () { var $ = layui.jquery; form = layui.form; Tabelle = Layout.Tabelle; Ebene = layout.ebene; Tabelle.render({ Element: "#currentTableId", URL: '../Ajax.ashx?rnum=2', Symbolleiste: '#toolbarDemo', defaultToolbar: ['Filter', 'Exporte', 'Drucken', { Titel: 'Tipps', layEvent: 'LAYTABLE_TIPS', Symbol: „Layui-Symbol-Tipps“ }], ZellenMinBreite: 80, Spalten: [[ { Typ: "Kontrollkästchen", Breite: 50 }, { Feld: 'ID', Breite: 80, Titel: 'ID' }, { Feld: 'Erstellungszeit', Breite: 200, Titel: 'Erstellungszeit' }, { field: 'CustName', width: 100, title: 'Kundenname'}, { Feld: 'CustIDCard', Breite: 200, Titel: 'Personalausweis' }, { Feld: 'CustTel', Breite: 120, Titel: 'Kundentelefon', Bearbeiten: 'Text'}, { field: 'LineNum', width: 60, title: 'Zeilennummer' }, { Feld: 'WindowNumStr', Breite: 120, Titel: 'Aktuelles Fenster' }, { Feld: 'BuType', Titel: 'Typ', Breite: 120, Ausblenden: true }, { Feld: 'BuTypeStr', Titel: 'Typ', Breite: 120}, { Feld: 'BuStatusStr', Breite: 80, Titel: 'Status'}, { field: 'Memo', title: 'Memo (klicken Sie auf die Zelle, um das Memo zu ändern)', event: 'setMemo' }, { field: 'CallTime', title: 'Letzter Anrufzeitpunkt', hide: true }, { field: 'FinishTime', title: 'Geschäftsabschlusszeit', hide: true }, { field: 'OptName', title: 'Geschäftsabwicklungspersonal', hide: true }, { field: 'OptUserId', title: 'Personal-ID für Geschäftsabwicklung', hide: true }, { field: 'WindowNum', title: 'Fensternummer', hide: true }, { field: 'LineNum', title: 'Warteschlangennummer', hide: true }, {Titel: 'Operation', Breite: 300, Symbolleiste: '#currentTableBar', Ausrichtung: "Mitte"} ]], Grenzen: [10, 15, 20, 25, 50, 100], Grenze: 10, Seite: wahr, Haut: 'Linie', fertig(Res, aktuell, Anzahl) { lass Daten = res.data; data.forEach((Wert, i) => { //Konsole.log(Wert.BuStatus); // Entsprechend dem Statusfeld jeder Zeile die Hintergrundfarbe der aktuellen Zeile festlegen if (value.BuStatus == "1") { $('.layui-table tr[data-index="' + i + '"]').css({ 'background-color': 'rot','color':'#fff'}); } sonst wenn (Wert.BuStatus == "2") { $('.layui-table tr[data-index="' + i + '"]').css({ 'background-color': '#3cb371', 'color': '#fff'}); } sonst wenn (Wert.BuStatus == "3"){ $('.layui-table tr[data-index="' + i + '"]').css({ 'background-color': '#ccc', 'color': '#fff'}); } }); } }); // Auf Suchvorgänge warten form.on('submit(data-search-btn)', function (data) { //Suche ausführen reload table.reload('currentTableId', { Seite: { aktuell: 1 } , Wo: { BuType: Daten.Feld.BuType, Suchbegriff: data.field.SearchKey } }, 'Daten'); gibt false zurück; }); /** * Symbolleisten-Listener-Ereignisse */ Tabelle.auf('Werkzeugleiste(aktuellerTabellenfilter)', Funktion (Objekt) { if (obj.event === 'add') { // Auf Additionsvorgänge warten var index = layer.open({ Titel: „Neuer Benutzer“, Typ: 2, zIndex: Ebene.zIndex, id: 'LAY_layuiproadd', //Legen Sie eine ID fest, um wiederholte Popups zu verhindern. Schatten: 0,1, maxmin: wahr, // Schatten schließen: true, Bereich: ['60%', '520px'], Inhalt: '../Seite/Tabelle/TbLineUpAdd.aspx', Erfolg: Funktion (Layero, Index) { layer.setTop(layero); } }); $(window).on("Größe ändern", Funktion () { Ebene.voll(Index); }); } sonst wenn (obj.event === 'delete') { // Auf Löschvorgänge warten var checkStatus = table.checkStatus('currentTableId'); var Datenarray = checkStatus.data; var-IDs = "0"; für (var i = 0; i < Datenarray.Länge; i++) { ids += "," + Datenarray[i].ID; } IDs += ",0"; layer.confirm('Möchten Sie diesen Datensatz wirklich löschen? Nach dem Löschen kann er nicht wiederhergestellt werden!', { icon: 3, title: 'Prompt' }, function (index) { $.ajax({ url: '../Ajax.ashx', //URL-Adresse zum Anfordern des Typs: 'POST', //Anforderungsmethode GET oder POST async: true, //Gibt an, ob die asynchrone Anforderungsmethode verwendet werden soll. timeout: 5000, //Anforderungstimeout in Millisekunden. data: { Anzahl: 10, IDs: IDs }, Datentyp: "json", Erfolg: Funktion (Daten) { konsole.log(obj); layer.alert("Erfolgreich gelöscht"); Tabelle.neu laden('currentTableId', {}) } }); }); } sonst wenn (Objekt.Ereignis === 'bearbeiten') { var checkStatus = Tabelle.checkStatus('currentTableId'); var Datenarray = checkStatus.data; konsole.log(Datenarray); if (Datenarray.Länge > 0) { Schicht.öffnen({ Typ: 2 // Hier nehmen wir ein Iframe als Beispiel, Titel: „Benutzer bearbeiten“ , Bereich: ['60%', '520px'] , Farbton: 0,1 , maxmin: wahr , ID: ‚LAY_layuipro‘ // Legen Sie eine ID fest, um wiederholte Popups zu verhindern, Inhalt: ‚../page/table/TbLineUpEdit.aspx‘ , zIndex: layer.zIndex , Erfolg: Funktion (Layero, Index) { var item = Datenarray[0]; var body = layer.getChildFrame('body', index); konsole.log(o); body.find("[name='rid']").val(item.ID); body.find("[name='Kundenname']").val(item.Kundenname); body.find("input[name='CustIDCard']").val(item.CustIDCard); Konsole.log(Element.BuType); Konsole.log(Body.find("Eingabe[Name='BuType'][Wert='2']")); wenn (item.BuType == "1") { body.find("Eingabe[name='BuType'][Wert='1']").prop("aktiviert", true); } anders { $(body).find("Eingabe[name='BuType'][Wert='2']").prop("aktiviert", true); } body.find("[name='CustTel']").val(item.CustTel); body.find("[name='Memo']").val(item.Memo); layer.setTop(layero); //Wichtiger Punkt: Das übergeordnete Fenster ruft die Funktion getformobj der untergeordneten Seite auf, gibt das Formularobjekt der untergeordneten Seite zurück und zeichnet dann die Daten der untergeordneten Seite neu. var iframeWin = Fenster[layero.find('iframe')[0]['name']]; var o = iframeWin.getformobj(); o.render(); } }); } anders { layer.msg('Bitte überprüfen Sie zuerst die Daten, die Sie bearbeiten möchten'); } } sonst wenn (obj.event === 'showdetail') { var checkStatus = Tabelle.checkStatus('currentTableId'); var Datenarray = checkStatus.data; if (Datenarray.Länge > 0) { Schicht.öffnen({ Typ: 2 , Titel: „Benutzer anzeigen“ , Bereich: ['50%', '520px'] , Farbton: 0,1 , maxmin: wahr , ID: ‚layuiproview‘ // Legen Sie eine ID fest, um wiederholte Popups zu verhindern, Inhalt: ‚../Seite/Tabelle/TbLineUpView.aspx‘ , zIndex: layer.zIndex , Erfolg: Funktion (Layero, Index) { var item = Datenarray[0]; var body = layer.getChildFrame('body', index); konsole.log(Element); body.find("[name='rid']").val(item.ID); body.find("[name='Kundenname']").val(item.Kundenname); body.find("input[name='CustIDCard']").val(item.CustIDCard); body.find("input[name='Erstellungszeit']").val(item.Erstellungszeit); body.find("Eingabe[name='Anrufzeit']").val(item.Anrufzeit); body.find("input[name='Zielzeit']").val(item.Zielzeit); body.find("input[name='OptName']").val(item.OptName); body.find("input[name='LineNum']").val(item.LineNum); body.find("input[name='FensterNum']").val(item.FensterNum); wenn (item.BuType == "1") { body.find("Eingabe[name='BuType'][Wert='1']").prop("aktiviert", true); } anders { $(body).find("Eingabe[name='BuType'][Wert='2']").prop("aktiviert", true); } body.find("[name='CustTel']").val(item.CustTel); body.find("[name='Memo']").val(item.Memo); layer.setTop(layero); //Wichtiger Punkt: Das übergeordnete Fenster ruft die Funktion getformobj der untergeordneten Seite auf, gibt das Formularobjekt der untergeordneten Seite zurück und zeichnet dann die Daten der untergeordneten Seite neu. var iframeWin = Fenster[layero.find('iframe')[0]['name']]; var o = iframeWin.getformobj(); o.render(); } }); } anders { layer.msg('Bitte überprüfen Sie zuerst die Daten, die Sie bearbeiten möchten'); } } }); //Zellenbearbeitung überwachen table.on('edit(currentTableFilter)', function (obj) { var v = obj.value; //Den geänderten Wert abrufen var data = obj.data; //Alle Schlüsselwerte in der Zeile abrufen var CurrentField = obj.field; //Geändertes Feld $.ajax({ url: '../Ajax.ashx', //URL-Adresse zum Anfordern des Typs: 'POST', //Anforderungsmethode GET oder POST async: true, //Gibt an, ob die asynchrone Anforderungsmethode verwendet werden soll. timeout: 5000, //Anforderungstimeout in Millisekunden. data: { rnum: "11", id:Daten.ID, Wert: v, Feld:AktuellesFeld }, dataType: 'json', // erwarteter Server-Rückgabeparametertyp beforeSend: function () { }, Erfolg: Funktion (Daten) { layer.msg("Änderung erfolgreich"); }, Fehler: Funktion () { }, komplett: Funktion () { } }); }); //Listen Sie die Kontrollkästchenauswahl der Tabelle table.on('checkbox(currentTableFilter)', function (obj) { //Konsole.log(Objekt) }); Funktion getWindowVoice() { // Stimme im Browser abrufen (Chinesisch + lokaler Dienst) gibt window.speechSynthesis.getVoices().find zurück (Element => item.localService && item.lang === 'zh-CN'); } Tabelle.auf('tool(currentTableFilter)', Funktion (Objekt) { var Daten = Objekt.Daten; wenn (Objekt.Ereignis === 'Klassennummer') { const synth = window.speechSynthesis const message = neue SpeechSynthesisUtterance(); Funktion Sprachwiedergabe(Text) { Nachricht.text = Text; message.lang = "zh"; message.volume = 1; // Lautstärke: 1 message.rate = 1; // Sprechgeschwindigkeit: 1 message.pitch = 1; // Tonhöhe: 1 message.voice = getWindowVoice(); //Verwenden Sie einen lokalen Dienst, um die Stimme zu synthetisieren (wenn sie nicht abgerufen werden kann, beziehen Sie sie bitte asynchron und fügen Sie ein setTimeout hinzu) //synth.abbrechen(Nachricht); window.speechSynthesis.abbrechen(); synth.speak(Nachricht) } /* * text – der zu synthetisierende Textinhalt, eine Zeichenfolge * lang – die zu verwendende Sprache, eine Zeichenfolge, zum Beispiel: „zh-cn“ * voiceURI – gibt die Stimme und den Dienst an, den Sie verwenden möchten, eine Zeichenfolge * volume – die Lautstärke der Stimme, von 0 bis 1, der Standardwert ist 1 * Rate – Sprechgeschwindigkeit, numerischer Wert, der Standardwert ist 1, der Bereich reicht von 0,1 bis 10 und gibt das Vielfache der Sprechgeschwindigkeit an, beispielsweise bedeutet 2 das Doppelte der normalen Sprechgeschwindigkeit. * Tonhöhe – stellt die Tonhöhe der Stimme dar, ein numerischer Wert zwischen 0 (Minimum) und 2 (Maximum). Der Standardwert ist 1 */ var s = "Bitte" + obj.data.LineNum + "Kunden-Nr." + obj.data.CustName + "Gehe zu" + obj.data.WindowNumStr + "Fenster-Nr. zur Geschäftsabwicklung"; Sprachwiedergabe(en); setstatus("4", obj.data.ID, obj.tr); gibt false zurück; } sonst wenn (obj.event === 'classfinish') { setstatus("5", obj.data.ID, obj.tr); gibt false zurück; } sonst wenn (Objekt.Ereignis === 'Klassenüberzeit') { setstatus("6", obj.data.ID, obj.tr); gibt false zurück; } sonst wenn (Objekt.Ereignis === 'setMemo') { layer.prompt({ formTyp: 2 , Titel: 'Benutzer ändern [' + data.CustName + ']' , Wert: data.Memo }, Funktion (Wert, Index) { Ebene.schließen(Index); $.ajax({ url: '../Ajax.ashx', //URL-Adresse zum Anfordern des Typs: 'POST', //Anforderungsmethode GET oder POST async: true, //Gibt an, ob die asynchrone Anforderungsmethode verwendet werden soll. timeout: 5000, //Anforderungstimeout in Millisekunden. data: { rnum:"7", ID: obj.data.ID, Notiz: Wert }, dataType: 'json', // erwarteter Server-Rückgabeparametertyp beforeSend: function () { }, Erfolg: Funktion (Daten) { //Konsole.log(Daten); //Aktualisiere synchron den entsprechenden Wert im Cache in der Tabelle obj.update({ Notiz: Wert }); }, Fehler: Funktion () { }, komplett: Funktion () { } }); }); } sonst wenn (Objekt.Ereignis === 'showview') { Schicht.öffnen({ Typ: 2 , Titel: „Benutzer anzeigen“ , Bereich: ['50%', '520px'] , Farbton: 0,1 , maxmin: wahr , ID: ‚layuiproview‘ // Legen Sie eine ID fest, um wiederholte Popups zu verhindern, Inhalt: ‚../Seite/Tabelle/TbLineUpView.aspx‘ , zIndex: layer.zIndex , Erfolg: Funktion (Layero, Index) { var item = obj.data; var body = layer.getChildFrame('body', index); body.find("[name='rid']").val(item.ID); body.find("[name='Kundenname']").val(item.Kundenname); body.find("input[name='CustIDCard']").val(item.CustIDCard); body.find("input[name='Erstellungszeit']").val(item.Erstellungszeit); body.find("Eingabe[name='Anrufzeit']").val(item.Anrufzeit); body.find("input[name='Zielzeit']").val(item.Zielzeit); body.find("input[name='OptName']").val(item.OptName); body.find("input[name='LineNum']").val(item.LineNum); body.find("input[name='FensterNum']").val(item.FensterNum); wenn (item.BuType == "1") { body.find("Eingabe[name='BuType'][Wert='1']").prop("aktiviert", true); } anders { $(body).find("Eingabe[name='BuType'][Wert='2']").prop("aktiviert", true); } body.find("[name='CustTel']").val(item.CustTel); body.find("[name='Memo']").val(item.Memo); layer.setTop(layero); //Wichtiger Punkt: Das übergeordnete Fenster ruft die Funktion getformobj der untergeordneten Seite auf, gibt das Formularobjekt der untergeordneten Seite zurück und zeichnet dann die Daten der untergeordneten Seite neu. var iframeWin = Fenster[layero.find('iframe')[0]['name']]; var o = iframeWin.getformobj(); o.render(); } }); } }); Funktion setstatus(aktuelleNummer,aktuelleID,Objekt) { $.ajax({ url: '../Ajax.ashx', //URL-Adresse zum Anfordern des Typs: 'POST', //Anforderungsmethode GET oder POST async: true, //Gibt an, ob die asynchrone Anforderungsmethode verwendet werden soll. timeout: 5000, //Anforderungstimeout in Millisekunden. data: { rnum: aktuellernum, ID: aktuelle ID }, dataType: 'json', // erwarteter Server-Rückgabeparametertyp beforeSend: function () { }, Erfolg: Funktion (Daten) { //Konsole.log(Daten); Schalter (aktuelle Nummer) { Fall "4": $(objtr).css({ "Hintergrundfarbe": "rot", "Farbe": "#fff" }); $(objtr).find("td[Datenfeld='BuStatusStr']").find("div").text("Wird verarbeitet"); Unterbrechung; Fall "5": $(objtr).css({ "Hintergrundfarbe": "#3cb371", "Farbe": "#fff" });$(objtr).find("td[Datenfeld='BuStatusStr']").find("div").text("Abgeschlossen"); Unterbrechung; Fall "6": $(objtr).css({ "Hintergrundfarbe": "#ccc", "Farbe": "#fff" }); $(objtr).find("td[Datenfeld='BuStatusStr']").find("div").text("Abgelaufen"); Unterbrechung; } }, Fehler: Funktion () { }, komplett: Funktion () { } }); } }); </Skript> </body> </html> Oben finden Sie Einzelheiten zum Sprachwarteschlangensystem von JavaScript. Weitere Informationen zum Sprachwarteschlangensystem von JavaScript finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM! Das könnte Sie auch interessieren:
|
<<: Eine kurze Diskussion über Front-End-Netzwerk, JavaScript-Optimierung und Entwicklungstipps
>>: Detaillierte Schritte zur Installation eines Hadoop-Clusters unter Linux
Jede dieser 16 Sites ist eine sorgfältige Lektüre ...
1. Installieren Sie Docker. Referenz-URL: Docker-...
Einige im Projekt verwendete Sonderzeichen und Sy...
Vor Kurzem hat das Unternehmen die Anforderung ge...
1. Vorbereitung vor der Installation 1. Laden Sie...
Was ist eine HTML-Datei? HTML steht für Hyper Text...
Inhaltsverzeichnis JavaScript importieren 1. Inte...
Vorwort Ich habe gerade einen neuen VPS gekauft. ...
Mir war langweilig und plötzlich fiel mir die Impl...
Dieser Artikel veranschaulicht anhand eines Beisp...
1. Überlauf: versteckt Überlauf versteckt Wenn fü...
Inhaltsverzeichnis Vorwort Text Primitive Typen P...
String-Extraktion ohne Trennzeichen Fragenanforde...
Lassen Sie mich zunächst erklären, dass wir uns o...
SpringBoot ist wie eine riesige Python, die sich ...