解决冲突

ZZJ

2021-10-13 4d010f1940db29c1effc0f9bd6a975436c1183d9

 src/pages/changchunTrack/components/VideoItem.vue

@@ -6,10 +6,7 @@
    @mouseenter.stop.prevent="videoMouseEnter($event)"
    @mouseleave="videoMouseLeave($event)"
  >
    <div
      class="video-box-top"
      v-if="videoItem !== '' && videoItem !== undefined && videoItem !== null"
    >
    <div class="video-box-top" v-if="videoItem !== '' && videoItem !== undefined && videoItem !== null">
      <b>{{ videoItem.name }}</b>
      <span @click="deleteVideo(videoIndex)">×</span>
    </div>
@@ -35,23 +32,34 @@
        :isRunning="videoItem.isRunning"
        :isGb="videoItem.cameraType === 1"
        :showArea="showArea"
        :hasPoster="hasPoster"
        v-if="videoItem !== '' && videoItem !== undefined && videoItem !== null && TreeDataPool.treeActiveName==='camera'"
        v-if="!quietSwitch && videoItem !== '' && videoItem !== undefined && videoItem !== null"
      ></camera-player>

      <video
        v-if="videoItem !== '' && videoItem !== undefined && videoItem !== null && TreeDataPool.treeActiveName==='dataStack'"
        :src="videoItem.rtsp"
        autoplay="autoplay"
        poster="/images/cameraVideo/video-poster.png"
        controls
      >您的浏览器不支持 video 标签。</video>
      <camera-player
        :cameraName="qsVideoItem0.name"
        :cameraID="qsVideoItem0.id"
        :rtspUrl="qsVideoItem0.rtsp"
        :isRunning="qsVideoItem0.isRunning"
        :isGb="qsVideoItem0.cameraType === 1"
        v-show="quietSwitch && workPlayer === 0"
        ref="qsPlayer0"
        v-if="qsVideoItem0 !== '' && qsVideoItem0 !== undefined && qsVideoItem0 !== null"
      ></camera-player>
      <camera-player
        :cameraName="qsVideoItem1.name"
        :cameraID="qsVideoItem1.id"
        :rtspUrl="qsVideoItem1.rtsp"
        :isRunning="qsVideoItem1.isRunning"
        :isGb="qsVideoItem1.cameraType === 1"
        v-show="quietSwitch && workPlayer === 1"
        ref="qsPlayer1"
        v-if="qsVideoItem1 !== '' && qsVideoItem1 !== undefined && qsVideoItem1 !== null"
      ></camera-player>
    </div>
  </div>
</template>

<script>
import { ptzControl } from "@/api/camera"
import { ptzControl } from "@/api/camera";

import CameraPlayer from "@/components/player";

@@ -67,42 +75,92 @@
    videoIndex: null,
    starW: {
      type: String,
      default: ''
      default: ""
    },
    starH:{
    starH: {
      type: String,
      default: ''
      default: ""
    },
    videoItem: {
      type: [Object, String],
      default: null
    },
    showArea: Boolean,
    hasPoster: Boolean,
    showArea: {
      type: Boolean,
      default: false
    },
    quietSwitch: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      timer: '',
      timer: "",
      mouseDown: false,
      videoDataItem: null
    }
      workPlayer: -1,
      qsVideoItem0: null,
      qsVideoItem1: null,
      checkStatusTimer: 0
    };
  },
  computed: {
    vWidth() {
      if (this.starW!=0) {
        return this.starW
       
      if (this.starW != 0) {
        return this.starW;
      }
      let per = (1 / this.videoGuid) * 100 + "%";
      return `calc(${per} - 4px)`;
    },
    

    vHeight() {
      if (this.starH!=0) {
        return this.starH
      if (this.starH != 0) {
        return this.starH;
      }
      let per = (1 / this.videoGuid) * 100 + "%";
      return `calc(${per} - 4px)`;
    }
  },
  watch: {
    videoItem: function(newVal, oldVal) {
      if (!this.quietSwitch) {
        return;
      }

      console.log("new rtsp:", newVal);
      console.log("this.workPlayer:", this.workPlayer);
      // 首次
      if (this.workPlayer < 0) {
        this.workPlayer = 0;
        this.qsVideoItem0 = newVal;
        return;
      }

      let _this = this;
      clearInterval(_this.checkStatusTimer);

      if (_this.workPlayer == 0) {
        _this.qsVideoItem1 = newVal;
        _this.checkStatusTimer = setInterval(() => {
          // console.log(_this.$refs.qsPlayer1.wfs.playerStatus);
          if (_this.$refs.qsPlayer1.wfs.playerStatus == 1) {
            _this.workPlayer = 1;
            _this.qsVideoItem0 = null;
            clearInterval(_this.checkStatusTimer);
          }
        }, 1000);
      }

      if (_this.workPlayer == 1) {
        _this.qsVideoItem0 = newVal;
        _this.checkStatusTimer = setInterval(() => {
          if (_this.$refs.qsPlayer0.wfs.playerStatus == 1) {
            _this.workPlayer = 0;
            _this.qsVideoItem1 = null;
            clearInterval(_this.checkStatusTimer);
          }
        }, 1000);
      }
    }
  },
  methods: {
@@ -113,42 +171,40 @@
      // 当前只支持国标摄像机
      // console.log(type, 'ptCtrl')
      if (this.videoItem.cameraType != 1) {
        return
        return;
      }
      this.mouseDown = true;
      let params = {
        cameraId: this.videoItem.id,
        cameraType: this.videoItem.cameraType,
        PTZType: type
      }
      ptzControl(params).then(rsp => {
      };
      ptzControl(params).then((rsp) => {
        // console.log(rsp)
      })
      let that = this
      });
      let that = this;
      this.timer = setTimeout(() => {
        that.ptStop()
      }, 5000)
        that.ptStop();
      }, 5000);
    },
    ptStop() {
      // 当前只支持国标摄像机
      if (this.videoItem.cameraType != 1) {
        return
        return;
      }
      let params = {
        cameraId: this.videoItem.id,
        cameraType: this.videoItem.cameraType,
        PTZType: "stop"
      }
      };
      if (this.mouseDown) {
        this.mouseDown = false
        ptzControl(params).then(rsp => {
        this.mouseDown = false;
        ptzControl(params).then((rsp) => {
          // console.log(rsp)
        })
        });
      }
    },
    deleteVideo(index) {
      let video = this.TreeDataPool.videoArr;
      video[index].isPlaying = false;
      this.TreeDataPool.setVideoArr(index, undefined, this);
    },
    videoMouseEnter(e) {