From b5e2e236828b7fbc0e8f2bdbf66651ad8907e3b1 Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期三, 21 七月 2021 16:40:17 +0800
Subject: [PATCH] all

---
 src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue |  210 ++++++++++++++++++++++++++++++++++-----------------
 1 files changed, 139 insertions(+), 71 deletions(-)

diff --git a/src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue b/src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue
index 5dd7411..83941a9 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue
@@ -17,7 +17,8 @@
               v-for="(item, index) in videoArrs"
               :key="index"
               :command="item"
-            >{{ item.CameraPosition }}</el-dropdown-item>
+              >{{ item.CameraPosition }}</el-dropdown-item
+            >
           </el-dropdown-menu>
         </el-dropdown>
 
@@ -94,7 +95,6 @@
               @mouseenter.stop.prevent="videoMouseEnter($event)"
               @mouseleave="videoMouseLeave($event)"
             >
-              <!--  -->
               <template v-if="index <= videoArrs.length - 1">
                 <div class="video-box-top">
                   <b>{{ videoArrs[index].CameraPosition }}</b>
@@ -130,15 +130,24 @@
                 </div>
                 <div
                   class="self-dot"
-                  :class="getColor(item.text)"
+                  :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>
               </el-tooltip>
-              <el-tooltip placement="top" v-for="(item, index) in labelMarks" :key="index">
+              <el-tooltip
+                placement="top"
+                v-for="(item, index) in labelMarks"
+                :key="index"
+              >
                 <div slot="content">
+                
                   {{ getTimeStr(item.offset) }}
                   <br />
                   {{ item.text }}
@@ -182,7 +191,6 @@
                   ></i>
                   <i class="el-icon-d-arrow-right" @click="moveBar(10)"></i>
                 </div>
-                <!-- <span class="icon iconfont">&#xe628;</span> -->
               </div>
             </div>
           </div>
@@ -191,9 +199,42 @@
     </div>
     <div class="content-bottom">
       <div class="bot-left">
-        <!-- <p class="title-partment">蹇�熸爣娉�</p> -->
         <el-tabs v-model="activeName" @tab-click="handleClick">
-          <el-tab-pane label="蹇�熸爣娉�" name="first">
+          <el-tab-pane label="闅愭偅浜嬩欢" name="first">
+            <div class="yinhuan-wrap">
+              <div class="title">{{yinhuanArr.length?"璇嗗埆鍑虹殑寮傚父鎯呭喌锛�":"鏆傛棤璇嗗埆鍑哄紓甯告儏鍐�"}} </div>
+              <div class="list">
+                <div
+                  class="list-item"
+                  v-for="(item, index) in yinhuanArr"
+                  :key="index"
+                  @click="dotJump(item.offset)"
+                >
+                  <span style="margin-right: 20px">{{
+                    getTimeStr(item.offset)
+                  }}</span>
+                  <span
+                    style="
+                      display: block;
+                      min-width: 135px;
+                      margin-right: 20px;
+                      min-widht: 140px;
+                    "
+                    >{{ item.text }}
+                  </span>
+
+                  <span style="color: orangered; margin-right: 5px"
+                    >鏈墜姣�
+                  </span>
+                  <span class="icon iconfont" style="color: orangered"
+                    >&#xe6e6;</span
+                  >
+                </div>
+              </div>
+            </div>
+          </el-tab-pane>
+
+          <el-tab-pane label="蹇�熸爣娉�" name="second">
             <div class="flex-box" style="height: 28px">
               <label style="padding-right: 10px">闅愭偅闂:</label>
               <el-radio-group v-model="isUnusual">
@@ -206,14 +247,23 @@
                 v-show="isUnusual == 1"
                 type="primary"
                 @click="addLabel(curVideo)"
-              >娣诲姞鏍囨敞</el-button>
+                >娣诲姞鏍囨敞</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="mark"
+                  v-for="mark in curVideo.LableLst"
+                  :key="mark.ID"
+                >
                   <div class="time">
-                    <span>{{ pad0(Math.floor(mark.Time / 60)) }}:{{ pad0(mark.Time % 60) }}</span>
+                    <span
+                      >{{ pad0(Math.floor(mark.Time / 60)) }}:{{
+                        pad0(mark.Time % 60)
+                      }}</span
+                    >
                     <i class="el-icon-edit" @click="editCurLabel(mark)"></i>
                     <i class="el-icon-delete" @click="removeCurLabel(mark)"></i>
                   </div>
