From 8c7d1ed32b7653e9e0bf72544a28f99144e92d04 Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期四, 25 二月 2021 10:02:04 +0800
Subject: [PATCH] 增加事件标签和label去重

---
 vue.config.js                                                          |    2 
 src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue |  524 +++++++++++++++++++++++++------------
 src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue          |  277 +++++++++++--------
 3 files changed, 512 insertions(+), 291 deletions(-)

diff --git a/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue b/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue
index d312194..23901ef 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue
@@ -21,14 +21,20 @@
         <el-button size="small" type="primary" @click="init">鎼滅储</el-button>
       </div>
       <div class="checked-config">
-        <span style="margin-top:3px;">宸查�夋潯浠�:</span>
+        <span style="margin-top: 3px">宸查�夋潯浠�:</span>
         <span
           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;:
+          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 class="val" v-for="option in config.data" :key="option.id">
             <!-- <template>
               <div>
@@ -36,51 +42,83 @@
               </div>
             </template>-->
             <span v-if="option.isChecked" class="val-show">
-              {{option.name}}
+              {{ option.name }}
               <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="title">{{ config.title }}</div>
             <div class="options-wrap">
               <div
                 class="options"
-                :ref="'options'+config.id"
-                :style="{height:fixedOneLineHeight+'px'}"
+                :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>
+                    <span>{{ option.name }}</span>
                   </div>
-                  <div v-show="!config.isMultCheck" @click="checkOption(config,option)">
-                    <span>{{option.name}}</span>
+                  <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="config.isShowMore?'el-icon-arrow-up':'el-icon-arrow-down'"></i>
+                <i
+                  :class="
+                    config.isShowMore
+                      ? 'el-icon-arrow-up'
+                      : 'el-icon-arrow-down'
+                  "
+                ></i>
               </div>
               <div
-                :class="[{'checked':config.isMultCheck},'multCheck']"
+                :class="[{ checked: config.isMultCheck }, 'multCheck']"
                 @click="toggleMultCheck(config)"
               >
                 <i class="el-icon-plus"></i>&nbsp;
@@ -92,21 +130,26 @@
         <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"
-                v-for="(config,index) in highLevelConfigs"
+                v-for="(config, index) in highLevelConfigs"
                 :key="index"
-                :index="index+''"
+                :index="index + ''"
               >
-                <template slot="title">{{config.title}}</template>
+                <template slot="title">{{ config.title }}</template>
                 <el-menu-item
-                  v-for="(option,ind) in config.data"
+                  v-for="(option, ind) in config.data"
                   :key="ind"
-                  :index="index+'-'+ind"
-                  @click="checkOption(config,option)"
-                >{{option.name}}</el-menu-item>
+                  :index="index + '-' + ind"
+                  @click="checkOption(config, option)"
+                  >{{ option.name }}</el-menu-item
+                >
               </el-submenu>
             </el-menu>
           </div>
@@ -117,14 +160,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>
@@ -133,18 +184,33 @@
         </div>
         <div class="right">
           <div class="show-type">
-            <div class="type menu" :class="{'current':showType=='menu'}" @click="checkType('menu')">
+            <div
+              class="type menu"
+              :class="{ current: showType == 'menu' }"
+              @click="checkType('menu')"
+            >
               <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'">
+      <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-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 />
@@ -153,35 +219,63 @@
                 <div class="base-info">
                   <div class="flex-box">
                     <label>杞﹀彿:</label>
-                    <span>{{data.CarNumber}}</span>
+                    <span>{{ data.CarNumber }}</span>
                   </div>
                   <div class="flex-box">
                     <label>杞︽:</label>
-                    <span>{{data.TrainNumber}}</span>
+                    <span>{{ data.TrainNumber }}</span>
                   </div>
                   <div class="flex-box">
                     <label>鏃堕棿:</label>
-                    <span>{{data.VideoDate}}</span>
+                    <span>{{ data.VideoDate }}</span>
                   </div>
                   <div class="flex-box">
-                    <label>鍙告満|鍓徃鏈�:</label>
-                    <span>{{data.Driver1}}|{{data.Driver2}}</span>
+                    <label>鍙告満 | 鍓徃鏈�:</label>
+                    <span>{{ data.Driver1 }} | {{ data.Driver2 }}</span>
                   </div>
                 </div>
                 <div class="mark-info">
