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