i

public/antd_color.less

@@ -42,7 +42,7 @@ html {--antd-wave-shadow-color: @primary-color;}
 .ant-alert-info .ant-alert-icon {color: #1890ff;}
 .ant-alert-warning {background-color: #fffbe6;border: 1px solid #ffe58f;}
 .ant-alert-warning .ant-alert-icon {color: #faad14;}
-.ant-alert-error {background-color: color(~`colorPalette("@{heading-color}", 1)`);border: 1px solid #ffa39e;}
+.ant-alert-error {background-color: #fff1f0;border: 1px solid #ffa39e;}
 .ant-alert-error .ant-alert-icon {color: #f5222d;}
 .ant-alert-close-icon {background-color: transparent;border: none;}
 .ant-alert-close-icon .anticon-close {color: @text-color-secondary;}
@@ -1377,7 +1377,7 @@ tr.ant-table-expanded-row:hover {background: #fbfbfb;}
 .ant-tag-pink-inverse {color: #fff;background: #eb2f96;border-color: #eb2f96;}
 .ant-tag-magenta {color: #eb2f96;background: #fff0f6;border-color: #ffadd2;}
 .ant-tag-magenta-inverse {color: #fff;background: #eb2f96;border-color: #eb2f96;}
-.ant-tag-red {color: #f5222d;background: color(~`colorPalette("@{heading-color}", 1)`);border-color: #ffa39e;}
+.ant-tag-red {color: #f5222d;background: #fff1f0;border-color: #ffa39e;}
 .ant-tag-red-inverse {color: #fff;background: #f5222d;border-color: #f5222d;}
 .ant-tag-volcano {color: #fa541c;background: #fff2e8;border-color: #ffbb96;}
 .ant-tag-volcano-inverse {color: #fff;background: #fa541c;border-color: #fa541c;}

src/layouts/PageContent.vue

@@ -1,9 +1,7 @@
 <template>
     <div class="wrap">
         <!-- 面包屑下标题 -->
-        <keep-alive :include="['checkManage']">
         <router-view class="table"></router-view>
-        </keep-alive>
         <!-- footer -->
         <div class="wrap-footer bg-white">
             <slot name="footer"></slot>

src/views/cameraManage/model.vue

@@ -28,7 +28,7 @@
                  </a-form>
              </a-modal>
          </template>
-         <template v-else-if="type=='test'">
+         <!-- <template v-else-if="type=='test'">
              <a-modal
                  v-model="isShow"
                  @cancel="handleCancel"
@@ -84,7 +84,7 @@
                     </div>
                 </div>
              </a-modal>
-         </template>
+         </template> -->
 
          <template v-else-if="type=='config'">
              <a-modal
@@ -100,7 +100,7 @@
                 
                  <video width="900"
                          height="600"
-                :id="`camera${id}`" 
+                :id="`config-camera${id}`" 
                 autoplay muted ></video>
                  <div class="operation-list">
                      <div class="operation-item">
@@ -197,7 +197,7 @@ const columns = [
         scopedSlots: { customRender: 'position' }
     }
 ];
-import WebRtcPlayer from ".././realTimeMonitoring/webrtcplayer"
+import WebRtcPlayer from "./webrtcplayer"
 export default {
     props:[ 'visible', 'modelType', 'modelData'],
     watch: {
@@ -228,11 +228,7 @@ export default {
                 this.id = newVal.id
                 this.mdata = newVal
                 console.log(newVal)
-                this.$nextTick(()=>{   //this.$nextTick解决不能在表单渲染之前赋值的报错问题
+               
-                    console.log(newVal.rtsp)
-                    //this.getConfigVideo(newVal.rtsp)
-                    this.getConfigIoList()
-                })
             }
 
         },
@@ -281,14 +277,16 @@ export default {
                 this.autoPlay(this.id)
             })
         } else if (this.$route.query.modelType == 'config') {
+            
             this.isShow = true
             this.id = this.$route.query.modelData.id
+            this.getConfigIoList()
             this.type = this.$route.query.modelType
             this.mdata = this.$route.query.modelData
             this.$nextTick(() => {
                 this.autoPlay(this.id)
             })
-            this.getConfigIoList()
+            
         }
     },
     destroy(){
@@ -333,28 +331,27 @@ export default {
         },
 
         handleCancel() {
-            this.player.destroy()
+            
             console.log('Clicked cancel button');
             this.$emit('close', false, {})
             if(this.type=='test') {
                 this.$router.go(-1);
-                //this.player.destroy();
-                this.player = null;
             }else if(this.type=='config') {
                 this.$router.go(-1);
-                //this.player.destroy();
+                this.player.destroy();
-                this.player = null;
             }
             
         },
-        //写两个会让渲染快一点，避开两个重连机制
-        autoPlay(id){
-            let video = document.getElementById('camera'+id);
        
+        autoPlay(id){
+            let video = document.getElementById('config-camera'+id);
+            if(video){
                 let player = new WebRtcPlayer(video,'camera'+id);
-            
+                console.log("okkkkkk")
                 player.load('camera'+id);
                 this.player = player
+            }
+            
         },
         
         setVideoServer(){

src/views/cameraManage/webrtcplayer.js

@@ -0,0 +1,123 @@
+class WebRtcPlayer {
+  static server = '127.0.0.1:8083';
+  webrtc = null;
+  video = null;
+  server = null;
+  codecLink = null;
+  rsdpLink = null;
+  stream = new MediaStream();
+  uuid = null;
+  options={
+      onStatusChange:null
+  };
+
+  constructor(video1, uuid, options={}) {
+      console.log("new uuid:"+uuid)
+      this.server = WebRtcPlayer.server;
+      //this.video = document.getElementById(id);
+      this.video = video1
+      this.uuid = uuid;
+      Object.assign(this.options, options);
+      this.createLinks();
+      this.play();
+  }
+
+  createLinks() {
+      this.codecLink = "//" + this.server + "/stream/codec/" + this.uuid
+      this.rsdpLink = "//" + this.server + "/stream/receiver/" + this.uuid
+  }
+
+  play() {
+      this.webrtc = new RTCPeerConnection({
+          iceServers: [{
+              urls: ["stun:stun.l.google.com:19302"]
+          }]
+      });
+      if(this.webrtc){
+
+      }else{
+          console.log("no")
+      }
+      this.webrtc.onnegotiationneeded = this.handleNegotiationNeeded.bind(this);
+      this.webrtc.ontrack = this.onTrack.bind(this);
+      fetch(this.codecLink)
+          .then((response) => {
+              response.json().then((data) => {
+                  data.forEach((item, i) => {
+                      this.webrtc.addTransceiver(item.Type, {
+                          'direction': 'sendrecv'
+                      });
+                  });
+              });
+          })
+          .catch((error) => {
+              console.log(error);
+          });
+
+      this.webrtc.onconnectionstatechange = () => {
+      if(this.webrtc.connectionState == 'connected' || this.webrtc.connectionState == 'connecting'){
+        console.log("uuid:"+this.uuid+" status:" + this.webrtc.connectionState)
+      }else{
+        console.log(this.webrtc.connectionState)
+        this.load(this.uuid);
+      }
+    }
+  }
+
+  async handleNegotiationNeeded() {
+      let offer = await this.webrtc.createOffer();
+      await this.webrtc.setLocalDescription(offer);
+      let formData = new FormData();
+      formData.append('suuid', this.uuid);
+      formData.append('data', btoa(this.webrtc.localDescription.sdp));
+      fetch(this.rsdpLink, {
+          method: 'POST',
+          body: formData
+      })
+          .then((response) => {
+              response.text().then((data) => {
+                  this.webrtc.setRemoteDescription(new RTCSessionDescription({
+                      type: 'answer',
+                      sdp: atob(data)
+                  }))
+              });
+          })
+          .catch((err) => {})
+  }
+
+  onTrack(event) {
+      this.stream.addTrack(event.track);
+      this.video.srcObject = this.stream;
+      this.video.play();
+  }
+
+  load(uuid) {
+      this.destroy();
+      this.uuid = uuid;
+      this.createLinks();
+      this.play();
+  }
+
+  destroy() {
+      console.log("destroy uuid:"+this.uuid)
+      this.webrtc.close();
+      this.webrtc = null;
+      this.video.srcObject = null;
+      this.stream = new MediaStream();
+  }
+
+  getImageUrl() {
+      let canvas = document.createElement("canvas");
+      canvas.width = this.video.videoWidth;
+      canvas.height = this.video.videoHeight;
+      canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
+      let dataURL = canvas.toDataURL();
+      canvas.remove();
+      return dataURL;
+  }
+
+  static setServer(serv) {
+      this.server = serv;
+  }
+}
+export default WebRtcPlayer; 

src/views/checkManage/Subsection.vue

@@ -254,18 +254,17 @@ export default {
                 
                     var i = 1;
                     for(let a in res.data.columnTabStatus){
-                        this.status.column[i] = res.data.columnTabStatus[a]
+                        this.$set(this.status.column, i, res.data.columnTabStatus[a]);
+                        // this.status.column[i] = res.data.columnTabStatus[a]
                         i++;
                     }
                     
                     var j = 1;
                     for(let a in res.data.rowTabStatus){
-                        this.status.row[j] = res.data.rowTabStatus[a]
+                        this.$set(this.status.row, j, res.data.rowTabStatus[a]);
+                        // this.status.row[j] = res.data.rowTabStatus[a]
                         j++;
                     } 
-                    console.log(this.status)
-                    
-                    
                 }
             }).catch(err => {
 

src/views/checkManage/checkOperation.vue

@@ -183,7 +183,7 @@ export default {
                 },
                 
             ],
-            statusMap: {0:"未盘点",1:"盘点异常",2:"核对正确"}
+            statusMap: {0:"未盘点",1:"盘点异常",2:"核对正确",3:"核对正确"}
             
         }
     },

src/views/checkManage/index.vue

@@ -104,16 +104,17 @@ export default {
     computed: {
         
     },
+    
     mounted() {
-        this.request();
+        //this.request();
     },
     activated() {
         this.request();
     },
-    beforeRouteLeave(to, form, next) {
+    // beforeRouteLeave(to, form, next) {
-        this.timer && clearInterval(this.timer);
+    //     this.timer && clearInterval(this.timer);
-        next();
+    //     next();
-    },
+    // },
     methods: {
         //获取巷道列表
         request() {
@@ -123,9 +124,14 @@ export default {
                     pageSize: 50,
                 }
             }).then(res => {
-                this.data = res.data.list;
+                //this.data = res.data.list;
+                for(let i = 0;i<res.data.list.length;i++){
+                    this.$set(this.data,i,res.data.list[i])
+                }
+                
                 this.select = res.data.list[0].id
-                this.getStreetDetail(res.data.list[0].id);
+                //this.$set(this.select,res.data.list[0].id,0)
+                this.getStreetDetail(this.select);
                 
             }).catch(err => {