诊间报警

2 years ago · 3b92825fa9
parent 457fa291ac
commit 3b92825fa9
12 changed files with 147 additions and 77 deletions
--- a/vocalldemo/index.html
+++ b/vocalldemo/index.html
@ -146,17 +146,17 @@
      text-shadow: 0 0 1px rgba(255, 255, 255, 0.3);
    }

-    /* 播报模式 */
+    /* 是否播报 */
    .toggle-btn {
      float: right;
      display: flex;
-      width: 180px;
+      width: 100px;
    }

    .toggle-btn .btn {
      flex: 1;
      text-align: center;
-      line-height: 34px;
+      line-height: 28px;
      border: 1px solid #ddd;
      cursor: pointer;
      background-color: #fff;
@ -177,21 +177,15 @@
    }
  </style>
  <script src="jquery.min.js"></script>
+  <!-- 引入样式 -->
+  <link rel="stylesheet" href="layer/theme/default/layer.css">
+  <!-- 引入组件库 -->
+  <script src="layer/layer.js"></script>
 </head>

 <body>
  <div class="wrapper">
    <div class="page-title">诊间电脑报警软件</div>
-    <div style="overflow: hidden;">
-      <div class="toggle-btn">
-        <div class="btn active">
-          直接播报
-        </div>
-        <div class="btn" style="border-left: 0;">
-          按键播报
-        </div>
-      </div>
-    </div>
    <div class="alarm-box">
      <div class="alarm-item">
        <div class="alarm-item-box alarm1">
@ -214,49 +208,72 @@
        </div>
      </div>
    </div>
-    <div class="alarm-foot">
-      <div style="display: none;" class="alarm-btn" id="alarmBtn">一键播报</div>
-      <div class="alarm-btn stop" id="stopButton">停止播报</div>
+    <div style="display: flex;align-items: center;margin-top: 20px;overflow: hidden;">
+      <div class="page-small-title">是否播报</div>
+      <div class="toggle-btn">
+        <div class="btn">
+          是
+        </div>
+        <div class="btn active" style="border-left: 0;">
+          否
+        </div>
+      </div>
    </div>
    <div style="flex: 1;display: flex;align-items: center;margin-top: 20px;">
      <div class="page-small-title">报警点位置</div>
      <select class="input" id="address" placeholder="报警位置" style="width: 200px;">
      </select>
-      <button id="btnSaveAddress" class="btn-saveAddress">设置警点位置</button>
-    </div>
-    <div style="flex: 1;display: flex;align-items: top;margin: 20px 0;">
-      <div class="page-small-title">播报内容</div>
-      <textarea id="volTxt" class="input" style="width:80%;height:100px;"></textarea>
+      <!-- <button id="btnSaveAddress" class="btn-saveAddress">设置警点位置</button> -->
    </div>
-    <div style="display: flex;margin: 10px 0 20px;">
-      <div style="flex: 1;display: flex;align-items: center;">
-        <div class="page-small-title">语速</div>
-        <input class="input" id="rate" placeholder="语速" value="0.6" style="width: 120px;" />（0.1到10）
+    <!-- 播报组件 -->
+    <div id="speckBox" style="display: none; overflow: hidden;">
+      <div style="flex: 1;display: flex;align-items: top;margin: 20px 0;">
+        <div class="page-small-title">播报内容</div>
+        <textarea id="volTxt" class="input" style="width:80%;height:100px;">在（【报警点】）发生（【报警类型】）类型报警，请及时处理。
+        </textarea>
      </div>
-      <div style="flex: 1;display: flex;align-items: center;">
-        <div class="page-small-title">音量</div>
-        <input class="input" id="volume" placeholder="语速" value="1" style="width: 120px;" />（0到1）
+      <div style="display: flex;margin: 10px 0 20px;">
+        <div style="flex: 1;display: flex;align-items: center;">
+          <div class="page-small-title">语速</div>
+          <input class="input" id="rate" placeholder="语速" value="0.6" style="width: 120px;" />（0.1到10）
+        </div>
+        <div style="flex: 1;display: flex;align-items: center;">
+          <div class="page-small-title">音量</div>
+          <input class="input" id="volume" placeholder="语速" value="1" style="width: 120px;" />（0到1）
+        </div>
+        <div style="flex: 1;display: flex;align-items: center;">
+          <div class="page-small-title">循环次数</div>
+          <input class="input" id="repeatNum" placeholder="语速" value="3" style="width: 120px;" />
+        </div>
      </div>
