安全报警，安全帽实况

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/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>