矿山视频监控

package.json

@@ -67,6 +67,7 @@
     "video.js": "^8.0.4",
     "videojs": "^1.0.0",
     "videojs-contrib-hls": "^5.15.0",
+    "videojs-flvjs": "^0.2.0",
     "vue": "2.6.10",
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.4.9",

src/components/ezuikit/EZUIKitJs.vue

@@ -15,9 +15,15 @@
 
         <DPcomputer17 class="DPcomputer17Class"></DPcomputer17>
 
-        <div v-if="noPtz" class="noPtzVideo1">
+        <div v-show="noPtz" class="noPtzVideo1">
+<!--          <video id="videoRealtime" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup="{}" style="width: 100%;height: 100%;" autoplay>-->
+          <video id="videoRealtime" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup="{}" style="width: 100%;height: 100%;">
+            您的浏览器不支持：HTML5 video.
+          </video>
+<!--          <el-select v-model="cameraSrc" class="noPtzCameraList" @change="videoPlay()" :popper-append-to-body="false">-->
+<!--            <el-option v-for="item in cameraList" :key="item.id" :label="item.monitorName" :value="item.monitorUrl" style="font-size:16px;font-weight:400"></el-option>-->
+<!--          </el-select>-->
           <el-button class="noPtzCloseStyle" type="danger" icon="el-icon-close" @click="noPtzCloseFn()" size="mini">关闭</el-button>
-          <iframe :src="iframeSrc" class="iframeSingle"></iframe>
         </div>
 
         <div class="aiAnalysisRightViews">
@@ -110,6 +116,7 @@ import * as echarts from 'echarts';
 import axios from 'axios'
 import moment from 'moment';
 import DPcomputer17 from '../../views/MLargeScreen/components/smallComponents/DPcomputer17.vue'
