人员任务分配

heyujie

2021-03-26 8d94a4a0a987f586a9f7f8826ebb76c19387f207

 src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue

@@ -119,17 +119,13 @@
            </div>
          </template>
          <div class="player-control">
            <!-- <div class="progress-bar"></div> -->
            <!--

            -->
            <div class="progress-bar">
              <el-tooltip
                placement="top"
                v-for="(item, index) in eventMarks"
                :key="index"
              >
                <div slot="content">
                <div slot="content"> 
                  {{ getTimeStr(item.offset) }}<br />{{ item.text }}
                </div>
                <div
@@ -140,19 +136,51 @@
                  @click="dotJump(item.offset)"
                ></div>
              </el-tooltip>
              <!-- :marks="marks"  -->
              <el-tooltip
                placement="top"
                v-for="(item, index) in labelMarks"
                :key="index"
              >
                <div slot="content">
                  {{ getTimeStr(item.offset) }}<br />{{ item.text }}
                </div>
                <div
                  class="label-dot"
                  :style="{
                    left: (item.offset/maxSecond)*100 + '%',
                  }"
                  @click="dotJump(item.offset)"
                ></div>
              </el-tooltip>

                <el-tooltip placement="top" :offset="440-hoverOffset"
                :hide-after="0" :visible-arrow="false" 
                >
  <div slot="content" >{{hoverTime}}</div>
              <el-slider
                v-model="curTime"
                :format-tooltip="formatTooltip"
                :max="maxSecond"
                @mousemove.native="triggerHover"
                @change="progressChange"
                @input="inTimeChange"
              ></el-slider>
</el-tooltip>
              
            </div>
            <div class="control-zone">
              <span class="time">{{ curPlayTime }} / {{ maxVideoTime }}</span>
              <div class="play-btn" @click="playAll" v-if="showPlayBtn"></div>
              <div class="stop-btn" @click="pauseAll" v-else></div>
              

              <div class="play-btn" @click="playAll" v-if="showPlayBtn">

                <span class="icon iconfont">&#xe628;</span>

              </div>
              <div class="stop-btn" @click="pauseAll" v-else>

                <span class="icon iconfont">&#xe6fc;</span>
              </div>
            </div>
          </div>
        </div>
@@ -205,7 +233,7 @@
          <!-- <div class="flex-box fixed-height-box2"></div> -->
          <dataset-chart style="width: 100%" v-if="showTable"></dataset-chart>

          <el-tab-pane label="里程标" name="second"> </el-tab-pane>
          <el-tab-pane label="公里标" name="second"> </el-tab-pane>
        </el-tabs>
      </div>
      <div class="bot-right block">
@@ -318,16 +346,15 @@
      curTime: 0,
      showPlayBtn: true,
      eventMarks: [],
      marks: {
        45: {},
        373: {},
      },
      marks: {},
      labelMarks: [],
      maxDuration: 0,
      maxVideoTime: "",
      curPlayTime: "00:00",
      maxSecond: 0,
      isStop: false,
      hoverTime:"",
      hoverOffset:0,
    };
  },
  watch: {
@@ -355,6 +382,10 @@
    this.getRelatedVideos(this.videoDetails);
  },
  methods: {
    triggerHover(e){
      this.hoverOffset=e.offsetX
      this.hoverTime=this.getTimeStr((e.offsetX/880)*this.maxSecond)
    },
    getPlayStatus(e) {
      console.log(e, 1111);
    },
@@ -500,42 +531,15 @@
          item.marks = _this.mergeMarks(item);
        });
        _this.curVideo = res.data.find((item) => item.ID == v.ID);
        console.log(_this.curVideo);
        let map = {},
          map2 = {};
        let arr1 = [],
          arr2 = [];
        _this.curVideo.marks.forEach((item) => {
        _this.curVideo.marks.forEach(item=>{
          if (item.type == 0) {
            map[item.offset] = {
              style: {
                color: "white",
              },
              label: item.text,
            };
            _this.eventMarks.push(item)
          } else {
            map[+item.offset] = {
              style: {
                color: "yellow",
              },
              label: item.text,
            };
            _this.labelMarks.push(item)
          }
        });
        // _this.eventMarks = map
        _this.labelMarks = map2;

        // videoInfo.EventLst.forEach((item) => {
        //   map[item.SecondsInVideo] = {
        //     style:{
        //       color: 'black'
        //     },
        //     label: item.Event + (item.Desc == "" ? "" : ": " + item.Desc)
        //   }
        // });

        if (this.guid == 1) {
          this.maxVideoTime = this.curVideo.VideoTime;
        })
        if (_this.guid == 1) {
          _this.maxVideoTime = _this.curVideo.VideoTime;
        }
        _this.videoArrs = res.data.filter((item) => v.UniqeID == item.UniqeID);
        _this.allCurVideos = res.data;
@@ -543,12 +547,12 @@
          return item.Camera == "司机室";
        });

        this.$nextTick(() => {
        _this.$nextTick(() => {
          _this.$refs[`player_${_this.curVideo.ID}`][0].init();
          let arr = this.maxVideoTime.split(":");
          let arr = _this.maxVideoTime.split(":");
          let min = +arr[0],
            sec = +arr[1];
          this.maxSecond = min * 60 + sec;
          _this.maxSecond = min * 60 + sec;
        });
      });
    },
