<template>
|
<div class="search-for-video-analyze">
|
<div class="filter-area">
|
<div class="input-area">
|
<el-date-picker
|
style="width: 350px"
|
v-model="searchTime"
|
type="datetimerange"
|
size="small"
|
:picker-options="pickerOptions"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
align="right"
|
></el-date-picker>
|
<el-input
|
class="search-input"
|
size="small"
|
v-model="keyword"
|
placeholder="请输入司机、车次、机车号等关键词"
|
style="width: 315px"
|
>
|
<el-button
|
slot="append"
|
icon="el-icon-search"
|
size="small"
|
@click="init"
|
></el-button>
|
</el-input>
|
</div>
|
<div class="checked-config">
|
<span style="margin-top: 3px; color: #425277">已筛选条件:</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
|
> :
|
<span class="val" v-for="option in config.data" :key="option.id">
|
<span v-if="option.isChecked" class="val-show">
|
{{ option.name }}
|
<i>、</i>
|
</span>
|
</span>
|
<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
|
>
|
</div>
|
<div class="optional-config">
|
<div
|
class="config"
|
v-for="(config, index) in optionalConfigs"
|
:key="index"
|
>
|
<template v-if="config.isShow">
|
<div class="title">
|
<span class="icon iconfont">{{ getIcon(config.title) }}</span>
|
<span>{{ config.title }}</span>
|
</div>
|
<div class="options-wrap">
|
<div
|
class="options"
|
:ref="'options' + config.id"
|
:style="{ height: fixedOneLineHeight + 'px' }"
|
>
|
<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
|
class="option-name"
|
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"
|
type="primary"
|
@click="checkOption(config)"
|
>确定</el-button
|
>
|
<el-button size="mini" @click="cancleMultCheck(config)"
|
>取消</el-button
|
>
|
</div>
|
</div>
|
<div class="right-btns">
|
<div
|
class="more"
|
v-if="config.showMore"
|
@click="showMore(config)"
|
>
|
<span>更多</span>
|
<i
|
:class="
|
config.isShowMore
|
? 'el-icon-caret-top'
|
: 'el-icon-caret-bottom'
|
"
|
></i>
|
</div>
|
<div
|
:class="[{ checked: config.isMultCheck }, 'multCheck']"
|
@click="toggleMultCheck(config)"
|
>
|
<i class="el-icon-plus"></i>
|
<span>多选</span>
|
</div>
|
</div>
|
</template>
|
</div>
|
<div class="config" v-if="showAdvance">
|
<div class="title">
|
<span class="icon iconfont">{{ "\ue793" }}</span>
|
<span>高级选项</span>
|
</div>
|
<div>
|
<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"
|
:key="index"
|
:index="index + ''"
|
>
|
<template slot="title">{{ config.title }}</template>
|
<el-menu-item
|
v-for="(option, ind) in config.data"
|
:key="ind"
|
:index="index + '-' + ind"
|
@click="checkOption(config, option)"
|
class="highlevel-option"
|
>{{ option.name }}</el-menu-item
|
>
|
</el-submenu>
|
</el-menu>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="data-list">
|
<div class="header-bar clearfix">
|
<div class="left">
|
<div>
|
<el-select
|
v-model="IsFollow"
|
size="mini"
|
@change="filterSearchData"
|
>
|
<el-option value label="全部"></el-option>
|
<el-option :value="'1'" label="未关注"></el-option>
|
<el-option :value="'0'" label="已关注"></el-option>
|
</el-select>
|
</div>
|
<div>
|
<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>
|
</el-select>
|
</div>
|
</div>
|
<div class="right">
|
<div class="show-type">
|
<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')"
|
>
|
<i class="el-icon-s-operation"></i>
|
</div>
|
</div>
|
</div>
|
</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"
|
>
|
<div class="card">
|
<div class="video-wrap" @click="checkVideoDetail(data)">
|
<img :src="data.VideoCover | fixPath" alt />
|
</div>
|
<div class="video-info">
|
<div class="base-info">
|
<div class="flex-box">
|
<label>车号:</label>
|
<span>{{ data.CarNumber }}</span>
|
</div>
|
<div class="flex-box">
|
<label>车次:</label>
|
<span>{{ data.TrainNumber }}</span>
|
</div>
|
<div class="flex-box">
|
<label>时间:</label>
|
<span>{{ data.StartTime }}</span>
|
</div>
|
<div class="flex-box">
|
<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
|
class="abnormal-label"
|
v-for="(label, index) in data.LableLst"
|
:key="index"
|
>
|
{{
|
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"
|
>
|
<el-tag
|
size="mini"
|
type="info"
|
v-for="(label, index) in data.EventLst"
|
:key="index"
|
style="margin-right: 5px; margin-bottom: 5px"
|
@click="checkEventVideo(label)"
|
>{{ 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>
|
</div>
|
<div class="star" @click="toggleFollow(data)">
|
<i
|
class="iconfont"
|
:class="[data.IsFollow == '0' ? 'follow' : '', 'iconguanzhu']"
|
></i>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
<el-pagination
|
class="pagination-center"
|
background
|
@size-change="handleTabSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page.sync="curTabPage"
|
:page-sizes="pageSizes"
|
:page-size="tabPageSize"
|
layout="total,sizes, prev, pager, next"
|
:total="tabTotal"
|
></el-pagination>
|
</div>
|
<div class="content" v-show="showType == 'list'">
|
<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>
|
<template slot-scope="scope" style="cursor: pointer">
|
<div>
|
{{ Math.round(+scope.row.VideoSize / (1024 * 1024)) + " MB" }}
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="视频时间"
|
prop="StartTime"
|
sortable
|
></el-table-column>
|
<!-- <el-table-column label="创建日期" prop="VideoCreateDate" sortable></el-table-column> -->
|
|
<el-table-column label="操作">
|
<template slot-scope="scope">
|
<div class="operation">
|
<div class="star">
|
<i
|
class="iconfont"
|
:class="[
|
scope.row.IsFollow == '0' ? 'follow' : '',
|
'iconguanzhu',
|
]"
|
@click.stop="toggleFollow(scope.row)"
|
></i>
|
</div>
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
<el-pagination
|
class="pagination-center"
|
@size-change="handleTableSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page.sync="curTablePage"
|
:page-size="tablePageSize"
|
:page-sizes="pageSizes"
|
layout="total,sizes, prev, pager, next"
|
:total="tableTotal"
|
></el-pagination>
|
</div>
|
<!--
|
|
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">
|
<img src="/images/shuohuang/路径 414.png" alt="" />
|
<span>播放视频</span>
|
</div>
|
</div>
|
<video-analyze
|
v-if="videoDialogVisible"
|
:videoDetails="selectedVideo"
|
/>
|
</el-dialog>
|
<!-- </div> -->
|
|
<el-dialog
|
class="dialog-event"
|
:visible="eventDialogVisible"
|
@close="eventDialogVisible = false"
|
>
|
<div class="title" slot="title">
|
<img src="/images/shuohuang/路径 414.png" alt="" />
|
<span>{{ curEvName }}视频</span>
|
</div>
|
<event-videos :eventVideoArr="eventVideoArr"></event-videos>
|
</el-dialog>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {
|
getlstInit,
|
updateFollow,
|
getlst,
|
getLabelMap,
|
getEventVideo,
|
} from "@/api/shuohuang";
|
import VideoAnalyze from "./videoAnalyze";
|
import EventVideos from "./eventVideos";
|
export default {
|
name: "SearchMain",
|
components: {
|
VideoAnalyze,
|
EventVideos,
|
},
|
filters: {
|
fixPath(str) {
|
if (!str || str == undefined) {
|
return "";
|
}
|
|
return str.replace("/opt/vasystem", "");
|
},
|
},
|
data() {
|
return {
|
CLIP: "http://",
|
keyword: "",
|
IsFollow: "",
|
searchTime: [
|
new Date(2020, 0, 1, 0, 0, 0),
|
new Date(2021, 11, 31, 23, 59, 59),
|
],
|
curTabPage: 1,
|
curTablePage: 1,
|
tabPageSize: 8,
|
pageSizes: [8, 12, 24],
|
tabTotal: 0,
|
tablePageSize: 8,
|
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);
|
picker.$emit("pick", [start, end]);
|
},
|
},
|
],
|
},
|
checkedConfigs: [],
|
optionalConfigs: [],
|
highLevelConfigs: [],
|
showAdvance: true,
|
fixedOneLineHeight: 40,
|
settle: "",
|
IsOperate: "",
|
showType: "menu",
|
tableData: [],
|
tabData: [],
|
videoDialogVisible: false,
|
hiddenDanger: 1,
|
labelDialogVisible: false,
|
selectedVideo: {},
|
eventDialogVisible: false,
|
curEvName: "",
|
eventVideoArr: [],
|
};
|
},
|
watch: {
|
checkedConfigs: {
|
handler(n, o) {
|
this.filterSearchData();
|
},
|
deep: true,
|
},
|
},
|
mounted() {
|
this.init();
|
},
|
methods: {
|
checkEventVideo(label) {
|
if (label.LKGID != "") {
|
this.$message.warning("该事件没有相关联的视频");
|
return;
|
}
|
|
this.eventDialogVisible = true;
|
this.curEventDetail = label;
|
let _this = this;
|
getEventVideo({ event: label.Event, videoId: label.VideoIds }).then(
|
(res) => {
|
_this.eventVideoArr = res.data;
|
_this.curEvName = label.Event;
|
}
|
);
|
},
|
closeDial() {
|
this.videoDialogVisible = false;
|
this.selectedVideo = {};
|
},
|
handleTabSizeChange(size) {
|
this.tabPageSize = size;
|
this.filterSearchData();
|
},
|
handleTableSizeChange(size) {
|
this.tablePageSize = size;
|
this.filterSearchData();
|
},
|
handleCurrentChange() {
|
this.filterSearchData();
|
},
|
//二级查询
|
filterSearchData() {
|
let _this = this;
|
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",
|
IsFollow: this.IsFollow,
|
IsOperate: this.IsOperate,
|
};
|
let filterQuerys = [];
|
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(",");
|
let obj = {};
|
obj[config.NameEn] = linkOpts;
|
filterQuerys.push(obj);
|
}
|
});
|
Object.assign(query, ...filterQuerys);
|
|
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;
|
_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;
|
});
|
}
|
});
|
},
|
//一级查询
|
init() {
|
if (this.checkedConfigs.length) {
|
this.filterSearchData();
|
return;
|
}
|
let _this = this;
|
let query = {
|
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",
|
IsFollow: this.IsFollow,
|
IsOperate: this.IsOperate,
|
};
|
let filterQuerys = [];
|
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(",");
|
let obj = {};
|
obj[config.NameEn] = linkOpts;
|
filterQuerys.push(obj);
|
}
|
});
|
Object.assign(query, ...filterQuerys);
|
this.optionalConfigs = [];
|
this.highLevelConfigs = [];
|
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;
|
_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);
|
config.data = config.Node.map((item) => {
|
let obj = {};
|
obj.name = item[0];
|
obj.id = item[1];
|
return obj;
|
});
|
config.id = config.ID;
|
config.title = config.NameZn;
|
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.$nextTick(() => {
|
this.optionalConfigs.forEach((config) => {
|
if (
|
this.$refs[`options${config.id}`][0].scrollHeight >
|
this.fixedOneLineHeight
|
) {
|
config.showMore = true;
|
this.$set(config, "isShowMore", false);
|
} else {
|
config.showMore = false;
|
}
|
});
|
});
|
});
|
},
|
toggleFollow(data) {
|
data.IsFollow == "0" ? (data.IsFollow = "1") : (data.IsFollow = "0");
|
updateFollow({
|
id: data.id,
|
IsFollow: data.IsFollow,
|
}).then((res) => {
|
this.$notify({
|
type: "success",
|
message: data.IsFollow == "0" ? "已添加关注!" : "已取消关注!",
|
});
|
});
|
},
|
checkVideoDetail(data) {
|
let _this = this;
|
_this.selectedVideo = data;
|
_this.videoDialogVisible = true;
|
},
|
checkType(type) {
|
this.showType = type;
|
this.filterSearchData();
|
},
|
clearCheckedConfigs() {
|
this.checkedConfigs.forEach((config) => {
|
config.isShow = true;
|
config.data.forEach((d) => {
|
d.isChecked = false;
|
});
|
});
|
this.checkedConfigs = [];
|
this.showAdvance = true;
|
},
|
removeCheckedConfig(config) {
|
config.isShow = true;
|
if (config.IsAdvanced) {
|
this.showAdvance = true;
|
}
|
config.data.forEach((d) => {
|
d.isChecked = false;
|
});
|
let index = this.checkedConfigs.findIndex((one) => one.id == config.id);
|
this.checkedConfigs.splice(index, 1);
|
},
|
checkOption(config, option) {
|
if (option) {
|
option.isChecked = true;
|
}
|
this.checkedConfigs.push(config);
|
config.isShow = false;
|
config.isMultCheck = false;
|
if (config.IsAdvanced) {
|
this.showAdvance = false;
|
}
|
},
|
|
cancleMultCheck(config) {
|
config.isMultCheck = false;
|
config.data.forEach((opt) => {
|
opt.isChecked = false;
|
});
|
},
|
getIcon(name) {
|
switch (name) {
|
case "机车号":
|
return "\ue796";
|
case "车次":
|
return "\ue795";
|
case "区段/中间站":
|
return "\ue797";
|
case "重点地段":
|
return "\ue78f";
|
case "单位":
|
return "\ue794";
|
case "高级选项":
|
return "\ue793";
|
|
default:
|
break;
|
}
|
},
|
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";
|
},
|
toggleMultCheck(config) {
|
config.isMultCheck = !config.isMultCheck;
|
this.optionalConfigs.forEach((conf) => {
|
if (conf.id == config.id) {
|
return;
|
}
|
conf.isMultCheck = false;
|
});
|
},
|
dataSearch() {
|
console.log(this.checkedConfigs);
|
this.$forceUpdate();
|
},
|
},
|
directives: {
|
drag(el, binding) {
|
const dialogHeaderEl = el.querySelector(".el-dialog__header");
|
const dragDom = el.querySelector(".el-dialog");
|
dialogHeaderEl.style.cursor = "move";
|
const sty =
|
dragDom.currentStyle || window.getComputedStyle(dragDom, null);
|
dialogHeaderEl.onmousedown = (e) => {
|
const disX = e.clientX - dialogHeaderEl.offsetLeft;
|
const disY = e.clientY - dialogHeaderEl.offsetTop;
|
let styL, styT;
|
|
if (sty.left.includes("%")) {
|
styL =
|
+document.body.clientWidth * (+sty.left.replace(/\%/g, "") / 100);
|
styT =
|
+document.body.clientHeight * (+sty.top.replace(/\%/g, "") / 100);
|
} else {
|
styL = +sty.left.replace(/\px/g, "");
|
styT = +sty.top.replace(/\px/g, "");
|
}
|
document.onmousemove = function (e) {
|
const l = e.clientX - disX;
|
const t = e.clientY - disY;
|
dragDom.style.left = `${l + styL}px`;
|
dragDom.style.top = `${t + styT}px`;
|
};
|
document.onmouseup = function (e) {
|
document.onmousemove = null;
|
document.onmouseup = null;
|
};
|
};
|
},
|
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'; //鼠标拉伸弹窗
|
|
resizeEl.onmousedown = (e) => {
|
// 记录初始x位置
|
const clientX = e.clientX; // 鼠标按下，计算当前元素距离可视区的距离
|
const disX = e.clientX - resizeEl.offsetLeft;
|
const disY = e.clientY - resizeEl.offsetTop;
|
|
document.onmousemove = function (e) {
|
e.preventDefault(); // 移动时禁用默认事件 通过事件委托，计算移动的距离
|
|
const x = e.clientX - disX + (e.clientX - clientX); //这里 由于elementUI的dialog控制居中的，所以水平拉伸效果是双倍
|
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;
|
};
|
};
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss">
|
.search-for-video-analyze {
|
//出横向滚动条
|
padding: 25px 33px;
|
background-color: #fff;
|
margin: 33px;
|
.flex-box {
|
display: flex;
|
}
|
.filter-area {
|
.input-area {
|
display: flex;
|
align-items: center;
|
height: 50px;
|
|
.el-range-editor--small .el-range-input {
|
font-size: 13px;
|
color: #7084b1;
|
}
|
.el-input__inner::placeholder {
|
color: #c7d0e5;
|
}
|
.el-range-editor--small .el-range-separator {
|
line-height: 25px;
|
font-size: 13px;
|
color: #7084b1;
|
}
|
.search-input {
|
width: 408px;
|
}
|
.el-date-editor {
|
margin-right: 20px;
|
}
|
.el-input-group__append,
|
.el-input-group__prepend {
|
background-color: #2d52d7;
|
color: #fff;
|
border: 1px solid #2d52d7;
|
padding: 0 16px;
|
|
white-space: nowrap;
|
font-size: 18px;
|
}
|
}
|
.checked-config {
|
display: flex;
|
text-align: left;
|
margin-bottom: 10px;
|
position: relative;
|
.config-item {
|
padding-left: 8px;
|
margin: 0 5px;
|
background: #cfd5e3;
|
.remove {
|
cursor: pointer;
|
padding: 5px 5px;
|
margin-left: 5px;
|
background: #e1e4ed;
|
}
|
&:hover {
|
background: #fff;
|
outline: 1px solid #2d52d7;
|
.remove {
|
background: #3d68e1;
|
color: #fff;
|
}
|
}
|
.val-show {
|
&:last-child {
|
i {
|
display: none;
|
}
|
}
|
}
|
}
|
.clear-config-btn {
|
position: absolute;
|
right: 0;
|
}
|
}
|
.optional-config {
|
.config {
|
display: flex;
|
flex-wrap: no-wrap;
|
cursor: pointer;
|
border-bottom: 1px solid #d7dce8;
|
|
.title {
|
padding: 10px 20px;
|
width: 110px;
|
text-align: left;
|
color: #2d52d7;
|
font-weight: bold;
|
font-size: 14px;
|
.icon {
|
font-size: 14px;
|
margin-right: 10px;
|
}
|
}
|
.options-wrap {
|
flex: 1;
|
.options {
|
display: flex;
|
flex-wrap: wrap;
|
height: 40px;
|
overflow: hidden;
|
.option {
|
padding: 10px 20px;
|
height: 20px;
|
line-height: 20px;
|
.option-name {
|
padding: 0 8px;
|
color: rgba(66, 82, 119, 1);
|
}
|
&:hover > .option-name {
|
outline: 1px solid #a8b7ee;
|
padding: 0 8px;
|
background: #e2e7f9;
|
color: #2d52d7;
|
}
|
.el-checkbox {
|
padding-right: 6px;
|
}
|
}
|
}
|
.btns {
|
margin: 12px 0;
|
.el-button--mini {
|
padding: 6px 17px;
|
font-size: 12px;
|
border-radius: 4px;
|
}
|
}
|
}
|
.right-btns {
|
width: 158px;
|
display: flex;
|
user-select: none;
|
justify-content: flex-end;
|
.more {
|
margin-top: 7px;
|
padding: 0px 6px;
|
|
margin-right: 10px;
|
width: 46px;
|
height: 25px;
|
line-height: 25px;
|
border-radius: 2px;
|
background: #edeff2;
|
&:hover {
|
color: #6486e7;
|
}
|
}
|
.multCheck {
|
margin-top: 7px;
|
width: 44px;
|
height: 23px;
|
line-height: 23px;
|
padding: 0px 12px;
|
border: 1px solid #d7dce7;
|
border-radius: 2px;
|
color: #ee4e6e;
|
// &:hover {
|
// color: #7695ec;
|
// border-color: #7695ec;
|
// }
|
// &.checked {
|
// color: #409eff;
|
// border-color: #409eff;
|
// }
|
}
|
}
|
.el-menu.el-menu--horizontal {
|
border: none;
|
}
|
.config-submenu {
|
.el-menu--horizontal {
|
left: 20px !important;
|
& > ul {
|
flex-wrap: wrap;
|
}
|
}
|
.el-submenu__title {
|
height: 40px;
|
line-height: 40px;
|
border: none;
|
color: #2c3e50;
|
font-size: 12px;
|
}
|
.el-menu--popup {
|
display: flex;
|
width: 900px;
|
li.el-menu-item {
|
display: inline-block;
|
min-width: auto;
|
}
|
}
|
.highlevel-option {
|
font-size: 12px;
|
color: #2c3e50;
|
&:hover {
|
color: #6486e7;
|
}
|
}
|
}
|
}
|
}
|
.tip {
|
color: #ccc;
|
}
|
}
|
.data-list {
|
margin-top: 20px;
|
.header-bar {
|
padding-bottom: 10px;
|
.left {
|
float: left;
|
display: flex;
|
> div {
|
margin-right: 10px;
|
}
|
}
|
.right {
|
float: right;
|
display: flex;
|
.show-type {
|
display: flex;
|
.type {
|
font-size: 20px;
|
padding: 2px 5px;
|
cursor: pointer;
|
border: 1px solid #eee;
|
background-color: #ecf0fc;
|
border-radius: 3px;
|
color: #777;
|
&.menu {
|
margin-right: 10px;
|
}
|
&.current {
|
border-color: #409eff;
|
background-color: #fff;
|
}
|
}
|
}
|
}
|
}
|
.content {
|
//padding-top: 14px;
|
background: #f5f5f5;
|
background: #fff;
|
margin: 0 -30px;
|
margin-bottom: -30px;
|
padding: 0;
|
.el-table__row {
|
cursor: pointer;
|
}
|
.el-row {
|
padding-top: 20px;
|
background: #f5f5f5;
|
}
|
.el-col {
|
margin-bottom: 10px;
|
}
|
.card {
|
cursor: pointer;
|
position: relative;
|
text-align: left;
|
background: #fff;
|
border-radius: 5px;
|
height: 360px;
|
margin-bottom: 10px;
|
&:hover {
|
box-shadow: 3px 2px 5px 1px rgba(0, 0, 0, 0.3);
|
}
|
.video-wrap {
|
border-radius: 3px;
|
width: 100%;
|
padding-top: 56.25%;
|
height: 0;
|
position: relative;
|
img {
|
position: absolute;
|
top: 0;
|
width: 100%;
|
height: 100%;
|
object-fit: contain;
|
}
|
}
|
.video-info {
|
padding: 10px;
|
.base-info {
|
> div {
|
margin-bottom: 1px;
|
}
|
label {
|
color: #999;
|
padding-right: 8px;
|
}
|
}
|
.mark-info {
|
margin: 10px 0;
|
color: #3d68e1;
|
.abnormal {
|
color: red;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
.event-tag {
|
margin-top: 10px;
|
}
|
}
|
.tag-info {
|
color: #999;
|
display: flex;
|
.tag {
|
padding: 2px 5px;
|
margin-right: 10px;
|
border-radius: 3px;
|
border: 1px solid #eee;
|
}
|
}
|
}
|
.star {
|
position: absolute;
|
font-size: 20px;
|
right: 10px;
|
bottom: 10px;
|
color: #ccc;
|
.follow {
|
color: #409eff;
|
}
|
}
|
}
|
.el-table {
|
border: 1px solid #dedede;
|
th {
|
background: #f5f5f5;
|
color: #333;
|
}
|
.operation {
|
cursor: pointer;
|
.star {
|
color: #ccc;
|
}
|
.follow {
|
color: #409eff;
|
}
|
}
|
}
|
.pagination-center {
|
text-align: center;
|
margin: 0 -10px;
|
padding: 10px 0 20px;
|
background: #f5f5f5;
|
}
|
}
|
.el-dialog__wrapper {
|
top: -22px;
|
}
|
.dialog-video {
|
.el-dialog {
|
width: 1340px;
|
}
|
.el-dialog__body {
|
background: #eaeaea;
|
padding: 0;
|
height: inherit;
|
}
|
.el-dialog__header {
|
padding: 0px;
|
.el-dialog__headerbtn {
|
top: 6px;
|
}
|
}
|
.title-partment {
|
font-size: 14px;
|
font-weight: 500;
|
color: #333;
|
line-height: 18px;
|
margin-bottom: 8px;
|
}
|
.block {
|
background: #fff;
|
padding: 10px;
|
border-radius: 3px;
|
.flex-box > label {
|
color: #777;
|
}
|
}
|
.title {
|
font-size: 16px;
|
height: 40px;
|
line-height: 40px;
|
background: #2d52d7;
|
|
span {
|
line-height: 40px;
|
color: #fcfcfc;
|
}
|
|
img {
|
width: 20px;
|
vertical-align: middle;
|
margin-right: 10px;
|
}
|
}
|
.el-dialog__close::before {
|
color: #fff;
|
}
|
}
|
.dialog-event {
|
z-index: 2096 !important;
|
.el-dialog {
|
width: 1000px;
|
height: 800px;
|
background: #efefef;
|
.el-dialog__body {
|
padding: 0;
|
}
|
.el-dialog__header {
|
padding: 0px;
|
.el-dialog__headerbtn {
|
top: 6px;
|
}
|
}
|
.title {
|
font-size: 16px;
|
height: 40px;
|
line-height: 40px;
|
background: #2d52d7;
|
|
span {
|
line-height: 40px;
|
color: #fcfcfc;
|
}
|
|
img {
|
width: 20px;
|
vertical-align: middle;
|
margin-right: 10px;
|
}
|
}
|
.el-dialog__close::before {
|
color: #fff;
|
&:hover {
|
color: #fff;
|
}
|
}
|
|
.more-videos .top .title {
|
background-color: #fff;
|
}
|
}
|
}
|
}
|
}
|
.window-view {
|
width: 100%;
|
height: auto;
|
overflow: auto;
|
z-index: 2000;
|
}
|
</style>
|
