朔黄视频播放进度条

heyujie

2021-03-24 6e3d8234a4b1bae86b3c896468e20ea9f13c7fb7

朔黄视频播放进度条

 src/Pool/VideoPhotoData.ts

@@ -137,21 +137,41 @@
    }
  }
  async findPerson2() {
    // 111
    this.cards = []
    var compType = this.compTargetType == "1" ? 1 : 0
    var param = {
      page: this.page,
      size: this.size,
      searchTime: this.searchTime,
      picUrl: this.picUrl,
      alarmlevel: this.queryAlarmlevel,
      inputValue: this.inputValue,
      tasks: this.queryTasks,
      treeNodes: this.treeNodes,
      compTargetId: this.compTargetId,
      compTargetType: compType,
      databases: this.compareTabs,
      threshold: this.threshold
    let param
    if ( this.searchFrom== "cluster") {
      param = {
        page: this.page,
        size: this.size,
        searchTime: this.searchTime,
        picUrl: this.picUrl,
        alarmlevel: this.queryAlarmlevel,
        inputValue: this.inputValue,
        tasks: this.queryTasks,
        treeNodes: this.treeNodes,
        compTargetId: this.compTargetId,
        compTargetType: compType,
        databases: this.compareTabs,
        threshold: this.threshold,
        isAll: true
      }
    } else {
      param = {
        page: this.page,
        size: this.size,
        searchTime: this.searchTime,
        picUrl: this.picUrl,
        alarmlevel: this.queryAlarmlevel,
        inputValue: this.inputValue,
        tasks: this.queryTasks,
        treeNodes: this.treeNodes,
        compTargetId: this.compTargetId,
        compTargetType: compType,
        databases: this.compareTabs,
        threshold: this.threshold,
      }
    }
    const rsp: any = await findPersonByPic(param);
    if (rsp && rsp.success) {

 src/components/subComponents/Card.vue

@@ -16,6 +16,8 @@
        <card-item
          :data="item"
          :showType="showType"
          :fromCluster="isFromCluster"
          :searchT="searchTime"
          @detailsClick="detailsClick"
          @addToBase="toAdd"
        ></card-item>
@@ -54,6 +56,13 @@
    outWidth: {
      type: String,
      default: "100%"
    },
    isFromCluster:{
       type: Boolean,
      default: false
    },
    searchTime:{

    }
  },
  watch: {

 src/components/subComponents/CardItem.vue

@@ -504,7 +504,12 @@
    showType: {
      type: String,
      default: "search"
    }
    },
    fromCluster:{
      type:Boolean,
      default:false
    },
    searchT:{}
  },
  computed: {
    isId() {
@@ -592,15 +597,19 @@
      this.$emit("addToBase", item);
    },
    tosearch(item) {
      this.searchT
      let captureId = item.id == "" ? item.baseInfo[0].targetId : item.id
      let imgUrl = item.targetInfo ? item.targetInfo[0].picSmUrl : item.baseInfo[0].targetPicUrl
      let compType = 1 //  数据来自于es
      if (!item.id || item.id == "") {
        compType = 0 // 数据来自于底库
      }

      let message = 'toSearch?showType=findByPic&targetId=' + captureId + '&picSmUrl=' + imgUrl + '&compType=' + compType + '&timestamp=' + new Date().getTime();
      //let message = 'toSearch?showType=findByPic&targetId=' + captureId + '&picSmUrl=' + imgUrl + '&compType=' + compType;
      let message
      if (this.fromCluster) {
       message = 'toCluster?showType=findByPic&targetId=' + captureId + '&picSmUrl=' + imgUrl + '&compType=' + compType + '&timestamp=' + new Date().getTime() + '&start=' + this.searchT[0] + '&end=' + this.searchT[1];
      } else {
         message = 'toSearch?showType=findByPic&targetId=' + captureId + '&picSmUrl=' + imgUrl + '&compType=' + compType + '&timestamp=' + new Date().getTime() + '&start=' + this.searchT[0] + '&end=' + this.searchT[1];
      }
      window.parent.postMessage({
        msg: message
      }, "*")

 src/pages/ai/index/App.vue

@@ -70,7 +70,7 @@
                                >

                                <el-button

                                  v-if="item.isUpgrade"

                                  @click="donwload(item)"

                                  @click="donwload(item,0)"

                                  type="warning"

                                  size="small"

                                  class="bot-btn"

@@ -133,7 +133,7 @@
                              </div>

                              <div class="mask-btn">

                                <el-button

                                 @click="donwload(item)"

                                 @click="donwload(item,1)"

                                  type="primary"

                                  class="bot-btn"

                                  >安装</el-button

@@ -512,7 +512,7 @@
              </el-tab-pane>

              <el-tab-pane name="update">

                <span slot="label">

                  <el-badge class="update-badge" :value="updateNum"

                  <el-badge class="update-badge" :value="updateNum" :hidden="updateNum==0"

                    >更新</el-badge

                  >

                </span>

@@ -574,7 +574,7 @@
                                >

                                <el-button

                                  v-if="item.isUpgrade"

                                  @click="donwload(item)"

                                  @click="donwload(item,0)"

                                  type="warning"

                                  size="small"

                                  class="bot-btn"

@@ -1149,7 +1149,7 @@
    batchUpdate(type) {

      if (type == "sdk") {

        this.hasNewVersionSdk.forEach((sdk) => {

          this.donwload(sdk);

          this.donwload(sdk,0);

        });

      } else {

        this.hasNewVersionApp.forEach((app) => {

@@ -1426,6 +1426,7 @@


    cancelActivate(){

      this.showInputCode= false

      this.activeCode = ""

    },

    newActInfo() {

      return {

@@ -1453,51 +1454,56 @@
    },

    actived() {

      let _this = this;

      if (this.activeCode.trim()=="") {

        this.$notify({

          type: "error",

          message: "激活码不能为空",

        });

        return

      }

      if (this.actType == "sdk") {

        //激活算法

        actPageAlg(this.actId, this.activeCode)

          .then((res) => {

            if (res.data.isSuccess) {

              this.productDetailVisible = false

              _this.activedSdkOrApp = res.data.successMsg;

              this.showActivateSuccess=true



      // if (this.actType == "sdk") {

      //   //激活算法

      //   actPageAlg(this.actId, this.activeCode)

      //     .then((res) => {

      //       if (res.data.isSuccess) {

      //         this.productDetailVisible = false

      //         _this.activedSdkOrApp = res.data.successMsg;

      //         this.showActivateSuccess=true

      //         _this.actStep++;

      //         _this.getUnActivedList();

      //         _this.getAllSdk();

      //       } else {

      //         _this.$notify({

      //           type: "error",

      //           message: res.data.failMsg.failMsg,

      //         });

      //       }

      //     })

      //     .catch((e) => {

      //       console.log(e);

      //     });

      // } else if (this.actType == "app") {

      //   //激活应用

      //   actApp(this.actId, this.activeCode)

      //     .then((res) => {

      //       if (res.data.isSuccess) {

      //         this.productDetailVisible = false

      //         _this.activedSdkOrApp = res.data.successMsg;

      //         this.showActivateSuccess=true

      //         _this.actStep++;

      //         _this.getUnActivedAppList();

      //         _this.getAllApps();

      //       } else {

      //         _this.$notify({

      //           type: "error",

      //           message: res.data.failMsg.failMsg,

      //         });

      //       }

      //     })

      //     .catch((e) => {

      //       console.log(e);

      //     });

      // }

              _this.actStep++;

              _this.getUnActivedList();

              _this.getAllSdk();

            } else {

              _this.$notify({

                type: "error",

                message: res.data.failMsg.failMsg,

              });

            }

          })

          .catch((e) => {

            console.log(e);

          });

      } else if (this.actType == "app") {

        //激活应用

        actApp(this.actId, this.activeCode)

          .then((res) => {

            if (res.data.isSuccess) {

              this.productDetailVisible = false

              _this.activedSdkOrApp = res.data.successMsg;

              this.showActivateSuccess=true

              _this.actStep++;

              _this.getUnActivedAppList();

              _this.getAllApps();

            } else {

              _this.$notify({

                type: "error",

                message: res.data.failMsg.failMsg,

              });

            }

          })

          .catch((e) => {

            console.log(e);

          });

      }

    },

    getCodeDetail() {},

    checkMyAlgorith() {

@@ -1709,7 +1715,7 @@
      // 开启自动刷新

      this.sdkUpgreading = true;

    },

    donwload(item) {

    donwload(item,typ) {

      item.upgradeLoading = true;

      this.downloadItem = item.id;



@@ -1720,7 +1726,7 @@
          this.downloadItem = "";

          this.$notify({

            type: "success",

            message: "算法安装成功"

            message: typ==1? "算法安装成功":"算法升级成功"

          });

        })

        .catch((err) => {

@@ -1920,8 +1926,9 @@
             margin-bottom: 10px;

              .el-input{

                float: left;

                width: 64%;

                 margin-bottom: 8px;

                width: 63%;

                margin-bottom: 8px;

                margin-right: 10px;

              }

              el-button{

                float: left;

@@ -1991,6 +1998,8 @@
                background-color: rgba(242, 242, 242, 1.3);

                      margin: 5px 12px 0 12px;

                    font-size: 12px;

                        line-height: 18px;



              }

               margin-bottom: 12px;

            }


 src/pages/desktop/index/components/ToolsEntry.vue

@@ -138,6 +138,10 @@
          let params = msg.substring(7);

          this.addFrameByName("search", params)

        }

        if (msg.indexOf("toCluster") >= 0) {

          let params = msg.substring(8);

          this.addFrameByName("searchForCluster", params)

        }



        if (msg.indexOf("toOpenApp") >= 0) {

          let id = msg.substring(10);


 src/pages/search/index/Searching.vue

@@ -137,6 +137,7 @@
                :outHeight="'162px'"
                :outWidth="VideoPhotoData.uploadDiaplay?searchImgCardWidth:cardWidth"
                :data="item"
                :searchTime="searchTimeFormated"
                :showType="showType"
                @detailsClick="getDetails($event, index)"
                @addToBase="toAdd"
@@ -266,7 +267,11 @@

    };
  },

  computed: {
    searchTimeFormated(){
      return this.format(this.searchTime)
    }
  },
  created () {
    this.TreeDataPool.readonly = true;
    this.TreeDataPool.gbReadonly = true;
@@ -293,9 +298,15 @@
    //     this.VideoTaskData.tasks[this.VideoTaskData.activeIndex].taskId
    //   ];
    // }

    this.searchTime = this.getDateInit();
    this.VideoPhotoData.searchTime = this.getDateInit();
      let start =  this.getUrlKey("start")
      let end =  this.getUrlKey("end")
    if (start&&end) {
      this.searchTime = [start,end]
     this.VideoPhotoData.searchTime = [start,end]
    }else{
      this.searchTime = this.getDateInit();
      this.VideoPhotoData.searchTime = this.getDateInit();
    }

    // 暂时关闭跳转 20200730
    // if (this.$route.query.showType === "findByPic") {

 src/pages/searchForCluster/index/Searching.vue

@@ -137,7 +137,9 @@
                :outHeight="'162px'"
                :outWidth="VideoPhotoData.uploadDiaplay?searchImgCardWidth:cardWidth"
                :data="item"
                :isFromCluster="true"
                :showType="showType"
                :searchTime="searchTimeFormated"
                @detailsClick="getDetails($event, index)"
                @addToBase="toAdd"
              ></Card>
@@ -295,9 +297,15 @@
    //     this.VideoTaskData.tasks[this.VideoTaskData.activeIndex].taskId
    //   ];
    // }

    this.searchTime = this.getDateInit();
    this.VideoPhotoData.searchTime = this.getDateInit();
     let start =  this.getUrlKey("start")
      let end =  this.getUrlKey("end")
    if (start&&end) {
      this.searchTime = [start,end]
     this.VideoPhotoData.searchTime = [start,end]
    }else{
      this.searchTime = this.getDateInit();
      this.VideoPhotoData.searchTime = this.getDateInit();
    }
    //设置搜索来源(应用名称)
    this.VideoPhotoData.searchFrom = 'cluster';
    //this.TreeDataPool.searchFrom = 'cluster';
@@ -442,6 +450,11 @@
        this.VideoPhotoData.uploadType = false;
        this.VideoPhotoData.showType = "search";
      }
    }
  },
  computed: {
    searchTimeFormated(){
      return this.format(this.searchTime)
    }
  },
  methods: {
@@ -614,7 +627,6 @@
        tasks = tasks.concat(arr)
      });
      this.VideoPhotoData.queryTasks = tasks;

      this.VideoPhotoData.queryAlarmlevel = this.stringToNum();
      this.VideoPhotoData.searchTime = this.format(this.searchTime);
      //this.VideoPhotoData.inputValue = this.searchText;

 src/pages/shuohuangMonitorAnalyze/components/aliPlayer/index.vue

@@ -207,7 +207,7 @@
  },
  mounted() {
    this.$nextTick(() => {
      console.log('player marks',this.markers);
      // console.log('player marks',this.markers);
      this.init();
    });
  },
@@ -255,6 +255,7 @@
      scriptTag.addEventListener("load", () => {
        this.initPlayer();
      });
      // return this.getDuration()
    },

    /**
@@ -272,7 +273,7 @@
        if (this.source) this.config.source = this.source; //播放源
        this.config.id = this.playerId; //赋值播放器容器id
        this.config.progressMarkers = this.markers; // 标注
        console.log("alipayer config", this.config);
        // console.log("alipayer config", this.config);
        this.player && this.player.dispose();   //防止实例的重复
        this.player = Aliplayer(this.config);
        for (const ev in this.events) {

 src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue

@@ -26,9 +26,15 @@
          v-show="!checkedConfigs.length"
          class="tip"
          style="padding-left: 5px; margin-top: 3px"
        >还未选择筛选条件</span>
        <div class="config-item" v-for="(config, index) in checkedConfigs" :key="index">
          <span class="title">{{ config.title }}</span>&nbsp;:
          >还未选择筛选条件</span
        >
        <div
          class="config-item"
          v-for="(config, index) in checkedConfigs"
          :key="index"
        >
          <span class="title">{{ config.title }}</span
          >&nbsp;:
          <span class="val" v-for="option in config.data" :key="option.id">
            <!-- <template>
              <div>
@@ -40,17 +46,25 @@
              <i>、</i>
            </span>
          </span>
          <i class="el-icon-close remove" @click="removeCheckedConfig(config)"></i>
          <i
            class="el-icon-close remove"
            @click="removeCheckedConfig(config)"
          ></i>
        </div>
        <el-button
          class="clear-config-btn"
          v-if="checkedConfigs.length"
          size="mini"
          @click="clearCheckedConfigs"
        >取消选择</el-button>
          >取消选择</el-button
        >
      </div>
      <div class="optional-config">
        <div class="config" v-for="(config, index) in optionalConfigs" :key="index">
        <div
          class="config"
          v-for="(config, index) in optionalConfigs"
          :key="index"
        >
          <template v-if="config.isShow">
            <div class="title">{{ config.title }}</div>
            <div class="options-wrap">
@@ -59,23 +73,41 @@
                :ref="'options' + config.id"
                :style="{ height: fixedOneLineHeight + 'px' }"
              >
                <div class="option" v-for="(option, index) in config.data" :key="index">
                <div
                  class="option"
                  v-for="(option, index) in config.data"
                  :key="index"
                >
                  <div v-show="config.isMultCheck">
                    <el-checkbox v-model="option.isChecked"></el-checkbox>
                    <span>{{ option.name }}</span>
                  </div>
                  <div v-show="!config.isMultCheck" @click="checkOption(config, option)">
                  <div
                    v-show="!config.isMultCheck"
                    @click="checkOption(config, option)"
                  >
                    <span>{{ option.name }}</span>
                  </div>
                </div>
              </div>
              <div class="btns text-center" v-show="config.isMultCheck">
                <el-button size="mini" @click="cancleMultCheck(config)">取消</el-button>
                <el-button size="mini" type="primary" @click="checkOption(config)">确定</el-button>
                <el-button size="mini" @click="cancleMultCheck(config)"
                  >取消</el-button
                >
                <el-button
                  size="mini"
                  type="primary"
                  @click="checkOption(config)"
                  >确定</el-button
                >
              </div>
            </div>
            <div class="right-btns">
              <div class="more" v-if="config.showMore" @click="showMore(config)">
              <div
                class="more"
                v-if="config.showMore"
                @click="showMore(config)"
              >
                <span>更多</span>&nbsp;
                <i
                  :class="
@@ -98,7 +130,11 @@
        <div class="config" v-if="showAdvance">
          <div class="title">高级选项</div>
          <div>
            <el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu
              class="el-menu-demo"
              mode="horizontal"
              @select="handleSelect"
            >
              <el-submenu
                class="config-submenu"
                :popper-append-to-body="false"
@@ -113,7 +149,8 @@
                  :index="index + '-' + ind"
                  @click="checkOption(config, option)"
                  class="highlevel-option"
                >{{ option.name }}</el-menu-item>
                  >{{ option.name }}</el-menu-item
                >
              </el-submenu>
            </el-menu>
          </div>
@@ -124,14 +161,22 @@
      <div class="header-bar clearfix">
        <div class="left">
          <div>
            <el-select v-model="IsFollow" size="mini" @change="filterSearchData">
            <el-select
              v-model="IsFollow"
              size="mini"
              @change="filterSearchData"
            >
              <el-option value label="全部"></el-option>
              <el-option :value="false" label="未关注"></el-option>
              <el-option :value="true" label="已关注"></el-option>
            </el-select>
          </div>
          <div>
            <el-select v-model="IsOperate" size="mini" @change="filterSearchData">
            <el-select
              v-model="IsOperate"
              size="mini"
              @change="filterSearchData"
            >
              <el-option value label="全部"></el-option>
              <el-option value="0" label="未处理"></el-option>
              <el-option value="1" label="已处理"></el-option>
@@ -147,15 +192,26 @@
            >
              <i class="el-icon-menu"></i>
            </div>
            <div class="type" :class="{ current: showType == 'list' }" @click="checkType('list')">
            <div
              class="type"
              :class="{ current: showType == 'list' }"
              @click="checkType('list')"
            >
              <i class="el-icon-s-operation"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="content" v-show="showType == 'menu'">
        <el-row :gutter="20" >
          <el-col :xs="8" :sm="6" :md="6" :lg="6" v-for="data in tabData" :key="data.id">
        <el-row :gutter="20">
          <el-col
            :xs="8"
            :sm="6"
            :md="6"
            :lg="6"
            v-for="data in tabData"
            :key="data.id"
          >
            <div class="card">
              <div class="video-wrap" @click="checkVideoDetail(data)">
                <img :src="data.VideoCover" alt />
@@ -180,33 +236,53 @@
                  </div>
                </div>
                <div class="mark-info">
                  <div class="abnormal" v-if="data.LableLst && data.LableLst.length">
                  <div
                    class="abnormal"
                    v-if="data.LableLst && data.LableLst.length"
                  >
                    <span
                      class="abnormal-label"
                      v-for="(label, index) in data.LableLst"
                      :key="index"
                    >{{ label.Desc +(index==data.LableLst.length-1?"":"，")}}</span>
                      >{{
                        label.Desc +
                        (index == data.LableLst.length - 1 ? "" : "，")
                      }}</span
                    >
                  </div>
                  <div v-else>
                    <span>无异常</span>
                  </div>
                  <div class="event-tag" v-if="data.EventLst && data.EventLst.length">
                  <div
                    class="event-tag"
                    v-if="data.EventLst && data.EventLst.length"
                  >
                    <el-tag
                      size="mini"
                      type="info"
                      v-for="(label, index) in data.EventLst"
                      :key="index"
                      style="margin-right:5px;margin-bottom:5px"
                      style="margin-right: 5px; margin-bottom: 5px"
                      @click="checkEventVideo(label)"
                    >{{ label.Event }}</el-tag>
                      >{{ label.Event }}</el-tag
                    >
                  </div>
                </div>
                <div class="tag-info">
                  <div class="tag" v-for="(tag, index) in data.tags" :key="index">{{ tag }}</div>
                  <div
                    class="tag"
                    v-for="(tag, index) in data.tags"
                    :key="index"
                  >
                    {{ tag }}
                  </div>
                </div>
              </div>
              <div class="star" @click="toggleFollow(data)">
                <i class="iconfont" :class="[data.IsFollow ? 'follow' : '', 'iconguanzhu']"></i>
                <i
                  class="iconfont"
                  :class="[data.IsFollow ? 'follow' : '', 'iconguanzhu']"
                ></i>
              </div>
            </div>
          </el-col>
@@ -224,22 +300,43 @@
        ></el-pagination>
      </div>
      <div class="content" v-show="showType == 'list'">
        <el-table :data="tableData" fit ref="elTable" @row-click="checkVideoDetail" >
        <el-table
          :data="tableData"
          fit
          ref="elTable"
          @row-click="checkVideoDetail"
        >
          <el-table-column label="名称" prop="VideoName" sortable width="500">
            <template slot-scope="scope"  style="cursor: pointer">
            <template slot-scope="scope" style="cursor: pointer">
              <div>{{ scope.row.VideoName }}</div>
            </template>
          </el-table-column>

          <el-table-column label="大小" prop="VideoSize" sortable></el-table-column>
          <el-table-column label="修改日期" prop="VideoUpdateDate" sortable></el-table-column>
          <el-table-column label="创建日期" prop="VideoCreateDate" sortable></el-table-column>
          <el-table-column
            label="大小"
            prop="VideoSize"
            sortable
          ></el-table-column>
          <el-table-column
            label="修改日期"
            prop="VideoUpdateDate"
            sortable
          ></el-table-column>
          <el-table-column
            label="创建日期"
            prop="VideoCreateDate"
            sortable
          ></el-table-column>

          <el-table-column label="操作">
            <template slot-scope="scope">
              <div class="operation">
                <div class="star" >
                  <i class="iconfont"  :class="[scope.row.IsFollow ? 'follow' : '', 'iconguanzhu']" @click.stop="toggleFollow(scope.row)"></i>
                <div class="star">
                  <i
                    class="iconfont"
                    :class="[scope.row.IsFollow ? 'follow' : '', 'iconguanzhu']"
                    @click.stop="toggleFollow(scope.row)"
                  ></i>
                </div>
                <!-- <i class="el-icon-star-off" @click="toggleFollow(scope.row)"></i> -->
              </div>
@@ -257,24 +354,31 @@
          :total="tableTotal"
        ></el-pagination>
      </div>
    
    
      
      <el-dialog 
        class="dialog-video"
        :visible="videoDialogVisible"
        @close="videoDialogVisible = false"
        :modal="false"
        destroy-on-close="true"
      >
        <div slot="title" class="title">
          <div class="center">
            <i class="el-icon-connection"></i>
            <span>播放视频</span>
      <!-- 

       v-drag v-resize

       -->
      <!-- <div > -->
        <el-dialog v-drag  v-resize
          class="dialog-video"
          :visible="videoDialogVisible"
          @close="videoDialogVisible = false"
          :modal="false"
          :close-on-click-modal="false"
          :destroy-on-close="true"
          :modal-append-to-body="false"
        >
          <div slot="title" class="title">
            <div class="center">
              <i class="el-icon-connection"></i>
              <span>播放视频</span>
            </div>
          </div>
        </div>
        <video-analyze :videoDetails="selectedVideo" />
      </el-dialog>
          <video-analyze :videoDetails="selectedVideo" />
        </el-dialog>
      <!-- </div> -->

      <el-dialog
        class="dialog-event"
        :visible="eventDialogVisible"
@@ -282,13 +386,12 @@
      >
        <div class="title" slot="title">
          <i class="el-icon-connection"></i>
          <span>{{curEvName}}视频</span>
          <span>{{ curEvName }}视频</span>
        </div>
        <event-videos :eventVideoArr="eventVideoArr"></event-videos>
      </el-dialog>
    </div>
  </div>

</template>

<script>
@@ -300,7 +403,7 @@
  getLabelMap,
  delLabel,
  editLabel,
  getEventVideo
  getEventVideo,
} from "@/api/shuohuang";
import VideoAnalyze from "./videoAnalyze";
import EventVideos from "./eventVideos";
@@ -310,12 +413,11 @@
    VideoAnalyze,
    EventVideos,
  },
  data () {
  data() {
    return {
      CLIP: "http://",
      keyword: "",
      IsFollow: "",
      //searchTime: [this.$moment(new Date().getTime() - 3600 * 1000 * 24 * 5).format("YYYY-MM-DD HH:mm:ss"), this.$moment(new Date()).format("YYYY-MM-DD HH:mm:ss")],
      searchTime: [
        new Date(2020, 0, 1, 0, 0, 0),
        new Date(2020, 11, 31, 23, 59, 59),
@@ -323,7 +425,7 @@
      curTabPage: 1,
      curTablePage: 1,
      tabPageSize: 8,
      pageSizes: [ 8, 12, 24],
      pageSizes: [8, 12, 24],
      tabTotal: 0,
      tablePageSize: 8,
      tableTotal: 0,
@@ -332,7 +434,7 @@
        shortcuts: [
          {
            text: "今天",
            onClick (picker) {
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setHours(0, 0, 0);
@@ -341,7 +443,7 @@
          },
          {
            text: "昨天",
            onClick (picker) {
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24);
@@ -353,7 +455,7 @@
          },
          {
            text: "近三天",
            onClick (picker) {
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
@@ -362,7 +464,7 @@
          },
          {
            text: "近一周",
            onClick (picker) {
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
@@ -380,87 +482,53 @@
      settle: "",
      IsOperate: "",
      showType: "menu",
      tableData: [
        // {
        //   name: "SS4B115_06_B节二端司机室_20201115_091500.mp4",
        //   size: "17.66M",
        //   updateTime: "2020-11-04 15:41",
        //   createTime: "2020-11-04 15:41",
        // },
        // {
        //   name: "SS4B115_06_B节二端司机室_20201115_091700.mp4",
        //   size: "17.76M",
        //   updateTime: "2020-11-04 15:41",
        //   createTime: "2020-11-07 17:41",
        // },
      ],
      tabData: [
        {
          id: "ss1",
          no: "SS4B115",
          frequency: "8084",
          time: "2020-09-21 20:45:08",
          driver: "张三",
          marks: ["未呼唤、呼唤不标准", "学习司机未应答"],
          markType: 1,
          tags: ["进出站", "司机离岗"],
          follow: true,
        },
        {
          id: "ss2",
          no: "SS4B115",
          frequency: "8084",
          time: "2020-09-21 20:45:08",
          driver: "张三",
          marks: [],
          markType: 0,
          tags: ["进出站", "司机离岗"],
          follow: false,
        },
      ],
      tableData: [],
      tabData: [],
      videoDialogVisible: false,
      hiddenDanger: 1,
      labelDialogVisible: false,
      selectedVideo: {},
      eventDialogVisible: false,
      curEvName: '',
      eventVideoArr: []
      curEvName: "",
      eventVideoArr: [],
    };
  },
  watch: {
    checkedConfigs: {
      handler (n, o) {
      handler(n, o) {
        this.filterSearchData();
      },
      deep: true,
    },
  },
  mounted () {
  mounted() {
    this.init();
  },
  methods: {
    checkEventVideo (label) {
    checkEventVideo(label) {
      this.eventDialogVisible = true;
      this.curEventDetail = label;
      let _this = this;
      getEventVideo({ Event: label.Event, LkgID: label.ParentID }).then(res => {
        _this.eventVideoArr = res.data;
        _this.curEvName = label.Event;
      })
      getEventVideo({ Event: label.Event, LkgID: label.ParentID }).then(
        (res) => {
          _this.eventVideoArr = res.data;
          _this.curEvName = label.Event;
        }
      );
    },
    handleTabSizeChange (size) {
    handleTabSizeChange(size) {
      this.tabPageSize = size;
      this.filterSearchData();
    },
    handleTableSizeChange (size) {
    handleTableSizeChange(size) {
      this.tablePageSize = size;
      this.filterSearchData();
    },
    handleCurrentChange () {
    handleCurrentChange() {
      this.filterSearchData();
    },
    //二级查询
    filterSearchData () {
    filterSearchData() {
      let _this = this;
      let isFollow = "";
      if (this.IsFollow === "") {
@@ -503,24 +571,24 @@
          _this.tabTotal = res.total;
          _this.tabData = res.data;
          _this.tabData = _this.tabData.map(function (item) {
            const set = new Set()
            const set = new Set();
            item.LableLst.forEach(function (label) {
              label.Desc.split("，").forEach(function (d) {
                set.add(d)
              })
            })
            const lblst = []
                set.add(d);
              });
            });
            const lblst = [];
            set.forEach(function (d) {
              lblst.push({ Desc: d })
            })
            item.LableLst = lblst
            return item
          })
              lblst.push({ Desc: d });
            });
            item.LableLst = lblst;
            return item;
          });
        }
      });
    },
    //一级查询
    init () {
    init() {
      let _this = this;
      let query = {
        KeyWord: this.keyword,
@@ -544,19 +612,19 @@
          _this.tabTotal = res.total;
          _this.tabData = res.data;
          _this.tabData = _this.tabData.map(function (item) {
            const set = new Set()
            const set = new Set();
            item.LableLst.forEach(function (label) {
              label.Desc.split("，").forEach(function (d) {
                set.add(d)
              })
            })
            const lblst = []
                set.add(d);
              });
            });
            const lblst = [];
            set.forEach(function (d) {
              lblst.push({ Desc: d })
            })
            item.LableLst = lblst
            return item
          })
              lblst.push({ Desc: d });
            });
            item.LableLst = lblst;
            return item;
          });
        }

        res.filterlst.forEach((config) => {
@@ -602,7 +670,7 @@
        });
      });
    },
    toggleFollow (data) {
    toggleFollow(data) {
      data.IsFollow = !data.IsFollow;
      this.updataVideo(data);
      if (data.IsFollow) {
@@ -612,24 +680,24 @@
        });
      }
    },
    updataVideo (data) {
    updataVideo(data) {
      let _this = this;
      updateVideoAnalyze(data).then((res) => {
        //二级查询
      });
    },

    checkVideoDetail (data) {
    checkVideoDetail(data) {
      let _this = this;
      _this.selectedVideo = data;
      _this.videoDialogVisible = true;
    },
    checkFollow () { },
    checkType (type) {
    checkFollow() {},
    checkType(type) {
      this.showType = type;
      this.filterSearchData();
    },
    clearCheckedConfigs () {
    clearCheckedConfigs() {
      this.checkedConfigs.forEach((config) => {
        config.isShow = true;
        config.data.forEach((d) => {
@@ -639,7 +707,7 @@
      this.checkedConfigs = [];
      this.showAdvance = true;
    },
    removeCheckedConfig (config) {
    removeCheckedConfig(config) {
      config.isShow = true;
      if (config.IsAdvanced) {
        this.showAdvance = true;
@@ -650,7 +718,7 @@
      let index = this.checkedConfigs.findIndex((one) => one.id == config.id);
      this.checkedConfigs.splice(index, 1);
    },
    checkOption (config, option) {
    checkOption(config, option) {
      if (option) {
        option.isChecked = true;
      }
@@ -666,20 +734,20 @@
      // })
    },

    cancleMultCheck (config) {
    cancleMultCheck(config) {
      config.isMultCheck = false;
      config.data.forEach((opt) => {
        opt.isChecked = false;
      });
    },
    handleSelect (key, keyPath) { },
    showMore (config) {
    handleSelect(key, keyPath) {},
    showMore(config) {
      config.isShowMore = !config.isShowMore;
      this.$refs[`options${config.id}`][0].style.height = config.isShowMore
        ? this.$refs[`options${config.id}`][0].scrollHeight + "px"
        : this.fixedOneLineHeight + "px";
    },
    toggleMultCheck (config) {
    toggleMultCheck(config) {
      config.isMultCheck = !config.isMultCheck;
      this.optionalConfigs.forEach((conf) => {
        if (conf.id == config.id) {
@@ -688,9 +756,82 @@
        conf.isMultCheck = false;
      });
    },
    dataSearch () {
    dataSearch() {
      console.log(this.checkedConfigs);
      this.$forceUpdate();
    },
  },
  directives: {
    drag(el, binding) {
      const dialogHeaderEl = el.querySelector(".el-dialog__header");
      const dragDom = el.querySelector(".el-dialog");
      dialogHeaderEl.style.cursor = "move";
      const sty =
        dragDom.currentStyle || window.getComputedStyle(dragDom, null);
      dialogHeaderEl.onmousedown = (e) => {
        const disX = e.clientX - dialogHeaderEl.offsetLeft;
        const disY = e.clientY - dialogHeaderEl.offsetTop;
        let styL, styT;

        if (sty.left.includes("%")) {
          styL =
            +document.body.clientWidth * (+sty.left.replace(/\%/g, "") / 100);
          styT =
            +document.body.clientHeight * (+sty.top.replace(/\%/g, "") / 100);
        } else {
          styL = +sty.left.replace(/\px/g, "");
          styT = +sty.top.replace(/\px/g, "");
        }
        document.onmousemove = function (e) {
          const l = e.clientX - disX;
          const t = e.clientY - disY;
          dragDom.style.left = `${l + styL}px`;
          dragDom.style.top = `${t + styT}px`;
        };
        document.onmouseup = function (e) {
          document.onmousemove = null;
          document.onmouseup = null;
        };
      };
    },
    resize(el, binding, vnode) {
        const dragDom = el.querySelector('.el-dialog') 
        dragDom.style.overflow = 'hidden'
        let minWidth = 400
        let minHeight = 300 //
        
        // 拉伸
        let resizeEl = document.createElement('div')
        dragDom.appendChild(resizeEl) // 在弹窗右下角加上一个10-10px的控制块
        resizeEl.style.cursor = 'nwse-resize'
        // resizeEl.style.cursor = 'se-resize'
        resizeEl.style.position = 'absolute'
        resizeEl.style.height = '12px'
        resizeEl.style.width = '12px'
        resizeEl.style.right = '0px'
        resizeEl.style.bottom = '0px' //鼠标拉伸弹窗
        resizeEl.style.background = 'url("/images/desktop/resize.png") no-repeat' //鼠标拉伸弹窗

        resizeEl.onmousedown = (e) => {
            // 记录初始x位置
            const clientX = e.clientX // 鼠标按下，计算当前元素距离可视区的距离
            const disX = e.clientX - resizeEl.offsetLeft
            const disY = e.clientY - resizeEl.offsetTop

            document.onmousemove = function(e) {
                e.preventDefault() // 移动时禁用默认事件 // 通过事件委托，计算移动的距离

                const x = e.clientX - disX + (e.clientX - clientX) //这里 由于elementUI的dialog控制居中的，所以水平拉伸效果是双倍
                const y = e.clientY - disY //比较是否小于最小宽高
                dragDom.style.width = x > minWidth ? `${x}px` : minWidth + 'px'
                dragDom.style.height =
                    y > minHeight ? `${y}px` : minHeight + 'px'
            } //拉伸结束
            document.onmouseup = function(e) {
                document.onmousemove = null
                document.onmouseup = null
            }
        }
    },
  },
};
@@ -912,7 +1053,7 @@
      //   display: flex;
      //   flex-wrap: wrap;
      // }
      .el-table__row{
      .el-table__row {
        cursor: pointer;
      }
      .el-row {
@@ -1004,10 +1145,10 @@
        }
        .operation {
          cursor: pointer;
          .star{
          .star {
            color: #ccc;
          }
          .follow{
          .follow {
            color: #409eff;
          }
        }
@@ -1019,22 +1160,28 @@
        background: #f5f5f5;
      }
    }
    .el-dialog__wrapper{
          top: -22px;
    }
    .dialog-video {
      // z-index: 2020 !important;
      .el-dialog {
        width: 1180px;
        height: 901px;
        // height: 893px;
      }
      .el-dialog__body {
        background: #f5f5f5;
        background: #eaeaea;
        padding: 0;
            // height: 100%;
    height: inherit;

      }
      .el-dialog__header {
        padding: 3px;
        .el-dialog__headerbtn {
          top: 6px;
        }
    }
      }
      .title-partment {
        font-size: 14px;
        font-weight: 500;
@@ -1067,12 +1214,12 @@
    }
  }
}
    .window-view {
.window-view {
  width: 100%;
  height: auto;
  // height: 100%;
  // min-height: 684px;
  overflow: auto;
  z-index: 2000;
    }
}
</style>

 src/pages/shuohuangMonitorAnalyze/components/taskManage.vue

@@ -60,27 +60,27 @@
          </div>
          <div class="video-list">
            <el-checkbox-group v-model="trainNochecked">
              <!-- <el-collapse v-model="actCollapseName">
              <el-collapse v-model="actCollapseName">
                <el-collapse-item
                  :name="trainNo.no"
                  v-for="trainNo in trainNoList"
                  :key="trainNo.id"
                  :name="vkey"
                  v-for="(v,vkey,i) in videoPackageList"
                  :key="i"
                >
                  <template slot="title">
                    <div>
                      <el-checkbox
                        :label="trainNo.videos[0]['UniqeID']"
                        :label="i"
                        style="padding-right:10px;"
                      ></el-checkbox>
                      <span>{{trainNo.no}}({{trainNo.videos.length}})</span>
                      <span>{{vkey}}({{v.length}})</span>
                    </div>
                  </template>
                  <div class="video-detail" v-for="video in trainNo.videos" :key="video.ID">
                  <div class="video-detail" v-for="video in v" :key="video.ID">
                    <i class="el-icon-film" style="margin-left: 20px;"></i>
                    <span style="padding-left: 10px;">{{video.VideoName}}</span>
                  </div>
                </el-collapse-item>
              </el-collapse> -->
              </el-collapse>
            </el-checkbox-group>
            <!-- <el-pagination
              @size-change="handleTrainNoSizeChange"
@@ -250,7 +250,7 @@
        }]
      },
      isShowUndistributedOnly: false,
      trainNoList: [],
      videoPackageList: {},
      trainNochecked: [],
      // trainNoCurPage: 1,
      // trainNoPageSize: 8,
@@ -357,16 +357,7 @@
        notAssignedOnly: this.notAssignedOnly,
      };
      getVideoListBySearch(params).then(res => {
        // let arr = [];
        // for (var key in res.data) {
        //   let obj = {};
        //   obj['no'] = key;
        //   obj['videos'] = res.data[key];
        //   obj.checked = false;
        //   arr.push(obj);
        // }
        // debugger
        _this.trainNoList = res;
        _this.videoPackageList = res.data
        _this.trainNoTotal = res.total;
      });
    },

 src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue

@@ -2,16 +2,25 @@
  <div class="video-analyze-content">
    <div class="content-top">
      <div class="grid-check">
     
       <el-dropdown trigger="click" :popper-append-to-body="false" @command="handleCommand" v-show="showLocChoise">
        <span class="el-dropdown-link">
          {{curCamera}}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item v-for="(item,index) in popDownArr" :key="index" :command="item">{{item.Camera}}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
        
        <el-dropdown
          trigger="click"
          :popper-append-to-body="false"
          @command="handleCommand"
          v-show="showLocChoise"
        >
          <span class="el-dropdown-link">
            {{ curCamera }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for="(item, index) in popDownArr"
              :key="index"
              :command="item"
              >{{ item.Camera }}</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>

        <span
          :class="
            guid === 1
@@ -42,15 +51,15 @@
          <p class="title-partment">相关视频</p>
          <div class="v-name-block">
            <div
            class="video-name"
            :class="{ current: curVideo.ID == video.ID }"
            @click="checkVideo(video, index)"
            v-for="(video, index) in curRoomVideos"
            :key="video.ID"
          >
            <i class="el-icon-film"></i>
            <span>{{ video.VideoDate }}</span>
          </div>
              class="video-name"
              :class="{ current: curVideo.ID == video.ID }"
              @click="checkVideo(video, index)"
              v-for="(video, index) in curRoomVideos"
              :key="video.ID"
            >
              <i class="el-icon-film"></i>
              <span>{{ video.VideoDate }}</span>
            </div>
          </div>
        </div>
        <div class="players" ref="playerWrap">
@@ -61,10 +70,13 @@
              v-for="(item, index) in videoWrapArr"
              :key="index"
            >
              <div style="display: none"></div>
              <div class="currentPlayer">
                <!-- {{curVideo.ID}} -->
                <!-- <img :src="curVideo.VideoCover" style="width:100px" /> -->
                <ali-player
                  @playing="getPlayStatus"
                  @pause="isStop = true"
                  @play="isStop = false"
                  @timeupdate="timeUpdate"
                  :source="curVideo.VideoPath"
                  :markers="curVideo.marks"
                  :ref="`player_${curVideo.ID}`"
@@ -79,80 +91,122 @@
              v-for="(item, index) in videoWrapArr"
              :key="index"
              @click="checkCurVideo(index)"
              style="position: relative;"
              style="position: relative"
              @mouseenter.stop.prevent="videoMouseEnter($event)"
              @mouseleave="videoMouseLeave($event)"
            >
              <!--  -->
              <template v-if="index <= videoArrs.length - 1">
                <div class="video-box-top">
                  <b>{{ videoArrs[index].Camera }}</b>
                </div>
                <div
                  :class="{ currentPlayer: curVideo.ID == videoArrs[index].ID,videoZone:true }"
                  @mouseover="overShowLoc(index)"
                  :class="{
                    currentPlayer: curVideo.ID == videoArrs[index].ID,
                  }"
                >
                  <!-- @mouseover="" -->
                  <!-- {{videoArrs[index].ID}} -->
                  <!-- <img
                    :src="videoArrs[index].VideoCover"
                    style="width:100px"
                  />-->
                  <div class="pos-desc"  style="position: absolute;top: 5px;left: 10px;color: #fff;z-index: 1;height: fit-content;background-color: black;">{{videoArrs[index].Camera}}</div>
                  <ali-player
                    @timeupdate="timeUpdate(e, index)"
                    :source="videoArrs[index].VideoPath"
                    :markers="videoArrs[index].marks"
                    @pause="isStop = true"
                    @play="isStop = false"
                    :ref="`player_${videoArrs[index].ID}`"
                    @ready="videoReady"
                  />
                </div>
              </template>
            </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">
                  {{ getTimeStr(item.offset) }}<br />{{ item.text }}
                </div>
                <div
                  class="self-dot"
                  :style="{
                    left: (item.offset / maxSecond) * 100 + '%',
                  }"
                  @click="dotJump(item.offset)"
                ></div>
              </el-tooltip>
              <!-- :marks="marks"  -->
              <el-slider
                v-model="curTime"
                :format-tooltip="formatTooltip"
                :max="maxSecond"
                @change="progressChange"
                @input="inTimeChange"
              ></el-slider>
            </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>
          </div>
        </div>
      </div>
    </div>
    <div class="content-bottom">
      <div class="bot-left ">
      <div class="bot-left">
        <!-- <p class="title-partment">快速标注</p> -->
         <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="快速标注" name="first"> <div class="flex-box" style="height: 28px">
          <label style="padding-right: 10px">隐患问题:</label>
          <el-radio-group v-model="isUnusual">
            <el-radio :label="0">无异常</el-radio>
            <el-radio :label="1">有异常</el-radio>
          </el-radio-group>
          <el-button
            icon="el-icon-plus"
            size="mini"
            v-show="isUnusual == 1"
            type="primary"
            @click="addLabel(curVideo)"
            >添加标注</el-button
          >
        </div>
        <div class="flex-box fixed-height-box">
          <label v-if="!showTable">标注信息:</label>
          <div class="mark-list" v-if="!showTable">
            <div class="mark" v-for="mark in curVideo.LableLst" :key="mark.ID">
              <div class="time">
                <span
                  >{{ zeroize(Math.floor(mark.Time / 60)) }}:{{
                    zeroize(mark.Time % 60)
                  }}</span
                >
                <i class="el-icon-edit" @click="editCurLabel(mark)"></i>
                <i class="el-icon-delete" @click="removeCurLabel(mark)"></i>
              </div>
              <div class="label-content">
                <span>{{ mark.Desc }}</span>
              </div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="快速标注" name="first">
            <div class="flex-box" style="height: 28px">
              <label style="padding-right: 10px">隐患问题:</label>
              <el-radio-group v-model="isUnusual">
                <el-radio :label="0">无异常</el-radio>
                <el-radio :label="1">有异常</el-radio>
              </el-radio-group>
              <el-button
                icon="el-icon-plus"
                size="mini"
                v-show="isUnusual == 1"
                type="primary"
                @click="addLabel(curVideo)"
                >添加标注</el-button
              >
            </div>
          </div>
        </div></el-tab-pane>
            <!-- <div class="flex-box fixed-height-box2"></div> -->
            <dataset-chart style="width:100%" v-if="showTable"></dataset-chart>
            <div class="flex-box fixed-height-box">
              <label v-if="!showTable">标注信息:</label>
              <div class="mark-list" v-if="!showTable">
                <div
                  class="mark"
                  v-for="mark in curVideo.LableLst"
                  :key="mark.ID"
                >
                  <div class="time">
                    <span
                      >{{ zeroize(Math.floor(mark.Time / 60)) }}:{{
                        zeroize(mark.Time % 60)
                      }}</span
                    >
                    <i class="el-icon-edit" @click="editCurLabel(mark)"></i>
                    <i class="el-icon-delete" @click="removeCurLabel(mark)"></i>
                  </div>
                  <div class="label-content">
                    <span>{{ mark.Desc }}</span>
                  </div>
                </div>
              </div>
            </div></el-tab-pane
          >
          <!-- <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">
        <p class="title-partment">视频详情</p>
@@ -182,8 +236,7 @@
      :visible="labelDialogVisible"
      @close="labelDialogVisible = false"
      :append-to-body="false"
        :modal="false"

      :modal="false"
    >
      <!-- <div class="label-radio">
        <p class="label">选择将要标注的视频:</p>
@@ -224,7 +277,7 @@
  delLabel,
  editLabel,
} from "@/api/shuohuang";
import DatasetChart from './charts/datasetForVideo';
import DatasetChart from "./charts/datasetForVideo";
import AliPlayer from "./aliPlayer/index";

export default {
@@ -249,19 +302,32 @@
      isUnusual: "",
      videoArrs: [],
      relativeVideos: [],
      allCurVideos:[],
      allCurVideos: [],
      labelCheckedList: [],
      videoWrapArr: [],
      labelOptions: [],
      selectedLabelId: "",
      setLabelTime: 0,
      isCheckAllVideo: 1,
      curRoomVideos:[],
      popDownArr:[],
      curCamera:"",
      showTable:false,
      showLocChoise:true,
      activeName:"first",
      curRoomVideos: [],
      popDownArr: [],
      curCamera: "",
      showTable: false,
      showLocChoise: true,
      activeName: "first",
      curTime: 0,
      showPlayBtn: true,
      eventMarks: [],
      marks: {
        45: {},
        373: {},
      },
      labelMarks: [],
      maxDuration: 0,
      maxVideoTime: "",
      curPlayTime: "00:00",
      maxSecond: 0,
      isStop: false,
    };
  },
  watch: {
@@ -286,27 +352,133 @@
    this.renderLabelOpts();
    this.setGuid(1);
    this.getCurVideos(this.videoDetails);
    this.getRelatedVideos(this.videoDetails)
    this.getRelatedVideos(this.videoDetails);
  },
  methods: {
    handleClick(instance){
      if (instance.name=="second") {
        this.showTable=true       
      }else{
        this.showTable=false
    getPlayStatus(e) {
      console.log(e, 1111);
    },
    videoReady(a, b) {},
    playAll() {
      this.showPlayBtn = false;
      if (this.guid == 1) {
        this.$refs[`player_${this.curVideo.ID}`][0].play();
        this.maxDuration = this.$refs[
          `player_${this.curVideo.ID}`
        ][0].getDuration();
      } else {
        this.videoArrs.forEach((v) => {
          this.$refs[`player_${v.ID}`][0].play();
        });
      }
    },
    handleCommand(cmd){
      this.curCamera = cmd.Camera
      this.curRoomVideos = this.allCurVideos.filter(item=>{
        return item.Camera == cmd.Camera
      })
      this.curVideo= this.curRoomVideos.find(item=>{
        return item.UniqeID == this.curVideo.UniqeID
      })
       this.$nextTick(() => {
          _this.$refs[`player_${_this.curVideo.ID}`][0].init();
    pauseAll() {
      this.showPlayBtn = true;
      if (this.guid == 1) {
        this.$refs[`player_${this.curVideo.ID}`][0].pause();
      } else {
        this.videoArrs.forEach((v) => {
          this.$refs[`player_${v.ID}`][0].pause();
        });
      }
    },
    inTimeChange(val) {},
    progressChange(val) {
      console.log(val);
      this.showPlayBtn = false;
      this.curPlayTime = this.getTimeStr(val);
      let that = this;
      if (this.guid == 1) {
        this.$refs[`player_${this.curVideo.ID}`][0].pause();
        this.$refs[`player_${this.curVideo.ID}`][0].seek(val);
        this.$refs[`player_${this.curVideo.ID}`][0].play();
        setTimeout(() => {
          let curT = that.$refs[
            `player_${that.curVideo.ID}`
          ][0].getCurrentTime();
          that.barRolling(curT);
        }, 600);
      } else {
        this.videoArrs.forEach((v, i) => {
          this.$refs[`player_${v.ID}`][0].seek(val);
          this.$refs[`player_${v.ID}`][0].play();
          if (i == 0) {
            let curT = this.$refs[`player_${v.ID}`][0].getCurrentTime();
            this.barRolling(curT);
          }
        });
      }
    },
    getTimeStr(sec) {
      return `${
        Math.floor(sec / 60) < 10
          ? "0" + Math.floor(sec / 60)
          : Math.floor(sec / 60)
      }:${
        Math.floor(sec % 60) < 10
          ? "0" + Math.floor(sec % 60)
          : Math.floor(sec % 60)
      }`;
    },
    barRolling(curT) {},
    timeUpdate(e, index) {
      if (this.isStop) {
        return;
      }
      let curT;
      if (this.guid == 1) {
        curT = Math.floor(
          this.$refs[`player_${this.curVideo.ID}`][0].getCurrentTime()
        );
      } else {
        curT = Math.floor(
          this.$refs[`player_${this.videoArrs[index].ID}`][0].getCurrentTime()
        );
      }
      if (curT <= this.curTime) {
        return;
      } else {
        this.curTime = curT;
      }
      this.curPlayTime = this.getTimeStr(this.curTime);
    },
    formatTooltip(val) {
      return this.curPlayTime;
    },
    videoMouseEnter(e) {
      let target = e.target;
      if (target.children.length > 1) {
        target.children[0].style.display = "block";
      }
    },
    videoMouseLeave(e) {
      let target = e.target;
      if (
        target.children.length == 2 &&
        target.children[0].className == "video-box-top"
      ) {
        target.children[0].style.display = "none";
      }
    },
    handleClick(instance) {
      if (instance.name == "second") {
        this.showTable = true;
      } else {
        this.showTable = false;
      }
    },
    handleCommand(cmd) {
      let _this = this;
      this.curCamera = cmd.Camera;
      this.curRoomVideos = this.allCurVideos.filter((item) => {
        return item.Camera == cmd.Camera;
      });
      this.curVideo = this.curRoomVideos.find((item) => {
        return item.UniqeID == this.curVideo.UniqeID;
      });
      this.$nextTick(() => {
        _this.$refs[`player_${_this.curVideo.ID}`][0].init();
      });
    },
    zeroize(val) {
      return val < 10 ? "0" + val : val;
@@ -317,38 +489,79 @@
        this.refreshCurVideoLabel(this.curVideo);
      }
    },
    getCurVideos(v){
    getCurVideos(v) {
      let _this = this;
      getCarVideos({
        TrainNumber:v.TrainNumber,
        CarNumber:v.CarNumber,
        Driver1:v.Driver1,
      }).then(res=>{
        res.data.forEach(item=>{
          item.marks = _this.mergeMarks(item)
        })
        _this.curVideo=res.data.find((item) => item.ID == v.ID)
        // debugger
        _this.videoArrs = res.data.filter(item=> v.UniqeID== item.UniqeID);
        _this.allCurVideos = res.data;
        _this.curRoomVideos = _this.allCurVideos.filter(item=>{
          return item.Camera == "司机室"
        })
         this.$nextTick(() => {
          _this.$refs[`player_${_this.curVideo.ID}`][0].init();
        TrainNumber: v.TrainNumber,
        CarNumber: v.CarNumber,
        Driver1: v.Driver1,
      }).then((res) => {
        res.data.forEach((item) => {
          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) => {
          if (item.type == 0) {
            map[item.offset] = {
              style: {
                color: "white",
              },
              label: item.text,
            };
          } else {
            map[+item.offset] = {
              style: {
                color: "yellow",
              },
              label: item.text,
            };
          }
        });
        // _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;
        }
        _this.videoArrs = res.data.filter((item) => v.UniqeID == item.UniqeID);
        _this.allCurVideos = res.data;
        _this.curRoomVideos = _this.allCurVideos.filter((item) => {
          return item.Camera == "司机室";
        });

        this.$nextTick(() => {
          _this.$refs[`player_${_this.curVideo.ID}`][0].init();
          let arr = this.maxVideoTime.split(":");
          let min = +arr[0],
            sec = +arr[1];
          this.maxSecond = min * 60 + sec;
        });
      });
    },
    getRelatedVideos(video) {
      let _this = this;
      getRelatedVideoInfo({ UniqeID: video.UniqeID }).then((res) => {
        let arr = []
        let map = {}
        res.data.forEach(item=>{
          this.popDownArr.push(item)
        })
        let arr = [];
        let map = {};
        res.data.forEach((item) => {
          this.popDownArr.push(item);
        });
        if (this.popDownArr.length) {
          this.curCamera=this.popDownArr[0].Camera
          this.curCamera = this.popDownArr[0].Camera;
        }
      });
    },
@@ -364,57 +577,54 @@
          if (d.ID === video.ID) {
            video.LableLst = d.LableLst;
          }
          // let someVideo = _this.videoArrs.find(video => video.ID === d.ID);
          // someVideo.LableLst = d.LableLst
        });
      });
    },
    checkVideo(video, index) {
      // debugger
      this.refreshCurVideoLabel(video);
      this.curVideo = video;
      this.videoArrs = this.allCurVideos.filter(item=> video.UniqeID== item.UniqeID);

      this.videoArrs = this.allCurVideos.filter(
        (item) => video.UniqeID == item.UniqeID
      );
      this.$nextTick(() => {
        this.$refs[`player_${this.curVideo.ID}`][0].init();
      });
    },

    setGuid(guid) {
      let _this = this;
      this.guid = guid;
      if (guid==1) {
        this.showLocChoise=true
      }else{
        this.showLocChoise=false
      if (guid == 1) {
        this.showLocChoise = true;
      } else {
        this.showLocChoise = false;
        this.$refs[`player_${this.curVideo.ID}`][0].pause();
        this.$refs[`player_${this.curVideo.ID}`][0].seek(0);
      }
      // for(var i = 0; i < Math.pow(guid,2); i++){
      //   if(i>this.videoArrs.length-1){
      //       this.videoWrapArr[i] = this.videoArrs[i]
      //     }else{
      //       this.videoWrapArr[i] = {}
      //     }
      // }
      this.videoWrapArr = Math.pow(guid, 2);
      this.$nextTick(() => {
        for (var i = 0; i < Math.pow(guid, 2); i++) {
          console.log(`calc(` + 100 / guid + `% -10px)`);
          this.$refs[`gridVideoItem_${i}`][0].style.width =
            this.$refs["playerWrap"].offsetWidth / guid + "px";
            `calc(` + 100 / guid + `%)`;
          // this.$refs["playerWrap"].offsetWidth / guid + "px";
          this.$refs[`gridVideoItem_${i}`][0].style.height =
            this.$refs["playerWrap"].offsetHeight / guid + "px";
            `calc(` + 100 / guid + `%)`;
          // this.$refs["playerWrap"].offsetHeight / guid + "px";
        }
        console.log(this.$refs[`player_${this.videoArrs[index].ID}`]);
      });
    },

    cancelLabelChecked() {
      this.labelDialogVisible = false;
    },
    dotJump(offset){
      this.curTime = offset
      this.progressChange(offset)
    },
    submitLabelChecked() {
      let _this = this;
      let tempArr = [];
      // if (this.isCheckAllVideo == 1) {
        tempArr = this.videoArrs.map((video) => video.ID);
      // }
      tempArr = this.videoArrs.map((video) => video.ID);
      let desc = this.labelCheckedList.map((lableId) => {
        for (let label of this.labelOptions) {
          if (label.ID == lableId) {
@@ -425,7 +635,7 @@

      let query = {
        ID: this.selectedLabelId,
        ParentID:  tempArr.join(","),
        ParentID: tempArr.join(","),
        ParentUniqID: this.curVideo.UniqeID + "",
        Time: Math.round(this.setLabelTime) + "",
        Codes: this.labelCheckedList.join(","),
@@ -485,19 +695,24 @@
      });
    },
    mergeMarks(videoInfo) {
      const eMarks = videoInfo.EventLst.map(function (item) {
        return {
          offset: item.SecondsInVideo + "",
      const eMarks = videoInfo.EventLst.map((item) => {
        let obj = {
          offset: item.SecondsInVideo,
          text: item.Event + (item.Desc == "" ? "" : ": " + item.Desc),
          type: 0,
        };
        this.eventMarks.push(obj);
        return obj;
      });
      const labMarks = videoInfo.LableLst.map((lable) => {
        return {
        let obj = {
          offset: lable.Time,
          text: lable.Desc,
          type: 1,
        };
        this.labelMarks.push(obj);
        return obj;
      });

      return eMarks.concat(labMarks);
    },
    setMarks(video) {
@@ -511,29 +726,33 @@
<style lang="scss" >
.video-analyze-content {
  margin: 0;
    padding: 6px 15px 15px 15px;
  padding: 6px 15px 15px 15px;
  height: 100%;

  text-align: left;
  .content-top {
    margin-bottom: 10px;
    margin-bottom: 15px;

    // height: calc(60% + -16px);

    .grid-check {
      text-align: right;
         margin-bottom: 3px;
      margin-bottom: 3px;
      position: relative;
      .el-dropdown{
      .el-dropdown {
        position: absolute;
        top: -4px;
        left: 200px;
      }
      .el-dropdown-link {
        cursor: pointer;
        color: #409EFF;
        color: #409eff;
      }
      .el-icon-arrow-down {
        font-size: 12px;
      }
      span {
          font-size: 17px;
        font-size: 17px;

        color: #cacaca;
        padding-left: 12px;
@@ -545,14 +764,16 @@
    }
    .video-area {
      display: flex;
      .info-list {
       width: 180px;
      height: 100%;

      .info-list {
        width: 180px;
        min-width: 180px;
        margin-right: 10px;
        .v-name-block{
        .v-name-block {
          height: 484px;

            overflow: auto;
          overflow: auto;
        }
        .video-name {
          cursor: pointer;
@@ -567,20 +788,34 @@
        }
      }
      .players {
          width: 940px;

        height: 530px;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        height: 455px;
        .video-item {
          background: black;
          border: 1px solid #fff;
          box-sizing: border-box;
          
          & > div {
            height: 100%;
            & > div {
              height: 100%;
            }
          }
          .video-box-top {
            color: white;
            display: none;
            width: 100%;
            height: 32px;
            line-height: 32px;
            padding: 0px 20px;
            box-sizing: border-box;
            background: #27293190;
            position: absolute;
            top: 0px;
            z-index: 2;
            b {
              float: left;
            }
          }
          .currentPlayer {
@@ -592,21 +827,78 @@
            }
          }
        }
        .player-control {
          background-color: black;
          height: 75px;
          width: 100%;
          .progress-bar {
            margin: 0px 30px;
            position: relative;
            .self-dot {
              top: 16px;
              position: absolute;
              height: 6px;
              width: 3px;
              z-index: 1;
              background-color: lightcoral;
              border-radius: 60%;
              // pointer-events: none;
              cursor: pointer;
              -webkit-transform: translateX(-50%);
              transform: translateX(-50%);
            }
            .el-slider__button {
              width: 12px;
              height: 12px;
            }
            .el-slider__stop {
              background-color: lightcoral;
            }
          }
          .control-zone {
            .time {
              float: left;
              margin-left: 23px;
              color: #fff;
            }
            .play-btn {
              width: 24px;
              height: 24px;
              cursor: pointer;
              background: url(/apps/shuohuangMonitorAnalyze/img/bigplay.png)
                no-repeat;
              background-size: contain;
              margin: 0 auto;
            }
            .stop-btn {
              width: 24px;
              height: 24px;
              cursor: pointer;
              background: url(/apps/shuohuangMonitorAnalyze/img/smallpause.png)
                no-repeat;
              background-size: contain;
              margin: 0 auto;
            }
          }
        }
      }
    }
  }
  .content-bottom {
    display: flex;

    .bot-left {
      flex: 1;
      padding: 0px 15px 8px 15px;
      background: #fff;
    border-radius: 3px;
    .el-tabs__header {
    padding: 0;
    position: relative;
    margin: 0 0 10px;
}
      border-radius: 3px;
      min-width: 400px;
      height: 343px;
      .el-tabs__header {
        padding: 0;
        position: relative;
        margin: 0 0 10px;
      }
      .flex-box {
        align-items: baseline;
        label {
@@ -644,6 +936,8 @@
    .bot-right {
      width: 210px;
      margin-left: 10px;
      min-width: 210px;

      label {
        color: #999;
        padding-right: 8px;
@@ -654,7 +948,7 @@
  .label-dialog {
    .el-dialog {
      width: 700px !important;
      height: 558px  !important;
      height: 558px !important;
      .el-dialog__header {
        height: 20px;
      }