问题修复

ZZJ

2021-11-09 ccee429d379e0108b7445f72ade8d97c110a6fb3

 src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue

@@ -6,9 +6,10 @@
      <div class="video-area">
        <!-- 播放器区域 -->
        <div class="players" ref="playerWrap">
          <div class="single"></div>
          <template v-if="guid == 1">
            <div
              class="video-item"
              class="video-item single"
              :ref="`gridVideoItem_${index}`"
              v-for="(item, index) in videoWrapArr"
              :key="item.id"
@@ -16,11 +17,11 @@
              <div style="display: none"></div>
              <div class="currentPlayer">
                <ali-player
                  @pause="isStop = true"
                  @play="isStop = false"
                  @pause="singlePause"
                  @play="singlePlay"
                  @timeupdate="timeUpdate"
                  :source="curVideo.VideoPath | fixPath"
                  :markers="curVideo.marks"
                  :markers="marks_filter"
                  :ref="`player_${curVideo.id}`"
                />
              </div>
@@ -50,7 +51,7 @@
                  <ali-player
                    @timeupdate="timeUpdate(e, index)"
                    :source="videoArrs[index].VideoPath | fixPath"
                    :markers="videoArrs[index].marks"
                    :markers="marks_filter_arr[index].marks"
                    @pause="isStop = true"
                    @play="isStop = false"
                    :ref="`player_${videoArrs[index].id}`"
@@ -65,7 +66,7 @@
            <div class="progress-bar">
              <el-tooltip
                placement="top"
                v-for="(item, index) in eventMarks"
                v-for="(item, index) in eventMarks_filter"
                :key="item.offset + index"
              >
                <div slot="content">
@@ -74,9 +75,25 @@
                  {{ item.text }}
                </div>
                <div
                  v-if="checkType === 1"
                  class="self-dot"
                  :class="
                    curVideo.IsOperate == '1' &&
                    item.state == 0 &&
                    !item.text.includes('手比')
                      ? 'red'
                      : getColor(item.text)
                  "
                  :style="{
                    left: (item.offset / maxSecond) * 100 + '%',
                  }"
                  @click="dotJump(item.offset)"
                ></div>
                <div
                  v-if="checkType === 2"
                  class="self-dot"
                  :class="
                    curVideo.IsOperate == '11' &&
                    item.state == 0 &&
                    !item.text.includes('手比')
                      ? 'red'
@@ -202,14 +219,14 @@
                <img
                  src="/images/shuohuang/组 801.png"
                  alt=""
                  v-if="showHand == true"
                  @click="closeHand"
                  v-if="showHand == false"
                  @click="openHand"
                />
                <img
                  src="/images/shuohuang/组 800.png"
                  alt=""
                  v-else
                  @click="openHand"
                  @click="closeHand"
                />
              </div>
            </div>
@@ -290,7 +307,7 @@
                    >{{ item.text }}
                  </span>

                  <span class="list-warn">未手比 </span>
                  <span class="list-warn" v-if="checkType === 1">未手比 </span>
                </div>
              </div>
            </div>
@@ -444,6 +461,7 @@
  },
  data() {
    return {
      checkType: 1,
      showHand: true,
      guid: 1,
      labelDialogVisible: false,
@@ -495,18 +513,24 @@
    curTime(newVal) {
      this.curPlayTime = this.getTimeStr(newVal);
    },
    /*  showHand() {
      let arr = this.videoArrs.map((item) => {
        item.marks = item.marks.filter((mark) => {
          console.log(mark.text);
          return mark.text != "手比: 手比";
        });
      });
      console.log(arr);
    }, */
  },
  mounted() {
    setTimeout(() => {
      console.log(this.yinhuanArr);
    }, 1000);
  async mounted() {
    this.renderLabelOpts();

    this.setGuid(1);

    this.getCurVideos(this.videoDetails);
    await this.getCurVideos(this.videoDetails);

    this.getRelatedVideos(this.videoDetails);
    // this.getRelatedVideos(this.videoDetails);
  },
  destroyed() {
    this.videoArrs.length = 0;
@@ -565,7 +589,7 @@
      this.progressChange(this.curTime);
    },
    progressChange(val) {
      this.showPlayBtn = false;
      this.showPlayBtn = true;
      let that = this;
      if (this.guid == 1) {
        this.$refs[`player_${this.curVideo.id}`][0].pause();
@@ -578,6 +602,7 @@
      } else {
        this.videoArrs.forEach((v, i) => {
          this.$refs[`player_${v.id}`][0].seek(val);
          this.$refs[`player_${v.id}`][0].pause();
          if (i == 0) {
            let curT = this.$refs[`player_${v.id}`][0].getCurrentTime();
          }
@@ -694,6 +719,18 @@
            sec = +arr[2];
          _this.maxSecond = min * 60 + sec;
        });

        this.eventMarks.forEach((item) => {
          if (
            item.text.indexOf("玩手机") > -1 ||
            item.text.indexOf("趴伏") > -1 ||
            item.text.indexOf("仰卧") > -1
          ) {
            this.checkType = 2;
          } else {
            this.checkType = 1;
          }
        });
      });
    },
    renderLabelOpts() {
@@ -711,6 +748,13 @@
      }
      if (text.indexOf("过分相") > -1) {
        return "blue";
      }
      if (
        text.indexOf("玩手机") > -1 ||
        text.indexOf("趴伏") > -1 ||
        text.indexOf("仰卧") > -1
      ) {
        return "red";
      }
      return "";
    },