+import {flvjs} from '@/assets/js/flv.js';
 
 export default {
   components:{
@@ -127,7 +134,7 @@ export default {
         children: "children",
         label: "label",
       },
-      noPtz:false,
+      noPtz: false,
       aiTabPosition:'今天',
       echarts1Data:[{ value: 0, name: '接打电话' }, { value: 0, name: '分神驾驶' }, { value: 0, name: '前向碰撞' }, { value: 0, name: '疲劳驾驶' }, { value: 0, name: '接近报警' }],
       echarts2Data:{
@@ -150,6 +157,7 @@ export default {
       //图片数据
       elimageSrc:'',
 			elimageSrcShow:false,
+      flvPlayer: null,
     };
   },
   mounted() {
@@ -160,6 +168,15 @@ export default {
     },10000)
   },
   methods: {
+    stopPlay(flvPlayer){
+      if(flvPlayer && flvPlayer._msectl && flvPlayer.e){
+        flvPlayer.pause();
+        flvPlayer.unload();
+        flvPlayer.detachMediaElement();
+        flvPlayer.destroy();
+        flvPlayer = null
+      };
+    },
     getCode() {
       //分区数据
       HttpReq.truckDispatching.mineMonitoringPartitionQuery({size: 999}).then((res) => {
@@ -192,10 +209,22 @@ export default {
     },
     handleNodeClick(data) {
       if (data.children) {
-        return
-      } else {
-        this.iframeSrc = this.defaultIframeSrc + data.cameraName;
+        return;
+      }
+      // this.iframeSrc = this.defaultIframeSrc + data.cameraName;
       this.noPtz = true;
+      if (flvjs.isSupported()) {
+        this.flvPlayer && this.stopPlay(this.flvPlayer);
+        this.flvPlayer = flvjs.createPlayer({
+          type: "flv",
+          isLive: true,
+          hasAudio: false,
+          url: 'http://39.164.225.220:5008/live?port=1935&app=live&stream='+data.streamName,
+        });
+        this.flvPlayer.attachMediaElement(document.getElementById("videoRealtime"));
+        this.flvPlayer.load();
+      } else {
+        console.log("不支持的格式");
       }
     },
     aiTabPositionFn(text){

src/views/monitoringManagement/mineVideoSetUp/index.vue

@@ -53,8 +53,9 @@
         <div class="text item">
           <el-table :data="cameraDetail" border style="width: 100%" height="710">
             <el-table-column prop="id" label="NO." align="center" width="60"></el-table-column>
-            <el-table-column prop="cameraName" label="区域名称" align="left"></el-table-column>
-            <el-table-column prop="cameraIp" label="区域IP" align="left"></el-table-column>
+            <el-table-column prop="cameraName" label="摄像头名称" align="left"></el-table-column>
+            <el-table-column prop="streamName" label="视频流名称" align="left"></el-table-column>
+            <el-table-column prop="cameraIp" label="IP地址" align="left"></el-table-column>
             <el-table-column label="操作" width="150" align="center">
               <template slot-scope="scope">
                 <el-button size="mini" round type="danger" @click="cameraDetaileDelete(scope.row)">删除</el-button>
@@ -63,12 +64,15 @@
           </el-table>
         </div>
       </el-card>
-        <el-dialog :title="cameraDetailTitle" :visible.sync="cameraDetailVisible" width="30%">
-        <el-form ref="cameraDetailData" :rules="rulesDetai" :model="cameraDetailData" label-width="80px">
-          <el-form-item label="名称" style="margin-bottom:15px;" prop="cameraName">
+      <el-dialog :title="cameraDetailTitle" :visible.sync="cameraDetailVisible" width="500px">
+        <el-form ref="cameraDetailData" :rules="rulesDetai" :model="cameraDetailData" label-width="100px">
+          <el-form-item label="摄像头名称" style="margin-bottom:15px;" prop="cameraName">
             <el-input v-model="cameraDetailData.cameraName"></el-input>
           </el-form-item>
-          <el-form-item label="IP" style="margin-bottom:15px;" prop="cameraIp">
+          <el-form-item label="视频流名称" style="margin-bottom:15px;" prop="streamName">
+            <el-input v-model="cameraDetailData.streamName"></el-input>
+          </el-form-item>
+          <el-form-item label="IP地址" style="margin-bottom:15px;" prop="cameraIp">
             <el-input v-model="cameraDetailData.cameraIp"></el-input>
           </el-form-item>
           <!-- <el-form-item label="端口" style="margin-bottom:15px;">
@@ -123,7 +127,8 @@ export default {
         name: [ { required: true, message: '请输入分区名称', trigger: 'blur' },]
       },
       rulesDetai:{
-        cameraName: [ { required: true, message: '请输入名称', trigger: 'blur' },],
+        cameraName: [ { required: true, message: '请输入摄像头名称', trigger: 'blur' },],
+        streamName: [ { required: true, message: '请输入视频流名称', trigger: 'blur' },],
         cameraIp: [ { required: true, message: '请输入IP', trigger: 'blur' },],
       }
     }
@@ -219,8 +224,8 @@ export default {
       }).then( () => {
         HttpReq.truckDispatching.mineMonitoringPartitionDel([row.id]).then((res) => {
           this.$message({
-            message: "删除成功",
-            type: 'success'
+            message: res,
+            type: 'info'
           });
           let param = {};
           HttpReq.truckDispatching.mineMonitoringPartitionQuery(param).then((res) => {
@@ -290,7 +295,7 @@ export default {
                   })
                   this.cameraDetail = newData;
                   this.cameraDetailVisible = false;
-                  this.cameraDetailData = {id:"",cameraId:"",cameraName:"",cameraIp:"",cameraPort:"",cameraWay:""};
+                  this.cameraDetailData = {id:"",cameraId:"",cameraName:"",streamName:"",cameraIp:"",cameraPort:"",cameraWay:""};
                 }
           } else {
             console.log('error submit!!');

src/views/productionPlanManagement/enterpriseInfo/index.vue

@@ -247,7 +247,7 @@
                     </el-form-item>
                   </div></el-col>
                   <el-col :span="8"><div class="grid-content">
-                    <el-form-item label="矿产资源储量：" class="form-cell">
+                    <el-form-item label="矿产资源储量（万吨）：" class="form-cell">
                       <div :class="readonly?'cell-box':''">
                         <el-input v-model="formData.mineralresources" :readonly="readonly" class="cell-input"></el-input>
                       </div>