@@ -224,10 +274,9 @@
               </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="third"></el-tab-pane>
         </el-tabs>
       </div>
       <div class="bot-right block">
@@ -260,22 +309,22 @@
       :append-to-body="false"
       :modal="false"
     >
-      <!-- <div class="label-radio">
-        <p class="label">閫夋嫨灏嗚鏍囨敞鐨勮棰�:</p>
-        <el-radio-group v-model="isCheckAllVideo">
-          <el-radio :label="1">鏍囨敞鍦ㄥ叏閮ㄤ綅缃殑瑙嗛娈�</el-radio>
-          <el-radio :label="0">浠呮爣娉ㄩ�変腑鐨勮棰戞</el-radio>
-        </el-radio-group>
-      </div>-->
       <div class="label-check">
         <p class="label">闅愭偅闂:</p>
         <el-checkbox-group v-model="labelCheckedList">
-          <el-checkbox v-for="item in labelOptions" :key="item.ID" :label="item.ID">{{ item.Name }}</el-checkbox>
+          <el-checkbox
+            v-for="item in labelOptions"
+            :key="item.ID"
+            :label="item.ID"
+            >{{ item.Name }}</el-checkbox
+          >
         </el-checkbox-group>
       </div>
       <div class="btns">
         <el-button @click="cancelLabelChecked" size="small">鍙栨秷</el-button>
-        <el-button @click="submitLabelChecked" size="small" type="primary">纭畾</el-button>
+        <el-button @click="submitLabelChecked" size="small" type="primary"
+          >纭畾</el-button
+        >
       </div>
     </el-dialog>
   </div>
@@ -287,7 +336,7 @@
   getCarVideos,
   getLabelMap,
   delLabel,
-  editLabel,
+  editLabel
 } from "@/api/shuohuang";
 import DatasetChart from "./charts/datasetForVideo";
 import AliPlayer from "./aliPlayer/index";