@@ -741,6 +785,8 @@
        console.log(this.$refs);
      });
    },

    // 分窗口
    setGuid(guid) {
      let _this = this;
      this.guid = guid;
@@ -748,6 +794,7 @@
        this.showLocChoise = true;
      } else {
        this.showLocChoise = false;
        console.log(this.$refs[`player_${this.curVideo.id}`]);
        this.$refs[`player_${this.curVideo.id}`][0].pause();
        this.$refs[`player_${this.curVideo.id}`][0].seek(0);
      }
@@ -892,22 +939,82 @@
    closeHand() {
      this.showHand = false;
    },
    singlePause() {
      this.isStop = true;
      this.showPlayBtn = true;
    },
    singlePlay() {
      this.isStop = false;
      this.showPlayBtn = false;
    },
  },
  computed: {
    yinhuanArr() {
      console.log(this.curVideo.IsOperate);
      if (this.curVideo.IsOperate == 0) {
        return [];
      }
      console.log(this.eventMarks);
      return this.eventMarks.filter((x) => {
        return (
          (x.text.indexOf("进出站") > -1 ||
            x.text.indexOf("过分相") > -1 ||
            x.text.indexOf("信号机") > -1) &&
          x.state == 0
        );
      });

      if (this.checkType === 1) {
        return this.eventMarks.filter((x) => {
          return (
            (x.text.indexOf("进出站") > -1 ||
              x.text.indexOf("过分相") > -1 ||
              x.text.indexOf("信号机") > -1) &&
            x.state == 0
          );
        });
      } else if (this.checkType === 2) {
        return this.eventMarks.filter((x) => {
          return (
            x.text.indexOf("玩手机") > -1 ||
            x.text.indexOf("趴伏") > -1 ||
            x.text.indexOf("仰卧") > -1
          );
        });
      }

      return [];
    },
    marks_filter() {
      if (this.showHand) {
        return this.curVideo.marks;
      } else
        return this.curVideo.marks.map((item) => {
          if (item.text != "手比: 手比") {
            return item;
          }
        });
    },
    marks_filter_arr() {
      if (this.showHand) {
        return this.videoArrs;
      } else {
        let arr = this.videoArrs.map((item) => {
          let obj = { ...item };
          let temp = [];
          obj.marks.forEach((mark) => {
            if (mark.text != "手比: 手比") {
              temp.push(mark);
            }
          });
          obj.marks = temp;
          return obj;
        });
        return arr;
      }
    },
    eventMarks_filter() {
      if (this.showHand) {
        return this.eventMarks;
      } else {
        let arr = [];
        this.eventMarks.map((item) => {
          if (item.text != "手比: 手比") {
            arr.push(item);
          }
        });
        return arr;
      }
    },
  },
};
@@ -1033,6 +1140,11 @@
        display: flex;
        flex-wrap: wrap;
        height: 512px;
        .single {
          .prism-controlbar {
            display: none !important;
          }
        }
        .video-item {
          background: black;
          box-sizing: border-box;
@@ -1508,4 +1620,31 @@
    }
  }
}
.el-tooltip__popper {
  * {
    color: #fff;
  }
}

.prism-marker-text {
  p {
    color: #fff;
  }
}

.video-box-top b {
  color: #fff;
}

.currentPlayer .prism-player .prism-big-play-btn {
  left: 46% !important;
  bottom: 39% !important;
  background-size: cover;
  width: 11%;
  height: 23%;
  .outter {
    width: 100%;
    height: 100%;
  }
}
</style>