音声キューイングシステムを実装するためのJavaScript
導入音声キューイングシステムは、銀行、レストラン、病院などのさまざまな場面で広く使用されています。このシステムは、Layui フレームワークを使用して完成しており、フロントエンドのエクスペリエンスが優れています。ロールベースの権限管理、データベース メニューの無制限のレベル拡張、メニュー リンクの動的制御を実装しています。また、コード スキャン キューイングや音声通話などの機能も実装されています。 開発言語: C# データベース: sql server 2017 開発ツール: 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="サーバー">
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8"/>
<title>Nighthawk キューイング システム v1.0</title>
<メタ文字セット="utf-8"/>
<meta name="レンダラー" content="webkit"/>
<meta http-equiv="X-UA-compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=デバイス幅、初期スケール=1、最大スケール=1"/>
<link rel="スタイルシート" href="../lib/layui-v2.6.3/css/layui.css" rel="外部nofollow" media="all"/>
<link rel="スタイルシート" href="../css/public.css" rel="外部nofollow" media="all"/>
</head>
<本文>
<div class="layuimini-container">
<div class="layuimini-main">
<フィールドセットクラス="テーブル検索フィールドセット">
<legend>検索情報</legend>
<div スタイル="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">
<select name="BuType" lay-verify="必須">
<option value="0" selected="selected">すべて</option>
<option value="1">個人的な用事</option>
<option value="2">法人向けビジネス</option>
</選択>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">キーワード</label>
<div class="layui-input-inline">
<input type="text" name="検索キー" 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>
</フォーム>
</div>
</フィールドセット>
<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>
</スクリプト>
<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>
</スクリプト>
</div>
<script src="../lib/layui-v2.6.3/layui.js" 文字セット="utf-8"></script>
<スクリプト>
layui.use(['フォーム', 'テーブル'], 関数() {
var $ = layui.jquery;
フォーム = layui.form;
テーブル = layui.table;
レイヤー = layui.layer;
テーブルをレンダリング({
要素: '#currentTableId',
url: '../Ajax.ashx?rnum=2',
ツールバー: '#toolbarDemo',
デフォルトツールバー: ['フィルター', 'エクスポート', '印刷', {
タイトル: 「ヒント」
layEvent: 'LAYTABLE_TIPS'、
アイコン: 'layui-icon-tips'
}],
セル最小幅: 80,
列: [[
{ タイプ: "チェックボックス", 幅: 50 },
{ フィールド: 'ID'、幅: 80、タイトル: 'ID' },
{ フィールド: 'CreateTime'、幅: 200、タイトル: '作成時間' },
{ フィールド: 'CustName'、幅: 100、タイトル: '顧客名'}、
{ フィールド: 'CustIDCard'、幅:200、タイトル: 'ID カード' },
{ フィールド: 'CustTel'、幅: 120、タイトル: '顧客電話番号'、編集: 'テキスト'},
{ フィールド: 'LineNum'、幅: 60、タイトル: '行番号' },
{ フィールド: 'WindowNumStr'、幅: 120、タイトル: '現在のウィンドウ' },
{ フィールド: 'BuType'、タイトル: 'Type'、幅: 120、非表示: true },
{ フィールド: 'BuTypeStr'、タイトル: 'Type'、幅: 120}、
{ フィールド: 'BuStatusStr'、幅: 80、タイトル: 'ステータス'},
{ フィールド: 'メモ'、タイトル: 'メモ (メモを変更するにはセルをクリックします)'、イベント: 'setMemo' },
{ フィールド: 'CallTime'、タイトル: '最終通話時間'、非表示: true },
{ フィールド: 'FinishTime'、タイトル: '業務完了時間'、非表示: true },
{ フィールド: 'OptName'、タイトル: '業務処理担当者'、非表示: true },
{ フィールド: 'OptUserId'、タイトル: '業務処理担当者 ID'、非表示: true }、
{ フィールド: 'WindowNum'、タイトル: 'ウィンドウ番号'、非表示: true },
{ フィールド: 'LineNum'、タイトル: 'キュー番号'、非表示: true },
{title: '操作'、幅:300、ツールバー: '#currentTableBar'、位置合わせ: "center"}
]],
制限: [10, 15, 20, 25, 50, 100],
制限: 10,
ページ: true、
スキン: 'line'、
完了(res, curr, count) {
データを res.data とします。
data.forEach((値, i) => {
//console.log(値.BuStatus);
// 各行のステータスフィールドに応じて、現在の行の背景色を設定します。if (value.BuStatus == "1") {
$('.layui-table tr[data-index="' + i + '"]').css({ 'background-color': 'red','color':'#fff'});
} そうでない場合 (value.BuStatus == "2") {
$('.layui-table tr[data-index="' + i + '"]').css({ 'background-color': '#3cb371', 'color': '#fff'});
} そうでない場合 (value.BuStatus == "3"){
$('.layui-table tr[data-index="' + i + '"]').css({ 'background-color': '#ccc', 'color': '#fff'});
}
});
}
});
// 検索操作をリッスンする form.on('submit(data-search-btn)', function (data) {
//検索を実行する reload table.reload('currentTableId', {
ページ: {
通貨: 1
}
、 どこ： {
BuType: データフィールド.BuType、
検索キー: data.field.SearchKey
}
}、 'データ'）;
false を返します。
});
/**
* ツールバーリスナーイベント */
table.on('toolbar(currentTableFilter)', 関数(obj) {
if (obj.event === 'add') { // 追加操作をリッスンする var index = layer.open({
タイトル: 「新規ユーザー」
タイプ: 2,
zIndex: レイヤー.zIndex、
id: 'LAY_layuiproadd', // ポップアップが繰り返し表示されないように ID を設定します shade: 0.1,
最大最小値: true、
// シェードクローズ: true,
面積: ['60%', '520px'],
コンテンツ: '../page/table/TbLineUpAdd.aspx',
成功: 関数 (layero, インデックス) {
レイヤーをトップに設定します。
}
});
$(window).on("サイズ変更", 関数() {
レイヤー.full(インデックス);
});
} else if (obj.event === 'delete') { // 削除操作をリッスンします var checkStatus = table.checkStatus('currentTableId');
var データ配列 = checkStatus.data;
var ids = "0";
(var i = 0; i < データ配列の長さ; i++) {
ids += "," + データ配列[i].ID;
}
ids + = ",0";
layer.confirm('このレコードを削除してもよろしいですか? 一度削除すると復元できません!', { icon: 3, title: 'Prompt' }, function (index) {
$.ajax({
url: '../Ajax.ashx', //リクエストするURLアドレス type: 'POST', //リクエストメソッド GET または POST
async: true, //非同期リクエストメソッドを使用するかどうか timeout: 5000, //リクエストタイムアウト（ミリ秒単位） data: {
数: 10,
id: id
},
データ型: 'json',
成功: 関数 (データ) {
コンソールにログ出力します。
layer.alert("正常に削除されました");
テーブルを再読み込みします('currentTableId', {})
}
});
});
} そうでない場合 (obj.event === 'edit') {
var checkStatus = table.checkStatus('currentTableId');
var データ配列 = checkStatus.data;
console.log(データ配列);
データ配列の長さが0より大きい場合
レイヤーを開く({
type: 2 // ここでは iframe を例にとり、title: 'Edit User' とします。
、面積: ['60%', '520px']
、シェード: 0.1
、最大最小: true
, id: 'LAY_layuipro' // ポップアップが繰り返し表示されないように ID を設定します。content: '../page/table/TbLineUpEdit.aspx'
、zIndex: レイヤー.zIndex
、成功: 関数 (layero, インデックス) {
var 項目 = データ配列[0];
var body = layer.getChildFrame('body', インデックス);
コンソールにログ出力します。
body.find("[name='rid']").val(item.ID);
body.find("[name='CustName']").val(item.CustName);
body.find("input[name='CustIDCard']").val(item.CustIDCard);
コンソールにログ出力します。
console.log(body.find("入力[名前='BuType'][値='2']"));
if (item.BuType == "1") {
body.find("input[name='BuType'][value='1']").prop("checked", true);
}
それ以外 {
$(body).find("input[name='BuType'][value='2']").prop("チェック済み", true);
}
body.find("[name='CustTel']").val(item.CustTel);
body.find("[name='メモ']").val(item.メモ);
レイヤーをトップに設定します。
//重要なポイント: 親ウィンドウは子ページの getformobj 関数を呼び出し、子ページのフォーム オブジェクトを返してから、子ページのデータを再描画します。
var iframeWin = window[layero.find('iframe')[0]['name']];
var o = iframeWin.getformobj();
o.レンダリング();
}
});
}
それ以外 {
layer.msg('まず編集したいデータを確認してください');
}
} そうでない場合 (obj.event === 'showdetail') {
var checkStatus = table.checkStatus('currentTableId');
var データ配列 = checkStatus.data;
データ配列の長さが0より大きい場合
レイヤーを開く({
タイプ: 2
、タイトル:「ユーザーを表示」
、面積: ['50%', '520px']
、シェード: 0.1
、最大最小: true
, id: 'layuiproview' // ポップアップが繰り返し表示されないように ID を設定します。content: '../page/table/TbLineUpView.aspx'
、zIndex: レイヤー.zIndex
、成功: 関数 (layero, インデックス) {
var 項目 = データ配列[0];
var body = layer.getChildFrame('body', インデックス);
console.log(アイテム);
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);
}
それ以外 {
$(body).find("input[name='BuType'][value='2']").prop("チェック済み", true);
}
body.find("[name='CustTel']").val(item.CustTel);
body.find("[name='メモ']").val(item.メモ);
レイヤーをトップに設定します。
//重要なポイント: 親ウィンドウは子ページの getformobj 関数を呼び出し、子ページのフォーム オブジェクトを返してから、子ページのデータを再描画します。
var iframeWin = window[layero.find('iframe')[0]['name']];
var o = iframeWin.getformobj();
o.レンダリング();
}
});
}
それ以外 {
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 または POST
async: true, //非同期リクエストメソッドを使用するかどうか timeout: 5000, //リクエストタイムアウト（ミリ秒単位） data: {
rnum: "11",
id:データ.ID、
値:v,
フィールド:現在のフィールド
},
dataType: 'json', // 予想されるサーバー戻りパラメータ型 beforeSend: function () {
},
成功: 関数 (データ) {
layer.msg("変更に成功しました");
},
エラー: 関数 () {
},
完了: 関数 () {
}
});
});
//テーブルのチェックボックスの選択をリッスンする table.on('checkbox(currentTableFilter)', function (obj) {
//コンソール.log(obj)
});
関数 getWindowVoice()
{ // ブラウザで音声を取得（中国語 + ローカルサービス）
window.speechSynthesis.getVoices().find(item => item.localService && item.lang === 'zh-CN'); を返します。
}
table.on('tool(currentTableFilter)', 関数(obj) {
var データ = obj.data;
if (obj.event === 'クラス番号') {
const synth = window.speechSynthesis
const メッセージ = 新しい SpeechSynthesisUtterance();
関数 voice_playback(テキスト) {
message.text = テキスト;
メッセージ.lang = 'zh';
message.volume = 1; // 音量: 1
message.rate = 1; // 音声速度: 1
message.pitch = 1; // ピッチ: 1
message.voice = getWindowVoice(); // ローカルサービスを使用して音声を合成します（取得できない場合は非同期で取得し、setTimeout を追加してください）
//synth.cancel(メッセージ);
ウィンドウをキャンセルします。
synth.speak(メッセージ)
}
/*
* text – 合成するテキストコンテンツ、文字列 * lang – 使用する言語、文字列、例: "zh-cn"
* voiceURI – 使用する音声とサービスを指定する文字列 * volume – 音声の音量。0～1の範囲で、デフォルトは1です
* 速度 - 発話速度、数値、デフォルト値は 1、範囲は 0.1 ～ 10 で、発話速度の倍数を示します。たとえば、2 は通常の発話速度の 2 倍を意味します。
* ピッチ – 音声のピッチを表します。数値の範囲は 0 (最小) から 2 (最大) です。デフォルト値は1です
*/
var s = "お願いします" + obj.data.LineNum + "顧客番号" + obj.data.CustName + "移動" + obj.data.WindowNumStr + "業務を処理する窓口番号";
音声再生(複数可);
ステータスを設定します("4", obj.data.ID, obj.tr);
false を返します。
} そうでない場合 (obj.event === 'classfinish') {
ステータスを設定します("5", obj.data.ID, obj.tr);
false を返します。
} そうでない場合 (obj.event === 'classovertime') {
ステータスを設定します("6", obj.data.ID, obj.tr);
false を返します。
}
そうでない場合 (obj.event === 'setMemo') {
レイヤー.プロンプト({
フォームタイプ: 2
、タイトル: 'ユーザー [' + data.CustName + '] の変更'
、値: data.Memo
}, 関数 (値, インデックス) {
レイヤーを閉じます(インデックス);
$.ajax({
url: '../Ajax.ashx', //リクエストするURLアドレス type: 'POST', //リクエストメソッド GET または POST
async: true, //非同期リクエストメソッドを使用するかどうか timeout: 5000, //リクエストタイムアウト（ミリ秒単位） data: {
rnum:"7",
id: obj.data.ID、
メモ: 値
},
dataType: 'json', // 予想されるサーバー戻りパラメータ型 beforeSend: function () {
},
成功: 関数 (データ) {
//コンソール.log(データ);
//テーブル内のキャッシュ内の対応する値を同期的に更新します。obj.update({
メモ: 値
});
},
エラー: 関数 () {
},
完了: 関数 () {
}
});
});
}
そうでない場合 (obj.event === 'showview') {
レイヤーを開く({
タイプ: 2
、タイトル:「ユーザーを表示」
、面積: ['50%', '520px']
、シェード: 0.1
、最大最小: true
, id: 'layuiproview' // ポップアップが繰り返し表示されないように ID を設定します。content: '../page/table/TbLineUpView.aspx'
、zIndex: レイヤー.zIndex
、成功: 関数 (layero, インデックス) {
var item = obj.data;
var body = layer.getChildFrame('body', インデックス);
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);
}
それ以外 {
$(body).find("input[name='BuType'][value='2']").prop("チェック済み", true);
}
body.find("[name='CustTel']").val(item.CustTel);
body.find("[name='メモ']").val(item.メモ);
レイヤーをトップに設定します。
//重要なポイント: 親ウィンドウは子ページの getformobj 関数を呼び出し、子ページのフォーム オブジェクトを返してから、子ページのデータを再描画します。
var iframeWin = window[layero.find('iframe')[0]['name']];
var o = iframeWin.getformobj();
o.レンダリング();
}
});
}
});
関数 setstatus(currentrnum,currentid,objtr) {
$.ajax({
url: '../Ajax.ashx', //リクエストするURLアドレス type: 'POST', //リクエストメソッド GET または POST
async: true, //非同期リクエストメソッドを使用するかどうか timeout: 5000, //リクエストタイムアウト（ミリ秒単位） data: {
rnum: 現在のrnum、
id: 現在のid
},
dataType: 'json', // 予想されるサーバー戻りパラメータ型 beforeSend: function () {
},
成功: 関数 (データ) {
//コンソール.log(データ);
スイッチ (現在のrnum) {
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;
}
},
エラー: 関数 () {
},
完了: 関数 () {
}
});
}
});
</スクリプト>
</本文>
</html>以上がJavaScriptの音声キューイングシステムの詳細です。JavaScriptの音声キューイングシステムの詳細については、123WORDPRESS.COMの他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: Linux で Hadoop クラスターをインストールするための詳細な手順
>>: CSS ワールド - コード実践: 画像の Alt 情報の表示
推薦する
nginx ロードバランシングを介して https にリダイレクトする方法
ウェブ上で証明書とキーをコピーするscp -rp -P52113 /application/ngin...
JavaScript ドラッグタイム ドラッグケースの詳細な説明
目次DragEvent インターフェースデータ転送インターフェースの概要DataTransfer の...
MySQL ストレステストツール Mysqlslap の使用
1. MySQL独自のストレステストツールMysqlslap mysqlslap は、mysql に...
Thinkpad VMware に仮想マシンをインストールすると、「このホストは Intel VT-x をサポートしていますが、Intel VT-x は無効になっています」というメッセージが表示される (問題解決)
今日、VMware を使用してマシンに新しい仮想マシンをインストールしていたところ、次のように「この...
マウス追従ゲームを実現するjs
この記事では、マウス追従ゲームを実装するためのjsの具体的なコードを参考までに共有します。具体的な内...
要素UIテーブルはドロップダウンフィルタリング機能を実現します
この記事の例では、要素UIテーブルにドロップダウンフィルタリングを実装するための具体的なコードを参考...
Dockerの急速な拡張の高度な方法
1. コマンド方式作成された Swarm クラスターで nginx サービスを実行し、--repli...
MySQL ストレージエンジンの簡単な紹介
1. MySQL アーキテクチャストレージ エンジンを紹介する前に、まずは MySQL アーキテクチ...
複数のドメイン名に対する Nginx リバース プロキシを使用した HTTP および HTTPS サービスの実装
現在、Nginx は、Web サービスを提供するために、Windows ベースの IIS と Lin...
Linux システムでの Selenium クローラー プログラムの導入の概要
目次序文1. セレンとは何ですか? 2. 使用手順1. ライブラリをインポートする2. テストコード...
CSS は Apple のスムーズなスイッチ ボタン効果を模倣します
目次1. コード分析2. ソースコードソースコード1. コード分析1.1 HTMLコード分析 <...
ウェブデザイナーが持つべき7つのスキル
Web デザインは科学であると同時に芸術でもあります。 Web デザイン作業は、半分は適切なプログラ...
MySQL の一般的なログの概要
序文： MySQL システムには、さまざまな種類のログが存在します。さまざまなログにはそれぞれ独自の...
Reactでコンポーネントを作成する方法
目次序文コンポーネントの紹介クラスコンポーネントの作成状態についてレンダリングについて関数コンポーネ...
JavaScript で charAt() を使用して、最も頻繁に出現する文字とその出現回数をカウントする方法を教えます。
前回は、JavaScript の charAt() メソッドの使い方を紹介しました。今日は、最も多く...