@@ -390,7 +439,6 @@
     },
   },
   mounted() {
-
     this.renderLabelOpts();
 
     this.setGuid(1);
@@ -402,13 +450,27 @@
   destroyed() {
     this.videoArrs.length = 0;
   },
+  computed: {
+    yinhuanArr() {
+      if (this.curVideo.IsOperate==0) {
+        return []
+      }
+      return this.eventMarks.filter((x) => {
+        return (
+          (x.text.indexOf("杩涘嚭绔�") > -1 ||
+            x.text.indexOf("杩囧垎鐩�") > -1 ||
+            x.text.indexOf("淇″彿鏈�") > -1) &&
+          x.state == 0
+        );
+      });
+    },
+  },
   methods: {
     triggerHover(e) {
       let fn = throttle(this.hoverAction, 2000);
       fn(e);
     },
     hoverAction(e) {
-      console.log(e.target.className);
       if (
         e.target.className == "el-slider__button-wrapper hover" ||
         e.target.className == "el-tooltip el-slider__button hover"
@@ -462,7 +524,6 @@
       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}`
@@ -518,21 +579,13 @@
       }
     },
     handleClick(instance) {
-      if (instance.name == "second") {
-        this.showTable = true;
-      } else {
-        this.showTable = false;
-      }
+      this.showTable = instance.name == "third";
     },
     handleCommand(cmd) {
-      console.log(cmd)
-      console.log(this.$refs)
-
       let _this = this;
       _this.curVideo = cmd;
       _this.curCamera = _this.curVideo.CameraPosition;
       _this.$nextTick(() => {
-        console.log(_this.$refs)
         _this.$refs[`player_${_this.curVideo.id}`][0].init();
       });
     },
@@ -555,13 +608,9 @@
         res.data.forEach((item) => {
           item.marks = _this.mergeMarks(item);
         });
-
         _this.allCurVideos = res.data;
-
         _this.curVideo = res.data.find((item) => item.id == v.id);
-
-        _this.refreshCurVideoLabel(_this.curVideo)
-
+        _this.refreshCurVideoLabel(_this.curVideo);
         // 璁剧疆涓嬫媺鑿滃崟閫変腑椤�
         _this.curCamera = _this.curVideo.CameraPosition;
 
@@ -595,41 +644,41 @@
         _this.labelOptions = res.data;
       });
     },
-    getColor(text){
-      if (text.indexOf('杩涘嚭绔�')>-1) {
-        return 'yellow'
+    getColor(text) {
+      if (text.indexOf("杩涘嚭绔�") > -1) {
+        return "yellow";
       }
-      if (text.indexOf('淇″彿鏈�')>-1) {
-        return 'purple'
+      if (text.indexOf("淇″彿鏈�") > -1) {
+        return "purple";
       }
-      if (text.indexOf('杩囧垎鐩�')>-1) {
-        return 'blue'
+      if (text.indexOf("杩囧垎鐩�") > -1) {
+        return "blue";
       }
-      return ''
+      return "";
     },
     refreshCurVideoLabel(video) {
-      let arr = [video]
-      this.videoArrs = arr.concat(this.allCurVideos.filter(v => {
-        return v.GroupID == video.GroupID && v.id != video.id
-      }))
+      let arr = [video];
+      this.videoArrs = arr.concat(
+        this.allCurVideos.filter((v) => {
+          return v.GroupID == video.GroupID && v.id != video.id;
+        })
+      );
     },
     checkVideo(video) {
-      console.log(video)
       this.refreshCurVideoLabel(video);
       this.curVideo = video;
-      this.eventMarks = []
-      this.labelMarks = []
+      this.eventMarks = [];
+      this.labelMarks = [];
       video.marks.forEach((item) => {
         if (item.type == 0) {
           this.eventMarks.push(item);
         } else {
           this.labelMarks.push(item);
         }
-      })
+      });
 
       this.$nextTick(() => {
         this.$refs[`player_${this.curVideo.id}`][0].init();
-        console.log(this.$refs)
       });
     },
     setGuid(guid) {
@@ -662,12 +711,12 @@
     submitLabelChecked() {
       let _this = this;
       let tempArr = [];
-      let isAdd  = false
+      let isAdd = false;
       tempArr = this.videoArrs.map((video) => video.id);
       let desc = this.labelCheckedList.map((lableId) => {
         for (let label of this.labelOptions) {
-          if (label.Name=='鏈墜姣�') {
-            isAdd=true
+          if (label.Name == "鏈墜姣�") {
+            isAdd = true;
           }
           if (label.ID == lableId) {
             return label.Name;
@@ -703,8 +752,8 @@
           _this.$parent.$parent.filterSearchData();
 
           if (isAdd) {
-            let num = sessionStorage.getItem("shoubiNum")
-          sessionStorage.setItem("shoubiNum", num?+num+1:1 )
+            let num = sessionStorage.getItem("shoubiNum");
+            sessionStorage.setItem("shoubiNum", num ? +num + 1 : 1);
           }
         } else {
           _this.$message.warning(rsp.msg);
@@ -751,15 +800,14 @@
     },
     mergeMarks(videoInfo) {
       if (!videoInfo.EventLst || !videoInfo.LableLst) {
-        console.log("mergeMarks data null");
         return;
       }
-
       const eMarks = videoInfo.EventLst.map((item) => {
         return {
           offset: item.SecondsInVideo,
           text: item.Event + (item.Desc == "" ? "" : ": " + item.Desc),
           type: 0,
+          state: item.state,
         };
       });
       const labMarks = videoInfo.LableLst.map((lable) => {
@@ -788,7 +836,6 @@
   text-align: left;
   .content-top {
     margin-bottom: 15px;
-    // height: calc(60% + -16px);
     .grid-check {
       text-align: right;
       margin-bottom: 3px;
@@ -895,17 +942,17 @@
               -webkit-transform: translateX(-50%);
               transform: translateX(-50%);
             }
-            .yellow{
+            .yellow {
               background-color: yellow;
-
             }
-            .purple{
-              background-color: purple;
-
+            .purple {
+              background-color: skyblue;
             }
-            .blue{
+            .red {
+              background-color: red;
+            }
+            .blue {
               background-color: blue;
-
             }
             .label-dot {
               position: absolute;
@@ -992,6 +1039,27 @@
       border-radius: 3px;
       min-width: 400px;
       height: 343px;
+      .yinhuan-wrap {
+        display: flex;
+        .title {
+          margin-right: 10px;
+          min-width: 140px;
+        }
+        .list {
+          width: 100%;
+          height: 300px;
+          overflow: auto;
+        }
+        .list-item {
+          display: flex;
+          align-items: center;
+          height: 23px;
+          cursor: pointer;
+        }
+        .list-item:hover {
+          background-color: lightcyan;
+        }
+      }
       .el-tabs__header {
         padding: 0;
         position: relative;

--
Gitblit v1.8.0