-                  <div class="abnormal" v-if="data.LableLst&&data.LableLst.length">
-                    <span v-for="(label,index) in data.LableLst" :key="index">{{label.Desc}}</span>
+                  <div
+                    class="abnormal"
+                    v-if="data.LableLst && data.LableLst.length"
+                  >
+                    <span
+                      v-for="(label, index) in data.LableLst"
+                      :key="index"
+                      >{{ label.Desc +(index==data.LableLst.length-1?"":"锛�")}}</span
+                    >
                   </div>
-                  <div v-else>
+                  <div v-else >
                     <span>鏃犲紓甯�</span>
+                  </div>
+                  <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"
+                      >{{ 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="[data.IsFollow?'follow':'','el-icon-star-off']"></i>
+                <i
+                  :class="[data.IsFollow ? 'follow' : '', 'el-icon-star-off']"
+                ></i>
               </div>
             </div>
           </el-col>
@@ -198,20 +292,37 @@
           :total="tabTotal"
         ></el-pagination>
       </div>
-      <div class="content" v-show="showType=='list'">
+      <div class="content" v-show="showType == 'list'">
         <el-table :data="tableData" fit ref="elTable">
           <el-table-column label="鍚嶇О" prop="VideoName" sortable width="500">
             <template slot-scope="scope">
-              <div style="cursor:pointer;" @click="checkVideoDetail(scope.row)">{{scope.row.VideoName}}</div>
+              <div style="cursor: pointer" @click="checkVideoDetail(scope.row)">
+                {{ scope.row.VideoName }}
+              </div>
             </template>
           </el-table-column>
-          <el-table-column label="澶у皬" prop="VideoSize" sortable></el-table-column>
-          <el-table-column label="淇敼鏃ユ湡" prop="UpdatedAt" sortable></el-table-column>
-          <el-table-column label="鍒涘缓鏃ユ湡" prop="CreatedAt" sortable></el-table-column>
+          <el-table-column
+            label="澶у皬"
+            prop="VideoSize"
+            sortable
+          ></el-table-column>
+          <el-table-column
+            label="淇敼鏃ユ湡"
+            prop="UpdatedAt"
+            sortable
+          ></el-table-column>
+          <el-table-column
+            label="鍒涘缓鏃ユ湡"
+            prop="CreatedAt"
+            sortable
+          ></el-table-column>
           <el-table-column label="鎿嶄綔">
             <template slot-scope="scope">
               <div class="operation">
-                <i class="el-icon-star-off" @click="toggleFollow(scope.row)"></i>
+                <i
+                  class="el-icon-star-off"
+                  @click="toggleFollow(scope.row)"
+                ></i>
               </div>
             </template>
           </el-table-column>
@@ -230,7 +341,7 @@
       <el-dialog
         class="dialog-video"
         :visible="videoDialogVisible"
-        @close="videoDialogVisible=false"
+        @close="videoDialogVisible = false"
       >
         <div slot="title" class="title">
           <div class="center">
@@ -245,21 +356,32 @@
 </template>
 
 <script>
-import { getlstInit, updateVideoAnalyze, getlst, getRelatedVideoInfo, getLabelMap, delLabel, editLabel } from '@/api/shuohuang';
-import VideoAnalyze from "./videoAnalyze"
+import {
+  getlstInit,
+  updateVideoAnalyze,
+  getlst,
+  getRelatedVideoInfo,
+  getLabelMap,
+  delLabel,
+  editLabel,
+} from "@/api/shuohuang";
+import VideoAnalyze from "./videoAnalyze";
 
 export default {
   name: "SearchMain",
   components: {
-    VideoAnalyze
+    VideoAnalyze,
   },
   data() {
     return {
-      CLIP: 'http://',
-      keyword: '',
-      IsFollow: '',
+      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)],
+      searchTime: [
+        new Date(2020, 0, 1, 0, 0, 0),
+        new Date(2020, 11, 31, 23, 59, 59),
+      ],
       curTabPage: 1,
       curTablePage: 1,
       tabPageSize: 8,
@@ -269,73 +391,108 @@
       tableTotal: 0,
       currentPage: 1,
       pickerOptions: {
-        shortcuts: [{
-          text: '浠婂ぉ',
-          onClick(picker) {
-            const end = new Date();
-            const start = new Date();
-            start.setHours(0, 0, 0);
-            picker.$emit('pick', [start, end]);
-          }
-        }, {
-          text: '鏄ㄥぉ',
-          onClick(picker) {
-            const end = new Date();
-            const start = new Date();
-            start.setTime(start.getTime() - 3600 * 1000 * 24);
-            start.setHours(0, 0, 0);
-            end.setTime(end.getTime() - 3600 * 1000 * 24);
-            end.setHours(23, 59, 59);
-            picker.$emit('pick', [start, end]);
-          }
-        }, {
-          text: '杩戜笁澶�',
-          onClick(picker) {
-            const end = new Date();
-            const start = new Date();
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
-            picker.$emit('pick', [start, end]);
-          }
-        }, {
-          text: '杩戜竴鍛�',
-          onClick(picker) {
-            const end = new Date();
-            const start = new Date();
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
-            //start.setHours(0,0,0);
-            picker.$emit('pick', [start, end]);
-          }
-        }]
+        shortcuts: [
+          {
+            text: "浠婂ぉ",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setHours(0, 0, 0);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "鏄ㄥぉ",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24);
+              start.setHours(0, 0, 0);
+              end.setTime(end.getTime() - 3600 * 1000 * 24);
+              end.setHours(23, 59, 59);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "杩戜笁澶�",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "杩戜竴鍛�",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              //start.setHours(0,0,0);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+        ],
       },
       checkedConfigs: [],
       optionalConfigs: [],
       highLevelConfigs: [],
       showAdvance: true,
       fixedOneLineHeight: 40,
-      settle: '',
-      IsOperate: '',
-      showType: 'menu',
+      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' }
+        {
+          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 }
+        {
+          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,
+        },
       ],
       videoDialogVisible: false,
       hiddenDanger: 1,
       labelDialogVisible: false,
-      selectedVideo: {}
-    }
+      selectedVideo: {},
+    };
   },
   watch: {
     checkedConfigs: {
       handler(n, o) {
-        this.filterSearchData()
+        this.filterSearchData();
       },
-      deep: true
-    }
+      deep: true,
+    },
   },
   mounted() {
     this.init();
@@ -343,58 +500,61 @@
   methods: {
     handleTabSizeChange(size) {
       this.tabPageSize = size;
-      this.filterSearchData()
+      this.filterSearchData();
     },
     handleTableSizeChange(size) {
       this.tablePageSize = size;
-      this.filterSearchData()
+      this.filterSearchData();
     },
     handleCurrentChange() {
-      this.filterSearchData()
+      this.filterSearchData();
     },
     //浜岀骇鏌ヨ
     filterSearchData() {
       let _this = this;
-      let isFollow = '';
-      if (this.IsFollow === '') {
-        isFollow = ''
+      let isFollow = "";
+      if (this.IsFollow === "") {
+        isFollow = "";
       } else if (!!this.IsFollow) {
-        isFollow = '1'
+        isFollow = "1";
       } else {
-        isFollow = '0'
+        isFollow = "0";
       }
       let query = {
         KeyWord: this.keyword,
         StartDate: this.searchTime[0],
         EndDate: this.searchTime[1],
-        PageIndex: this.showType == 'list' ? this.curTablePage : this.curTabPage,
-        PageSize: this.showType == 'list' ? this.tablePageSize : this.tabPageSize,
-        IsDetail: this.showType == 'list',
+        PageIndex:
+          this.showType == "list" ? this.curTablePage : this.curTabPage,
+        PageSize:
+          this.showType == "list" ? this.tablePageSize : this.tabPageSize,
+        IsDetail: this.showType == "list",
         IsFollow: isFollow,
-        IsOperate: this.IsOperate
+        IsOperate: this.IsOperate,
       };
       let filterQuerys = [];
-      this.checkedConfigs.forEach(config => {
-        let checkedOpts = config.data.filter(option => option.isChecked);
+      this.checkedConfigs.forEach((config) => {
+        let checkedOpts = config.data.filter((option) => option.isChecked);
         if (checkedOpts.length) {
-          var linkOpts = checkedOpts.map(opt => opt.name);
-          linkOpts = linkOpts.join(',');
+          var linkOpts = checkedOpts.map((opt) => opt.name);
+          linkOpts = linkOpts.join(",");
           let obj = {};
           obj[config.NameEn] = linkOpts;
           filterQuerys.push(obj);
         }
-      })
+      });
       Object.assign(query, ...filterQuerys);
 
-      getlst(query).then(res => {
-        if (_this.showType == 'list') {
+      getlst(query).then((res) => {
+        if (_this.showType == "list") {
           _this.tableTotal = res.total;
           _this.tableData = res.data;
         } else {
           _this.tabTotal = res.total;
           _this.tabData = res.data;
+        
         }
-      })
+      });
     },
     //涓�绾ф煡璇�
     init() {
@@ -403,25 +563,42 @@
         KeyWord: this.keyword,
         StartDate: this.searchTime[0],
         EndDate: this.searchTime[1],
-        PageIndex: this.showType == 'list' ? this.curTablePage : this.showType == 'list',
-        PageSize: this.showType == 'list' ? this.tablePageSize : this.tabPageSize,
-        IsDetail: this.showType == 'list',
+        PageIndex:
+          this.showType == "list" ? this.curTablePage : this.showType == "list",
+        PageSize:
+          this.showType == "list" ? this.tablePageSize : this.tabPageSize,
+        IsDetail: this.showType == "list",
         IsFollow: this.IsFollow,
         IsOperate: this.IsOperate,
       };
       this.optionalConfigs = [];
       this.highLevelConfigs = [];
-      getlstInit(query).then(res => {
-        if (_this.showType == 'list') {
+      getlstInit(query).then((res) => {
+        if (_this.showType == "list") {
           _this.tableTotal = res.total;
           _this.tableData = res.data;
         } else {
           _this.tabTotal = res.total;
           _this.tabData = res.data;
+          // debugger
+           _this.tabData =  _this.tabData.map(function (item) {
+            const set =new Set()
+            item.LableLst.forEach(function (label) {
+              label.Desc.split("锛�").forEach(function (d) {
+                set.add(d)
+              })
+            })
+            const lblst = []
+            set.forEach(function (d) {
+              lblst.push({Desc:d})
+            })
+            item.LableLst=lblst
+            return item
+          })
         }
 
-        res.filterlst.forEach(config => {
-          this.$set(config, 'isShow', true);
+        res.filterlst.forEach((config) => {
+          this.$set(config, "isShow", true);
           // config.data = Object.keys(config.Node).map(key => {
           //   let obj = {};
           //   obj.name = key;
@@ -436,44 +613,46 @@
           });
           config.id = config.ID;
           config.title = config.NameZn;
-          config.data.forEach(item => {
-            this.$set(item, 'isChecked', false);
+          config.data.forEach((item) => {
+            this.$set(item, "isChecked", false);
           });
           if (config.IsAdvanced) {
             this.highLevelConfigs.push(config);
           } else {
-            this.$set(config, 'isMultCheck', false);
-            this.$set(config, 'showMore', false);
-            this.optionalConfigs.push(config)
+            this.$set(config, "isMultCheck", false);
+            this.$set(config, "showMore", false);
+            this.optionalConfigs.push(config);
           }
         });
         this.$nextTick(() => {
-          this.optionalConfigs.forEach(config => {
-            if (this.$refs[`options${config.id}`][0].scrollHeight > this.fixedOneLineHeight) {
+          this.optionalConfigs.forEach((config) => {
+            if (
+              this.$refs[`options${config.id}`][0].scrollHeight >
+              this.fixedOneLineHeight
+            ) {
               config.showMore = true;
-              this.$set(config, 'isShowMore', false);
+              this.$set(config, "isShowMore", false);
             } else {
               config.showMore = false;
             }
           });
           console.log(this.optionalConfigs);
         });
-
-      })
+      });
     },
     toggleFollow(data) {
       data.IsFollow = !data.IsFollow;
       this.updataVideo(data);
       if (data.IsFollow) {
         this.$notify({
-          type: 'success',
-          message: '宸叉坊鍔犲叧娉�!'
+          type: "success",
+          message: "宸叉坊鍔犲叧娉�!",
         });
       }
     },
     updataVideo(data) {
       let _this = this;
-      updateVideoAnalyze(data).then(res => {
+      updateVideoAnalyze(data).then((res) => {
         //浜岀骇鏌ヨ
       });
     },
@@ -482,20 +661,17 @@
       let _this = this;
       _this.selectedVideo = data;
       _this.videoDialogVisible = true;
-
     },
-    checkFollow() {
-
-    },
+    checkFollow() {},
     checkType(type) {
       this.showType = type;
-      this.filterSearchData()
+      this.filterSearchData();
     },
     clearCheckedConfigs() {
-      this.checkedConfigs.forEach(config => {
+      this.checkedConfigs.forEach((config) => {
         config.isShow = true;
-        config.data.forEach(d => {
-          d.isChecked = false
+        config.data.forEach((d) => {
+          d.isChecked = false;
         });
       });
       this.checkedConfigs = [];
@@ -506,10 +682,10 @@
       if (config.IsAdvanced) {
         this.showAdvance = true;
       }
-      config.data.forEach(d => {
+      config.data.forEach((d) => {
         d.isChecked = false;
       });
-      let index = this.checkedConfigs.findIndex(one => one.id == config.id);
+      let index = this.checkedConfigs.findIndex((one) => one.id == config.id);
       this.checkedConfigs.splice(index, 1);
     },
     checkOption(config, option) {
@@ -526,38 +702,36 @@
       // this.$nextTick(() => {
       //   this.$set(config, 'isShow', false)
       // })
-
     },
 
     cancleMultCheck(config) {
       config.isMultCheck = false;
-      config.data.forEach(opt => {
+      config.data.forEach((opt) => {
         opt.isChecked = false;
       });
     },
-    handleSelect(key, keyPath) {
-
-    },
+    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';
+      this.$refs[`options${config.id}`][0].style.height = config.isShowMore
+        ? this.$refs[`options${config.id}`][0].scrollHeight + "px"
+        : this.fixedOneLineHeight + "px";
     },
     toggleMultCheck(config) {
       config.isMultCheck = !config.isMultCheck;
-      this.optionalConfigs.forEach(conf => {
+      this.optionalConfigs.forEach((conf) => {
         if (conf.id == config.id) {
           return;
         }
         conf.isMultCheck = false;
-      })
+      });
     },
     dataSearch() {
       console.log(this.checkedConfigs);
       this.$forceUpdate();
     },
-
-  }
-}
+  },
+};
 </script>
 
 <style lang="scss">
@@ -685,14 +859,13 @@
         }
         .el-menu.el-menu--horizontal {
           border: none;
-          
         }
         .config-submenu {
-          .el-menu--horizontal{
+          .el-menu--horizontal {
             //max-width: 700px;
             //overflow-x: auto;
-            left: 20px!important;
-            &>ul{
+            left: 20px !important;
+            & > ul {
               flex-wrap: wrap;
             }
           }
@@ -798,6 +971,9 @@
             .abnormal {
               color: red;
             }
+            .event-tag{
+              margin-top: 10px;
+            }
           }
           .tag-info {
             color: #999;
@@ -831,7 +1007,7 @@
           cursor: pointer;
         }
       }
-      .pagination-center{
+      .pagination-center {
         text-align: center;
         margin: 10px auto;
       }
diff --git a/src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue b/src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue
index 4153b48..a6c5375 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue
@@ -3,15 +3,27 @@
     <div class="content-top">
       <div class="grid-check">
         <span
-          :class="guid === 1 ? 'iconfont icongongge1 activegongge':'iconfont icongongge1'"
+          :class="
+            guid === 1
+              ? 'iconfont icongongge1 activegongge'
+              : 'iconfont icongongge1'
+          "
           @click="setGuid(1)"
         ></span>
         <span
-          :class="guid === 2 ? 'iconfont icongongge activegongge':'iconfont icongongge'"
+          :class="
+            guid === 2
+              ? 'iconfont icongongge activegongge'
+              : 'iconfont icongongge'
+          "
           @click="setGuid(2)"
         ></span>
         <span
-          :class="guid === 3 ? 'iconfont icongongge2 activegongge':'iconfont icongongge2'"
+          :class="
+            guid === 3
+              ? 'iconfont icongongge2 activegongge'
+              : 'iconfont icongongge2'
+          "
           @click="setGuid(3)"
         ></span>
       </div>
@@ -24,21 +36,21 @@
           </div>-->
           <div
             class="video-name"
-            :class="{'current':curVideo.ID==video.ID}"
-            @click="checkVideo(video,index)"
-            v-for="(video,index) in relativeVideos"
+            :class="{ current: curVideo.ID == video.ID }"
+            @click="checkVideo(video, index)"
+            v-for="(video, index) in relativeVideos"
             :key="video.ID"
           >
             <i class="el-icon-film"></i>
-            <span>{{video.Camera}}</span>
+            <span>{{ video.Camera }}</span>
           </div>
         </div>
         <div class="players" ref="playerWrap">
-          <template v-if="guid==1">
+          <template v-if="guid == 1">
             <div
               class="video-item"
               :ref="`gridVideoItem_${index}`"
-              v-for="(item,index) in videoWrapArr"
+              v-for="(item, index) in videoWrapArr"
               :key="index"
             >
               <div class="currentPlayer">
@@ -56,12 +68,14 @@
             <div
               class="video-item"
               :ref="`gridVideoItem_${index}`"
-              v-for="(item,index) in videoWrapArr"
+              v-for="(item, index) in videoWrapArr"
               :key="index"
               @click="checkCurVideo(index)"
             >
-              <template v-if="index<=videoArrs.length-1">
-                <div :class="{'currentPlayer':curVideo.ID==videoArrs[index].ID}">
+              <template v-if="index <= videoArrs.length - 1">
+                <div
+                  :class="{ currentPlayer: curVideo.ID == videoArrs[index].ID }"
+                >
                   <!-- {{videoArrs[index].ID}} -->
                   <!-- <img
                     :src="videoArrs[index].VideoCover"
@@ -91,8 +105,8 @@
     <div class="content-bottom">
       <div class="bot-left block">
         <p class="title-partment">蹇�熸爣娉�</p>
-        <div class="flex-box" style="height:28px;">
-          <label style="padding-right:10px;">闅愭偅闂:</label>
+        <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>
@@ -101,22 +115,27 @@
           <el-button
             icon="el-icon-plus"
             size="mini"
-            v-show="isUnusual==1"
+            v-show="isUnusual == 1"
             type="primary"
             @click="addLabel(curVideo)"
-          >娣诲姞鏍囨敞</el-button>
+            >娣诲姞鏍囨敞</el-button
+          >
         </div>
         <div class="flex-box fixed-height-box">
           <label>鏍囨敞淇℃伅:</label>
           <div class="mark-list">
             <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>
+                <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>
+                <span>{{ mark.Desc }}</span>
               </div>
             </div>
           </div>
@@ -127,19 +146,19 @@
         <div class="base-info">
           <div>
             <label>杞﹀彿:</label>
-            <span>{{videoDetails.CarNumber}}</span>
+            <span>{{ videoDetails.CarNumber }}</span>
           </div>
           <div>
             <label>杞︽:</label>
-            <span>{{videoDetails.TrainNumber}}</span>
+            <span>{{ videoDetails.TrainNumber }}</span>
           </div>
           <div>
             <label>鏃堕棿:</label>
-            <span>{{videoDetails.VideoDate}}</span>
+            <span>{{ videoDetails.VideoDate }}</span>
           </div>
           <div>
             <label>鍙告満|鍓徃鏈�:</label>
-            <span>{{videoDetails.Driver1}}|{{videoDetails.Driver2}}</span>
+            <span>{{ videoDetails.Driver1 }}|{{ videoDetails.Driver2 }}</span>
           </div>
         </div>
       </div>
@@ -148,7 +167,7 @@
     <el-dialog
       class="label-dialog"
       :visible="labelDialogVisible"
-      @close="labelDialogVisible=false"
+      @close="labelDialogVisible = false"
       :append-to-body="false"
     >
       <div class="label-radio">
@@ -161,127 +180,142 @@
       <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>
 </template>
 
 <script>
-import { getlstInit, updateVideoAnalyze, getlst, getRelatedVideoInfo, getLabelMap, delLabel, editLabel } from '@/api/shuohuang';
-import AliPlayer from './aliPlayer/index';
+import {
+  getlstInit,
+  updateVideoAnalyze,
+  getlst,
+  getRelatedVideoInfo,
+  getLabelMap,
+  delLabel,
+  editLabel,
+} from "@/api/shuohuang";
+import AliPlayer from "./aliPlayer/index";
 
 export default {
   name: "VideoAnalyze",
   components: {
-    AliPlayer
+    AliPlayer,
   },
   props: {
     videoDetails: {
-      default: () => { return {} },
-      type: Object
-    }
+      default: () => {
+        return {};
+      },
+      type: Object,
+    },
   },
-  data () {
+  data() {
     return {
       guid: 1,
       labelDialogVisible: false,
       curVideo: {},
-      isUnusual:'',
+      isUnusual: "",
       videoArrs: [],
       relativeVideos: [],
       labelCheckedList: [],
       videoWrapArr: [],
       labelOptions: [],
-      selectedLabelId: '',
+      selectedLabelId: "",
       setLabelTime: 0,
       isCheckAllVideo: 1,
-    }
+    };
   },
   watch: {
-    'curVideo.LableLst': {
-      handler (n, o) {
+    "curVideo.LableLst": {
+      handler(n, o) {
         if (n.length > 0) {
-          this.isUnusual = 1
+          this.isUnusual = 1;
         } else {
-          this.isUnusual = 0
+          this.isUnusual = 0;
         }
       },
-      deep: true
+      deep: true,
     },
     videoDetails: {
-      handler (newVal, oldVal) {
-        this.getVideos(newVal)
+      handler(newVal, oldVal) {
+        this.getVideos(newVal);
       },
-      deep: true
+      deep: true,
     },
   },
-  mounted () {
-    console.log('analyze mount')
+  mounted() {
+    console.log("analyze mount");
     this.renderLabelOpts();
     this.setGuid(1);
     this.getVideos(this.videoDetails);
   },
   methods: {
-    zeroize(val){
-      return val<10?'0'+val:val
+    zeroize(val) {
+      return val < 10 ? "0" + val : val;
     },
-    checkCurVideo (index) {
+    checkCurVideo(index) {
       if (this.relativeVideos[index]) {
         this.curVideo = this.relativeVideos[index];
         this.refreshCurVideoLabel(this.curVideo);
       }
     },
-    getVideos (video) {
+    getVideos(video) {
       let _this = this;
-      getRelatedVideoInfo({ UniqeID: video.UniqeID }).then(res => {
-        console.log(res)
-        res.data.forEach(element => {
-          element.marks = _this.mergeMarks(element)
-          console.log(element.marks)
+      getRelatedVideoInfo({ UniqeID: video.UniqeID }).then((res) => {
+        console.log(res);
+        res.data.forEach((element) => {
+          element.marks = _this.mergeMarks(element);
+          console.log(element.marks);
         });
-        _this.curVideo = res.data.find(item=>item.ID == video.ID);
+        _this.curVideo = res.data.find((item) => item.ID == video.ID);
         //_this.curVideo = res.data[0];
         _this.videoArrs = res.data;
         _this.relativeVideos = res.data;
         this.$nextTick(() => {
           _this.$refs[`player_${_this.curVideo.ID}`][0].init();
-        })
-
-      })
+        });
+      });
     },
-    renderLabelOpts () {
+    renderLabelOpts() {
       let _this = this;
-      getLabelMap().then(res => {
-        _this.labelOptions = res.data
-      })
+      getLabelMap().then((res) => {
+        _this.labelOptions = res.data;
+      });
     },
-    refreshCurVideoLabel (video) {
-      getRelatedVideoInfo({ UniqeID: video.UniqeID }).then(res => {
-        res.data.forEach(d => {
-          if(d.ID === video.ID){
-            video.LableLst = d.LableLst
+    refreshCurVideoLabel(video) {
+      getRelatedVideoInfo({ UniqeID: video.UniqeID }).then((res) => {
+        res.data.forEach((d) => {
+          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) {
+    checkVideo(video, index) {
       this.refreshCurVideoLabel(video);
       this.curVideo = video;
       this.$nextTick(() => {
         this.$refs[`player_${this.curVideo.ID}`][0].init();
-      })
-
+      });
     },
 
-    setGuid (guid) {
+    setGuid(guid) {
       let _this = this;
       this.guid = guid;
       // for(var i = 0; i < Math.pow(guid,2); i++){
@@ -294,47 +328,51 @@
       this.videoWrapArr = Math.pow(guid, 2);
       this.$nextTick(() => {
         for (var i = 0; i < Math.pow(guid, 2); i++) {
-          this.$refs[`gridVideoItem_${i}`][0].style.width = this.$refs['playerWrap'].offsetWidth / guid + 'px';
-          this.$refs[`gridVideoItem_${i}`][0].style.height = this.$refs['playerWrap'].offsetHeight / guid + 'px';
+          this.$refs[`gridVideoItem_${i}`][0].style.width =
+            this.$refs["playerWrap"].offsetWidth / guid + "px";
+          this.$refs[`gridVideoItem_${i}`][0].style.height =
+            this.$refs["playerWrap"].offsetHeight / guid + "px";
         }
-      })
+      });
     },
 
-    cancelLabelChecked () {
+    cancelLabelChecked() {
       this.labelDialogVisible = false;
     },
-    submitLabelChecked () {
+    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 => {
+      let desc = this.labelCheckedList.map((lableId) => {
         for (let label of this.labelOptions) {
           if (label.ID == lableId) {
             return label.Name;
           }
         }
-      })
+      });
 
       let query = {
         ID: this.selectedLabelId,
-        ParentID: this.isCheckAllVideo ? tempArr.join(',') : this.curVideo.ID + '',
-        ParentUniqID:this.curVideo.UniqeID+ '',
-        Time: Math.round(this.setLabelTime) + '',
-        Codes: this.labelCheckedList.join(','),
-        Desc: desc.join('锛�')
+        ParentID: this.isCheckAllVideo
+          ? tempArr.join(",")
+          : this.curVideo.ID + "",
+        ParentUniqID: this.curVideo.UniqeID + "",
+        Time: Math.round(this.setLabelTime) + "",
+        Codes: this.labelCheckedList.join(","),
+        Desc: desc.join("锛�"),
       };
-      editLabel(query).then(rsp => {
+      editLabel(query).then((rsp) => {
         if (rsp && rsp.success) {
           _this.labelDialogVisible = false;
-          this.$set(_this.curVideo,'LableLst',[]);
+          this.$set(_this.curVideo, "LableLst", []);
           //_this.curVideo.LableLst = [];
-          rsp.data.forEach(label=>{
-            if(label.ParentID == _this.curVideo.ID){
-               _this.curVideo.LableLst.push(label)
+          rsp.data.forEach((label) => {
+            if (label.ParentID == _this.curVideo.ID) {
+              _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);
@@ -342,56 +380,63 @@
           //   })
           // })
 
-          this.$message.success("娣诲姞鎴愬姛")
+          this.$message.success("娣诲姞鎴愬姛");
           // 鏍囨敞
-          _this.setMarks(this.curVideo)
+          _this.setMarks(this.curVideo);
         } else {
-          this.$message.warning(rsp.msg)
+          this.$message.warning(rsp.msg);
         }
-      })
+      });
     },
-    addLabel (video) {
+    addLabel(video) {
       this.labelCheckedList = [];
-      this.selectedLabelId = '';
+      this.selectedLabelId = "";
       this.labelDialogVisible = true;
 
       // 淇濆瓨鐐瑰嚮鏍囨敞鐨勬椂闂�
       this.setLabelTime = this.$refs[`player_${video.ID}`][0].getCurrentTime();
     },
-    editCurLabel (mark) {
+    editCurLabel(mark) {
       this.selectedLabelId = mark.ID;
       this.labelCheckedList = mark.Codes.split(" ,");
       this.labelDialogVisible = true;
     },
-    removeCurLabel (mark) {
+    removeCurLabel(mark) {
       let _this = this;
-      delLabel({ ID: mark.ID, ParentID: this.curVideo.ID }).then(rsp => {
+      delLabel({ ID: mark.ID, ParentID: this.curVideo.ID }).then((rsp) => {
         if (rsp && rsp.success) {
           _this.curVideo.LableLst = rsp.data;
-          this.$message.success("鍒犻櫎鎴愬姛")
+          this.$message.success("鍒犻櫎鎴愬姛");
           // 鏍囨敞
-          _this.setMarks(_this.curVideo)
+          _this.setMarks(_this.curVideo);
         } else {
-          this.$message.warning(rsp.msg)
+          this.$message.warning(rsp.msg);
         }
-      })
+      });
     },
-    mergeMarks (videoInfo) {
-      let marks = videoInfo.HotPoint.concat(videoInfo.LableLst).map(lable => {
+    mergeMarks(videoInfo) {
+      // debugger
+      const eMarks = videoInfo.EventLst.map(function (item) {
+        return {
+          offset: item.SecondsInVideo + "",
+          text: item.Event + (item.Desc == "" ? "" : ": " + item.Desc),
+        };
+      });
+      const labMarks = videoInfo.LableLst.map((lable) => {
         return {
           offset: lable.Time,
-          text: lable.Desc
-        }
-      })
+          text: lable.Desc,
+        };
+      });
 
-      return marks;
+      return eMarks.concat(labMarks);
     },
-    setMarks (video) {
+    setMarks(video) {
       let marks = this.mergeMarks(video);
       this.$refs[`player_${video.ID}`][0].setProgressMarkers(marks);
-    }
-  }
-}
+    },
+  },
+};
 </script>
 
 <style lang="scss">
@@ -475,7 +520,7 @@
             span {
               padding-right: 5px;
             }
-            i[class^='el-icon'] {
+            i[class^="el-icon"] {
               padding: 3px;
             }
           }
diff --git a/vue.config.js b/vue.config.js
index 254db78..8e6eadc 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -87,7 +87,7 @@
       //   }
       // },
       "/api-c": {
-        target: 'http://192.168.20.10:8004',
+        target: 'http://192.168.20.113:8004',
         changeOrigin: true
       },
       "/api-v": {

--
Gitblit v1.8.0