音声キューイングシステムを実装するための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 情報の表示
推薦する
Dockerコンテナでの静的ウェブサイトレイアウトの実装
サーバーの配置数日間無料で使用できるクラウドサーバー（Alibaba Cloud、Huawei Cl...
MySQL ストアドプロシージャの長所と短所の分析
MySQL バージョン 5.0 ではストアド プロシージャのサポートが開始されました。ストアド プロ...
Ubuntu での MySQL へのリモート ログインのインストールと設定に関するチュートリアル
この記事では、MySQLのインストールと設定のリモートログインチュートリアルを参考までに紹介します。...
Apache、Tomcat、Nginx サーバーの詳細な理解と比較分析
質問1件会社のサーバーはApacheを使用しており、バックエンドはPHP、サーバーはLinux C/...
Linux のハードリンクとソフトリンクの原理と使用法の分析
Linux システムには、ファイル共有を解決するために使用できるリンク ファイルと呼ばれる種類のファ...
同じページを動的にロードするための Vue ルーティングリスニングの例
目次シナリオ分析発達要約するシナリオ分析システムでは、1 つのモジュールに 3 つのサブモジュールが...
ログインフォームを実装するためのReactサンプルコード
Vue ユーザーとして、React を拡張する時が来ました。antd の導入、less と rout...
Web ページ制作におけるテーブル属性 CellPad、CellSpace、Border の説明と使用
cellspacing は表内のセル間の距離です。セルパディングは、表のセル内の空白スペースです。一...
XHTML 入門チュートリアル: Web ページのヘッダーと DTD
ヘッドと DTD はページには表示されませんが、Web ページの重要な要素です。 なぜ失敗したのでし...
Vueプロジェクトでvuexを使用する方法
目次Vuex とは何ですか? Vuex 使用サイクル図私のストアディレクトリvuexの例の実装要約す...
フォーム送信時に追加のパラメータを渡すためのいくつかの一般的な方法
フォームを送信するときに、送信前に追加のパラメータが追加される状況が発生する場合があります。この問題...
JS での filter() 配列フィルターの使用
目次1. はじめに2. 方法の紹介3. 使用例要約する1. はじめに配列フィルターは、フロントエンド...
docker コンペ応募でよく使われるコマンドのまとめ
アカウントにログイン DOCKER_REGISTRY=registry.cn-hangzhou.al...
Windows 10 システムで Mysql8.0.13 のルート パスワードを忘れる方法
1. まずmysqlサービスを停止します管理者としてCMDを開いて閉じるか、Windowsサービスペ...
Vue マウスホイールスクロール切り替えルーティング効果を実装する方法
ルート ルーティング コンポーネント (アプリの下のルート ルーティング コンポーネント。子コンポー...