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> :
+ 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
+ > :
<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>
- <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>
@@ -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