安全报警，安全帽实况

package.json

@@ -52,6 +52,7 @@
     "js-beautify": "^1.10.2",
     "js-cookie": "2.2.0",
     "jsencrypt": "^3.0.0-rc.1",
+    "jswebrtc": "^1.0.0",
     "jszip": "3.1.5",
     "mars3d": "^3.1.3",
     "mavon-editor": "^2.9.0",

src/assets/js/common.js

@@ -3024,6 +3024,27 @@ var HttpReq = function(){
           params:param,
         })
       },
+      propleGetRealvideo: function(param){
+        return request({
+          url: '/tab/perhis/realvideo',
+          method: 'get',
+          params:param,
+        })
+      },
+      propleGetPerabnormal: function(param){
+        return request({
+          url: '/tab/perabnormal',
+          method: 'get',
+          params:param,
+        })
+      },
+      proplePutPerabnormal: function(data){
+        return request({
+          url: '/tab/perabnormal',
+          method: 'PUT',
+          data:data,
+        })
+      },
 
 		},
 

src/assets/js/jswebrtc.js

+export var JSWebrtc = {
+  Player: null,
+  VideoElement: null,
+  CreateVideoElements: function () {
+    var elements = document.querySelectorAll(".jswebrtc");
+    for (var i = 0; i < elements.length; i++) {
+      new JSWebrtc.VideoElement(elements[i])
+    }
+  },
+  FillQuery: function (query_string, obj) {
+    obj.user_query = {};
+    if (query_string.length == 0) return;
+    if (query_string.indexOf("?") >= 0) query_string = query_string.split("?")[1];
+    var queries = query_string.split("&");
+    for (var i = 0; i < queries.length; i++) {
+      var query = queries[i].split("=");
+      obj[query[0]] = query[1];
+      obj.user_query[query[0]] = query[1]
+    }
+    if (obj.domain) obj.vhost = obj.domain
+  },
+  ParseUrl: function (rtmp_url) {
+    var a = document.createElement("a");
+    a.href = rtmp_url.replace("rtmp://", "http://").replace("webrtc://", "http://").replace("rtc://", "http://");
+    var vhost = a.hostname;
+    var app = a.pathname.substr(1, a.pathname.lastIndexOf("/") - 1);
+    var stream = a.pathname.substr(a.pathname.lastIndexOf("/") + 1);
+    app = app.replace("...vhost...", "?vhost=");
+    if (app.indexOf("?") >= 0) {
+      var params = app.substr(app.indexOf("?"));
+      app = app.substr(0, app.indexOf("?"));
+      if (params.indexOf("vhost=") > 0) {
+        vhost = params.substr(params.indexOf("vhost=") + "vhost=".length);
+        if (vhost.indexOf("&") > 0) {
+          vhost = vhost.substr(0, vhost.indexOf("&"))
+        }
+      }
+    }
+    if (a.hostname == vhost) {
+      var re = /^(\d+)\.(\d+)\.(\d+)\.(\d+)$/;
+      if (re.test(a.hostname)) vhost = "__defaultVhost__"
+    }
+    var schema = "rtmp";
+    if (rtmp_url.indexOf("://") > 0) schema = rtmp_url.substr(0, rtmp_url.indexOf("://"));
+    var port = a.port;
+    if (!port) {
+      if (schema === "http") {
+        port = 80
+      } else if (schema === "https") {
+        port = 443
+      } else if (schema === "rtmp") {
+        port = 1935
+      } else if (schema === "webrtc" || schema === "rtc") {
+        port = 1985
+      }
+    }
+    var ret = {
+      url: rtmp_url,
+      schema: schema,
+      server: a.hostname,
+      port: port,
+      vhost: vhost,
+      app: app,
+      stream: stream
+    };
+    JSWebrtc.FillQuery(a.search, ret);
+    return ret
+  },
+  HttpPost: function (url, data) {
+    return new Promise(function (resolve, reject) {
+      var xhr = new XMLHttpRequest;
+      xhr.onreadystatechange = function () {
+        if (xhr.readyState === 4 && (xhr.status >= 200 && xhr.status < 300)) {
+          var respone = JSON.parse(xhr.responseText);
+          xhr.onreadystatechange = new Function;
+          xhr = null;
+          resolve(respone)
+        }
+      };
+      xhr.open("POST", url, true);
+      xhr.timeout = 5e3;
+      xhr.responseType = "text";
+      xhr.setRequestHeader("Content-Type", "application/json");
+      xhr.send(data)
+    })
+  }
+};
+if (document.readyState === "complete") {
+  JSWebrtc.CreateVideoElements()
+} else {
+  document.addEventListener("DOMContentLoaded", JSWebrtc.CreateVideoElements)
+}
+JSWebrtc.VideoElement = function () {
+  "use strict";
+  var VideoElement = function (element) {
+    var url = element.dataset.url;
+    if (!url) {
+      throw "VideoElement has no `data-url` attribute"
+    }
+    var addStyles = function (element, styles) {
+      for (var name in styles) {
+        element.style[name] = styles[name]
+      }
+    };
+    this.container = element;
+    addStyles(this.container, {
+      display: "inline-block",
+      position: "relative",
+      minWidth: "80px",
+      minHeight: "80px"
+    });
+    this.video = document.createElement("video");
+    this.video.width = 960;
+    this.video.height = 540;
+    addStyles(this.video, {
+      display: "block",
+      width: "100%"
+    });
+    this.container.appendChild(this.video);
+    this.playButton = document.createElement("div");
+    this.playButton.innerHTML = VideoElement.PLAY_BUTTON;
+    addStyles(this.playButton, {
+      zIndex: 2,
+      position: "absolute",
+      top: "0",
+      bottom: "0",
+      left: "0",
+      right: "0",
+      maxWidth: "75px",
+      maxHeight: "75px",
+      margin: "auto",
+      opacity: "0.7",
+      cursor: "pointer"
+    });
+    this.container.appendChild(this.playButton);
+    var options = {
+      video: this.video
+    };
+    for (var option in element.dataset) {
+      try {
+        options[option] = JSON.parse(element.dataset[option])
+      } catch (err) {
+        options[option] = element.dataset[option]
+      }
+    }
+    this.player = new JSWebrtc.Player(url, options);
+    element.playerInstance = this.player;
+    if (options.poster && !options.autoplay) {
+      options.decodeFirstFrame = false;
+      this.poster = new Image;
+      this.poster.src = options.poster;
+      this.poster.addEventListener("load", this.posterLoaded);
+      addStyles(this.poster, {
+        display: "block",
+        zIndex: 1,
+        position: "absolute",
+        top: 0,
+        left: 0,
+        bottom: 0,
+        right: 0
+      });
+      this.container.appendChild(this.poster)
+    }
+    if (!this.player.options.streaming) {
+      this.container.addEventListener("click", this.onClick.bind(this))
+    }
+    if (options.autoplay) {
+      this.playButton.style.display = "none"
+    }
+    if (this.player.audioOut && !this.player.audioOut.unlocked) {
+      var unlockAudioElement = this.container;
+      if (options.autoplay) {
+        this.unmuteButton = document.createElement("div");
+        this.unmuteButton.innerHTML = VideoElement.UNMUTE_BUTTON;
+        addStyles(this.unmuteButton, {
+          zIndex: 2,
+          position: "absolute",
+          bottom: "10px",
+          right: "20px",
+          width: "75px",
+          height: "75px",
+          margin: "auto",
+          opacity: "0.7",
+          cursor: "pointer"
+        });
+        this.container.appendChild(this.unmuteButton);
+        unlockAudioElement = this.unmuteButton
+      }
+      this.unlockAudioBound = this.onUnlockAudio.bind(this, unlockAudioElement);
+      unlockAudioElement.addEventListener("touchstart", this.unlockAudioBound, false);
+      unlockAudioElement.addEventListener("click", this.unlockAudioBound, true)
+    }
+  };
+  VideoElement.prototype.onUnlockAudio = function (element, ev) {
+    if (this.unmuteButton) {
+      ev.preventDefault();
+      ev.stopPropagation()
+    }
+    this.player.audioOut.unlock(function () {
+      if (this.unmuteButton) {
+        this.unmuteButton.style.display = "none"
+      }
+      element.removeEventListener("touchstart", this.unlockAudioBound);
+      element.removeEventListener("click", this.unlockAudioBound)
+    }.bind(this))
+  };
+  VideoElement.prototype.onClick = function (ev) {
+    if (this.player.isPlaying) {
+      this.player.pause();
+      this.playButton.style.display = "block"
+    } else {
+      this.player.play();
+      this.playButton.style.display = "none";
+      if (this.poster) {
+        this.poster.style.display = "none"
+      }
+    }
+  };
+  VideoElement.PLAY_BUTTON = '<svg style="max-width: 75px; max-height: 75px;" ' + 'viewBox="0 0 200 200" alt="Play video">' + '<circle cx="100" cy="100" r="90" fill="none" ' + 'stroke-width="15" stroke="#fff"/>' + '<polygon points="70, 55 70, 145 145, 100" fill="#fff"/>' + "</svg>";
+  VideoElement.UNMUTE_BUTTON = '<svg style="max-width: 75px; max-height: 75px;" viewBox="0 0 75 75">' + '<polygon class="audio-speaker" stroke="none" fill="#fff" ' + 'points="39,13 22,28 6,28 6,47 21,47 39,62 39,13"/>' + '<g stroke="#fff" stroke-width="5">' + '<path d="M 49,50 69,26"/>' + '<path d="M 69,50 49,26"/>' + "</g>" + "</svg>";
+  return VideoElement
+}();
+JSWebrtc.Player = function () {
+  "use strict";
+  var Player = function (openUrl, url, options) {
+    this.options = options || {};
+    if (!url.match(/^webrtc?:\/\//)) {
+      throw "JSWebrtc just work with webrtc"
+    }
+    if (!this.options.video) {
+      throw "VideoElement is null"
+    }
+    this.urlParams = JSWebrtc.ParseUrl(url);
+    this.pc = null;
+    this.autoplay = !!options.autoplay || false;
+    this.paused = true;
+    if (this.autoplay) this.options.video.muted = true;
+    this.startLoading(openUrl)
+  };
+  Player.prototype.startLoading = function (openUrl) {
+    var _self = this;
+    if (_self.pc) {
+      _self.pc.close()
+    }
+    _self.pc = new RTCPeerConnection(null);
+    _self.pc.ontrack = function (event) {
+      _self.options.video["srcObject"] = event.streams[0]
+    };
+    _self.pc.addTransceiver("audio", {
+      direction: "recvonly"
+    });
+    _self.pc.addTransceiver("video", {
+      direction: "recvonly"
+    });
+    _self.pc.createOffer().then(function (offer) {
+      return _self.pc.setLocalDescription(offer).then(function () {
+        return offer
+      })
+    }).then(function (offer) {
+      return new Promise(function (resolve, reject) {
+        var port = _self.urlParams.port || 1985;
+        var api = _self.urlParams.user_query.play || "/rtc/v1/play/";
+        if (api.lastIndexOf("/") != api.length - 1) {
+          api += "/"
+        }
+        var url = "http://" + _self.urlParams.server + ":" + port + api;
+        for (var key in _self.urlParams.user_query) {
+          if (key != "api" && key != "play") {
+            url += "&" + key + "=" + _self.urlParams.user_query[key]
+          }
+        }
+        url = openUrl ? openUrl : `https://caps.runde.pro/rtc/v1/play/`;
+        var data = {
+          api: url,
+          streamurl: _self.urlParams.url,
+          clientip: null,
+          sdp: offer.sdp
+        };
+        JSWebrtc.HttpPost(url, JSON.stringify(data)).then(function (res) {
+		  if (res.code === 400) {
+            _self.options.onFail()
+          }
+          resolve(res.sdp)
+        }, function (rej) {
+          reject(rej)
+        })
+      })
+    }).then(function (answer) {
+      return _self.pc.setRemoteDescription(new RTCSessionDescription({
+        type: "answer",
+        sdp: answer
+      }))
+    }).catch(function (reason) {
+      throw reason
+    });
+    if (this.autoplay) {
+      this.play()
+    }
+  };
+  Player.prototype.play = function (ev) {
+    if (this.animationId) {
+      return
+    }
+    this.animationId = requestAnimationFrame(this.update.bind(this));
+    this.paused = false
+  };
+  Player.prototype.pause = function (ev) {
+    if (this.paused) {
+      return
+    }
+    cancelAnimationFrame(this.animationId);
+    this.animationId = null;
+    this.isPlaying = false;
+    this.paused = true;
+    this.options.video.pause();
+    if (this.options.onPause) {
+      this.options.onPause(this)
+    }
+  };
+  Player.prototype.stop = function (ev) {
+    this.pause()
+  };
+  Player.prototype.destroy = function () {
+    this.pause();
+    this.pc && this.pc.close() && this.pc.destroy();
+    this.audioOut && this.audioOut.destroy()
+  };
+  Player.prototype.update = function () {
+    this.animationId = requestAnimationFrame(this.update.bind(this));
+    if (this.options.video.readyState < 4) {
+      return
+    }
+    if (!this.isPlaying) {
+      this.isPlaying = true;
+      this.options.video.play();
+      if (this.options.onPlay) {
+        this.options.onPlay(this)
+      }
+    }
+  };
+  return Player
+}();

src/views/personnelPositioning/peopleAlarm/index.vue

@@ -5,8 +5,21 @@
       <!--工具栏-->
       <div class="head-container">
         <!-- 搜索 -->
-        <label class="el-form-item-label" style="font-weight: 500;">设备号</label>
-        <el-input v-model="query.beaconame" clearable size="small" placeholder="请输入设备号" style="width:180px;"/>
+        <label class="el-form-item-label" style="font-weight: 500;">姓名</label>
+        <el-input v-model="query.name" clearable size="small" placeholder="请输入姓名" style="width:180px;"/>
+        <label class="el-form-item-label" style="font-weight: 500;">报警类型</label>
+        <el-select v-model="query.alarmtype" placeholder="请选择">
+          <el-option v-for="item in stuOpts" :key="item.value" :label="item.label" :value="item.value"></el-option>
+        </el-select>
+        <label class="el-form-item-label" style="font-weight: 500;">日期范围</label>
+        <el-date-picker
+          v-model="query.timeList"
+          type="daterange"
+          value-format="yyyy-MM-dd"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期">
+        </el-date-picker>
         <el-button size="mini" type="success" icon="el-icon-search" @click="toSearch">搜索</el-button>
         <el-button size="mini" icon="el-icon-refresh" @click="clearLimit">重置</el-button>
       </div>
@@ -17,20 +30,36 @@
       <div class="ctin-box">
         <div class="content-within">
           <div class="content-fix">
-            <div class="toolbar">
-              <el-button size="mini" type="primary" icon="el-icon-plus" @click="toAdd">新增</el-button>
-            </div>
+            <div class="toolbar"></div>
             <div class="content">
-              <el-table :data="tableData" v-loading="loading" border style="width:auto" :row-class-name="tableRowClassName">
-                <el-table-column prop="beaconame" label="信标名称" align="center"></el-table-column>
-                <el-table-column prop="beaconumber" label="信标编号" align="center"></el-table-column>
-                <el-table-column prop="xcoordinate" label="X坐标" align="center"></el-table-column>
-                <el-table-column prop="ycoordinate" label="Y坐标" align="center"></el-table-column>
-                <el-table-column prop="time" label="时间" align="center"></el-table-column>
+              <el-table :data="tableData" v-loading="loading" border style="width:auto">
+                <el-table-column prop="name" label="姓名" align="center"></el-table-column>
+                <el-table-column prop="safetyhatmac" label="安全帽MAC" align="center"></el-table-column>
+                <el-table-column label="状态" align="center">
+                  <template slot-scope="scope">
+                    <span>{{ scope.row.state=='1'?'报警':'解除报警' }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column label="报警位置" align="center">
+                  <template slot-scope="scope">
+                    <span>X：{{ scope.row.x}}</span><br/>
+                    <span>Y：{{ scope.row.y}}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="time" label="报警时间" align="center"></el-table-column>
+                <el-table-column label="报警类型" align="center">
+                  <template slot-scope="scope">
+                    <span v-show="scope.row.alarmtype===1">人员求解</span>
+                    <span v-show="scope.row.alarmtype===2">电子围栏</span>
+                    <span v-show="scope.row.alarmtype===3">电池欠压</span>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="jctime" label="解除报警时间" align="center"></el-table-column>
+                <el-table-column prop="jcreason" label="解除报警原因" align="center"></el-table-column>
                 <el-table-column label="操作" align="center" fixed="right">
                   <template slot-scope="scope">
-                    <el-button size="mini" type="primary" icon="el-icon-edit" @click="toEdit(scope.row)"></el-button>
-                    <el-button size="mini" type="danger" icon="el-icon-delete" @click="toDelete(scope.row)"></el-button>
+                    <el-button v-show="scope.row.state===1" size="mini" style="margin:0" type="primary" icon="el-icon-close-notification" @click="toEdit(scope.row)"></el-button>
+                    <el-button v-show="scope.row.state!==1" size="mini" style="margin:0" type="primary" icon="el-icon-close-notification" @click="toEdit(scope.row)" disabled></el-button>
                   </template>
                 </el-table-column>
               </el-table>
@@ -44,48 +73,18 @@
       </div>
     </div>
     <!-- 表单渲染 -->
-    <el-dialog append-to-body :close-on-click-modal="false" :before-close="cancelForm" :visible.sync="visible" :title="title" width="800px">
-      <el-form :model="formData" :rules="rules" ref="formViewRef" :inline="true" :status-icon="true" size="mini">
-        <el-row>
-          <el-col :span="12">
-            <div class="grid-content">
-              <el-form-item label="信标名称：" prop="beaconame" class="form-cell">
-                <div class="cell-box">
-                  <el-input v-model="formData.beaconame" class="cell-input"></el-input>
-                </div>
-              </el-form-item>
-            </div>
-          </el-col>
-          <el-col :span="12">
-            <div class="grid-content">
-              <el-form-item label="信标编号：" class="form-cell" prop="beaconumber">
-                <div class="cell-box">
-                  <el-input v-model="formData.beaconumber" class="cell-input"></el-input>
-                </div>
-              </el-form-item>
-            </div>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="12">
-            <div class="grid-content">
-              <el-form-item label="X坐标：" class="form-cell" prop="xcoordinate">
-                <div class="cell-box">
-                  <el-input v-model="formData.xcoordinate" class="cell-input"></el-input>
-                </div>
-              </el-form-item>
-            </div>
-          </el-col>
-          <el-col :span="12">
-            <div class="grid-content">
-              <el-form-item label="Y坐标：" class="form-cell" prop="ycoordinate">
-                <div class="cell-box">
-                  <el-input v-model="formData.ycoordinate" class="cell-input"></el-input>
-                </div>
-              </el-form-item>
-            </div>
-          </el-col>
-        </el-row>
+    <el-dialog append-to-body :close-on-click-modal="false" :before-close="cancelForm" :visible.sync="visible" title="解除报警" width="500px">
+      <el-form :model="formData" :rules="rules" ref="formViewRef" :inline="true" label-width="180px">
+        <el-form-item label="解除时长（h）：" class="form-cell" prop="jcHours" style="width:100%">
+          <div class="cell-box">
+            <el-input v-model="formData.jchours" class="cell-input" type="number"></el-input>
+          </div>
+        </el-form-item>
+        <el-form-item label="解除报警原因：" class="form-cell" prop="jcbjReason">
+          <div class="cell-box">
+            <el-input v-model="formData.jcreason" class="cell-input"></el-input>
+          </div>
+        </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="text" @click="cancelForm">取消</el-button>
@@ -102,9 +101,7 @@ import {Tools, HttpReq, Dates} from '@/assets/js/common.js';
 export default {
   name: 'peopleAlarm',
   data() {
-    const basePathUrl = window.basePathUrl || ''
     return {
-      configUrl: basePathUrl + 'config/config.json',
       title: '新增',
       visible: false,
       loading: false,
@@ -116,22 +113,16 @@ export default {
       graphicLayer: null,
       stuOpts: [
         {label: '全部', value: undefined},
-        {label: '离线', value: '离线'},
-        {label: '在线', value: '在线'},
+        {label: '人员求解', value: 1},
+        {label: '电子围栏', value: 2},
+        {label: '电池欠压', value: 3},
       ],
       tableData: [],
       formData: {
-        beaconame: '',
-        beaconumber: '',
-        xcoordinate: '',
-        ycoordinate: '',
-      },
-      rules: {
-        beaconame: {required: true, message: ' ', trigger: 'blur'},
-        beaconumber: {required: true, message: ' ', trigger: 'blur'},
-        xcoordinate: {required: true, message: ' ', trigger: 'blur'},
-        ycoordinate: {required: true, message: ' ', trigger: 'blur'},
+        jchours: '',
+        jcreason: '',
       },
+      rules: {},
     }
   },
   mounted() {
@@ -140,22 +131,20 @@ export default {
     })
   },
   methods: {
-    formatOpt(arr,val){
-      let str='';
-      arr.forEach((item)=>{
-        if(item.value==val){
-          str = item.label;
-        }
-      });
-      return str;
-    },
     loadData() {
       var param = this.query;
       param.page = this.page - 1;
       param.size = this.size;
+      param.vague = {name:param.name||undefined};
+      param.exact = {alarmtype:param.alarmtype};
+      param.sort = `date,desc`;
+      param.daterange = undefined;
+      if(param.timeList && param.timeList.length){
+        param.daterange=param.timeList.join(',');
+      }
       this.$nextTick(() => {
         //获取安检信息
-        HttpReq.truckDispatching.propleGetPerbeacon(param).then((res) => {
+        HttpReq.truckDispatching.propleGetPerabnormal(param).then((res) => {
           if (res.code == 200) {
             this.loading = false;
             this.tableData = res.body.list;
@@ -164,38 +153,16 @@ export default {
         })
       })
     },
-    toAdd() {
-      this.title = '新增';
-      this.visible = true;
-    },
     toEdit(item) {
-      this.title = '编辑';
       this.visible = true;
-      this.formData = item;
-    },
-    toDelete(item) {
-      var id = item.id;
-      this.$confirm('确认删除该条数据吗?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then((e) => {
-        HttpReq.truckDispatching.propleDeletePerbeacon({id}).then((res) => {
-          if (res.code == 200) {
-            this.$message({
-              message: res.msg,
-              type: 'success'
-            });
-            this.loadData();
-          }
-        })
-      })
+      this.formData = {
+        id: item.id,
+        jchours: 1,
+        jcreason: '',
+      }
     },
     cancelForm() {
       this.visible = false;
-      this.$refs.formViewRef.resetFields();
-    },
-    tableRowClassName({row, rowIndex}) {
     },
     // 点击搜索
     toSearch() {
@@ -216,32 +183,20 @@ export default {
       this.size = e
       this.loadData()
     },
+
     submitForm(validateName, item) {
       this.$refs[validateName].validate(valid => {
         if (valid) {
-          if (this.title === '新增') {
-            HttpReq.truckDispatching.proplePostPerbeacon(item).then((res) => {
-              if (res.code == 200) {
-                this.$message({
-                  message: res.msg,
-                  type: 'success'
-                });
-                this.cancelForm();
-                this.loadData()
-              }
-            })
-          } else {
-            HttpReq.truckDispatching.proplePutPerbeacon(item).then((res) => {
-              if (res.code == 200) {
-                this.$message({
-                  message: res.msg,
-                  type: 'success'
-                });
-                this.cancelForm();
-                this.loadData()
-              }
-            })
-          }
+          HttpReq.truckDispatching.proplePutPerabnormal(item).then((res) => {
+            if (res.code == 200) {
+              this.$message({
+                message: res.msg,
+                type: 'success'
+              });
+              this.cancelForm();
+              this.loadData()
+            }
+          })
         }
       });
     },

src/views/personnelPositioning/peopleLogData/index.vue

@@ -59,7 +59,10 @@
       </div>
     </div>
     <!-- 视频 -->
-    <el-dialog append-to-body :close-on-click-modal="false" :before-close="cancelForm" :visible="videoDia" :title="title" width="800px">
+    <el-dialog append-to-body :close-on-click-modal="false" :before-close="cancelFormViedoRtc" :visible="videoRtc" title="实况" width="800px">
+      <video id="remoteVideo" controls style="width:100%;height:440px;"></video>
+    </el-dialog>
+    <el-dialog append-to-body :close-on-click-modal="false" :before-close="cancelFormViedo" :visible="videoDia" title="回放" width="800px">
       <div style="width:100%;height:440px;">
         <video id="videoRealtime" class="video-js vjs-default-skin vjs-big-play-centered vjs-fluid" controls data-setup="{}">
           您的浏览器不支持：HTML5 video.
@@ -75,17 +78,17 @@
           placeholder="选择日期">
         </el-date-picker>
         <el-button size="mini" type="success" icon="el-icon-search" @click="loadvideoList">查询</el-button>
-        <el-button size="mini" type="primary" icon="el-icon-video-camera" @click="videoPlay">实时播放</el-button>
+        <el-button size="mini" type="primary" icon="el-icon-video-camera" @click="realVideo">实时播放</el-button>
       </div>
-      <el-table :data="videoList" border style="width:auto">
+      <el-table :data="videoList" border style="width:auto;height:45vh;overflow-y:auto">
         <el-table-column prop="safetyhatmac" label="录像时间" align="center">
           <template slot-scope="scope">
             {{formatDate(scope.row.time)}}
           </template>
         </el-table-column>
-        <el-table-column label="操作" align="center" width="100px">
+        <el-table-column label="操作" align="center" width="160px">
           <template slot-scope="scope">
-            <el-button size="mini" icon="el-icon-video-camera-solid" @click="videoPlay(scope.row)">播放</el-button>
+            <el-button size="mini" icon="el-icon-video-camera-solid" @click="videoPlay(scope.row.url)">播放</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -109,6 +112,7 @@
 
 <script>
 import {Tools, HttpReq, Dates} from '@/assets/js/common.js';
+import {JSWebrtc} from '@/assets/js/jswebrtc.js';
 import 'video.js/dist/video-js.css'
 import videojs from 'video.js'
 import 'videojs-contrib-hls'
@@ -120,11 +124,13 @@ export default {
     return {
       configUrl: basePathUrl + 'config/config.json',
       videoPlayer: null,
+      videoRtcPlayer: null,
       title: '新增',
       photoView: false,
       videoView: false,
       loading: false,
       videoDia: false,
+      videoRtc: false,
       page: 1,
       size: 10,
       total: 0,
@@ -141,6 +147,7 @@ export default {
       photoList: [],
       videoDate: '',
       videoList: [],
+      peoItem: null,
     }
   },
   mounted() {
@@ -187,11 +194,10 @@ export default {
     },
     loadDataP() {
       var param = {
-        userid: this.userid,
+        userid: this.peoItem.userid,
         page: this.pageP,
       };
       this.$nextTick(() => {
-        //获取安检信息
         HttpReq.truckDispatching.propleGetHisphoto(param).then((res) => {
           if (res.code == 200) {
             if(res.body.data){
@@ -209,13 +215,12 @@ export default {
     },
     loadvideoList() {
       let param = {
-        userid: this.userid,
+        userid: this.peoItem.userid,
         year: `${this.videoDate.getFullYear()}`,
         month: `${('0' + (this.videoDate.getMonth() + 1)).substr(-2)}`,
         day: `${('0' + (this.videoDate.getDate())).substr(-2)}`
       };
       this.$nextTick(() => {
-        //获取安检信息
         HttpReq.truckDispatching.propleGetHisvideo(param).then((res) => {
           if (res.code == 200) {
             if(res.body.data){
@@ -232,12 +237,44 @@ export default {
     openPhotoView(item) {
       this.title = '相册';
       this.photoView = true;
-      this.userid = item.userid;
+      this.peoItem = item;
       this.pageP = 1;
       this.photoList = [];
       this.loadDataP();
     },
-    videoPlay(item){
+    realVideo(){
+      if(this.videoRtcPlayer){
+        this.videoRtcPlayer.destroy();
+        this.videoRtcPlayer = null;
+      }
+      this.videoRtc = true;
+      this.$nextTick(() => {
+        HttpReq.truckDispatching.propleGetRealvideo({
+          mac: this.peoItem.safetyhatmac,
+        }).then((res) => {
+          if (res.code == 200) {
+            if(res.body && res.body.api_url && res.body.play_url){
+              this.videoRtcPlayer = new JSWebrtc.Player(res.body.api_url, res.body.play_url, {
+                  video: document.getElementById("remoteVideo"),
+                  autoplay: true,
+                  onPlay: () => {
+                    console.log('开始播放');
+                  },
+                  onFail: () => {
+                    console.log('播放失败');
+                    this.videoRtcPlayer.destroy();
+                  }
+                });
+            }else{
+              this.$message({
+                message: '链接失败！'+res.body.msg
+              });
+            }
+          }
+        })
+      })
+    },
+    videoPlay(url, tp){
       this.videoDia = true;
       this.$nextTick(() => {
         if(!this.videoPlayer){
@@ -245,7 +282,7 @@ export default {
             fluid: true,
             bigPlayButton: false,
             textTrackDisplay: false,
-            sources: [{ src:item.url, type: "video/mp4" }],
+            sources: [{ src:url, type: tp||"video/mp4" }],
             posterImage: true,
             errorDisplay: false,
             controlBar: true
@@ -254,7 +291,7 @@ export default {
             this.videoPlayer.play();
           })
         }else{
-          let data = { src:item.url, type: "video/mp4" }
+          let data = { src:url, type: tp||"video/mp4" }
           this.videoPlayer.pause();
           this.videoPlayer.src(data);
           this.videoPlayer.load(data);
@@ -269,7 +306,7 @@ export default {
     openvideoView(item) {
       this.title = '视频回放';
       this.videoView = true;
-      this.userid = item.userid;
+      this.peoItem = item;
       this.videoList = [];
       this.videoDate = new Date();
       this.loadvideoList();
@@ -303,6 +340,16 @@ export default {
         this.download(res, `人员设备历史记录${d.getFullYear()}${('0'+(d.getMonth()+1)).substr(-2)}${('0'+(d.getDate())).substr(-2)}`, 'xlsx')
       })
     },
+    cancelFormViedoRtc(){
+      this.videoRtc = false;
+      if(this.videoRtcPlayer){
+        this.videoRtcPlayer.destroy();
+        this.videoRtcPlayer = null;
+      }
+    },
+    cancelFormViedo(){
+      this.videoDia = false;
+    },
     cancelForm() {
       this.photoView = false;
       this.videoView = false;
@@ -340,6 +387,9 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scope>
+div::-webkit-scrollbar{
+  display:none
+}
 .el-table .warning-row {
   background: oldlace;
 }
@@ -412,10 +462,4 @@ export default {
   width: 308px;
   height: 173px;
 }
-.monitorCover_Video{
-  left: 50%;
-  transform: translateX(-50%);
-  width: 80vw;
-  height: 90vh;
-}
 </style>

src/views/regionalManagement/regionalInformation/index.vue

@@ -226,7 +226,9 @@ export default {
 			this.form.status.cu = 0;
 			this.form.visible = true;
 			this.form.reqType = 'add';
-			this.form.item = {};
+			this.form.item = {
+        limitclass: '限入',
+      };
 			this.picFileName = '';
 			this.checkDataList = [];
 		},

src/views/slopeMonitoring/alarmManagement/index.vue

@@ -76,7 +76,7 @@
     <!-- 表单渲染 -->
     <el-dialog append-to-body :close-on-click-modal="false" :before-close="cancelForm" :visible.sync="editVisible" title="解除报警" width="500px">
       <el-form :model="formData" :rules="rules" ref="formViewRef" :inline="true" label-width="180px">
-        <el-form-item label="解除时长：" class="form-cell" prop="jcHours" style="width:100%">
+        <el-form-item label="解除时长（h）：" class="form-cell" prop="jcHours" style="width:100%">
           <div class="cell-box">
             <el-input v-model="formData.jcHours" class="cell-input" type="number"></el-input>
           </div>