@@ -651,12 +655,6 @@
              _this.curVideo.LableLst.push(label);
            }
          });
          // getRelatedVideoInfo({ UniqeID: _this.videoDetails.UniqeID }).then(res => {
          //   res.data.forEach(d => {
          //     let someVideo = _this.videoArrs.find(video => video.ID === d.ID);
          //     someVideo.LableLst = d.LableLst
          //   })
          // })

          this.$message.success("添加成功");
          // 标注
@@ -701,16 +699,14 @@
          text: item.Event + (item.Desc == "" ? "" : ": " + item.Desc),
          type: 0,
        };
        this.eventMarks.push(obj);
        return obj;
      });
      const labMarks = videoInfo.LableLst.map((lable) => {
        let obj = {
          offset: lable.Time,
          offset: +lable.Time,
          text: lable.Desc,
          type: 1,
        };
        this.labelMarks.push(obj);
        return obj;
      });
      return eMarks.concat(labMarks);
@@ -818,6 +814,9 @@
              float: left;
            }
          }
          // .prism-controlbar{
          //   display: none;
          // }
          .currentPlayer {
            border: 2px solid aqua;
            height: 100%;
@@ -828,24 +827,41 @@
          }
        }
        .player-control {
          background-color: black;
          background-color: #fff;
          height: 75px;
          width: 100%;
          .progress-bar {
            margin: 0px 30px;
            position: relative;
            .self-dot {
              top: 16px;
              // top: 16px;
              position: absolute;
              height: 6px;
              width: 3px;
              width: 6px;
              z-index: 1;
              background-color: lightcoral;
              border-radius: 60%;
              // border-radius: 30%;
              // pointer-events: none;
              cursor: pointer;
              -webkit-transform: translateX(-50%);
              transform: translateX(-50%);
            }
            .label-dot{
              // top: 16px;
              position: absolute;
              height: 6px;
              width: 6px;
              z-index: 1;
              background-color: yellowgreen;
              cursor: pointer;
              -webkit-transform: translateX(-50%);
              transform: translateX(-50%);
            }
            .el-slider{
                  margin: 16px 0;
                  .el-slider__runway{
                    margin: 0;
                  }
            }
            .el-slider__button {
              width: 12px;
@@ -859,24 +875,27 @@
            .time {
              float: left;
              margin-left: 23px;
              color: #fff;
              // color: #fff;
            }
            .play-btn {
              width: 24px;
              height: 24px;
              cursor: pointer;
              background: url(/apps/shuohuangMonitorAnalyze/img/bigplay.png)
                no-repeat;
              background-size: contain;
              // background: url(/apps/shuohuangMonitorAnalyze/img/smallplay.png)
              
              margin: 0 auto;
              .iconfont{
                    font-size: 25px;
              }
            }
            .stop-btn {
              width: 24px;
              height: 24px;
              cursor: pointer;
              background: url(/apps/shuohuangMonitorAnalyze/img/smallpause.png)
                no-repeat;
              background-size: contain;
              // background: url(/apps/shuohuangMonitorAnalyze/img/smallpause.png)
              .iconfont{
                    font-size: 25px;
              }
              margin: 0 auto;
            }
          }