-      <div style="flex: 1;display: flex;align-items: center;">
-        <div class="page-small-title">循环次数</div>
-        <input class="input" id="repeatNum" placeholder="语速" value="3" style="width: 120px;" />
+      <div style="display: flex;margin: 10px 0 20px;">
+        <div style="flex: 1;display: flex;align-items: center;">
+          <div class="page-small-title">音色</div>
+          <select class="input" id="voices" placeholder="音色" style="width: 200px;">
+          </select>
+          <button style="display:none;" id="btnGetVoice">获取音色</button>
+        </div>
      </div>
    </div>
-    <div style="display: flex;margin: 10px 0 20px;">
-      <div style="flex: 1;display: flex;align-items: center;">
-        <div class="page-small-title">音色</div>
-        <select class="input" id="voices" placeholder="音色" style="width: 200px;">
-        </select>
-        <button style="display:none;" id="btnGetVoice">获取音色</button>
-      </div>
+    <!-- 报警按钮 -->
+    <div class="alarm-foot" style="padding-bottom: 30px;">
+      <div class="alarm-btn" id="alarmBtn">上报报警</div>
+      <div class="alarm-btn stop" id="stopButton">取消报警</div>
    </div>
  </div>
  <script>
    // const baseUrl = "http://152.136.119.150:81";//外网测试环境
-    const baseUrl = "http://171.16.8.51:81";//"http://192.168.1.102:81";//本地测试环境
-    const iotBaseUrl = "http://171.16.8.58:8080"//"http://182.139.182.190:60032";//物联网平台外网测试环境
+    //本地测试
+    // const baseUrl = "http://192.168.1.102:81";//本地测试环境-上报
+    // const iotBaseUrl = "http://182.139.182.190:60032";//物联网平台测试
+    //现场测试
+    const baseUrl = "http://171.16.8.51:81";//上报
+    const iotBaseUrl = "http://171.16.8.58:8080"//物联网平台环境
+    //设备产品pid
+    // const pid = 98;//测试环境
+    const pid = 119;//现场
    if (!('speechSynthesis' in window)) {
-      throw alert("对不起，您的浏览器不支持")
+      layer.msg("对不起，您的浏览器不支持")
    }
    const alarmLevel = {
      1: '普通纠纷',
@ -264,7 +281,7 @@
      3: '暴力伤害',
      4: '火灾'
    };
-    let speakType = 1;//播报模式，1直接播报 2按键播报
+    var isSpeak = 1;//是否播报 默认不播报
    var repeatNum = 3;//循环播放次数
    var utterThis = new window.SpeechSynthesisUtterance();
    utterThis.lang = 'zh-CN';
@ -294,45 +311,69 @@
    setTimeout(function () {
      document.getElementById('btnGetVoice').click();
    }, 800)
