From bae0368f502f524fc739003fe751fb0eb06c5859 Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@iotlink.com>
Date: 星期四, 17 六月 2021 14:48:29 +0800
Subject: [PATCH] 修改朔黄前端分析
---
src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue | 273 ++++++++++++++++++------------------------------------
1 files changed, 93 insertions(+), 180 deletions(-)
diff --git a/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue b/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue
index 8645349..0dddf47 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue
@@ -26,15 +26,9 @@
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
- > :
+ >杩樻湭閫夋嫨绛涢�夋潯浠�</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>
@@ -46,25 +40,17 @@
<i>銆�</i>
</span>
</span>
- <i
- class="el-icon-close remove"
- @click="removeCheckedConfig(config)"
- ></i>
+ <i class="el-icon-close remove" @click="removeCheckedConfig(config)"></i>
</div>
<el-button
class="clear-config-btn"
v-if="checkedConfigs.length"
size="mini"
@click="clearCheckedConfigs"
- >鍙栨秷閫夋嫨</el-button
- >
+ >鍙栨秷閫夋嫨</el-button>
</div>
<div class="optional-config">
- <div
- class="config"
- v-for="(config, index) in optionalConfigs"
- :key="index"
- >
+ <div class="config" v-for="(config, index) in optionalConfigs" :key="index">
<template v-if="config.isShow">
<div class="title">{{ config.title }}</div>
<div class="options-wrap">
@@ -73,41 +59,23 @@
:ref="'options' + config.id"
:style="{ height: fixedOneLineHeight + 'px' }"
>
- <div
- class="option"
- v-for="(option, index) in config.data"
- :key="index"
- >
+ <div class="option" v-for="(option, index) in config.data" :key="index">
<div v-show="config.isMultCheck">
<el-checkbox v-model="option.isChecked"></el-checkbox>
<span>{{ option.name }}</span>
</div>
- <div
- v-show="!config.isMultCheck"
- @click="checkOption(config, option)"
- >
+ <div v-show="!config.isMultCheck" @click="checkOption(config, option)">
<span>{{ option.name }}</span>
</div>
</div>
</div>
<div class="btns text-center" v-show="config.isMultCheck">
- <el-button size="mini" @click="cancleMultCheck(config)"
- >鍙栨秷</el-button
- >
- <el-button
- size="mini"
- type="primary"
- @click="checkOption(config)"
- >纭畾</el-button
- >
+ <el-button size="mini" @click="cancleMultCheck(config)">鍙栨秷</el-button>
+ <el-button size="mini" type="primary" @click="checkOption(config)">纭畾</el-button>
</div>
</div>
<div class="right-btns">
- <div
- class="more"
- v-if="config.showMore"
- @click="showMore(config)"
- >
+ <div class="more" v-if="config.showMore" @click="showMore(config)">
<span>鏇村</span>
<i
:class="
@@ -130,11 +98,7 @@
<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"
@@ -149,8 +113,7 @@
:index="index + '-' + ind"
@click="checkOption(config, option)"
class="highlevel-option"
- >{{ option.name }}</el-menu-item
- >
+ >{{ option.name }}</el-menu-item>
</el-submenu>
</el-menu>
</div>
@@ -161,22 +124,14 @@
<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>
@@ -192,11 +147,7 @@
>
<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>
@@ -204,14 +155,7 @@
</div>
<div class="content" v-show="showType == 'menu'">
<el-row :gutter="20">
- <el-col
- :xs="8"
- :sm="6"
- :md="6"
- :lg="6"
- v-for="data in tabData"
- :key="data.id"
- >
+ <el-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 />
@@ -236,27 +180,22 @@
</div>
</div>
<div class="mark-info">
- <div
- class="abnormal"
- v-if="data.LableLst && data.LableLst.length"
- >
+ <div class="abnormal" v-if="data.LableLst && data.LableLst.length">
<span
class="abnormal-label"
v-for="(label, index) in data.LableLst"
:key="index"
- >{{
- label.Desc +
- (index == data.LableLst.length - 1 ? "" : "锛�")
- }}</span
>
+ {{
+ label.Desc +
+ (index == data.LableLst.length - 1 ? "" : "锛�")
+ }}
+ </span>
</div>
<div v-else>
<span>鏃犲紓甯�</span>
</div>
- <div
- class="event-tag"
- v-if="data.EventLst && data.EventLst.length"
- >
+ <div class="event-tag" v-if="data.EventLst && data.EventLst.length">
<el-tag
size="mini"
type="info"
@@ -264,25 +203,15 @@
:key="index"
style="margin-right: 5px; margin-bottom: 5px"
@click="checkEventVideo(label)"
- >{{ label.Event }}</el-tag
- >
+ >{{ label.Event }}</el-tag>
</div>
</div>
<div class="tag-info">
- <div
- class="tag"
- v-for="(tag, index) in data.tags"
- :key="index"
- >
- {{ tag }}
- </div>
+ <div class="tag" v-for="(tag, index) in data.tags" :key="index">{{ tag }}</div>
</div>
</div>
<div class="star" @click="toggleFollow(data)">
- <i
- class="iconfont"
- :class="[data.IsFollow ? 'follow' : '', 'iconguanzhu']"
- ></i>
+ <i class="iconfont" :class="[data.IsFollow ? 'follow' : '', 'iconguanzhu']"></i>
</div>
</div>
</el-col>
@@ -300,33 +229,16 @@
></el-pagination>
</div>
<div class="content" v-show="showType == 'list'">
- <el-table
- :data="tableData"
- fit
- ref="elTable"
- @row-click="checkVideoDetail"
- >
+ <el-table :data="tableData" fit ref="elTable" @row-click="checkVideoDetail">
<el-table-column label="鍚嶇О" prop="VideoName" sortable width="500">
<template slot-scope="scope" style="cursor: pointer">
<div>{{ scope.row.VideoName }}</div>
</template>
</el-table-column>
- <el-table-column
- label="澶у皬"
- prop="VideoSize"
- sortable
- ></el-table-column>
- <el-table-column
- label="淇敼鏃ユ湡"
- prop="VideoUpdateDate"
- sortable
- ></el-table-column>
- <el-table-column
- label="鍒涘缓鏃ユ湡"
- prop="VideoCreateDate"
- sortable
- ></el-table-column>
+ <el-table-column label="澶у皬" prop="VideoSize" sortable></el-table-column>
+ <el-table-column label="淇敼鏃ユ湡" prop="VideoUpdateDate" sortable></el-table-column>
+ <el-table-column label="鍒涘缓鏃ユ湡" prop="VideoCreateDate" sortable></el-table-column>
<el-table-column label="鎿嶄綔">
<template slot-scope="scope">
@@ -358,25 +270,27 @@
v-drag v-resize
- -->
+ -->
<!-- <div > -->
- <!-- :modal="false" -->
- <el-dialog v-drag v-resize
- class="dialog-video"
- :visible="videoDialogVisible"
- @close="closeDial"
- :close-on-click-modal="false"
- :destroy-on-close="true"
- :modal-append-to-body="false"
- >
- <div slot="title" class="title">
- <div class="center">
- <i class="el-icon-connection"></i>
- <span>鎾斁瑙嗛</span>
- </div>
+ <!-- :modal="false" -->
+ <el-dialog
+ v-drag
+ v-resize
+ class="dialog-video"
+ :visible="videoDialogVisible"
+ @close="closeDial"
+ :close-on-click-modal="false"
+ :destroy-on-close="true"
+ :modal-append-to-body="false"
+ >
+ <div slot="title" class="title">
+ <div class="center">
+ <i class="el-icon-connection"></i>
+ <span>鎾斁瑙嗛</span>
</div>
- <video-analyze v-if="videoDialogVisible" :videoDetails="selectedVideo" />
- </el-dialog>
+ </div>
+ <video-analyze v-if="videoDialogVisible" :videoDetails="selectedVideo" />
+ </el-dialog>
<!-- </div> -->
<el-dialog
@@ -419,8 +333,8 @@
keyword: "",
IsFollow: "",
searchTime: [
- new Date(2020, 0, 1, 0, 0, 0),
- new Date(2020, 11, 31, 23, 59, 59),
+ new Date(2021, 0, 1, 0, 0, 0),
+ new Date(2021, 11, 31, 23, 59, 59),
],
curTabPage: 1,
curTablePage: 1,
@@ -516,9 +430,9 @@
}
);
},
- closeDial(){
+ closeDial() {
this.videoDialogVisible = false
- this.selectedVideo={}
+ this.selectedVideo = {}
},
handleTabSizeChange(size) {
this.tabPageSize = size;
@@ -696,7 +610,7 @@
_this.selectedVideo = data;
_this.videoDialogVisible = true;
},
- checkFollow() {},
+ checkFollow() { },
checkType(type) {
this.showType = type;
this.filterSearchData();
@@ -744,7 +658,7 @@
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
@@ -799,43 +713,43 @@
};
},
resize(el, binding, vnode) {
- const dragDom = el.querySelector('.el-dialog')
- dragDom.style.overflow = 'hidden'
- let minWidth = 400
- let minHeight = 300 //
-
- // 鎷変几
- let resizeEl = document.createElement('div')
- dragDom.appendChild(resizeEl) // 鍦ㄥ脊绐楀彸涓嬭鍔犱笂涓�涓�10-10px鐨勬帶鍒跺潡
- resizeEl.style.cursor = 'nwse-resize'
- // resizeEl.style.cursor = 'se-resize'
- resizeEl.style.position = 'absolute'
- resizeEl.style.height = '12px'
- resizeEl.style.width = '12px'
- resizeEl.style.right = '0px'
- resizeEl.style.bottom = '0px' //榧犳爣鎷変几寮圭獥
- resizeEl.style.background = 'url("/images/desktop/resize.png") no-repeat' //榧犳爣鎷変几寮圭獥
+ const dragDom = el.querySelector('.el-dialog')
+ dragDom.style.overflow = 'hidden'
+ let minWidth = 400
+ let minHeight = 300 //
- resizeEl.onmousedown = (e) => {
- // 璁板綍鍒濆x浣嶇疆
- const clientX = e.clientX // 榧犳爣鎸変笅锛岃绠楀綋鍓嶅厓绱犺窛绂诲彲瑙嗗尯鐨勮窛绂�
- const disX = e.clientX - resizeEl.offsetLeft
- const disY = e.clientY - resizeEl.offsetTop
+ // 鎷変几
+ let resizeEl = document.createElement('div')
+ dragDom.appendChild(resizeEl) // 鍦ㄥ脊绐楀彸涓嬭鍔犱笂涓�涓�10-10px鐨勬帶鍒跺潡
+ resizeEl.style.cursor = 'nwse-resize'
+ // resizeEl.style.cursor = 'se-resize'
+ resizeEl.style.position = 'absolute'
+ resizeEl.style.height = '12px'
+ resizeEl.style.width = '12px'
+ resizeEl.style.right = '0px'
+ resizeEl.style.bottom = '0px' //榧犳爣鎷変几寮圭獥
+ resizeEl.style.background = 'url("/images/desktop/resize.png") no-repeat' //榧犳爣鎷変几寮圭獥
- document.onmousemove = function(e) {
- e.preventDefault() // 绉诲姩鏃剁鐢ㄩ粯璁や簨浠� // 閫氳繃浜嬩欢濮旀墭锛岃绠楃Щ鍔ㄧ殑璺濈
+ resizeEl.onmousedown = (e) => {
+ // 璁板綍鍒濆x浣嶇疆
+ const clientX = e.clientX // 榧犳爣鎸変笅锛岃绠楀綋鍓嶅厓绱犺窛绂诲彲瑙嗗尯鐨勮窛绂�
+ const disX = e.clientX - resizeEl.offsetLeft
+ const disY = e.clientY - resizeEl.offsetTop
- const x = e.clientX - disX + (e.clientX - clientX) //杩欓噷 鐢变簬elementUI鐨刣ialog鎺у埗灞呬腑鐨勶紝鎵�浠ユ按骞虫媺浼告晥鏋滄槸鍙屽��
- const y = e.clientY - disY //姣旇緝鏄惁灏忎簬鏈�灏忓楂�
- dragDom.style.width = x > minWidth ? `${x}px` : minWidth + 'px'
- dragDom.style.height =
- y > minHeight ? `${y}px` : minHeight + 'px'
- } //鎷変几缁撴潫
- document.onmouseup = function(e) {
- document.onmousemove = null
- document.onmouseup = null
- }
+ document.onmousemove = function (e) {
+ e.preventDefault() // 绉诲姩鏃剁鐢ㄩ粯璁や簨浠� // 閫氳繃浜嬩欢濮旀墭锛岃绠楃Щ鍔ㄧ殑璺濈
+
+ const x = e.clientX - disX + (e.clientX - clientX) //杩欓噷 鐢变簬elementUI鐨刣ialog鎺у埗灞呬腑鐨勶紝鎵�浠ユ按骞虫媺浼告晥鏋滄槸鍙屽��
+ const y = e.clientY - disY //姣旇緝鏄惁灏忎簬鏈�灏忓楂�
+ dragDom.style.width = x > minWidth ? `${x}px` : minWidth + 'px'
+ dragDom.style.height =
+ y > minHeight ? `${y}px` : minHeight + 'px'
+ } //鎷変几缁撴潫
+ document.onmouseup = function (e) {
+ document.onmousemove = null
+ document.onmouseup = null
}
+ }
},
},
};
@@ -1164,8 +1078,8 @@
background: #f5f5f5;
}
}
- .el-dialog__wrapper{
- top: -22px;
+ .el-dialog__wrapper {
+ top: -22px;
}
.dialog-video {
// z-index: 2020 !important;
@@ -1176,9 +1090,8 @@
.el-dialog__body {
background: #eaeaea;
padding: 0;
- // height: 100%;
- height: inherit;
-
+ // height: 100%;
+ height: inherit;
}
.el-dialog__header {
padding: 3px;
--
Gitblit v1.8.0