add tts

潘钊
1 parent 8de956dc
Showing 6 changed files with 212 additions and 10 deletions
src/main/resources/static/real_control_v2/css/line_schedule.css
src/main/resources/static/real_control_v2/css/sch_autocomp_result.css
src/main/resources/static/real_control_v2/fragments/line_schedule/sch_table.html
src/main/resources/static/real_control_v2/fragments/line_schedule/sys_mailbox.html
src/main/resources/static/real_control_v2/fragments/north/nav/tts_config.html
src/main/resources/static/real_control_v2/js/utils/tts.js
@@ -190,6 +190,10 @@
     font-weight: 600;
 }
+.schedule-body .ct_table dl._search_hide{
+  display: none !important;
+}
+
 .context-menu-list.schedule-ct-menu {
     /*font-size: 13px;*/
     font-family: 微软雅黑;
@@ -333,6 +337,12 @@ dd.tl-zzzx {
     width: 100%;
 }
+.ct-form-modal span.uk-form-help-inline,
+.ct-form-modal p.uk-form-help-block{
+  color: #888888;
+  font-size: 13px;
+}
+
 /** 批量待发调整 */
@@ -721,8 +731,29 @@ input.i-cbox[type=checkbox]{
   transition: all .3s ease;
 }
-.search_sch_panel .uk-form input.active[type=text]{
-  width: 130px;
+.search_sch_panel .uk-form div.uk-form-icon.active input[type=text]{
+  width: 145px;
+}
+
+.search_sch_panel .uk-form div.uk-form-icon i.cancel{
+    position: absolute;
+    right: 8px;
+    font-size: 13px;
+    color: #c3b9ba;
+    cursor: pointer;
+    display: none;
+    padding: 0;
+    pointer-events: auto;
+    width: 18px;
+    text-indent: 0;
+}
+
+/*.search_sch_panel .uk-form div.uk-form-icon i.cancel:before{*/
+
+/*}*/
+
+.search_sch_panel .uk-form div.uk-form-icon.active i.cancel{
+    display: block;
 }
 .search_sch_panel .uk-form input[type=text]::-webkit-input-placeholder{
@@ -15,8 +15,9 @@
 .sch-search-results small {
     /*display: block;*/
-    color: #9b9797;
-    margin-left: 9px;
+    /*color: #9b9797;
+    margin-left: 9px;*/
+    color: #009dd8;
 }
 .sch-search-results small.search-result-desc {
@@ -25,6 +26,7 @@
     display: block;
     text-overflow: ellipsis;
     margin-left: 0;
+    color: #9b9797;
 }
@@ -7,16 +7,17 @@
         {{else}}
           下行/{{line.endStationName}}
         {{/if}}
-        <!-- <div class="search_sch_panel">
-          <form class="uk-form">
+        <div class="search_sch_panel">
+          <form class="uk-form" onsubmit="javascript:return false;">
               <div class="uk-autocomplete sch-search-autocom">
                 <div class="uk-form-icon">
                     <i class="uk-icon-search"></i>
                     <input type="text" placeholder="search">
+                    <i class="cancel uk-icon-times-circle" data-uk-tooltip="{pos:'right'}" title="取消过滤"></i>
                 </div>
               </div>
           </form>
-        </div> -->
+        </div>
       </h3>
       <div class="schedule-body">
           <div class="ct_table_wrap">
@@ -16,9 +16,9 @@
       <div class="uk-width-medium-1-1 sys-note-42" id="{{domId}}">
         <div class="uk-panel uk-panel-box uk-panel-box-secondary">
             <h5 class="title">
-              {{t.fcsjActual}} {{t.clZbh}} 已由 {{t.qdzName}} 发出
+              {{t.fcsjActual}} {{t.clZbh}} 已由 {{t.qdzName}} 发出，执行班次  {{t.dfsj}}
             </h5>
-            <code>{{dataStr}}</code>
+            <code>{{t.fcsjActual}}</code>
             <div class="uk-button-group">
                 <a class="uk-button uk-button-mini uk-button-primary" >确定</a>
             </div>
@@ -36,7 +36,7 @@
             		已完成当日所有班次。
             		{{/if}}
               </h5>
-              <code>{{dataStr}}</code>
+              <code>{{t.zdsjActual}}</code>
               <div class="uk-button-group">
                   <a class="uk-button uk-button-mini uk-button-primary" >确定</a>
               </div>
+<div class="uk-modal ct-form-modal" id="tts-config-modal">
+    <div class="uk-modal-dialog" style="width: 530px;">
+        <a href="" class="uk-modal-close uk-close"></a>
+        <div class="uk-modal-header">
+            <h2>TTS 语音设置</h2></div>
+
+        <p style="border-bottom: 1px solid #efefef;color: grey;padding-bottom: 9px;">
+          <small>
+            <i class="uk-icon-question-circle"> </i>
+            设置项将会保存在本地客户端，清理缓存和更换电脑会重置.</small>
+        </p>
+        <form class="uk-form uk-form-horizontal">
+            <div class="uk-grid">
+                <div class="uk-width-2-3 uk-container-center">
+                    <div class="uk-form-row">
+                        <label class="uk-form-label">启用TTS</label>
+                        <div class="uk-form-controls">
+                            <select name="enable">
+                              <option value="1">启用</option>
+                              <option value="0">禁用</option>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="uk-grid">
+                <div class="uk-width-2-3 uk-container-center">
+                    <div class="uk-form-row">
+                        <label class="uk-form-label">发音速度</label>
+                        <div class="uk-form-controls">
+                            <input name="rate" max=10 data-fv-lessthan-inclusive="false" style="width: calc(100% - 80px);" />
+                            <span class="uk-form-help-inline">1 ~ 10</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="uk-grid">
+                <div class="uk-width-2-3 uk-container-center">
+                    <div class="uk-form-row">
+                        <label class="uk-form-label">播放队列</label>
+                        <div class="uk-form-controls">
+                            <select name="queueModel">
+                              <option value="1">总是最新</option>
+                              <option value="-1">按顺序完整播报</option>
+                            </select>
+                            <p class="uk-form-help-block"></p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="uk-grid">
+                <div class="uk-width-1-1" style="margin-top: 25px;">
+                  <div class="uk-panel uk-panel-box" style="font-size: 12px;color: grey;">
+                      我能吞下玻璃而不伤身体&nbsp;
+                      <button class="uk-button uk-button-success uk-button-mini" type="button" id="tts-audition-btn">
+                        <i class="uk-icon-volume-down"> </i> 试听</button>
+                  </div>
+                </div>
+            </div>
+
+            <div class="uk-modal-footer uk-text-right" style="margin-bottom: -20px;">
+                <button type="button" class="uk-button uk-modal-close">取消</button>
+                <button type="submit" class="uk-button uk-button-primary"><i class="uk-icon-check"></i> &nbsp;保存</button>
+            </div>
+        </form>
+    </div>
+
+    <script>
+        (function() {
+            var modal = '#tts-config-modal';
+            var f = $('form', modal);
+
+            $(modal).on('init', function(e, data) {
+              var config=gb_tts.defaultConfig();
+              for(var name in config)
+                $('[name='+name+']', f).val(config[name]).trigger('change');
+
+            });
+
+            $('select[name=queueModel]', f).on('change', function(){
+              var val=$(this).val()
+                ,$help=$(this).next('.uk-form-help-block');
+
+              if(val == 1)
+                $help.text('有新的语音，强制中断未结束的语音');
+              else
+                $help.text('按照队列顺序依次完整播报');
+            });
+
+            $('#tts-audition-btn', f).on('click', function(){
+              var msg='我能吞下玻璃而不伤身体'
+                ,rate=$('[name=rate]',f).val();
+              gb_tts.audition(msg, rate);
+            });
+
+            f.formValidation(gb_form_validation_opts);
+            f.on('success.form.fv', function(e) {
+              e.preventDefault();
+              var data = $(this).serializeJSON();
+              gb_tts.writeConfig(data);
+              UIkit.modal(modal).hide();
+              notify_succ('TTS配置修改成功！');
+            });
+
+        })();
+    </script>
+</div>
+var gb_tts = (function() {
+
+    var storage = window.localStorage;
+    var defaultConfig = {
+        //发音速度 1 ~ 10
+        rate: 1.2,
+        //播放队列 1：覆盖式（总是播放最新）  -1：完整的按顺序播报
+        queueModel: 1,
+        enable: 1
+    };
+
+    var readLocal = function() {
+        //从本地客户端读取配置信息
+        var cofig = storage.getItem('tts_cofig');
+        if (cofig) {
+            cofig = JSON.parse(cofig);
+            defaultConfig = cofig;
+        }
+    }
+
+    var writeConfig = function(newConfig) {
+        storage.setItem('tts_cofig', JSON.stringify(newConfig));
+        defaultConfig = newConfig;
+    }
+
+    var synth = window.speechSynthesis;
+    readLocal();
+
+    var speak = function(t, lineCode) {
+        if (defaultConfig.enable != 1)
+            return;
+        if (defaultConfig.queueModel == 1)
+            synth.cancel();
+
+        t = gb_data_basic.codeToLine[lineCode].name + t;
+        //延迟100毫秒，防止中断旧语音时 将新的语音也中断
+        setTimeout(function() {
+            var msg = new SpeechSynthesisUtterance(t);
+            msg.rate = defaultConfig.rate;
+            synth.speak(msg);
+        }, 100);
+    }
+
+    var audition = function(t, rate) {
+        var msg = new SpeechSynthesisUtterance(t);
+        msg.rate = rate;
+        synth.speak(msg);
+    }
+
+    return {
+        readLocal: readLocal,
+        writeConfig: writeConfig,
+        defaultConfig: function() {
+            return defaultConfig
+        },
+        speak: speak,
+        audition: audition
+    };
+})();