-    // 选择报警级别
-    let level = null;
-    document.querySelectorAll('.alarm-item-box').forEach(function (dom, index) {
+    //组件折叠展开
+    document.querySelectorAll('.toggle-btn .btn').forEach(function (dom, index) {
      dom.addEventListener('click', function () {
-        let _actDom = document.querySelectorAll('.alarm-item-box.active');
+        let _actDom = document.querySelectorAll('.toggle-btn .btn.active');
        if (_actDom.length > 0) {
          _actDom[0].classList.remove('active')
        }
        dom.classList.add('active');
-        level = index;
-        document.querySelector('textarea#volTxt').value = alarmLevel[index + 1];
-        var txt = document.querySelector('textarea#volTxt').value;
-        if (speakType == 1) {
-          speak(txt);
-          reportSaveIot(txt);//本地存储 =》 上报
+        isSpeak = index;
+        console.log('isspeak', isSpeak)
+        if(index == 0) {
+          document.getElementById('speckBox').style.display = "block";
+        }else{
+          document.getElementById('speckBox').style.display = "none";
        }
      })
    })
-    //切换播报模式
-    document.querySelectorAll('.toggle-btn .btn').forEach(function (dom, index) {
+    // 选择报警级别
+    let level = null;
+    document.querySelectorAll('.alarm-item-box').forEach(function (dom, index) {
      dom.addEventListener('click', function () {
-        let _actDom = document.querySelectorAll('.toggle-btn .btn.active');
+        let _actDom = document.querySelectorAll('.alarm-item-box.active');
        if (_actDom.length > 0) {
          _actDom[0].classList.remove('active')
        }
        dom.classList.add('active');
-        speakType = index + 1;
-        document.getElementById('alarmBtn').style.display = speakType == 1 ? 'none' : 'inline-block';
+        level = index + 1;
+        //报警内容
+        var id = document.querySelector('select#address').value;
+        let _idx = deviceList.findIndex(function (item) {
+          return item.id = id;
+        })
+        let txt = "";
+        if(id != '' && _idx > -1) {
+          let address = deviceList[_idx].remark;
+          txt = "在（" + address + "）发生（" + (level !=null ? alarmLevel[level] : "【报警类型】") + "）类型报警，请及时处理。"
+        }else {
+          txt = "在（【报警点】）发生（" + (level != null ? alarmLevel[level] : "【报警类型】") + "）类型报警，请及时处理。"
+        }
+        console.log(txt);
+        document.querySelector('textarea#volTxt').value = txt;
      })
    })
-    //一键播报
+    //上报报警
    document.getElementById('alarmBtn').onclick = function () {
      var txt = document.querySelector('textarea#volTxt').value;
-      if (level == null || txt == '') {
-        alert('播报内容不能为空')
+      var deviceId = document.querySelector('select#address').value;
+      if (level == null) {
+        layer.msg('请先选择报警类型后再上报！')
        return;
      }
-      console.log(txt)
-      speak(txt);
+      if (deviceId == '') {
+        layer.msg('请先选择报警点后再上报！')
+        return;
+      }
+      if (txt == '') {
+        layer.msg('播报内容不能为空！')
+        return;
+      }
+      if(isSpeak === 0) {
+        console.log("isSpeak", isSpeak);
+        speak(txt);
+      }
      reportSaveIot(txt);//本地存储 =》 上报
    }
    //播报
@ -364,26 +405,25 @@
    function getDeviceList() {
      if (token != undefined && token) {
        $.ajax({
-          url: iotBaseUrl + "/prod-api/api/bizDevice/list?pid=98&params[type]=1", type: "get", headers: { Authorization: token }, dataType: "json", success: function (res) {
+          url: iotBaseUrl + "/prod-api/api/bizDevice/list?pid=" + pid + "&params[type]=1", type: "get", headers: { Authorization: token }, dataType: "json", success: function (res) {
            if (res.code == 200) {
              deviceList = res.rows;
+              var option = document.createElement("option");
+              option.value = ""
+              option.text = "请选择报警点";
+              document.getElementById('address').add(option);
              deviceList.forEach(function (v) {
                var option = document.createElement("option");
                option.value = v.id
-                option.text = v.name;
+                option.text = v.remark;
                document.getElementById('address').add(option);
              })
-              let addressIndex = window.localStorage.getItem('deviceId');
-              if (addressIndex != undefined && addressIndex) {
-                let index = deviceList.findIndex(function (item) {
-                  return item.id = addressIndex;
-                })
-                document.querySelector('select#address').value = deviceList[index].id;
-              }
            } else if (res.code == 401) {
              window.sessionStorage.removeItem('bizToken');
              token = "";
              getDeviceList();
+            }else {
+              layer.msg('未获取到报警点位置，请联系运维人员。')
            }
          }
        });
@ -401,14 +441,24 @@
        });
      }
    }
-    //报警点位存储本地
-    document.getElementById('btnSaveAddress').onclick = function () {
-      var id = document.querySelector('select#address').value;
+    //报警点位change
+    $('#address').on('change', function () {
+      var id = $(this).val();
+      console.log('id',id)
      let index = deviceList.findIndex(function (item) {
        return item.id = id;
      })
-      window.localStorage.setItem('deviceId', id);
-    }
+      let txt = "";
+      if(id != '' && index > -1) {
+        let address = deviceList[index].remark;
+        console.log('address',address)
+        txt = "在（" + address + "）发生（" + (level != null ? alarmLevel[level] : "【报警类型】") + "）类型报警，请及时处理。";
+      }else{
+        txt = "在（【报警点】）发生（" + (level != null ? alarmLevel[level] : "【报警类型】") + "）类型报警，请及时处理。"
+      }
+      console.log(txt);
+      document.querySelector('textarea#volTxt').value = txt;
+    });
    //报警信息上报
    function reportSaveIot(txt) {
      var id = document.querySelector('select#address').value;
@ -427,12 +477,20 @@
      formdata.append('longidute', tags.lng);
      formdata.append('latidute', tags.lat);
      formdata.append('content', txt);
+      var loadingIndex = layer.load(0, {shade: false});
      $.ajax({
-        url: baseUrl + "/appData/putFile", type: "post", contentType: false, processData: false, dataType: 'json', data: formdata, success: function (res) {
+        url: baseUrl + "/appData/putFile", type: "post", contentType: false, processData: false, 
+        timeout: 6000, dataType: 'json', data: formdata, success: function (res) {
+          layer.close(loadingIndex);
          if (res.code === 200) {
            console.log('上报成功');
            reportIot(txt);
+          }else{
+            layer.msg('报警失败，请联系运维人员');
          }
+        },error: function() {
+          layer.close(loadingIndex);
+          layer.msg('报警失败，请联系运维人员');
        }
      });
    }
@ -458,9 +516,13 @@
          let _data = JSON.parse(res.data);
          if (_data.resultCode == 0) {
            console.log('上报成功2');
+            layer.msg('报警成功');
          }else{
            console.log(_data.msg);
+            layer.msg('报警失败，请联系运维人员');
          }
+        },error: function() {
+          layer.msg('报警失败，请联系运维人员');
        }
      });
    }
--- a/vocalldemo/layer/layer.js
+++ b/vocalldemo/layer/layer.js
--- a/vocalldemo/layer/mobile/layer.js
+++ b/vocalldemo/layer/mobile/layer.js
@ -0,0 +1,2 @@
+/*! layer mobile-v2.0.0 Web 通用弹出层组件 MIT License */
+ ;!function(e){"use strict";var t=document,n="querySelectorAll",i="getElementsByClassName",a=function(e){return t[n](e)},s={type:0,shade:!0,shadeClose:!0,fixed:!0,anim:"scale"},l={extend:function(e){var t=JSON.parse(JSON.stringify(s));for(var n in e)t[n]=e[n];return t},timer:{},end:{}};l.touch=function(e,t){e.addEventListener("click",function(e){t.call(this,e)},!1)};var r=0,o=["layui-m-layer"],c=function(e){var t=this;t.config=l.extend(e),t.view()};c.prototype.view=function(){var e=this,n=e.config,s=t.createElement("div");e.id=s.id=o[0]+r,s.setAttribute("class",o[0]+" "+o[0]+(n.type||0)),s.setAttribute("index",r);var l=function(){var e="object"==typeof n.title;return n.title?'<h3 style="'+(e?n.title[1]:"")+'">'+(e?n.title[0]:n.title)+"</h3>":""}(),c=function(){"string"==typeof n.btn&&(n.btn=[n.btn]);var e,t=(n.btn||[]).length;return 0!==t&&n.btn?(e='<span yes type="1">'+n.btn[0]+"</span>",2===t&&(e='<span no type="0">'+n.btn[1]+"</span>"+e),'<div class="layui-m-layerbtn">'+e+"</div>"):""}();if(n.fixed||(n.top=n.hasOwnProperty("top")?n.top:100,n.style=n.style||"",n.style+=" top:"+(t.body.scrollTop+n.top)+"px"),2===n.type&&(n.content='<i></i><i class="layui-m-layerload"></i><i></i><p>'+(n.content||"")+"</p>"),n.skin&&(n.anim="up"),"msg"===n.skin&&(n.shade=!1),s.innerHTML=(n.shade?"<div "+("string"==typeof n.shade?'style="'+n.shade+'"':"")+' class="layui-m-layershade"></div>':"")+'<div class="layui-m-layermain" '+(n.fixed?"":'style="position:static;"')+'><div class="layui-m-layersection"><div class="layui-m-layerchild '+(n.skin?"layui-m-layer-"+n.skin+" ":"")+(n.className?n.className:"")+" "+(n.anim?"layui-m-anim-"+n.anim:"")+'" '+(n.style?'style="'+n.style+'"':"")+">"+l+'<div class="layui-m-layercont">'+n.content+"</div>"+c+"</div></div></div>",!n.type||2===n.type){var d=t[i](o[0]+n.type),y=d.length;y>=1&&layer.close(d[0].getAttribute("index"))}document.body.appendChild(s);var u=e.elem=a("#"+e.id)[0];n.success&&n.success(u),e.index=r++,e.action(n,u)},c.prototype.action=function(e,t){var n=this;e.time&&(l.timer[n.index]=setTimeout(function(){layer.close(n.index)},1e3*e.time));var a=function(){var t=this.getAttribute("type");0==t?(e.no&&e.no(),layer.close(n.index)):e.yes?e.yes(n.index):layer.close(n.index)};if(e.btn)for(var s=t[i]("layui-m-layerbtn")[0].children,r=s.length,o=0;o<r;o++)l.touch(s[o],a);if(e.shade&&e.shadeClose){var c=t[i]("layui-m-layershade")[0];l.touch(c,function(){layer.close(n.index,e.end)})}e.end&&(l.end[n.index]=e.end)},e.layer={v:"2.0",index:r,open:function(e){var t=new c(e||{});return t.index},close:function(e){var n=a("#"+o[0]+e)[0];n&&(n.innerHTML="",t.body.removeChild(n),clearTimeout(l.timer[e]),delete l.timer[e],"function"==typeof l.end[e]&&l.end[e](),delete l.end[e])},closeAll:function(){for(var e=t[i](o[0]),n=0,a=e.length;n<a;n++)layer.close(0|e[0].getAttribute("index"))}},"function"==typeof define?define(function(){return layer}):function(){var e=document.scripts,n=e[e.length-1],i=n.src,a=i.substring(0,i.lastIndexOf("/")+1);n.getAttribute("merge")||document.head.appendChild(function(){var e=t.createElement("link");return e.href=a+"need/layer.css?2.0",e.type="text/css",e.rel="styleSheet",e.id="layermcss",e}())}()}(window);
--- a/vocalldemo/layer/mobile/need/layer.css
+++ b/vocalldemo/layer/mobile/need/layer.css
--- a/vocalldemo/layer/theme/default/icon-ext.png
+++ b/vocalldemo/layer/theme/default/icon-ext.png
--- a/vocalldemo/layer/theme/default/icon.png
+++ b/vocalldemo/layer/theme/default/icon.png
--- a/vocalldemo/layer/theme/default/layer.css
+++ b/vocalldemo/layer/theme/default/layer.css
--- a/vocalldemo/layer/theme/default/loading-0.gif
+++ b/vocalldemo/layer/theme/default/loading-0.gif
--- a/vocalldemo/layer/theme/default/loading-1.gif
+++ b/vocalldemo/layer/theme/default/loading-1.gif
--- a/vocalldemo/layer/theme/default/loading-2.gif
+++ b/vocalldemo/layer/theme/default/loading-2.gif
--- a/vocalldemo/vue-min.css
+++ b/vocalldemo/vue-min.css
--- a/vocalldemo/vue-min.js
+++ b/vocalldemo/vue-min.js