<template>
|
<div class="search-for-video-analyze">
|
<div class="filter-area">
|
<div class="input-area">
|
<el-input
|
class="search-input"
|
size="small"
|
v-model="keyword"
|
placeholder="请输入司机、车次、机车号等关键词进行搜索"
|
></el-input>
|
<el-date-picker
|
v-model="searchTime"
|
type="datetimerange"
|
size="small"
|
:picker-options="pickerOptions"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
align="right"
|
></el-date-picker>
|
<el-button size="small" type="primary" @click="dataSearch">搜索</el-button>
|
</div>
|
<div class="checked-config">
|
<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> :
|
<span class="val" v-for="option in config.data" :key="option.id">
|
<!-- <template>
|
<div>
|
|
</div>
|
</template>-->
|
<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-show="config.isShow">
|
<div class="title">{{config.title}}</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 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>
|
</div>
|
</div>
|
<div class="right-btns">
|
<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>
|
</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">
|
<div class="title">高级选项</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)"
|
>{{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="watch" size="mini">
|
<el-option value label="全部"></el-option>
|
<el-option value="1" label="未关注"></el-option>
|
<el-option value="2" label="已关注"></el-option>
|
</el-select>
|
</div>
|
<div>
|
<el-select v-model="settle" size="mini">
|
<el-option value label="全部"></el-option>
|
<el-option value="1" label="未处理"></el-option>
|
<el-option value="2" 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 menuList" :key="data.id">
|
<div class="card">
|
<div class="video-wrap" @click="checkVideo(data)">
|
<video src></video>
|
</div>
|
<div class="video-info">
|
<div class="base-info">
|
<div>
|
<label>车号:</label>
|
<span>{{data.no}}</span>
|
</div>
|
<div>
|
<label>车次:</label>
|
<span>{{data.frequency}}</span>
|
</div>
|
<div>
|
<label>时间:</label>
|
<span>{{data.time}}</span>
|
</div>
|
<div>
|
<label>司机|副司机:</label>
|
<span>{{data.driver}}</span>
|
</div>
|
</div>
|
<div class="mark-info">
|
<div class="abnormal" v-if="data.markType==1">
|
<span v-for="(mark,index) in data.marks" :key="index">{{mark}}</span>
|
</div>
|
<div v-else>
|
<span>无异常</span>
|
</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">
|
<i :class="[data.follow?'follow':'','el-icon-star-off']"></i>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
<el-pagination
|
background
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page.sync="curTabPage"
|
:page-size="tabPageSize"
|
layout="total, prev, pager, next"
|
:total="tabTotal">
|
</el-pagination>
|
</div>
|
<div class="content" v-show="showType=='list'">
|
<el-table :data="tableData" fit ref="elTable">
|
<el-table-column label="名称" prop="name" sortable width="500">
|
<template slot-scope="scope">
|
<div style="cursor:pointer;">{{scope.row.name}}</div>
|
</template>
|
</el-table-column>
|
<el-table-column label="大小" prop="size" sortable></el-table-column>
|
<el-table-column label="修改日期" prop="updateTime" sortable></el-table-column>
|
<el-table-column label="创建日期" prop="createTime" sortable></el-table-column>
|
<el-table-column label="操作">
|
<template>
|
<div class="operation">
|
<i class="el-icon-star-off" style="font-size: 18px;"></i>
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
<!-- <el-pagination background layout="prev, pager, next" :page-size="pageSize" :total="tableListTotal"></el-pagination> -->
|
<el-pagination
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page.sync="curTablePage"
|
:page-size="tablePageSize"
|
layout="total, prev, pager, next"
|
:total="tableTotal">
|
</el-pagination>
|
</div>
|
<el-dialog
|
class="dialog-video"
|
:visible="videoDialogVisible"
|
@close="videoDialogVisible=false"
|
:append-to-body="false"
|
>
|
<div slot="title" class="title">
|
<div class="center">
|
<i class="el-icon-connection"></i>
|
<span>播放视频</span>
|
</div>
|
</div>
|
<div class="content">
|
<div class="content-top">
|
<div class="grid-check">
|
<span
|
:class="guid === 1 ? 'iconfont icongongge1 activegongge':'iconfont icongongge1'"
|
@click="setGuid(1)"
|
></span>
|
<span
|
:class="guid === 2 ? 'iconfont icongongge activegongge':'iconfont icongongge'"
|
@click="setGuid(2)"
|
></span>
|
<span
|
:class="guid === 3 ? 'iconfont icongongge2 activegongge':'iconfont icongongge2'"
|
@click="setGuid(3)"
|
></span>
|
</div>
|
<div class="video-area">
|
<div class="info-list block">
|
<p class="title-partment">相关视频</p>
|
<!-- <div class="video-name" v-for="video in videoDetails.videoList" :key="video.id">
|
<i class="el-icon-film"></i>
|
<span>{{video.name}}</span>
|
</div>-->
|
<div class="video-name">
|
<i class="el-icon-film"></i>
|
<span>驾驶室</span>
|
</div>
|
<div class="video-name">
|
<i class="el-icon-film"></i>
|
<span>机房</span>
|
</div>
|
</div>
|
<div class="players">
|
<div class="video-item" v-for="(item,index) in videoWrapArr" :key="index"></div>
|
</div>
|
</div>
|
</div>
|
<div class="content-bottom">
|
<div class="bot-left block">
|
<p class="title-partment">快速标注</p>
|
<div style="height:28px;">
|
<label style="padding-right:10px;">隐患问题:</label>
|
<el-radio v-model="hiddenDanger" :label="1">无异常</el-radio>
|
<el-radio v-model="hiddenDanger" :label="2">有异常</el-radio>
|
<el-button
|
icon="el-icon-plus"
|
size="mini"
|
v-show="hiddenDanger==2"
|
type="primary"
|
@click="addLabel(videoDetails)"
|
>添加标注</el-button>
|
</div>
|
</div>
|
<div class="bot-right block">
|
<p class="title-partment">视频详情</p>
|
<div class="base-info">
|
<div>
|
<label>车号:</label>
|
<span>{{videoDetails.no}}</span>
|
</div>
|
<div>
|
<label>车次:</label>
|
<span>{{videoDetails.frequency}}</span>
|
</div>
|
<div>
|
<label>时间:</label>
|
<span>{{videoDetails.time}}</span>
|
</div>
|
<div>
|
<label>司机|副司机:</label>
|
<span>{{videoDetails.driver}}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</el-dialog>
|
<el-dialog
|
class="label-dialog"
|
:visible="labelDialogVisible"
|
@close="labelDialogVisible=false"
|
:append-to-body="false"
|
>
|
<div class="label-check">
|
<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-group>
|
</div>
|
<div class="btns">
|
<el-button @click="delLabelChecked" size="small">删除</el-button>
|
<el-button @click="cancelLabelChecked" size="small">取消</el-button>
|
<el-button @click="submitLabelChecked(videoDetails)" size="small" type="primary">确定</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { getlstInit } from '@/api/shuohuang';
|
|
export default {
|
data () {
|
return {
|
keyword: '',
|
searchTime: [this.$moment(new Date().getTime() - 3600 * 1000 * 24 * 3).format("YYYY-MM-DD HH:mm:ss"), this.$moment(new Date()).format("YYYY-MM-DD HH:mm:ss")],
|
curTabPage: 1,
|
curTablePage: 1,
|
tabPageSize: 8,
|
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);
|
//start.setHours(0,0,0);
|
picker.$emit('pick', [start, end]);
|
}
|
}]
|
},
|
checkedConfigs: [],
|
optionalConfigs: [],
|
highLevelConfigs: [],
|
fixedOneLineHeight: 40,
|
watch: '',
|
settle: '',
|
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' }
|
],
|
menuList: [
|
{ 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,
|
videoDetails: {},
|
guid: 1,
|
videoWrapArr: [],
|
hiddenDanger: 1,
|
labelDialogVisible: false,
|
labelOptions: [{ id: 'whh', name: '未呼唤、呼唤不标准' }, { id: 'jsbz', name: '精神不振、运行中睡觉' }, { id: 'xxsj', name: '学习司机未应答' }, { id: 'myhb', name: '没有后部瞭望、不按规定做防溜措施' }],
|
labelCheckedList: [],
|
}
|
},
|
mounted () {
|
// let mockConfigs = [
|
// { id: 'jch', isHighLevel: false, title: '机车号', data: [{ name: '全部', id: '' }, { name: 'K24', id: 'k24' }, { name: 'G172', id: 'g172' }, { name: 'K254', id: 'k254' }, { name: 'K264', id: 'k264' }, { name: 'G132', id: 'g132' }, { name: 'K257', id: 'k257' }, { name: 'K269', id: 'k269' }, { name: 'G176', id: 'g176' }, { name: 'G137', id: 'g137' }, { name: 'K297', id: 'k297' }, { name: 'K209', id: 'k209' }, { name: 'G777', id: 'g777' }, { name: 'G337', id: 'g337' }, { name: 'K277', id: 'k277' }, { name: 'K299', id: 'k299' }, { name: 'G866', id: 'g866' }, { name: 'K877', id: 'k877' }, { name: 'K699', id: 'k699' }, { name: 'G906', id: 'g906' }, { name: 'L677', id: 'l677' }, { name: 'M987', id: 'm987' }] },
|
// { id: 'cc', isHighLevel: false, title: '车次', data: [{ name: '全部', id: '' }, { name: 'SS344', id: 'SS344' }, { name: 'SS345', id: 'SS345' }, { name: 'SS765', id: 'SS765' }, { name: 'SS776', id: 'SS776' }, { name: 'SS676', id: 'SS676' }, { name: 'SS876', id: 'SS876' }, { name: 'SS779', id: 'k779' }, { name: 'SS976', id: 'SS976' },] },
|
// { id: 'sj', isHighLevel: true, title: '司机', data: [{ name: '张三', id: 'zs' }, { name: '李斯', id: "ls" }, { name: '李斯特', id: "lst" }] },
|
// { id: 'lk', isHighLevel: true, title: '路况', data: [{ name: '标示牌', id: 'bsp' }, { name: '信号机', id: "xhj" }, { name: '弯道', id: "wd" }] }
|
// ];
|
|
// mockConfigs.forEach(config => {
|
// this.$set(config, 'isShow', true);
|
// config.data.forEach(item => {
|
// this.$set(item, 'isChecked', false);
|
// })
|
// if (config.isHighLevel) {
|
// 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;
|
// }
|
// });
|
// console.log(this.optionalConfigs);
|
// });
|
this.init();
|
},
|
methods: {
|
handleSizeChange(){
|
|
},
|
handleCurrentChange(){
|
|
},
|
init () {
|
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'
|
};
|
this.optionalConfigs = [];
|
this.highLevelConfigs = [];
|
getlstInit(query).then(res => {
|
debugger
|
if(_this.showType=='list'){
|
_this.tableTotal = res.total;
|
}else{
|
_this.tabTotal = res.total;
|
}
|
|
res.filterlst.forEach(config => {
|
this.$set(config, 'isShow', true);
|
config.data = Object.keys(config.Node).map(key => {
|
let obj = {};
|
obj.name = key;
|
obj.id = config.Node[key]
|
// item.id = item;
|
// item.name = k;
|
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;
|
}
|
});
|
console.log(this.optionalConfigs);
|
});
|
})
|
},
|
delLabelChecked () {
|
|
},
|
cancelLabelChecked () {
|
|
},
|
submitLabelChecked () {
|
|
},
|
addLabel (videoDetails) {
|
debugger
|
this.labelDialogVisible = true;
|
|
},
|
setGuid (guid) {
|
this.videoWrapArr = Math.pow(guid, 2);
|
|
},
|
checkVideo (data) {
|
this.videoDialogVisible = true;
|
this.videoDetails = data;
|
|
},
|
checkFollow () {
|
|
},
|
checkType (type) {
|
this.showType = type;
|
this.init();
|
},
|
clearCheckedConfigs () {
|
this.checkedConfigs = [];
|
},
|
removeCheckedConfig (config) {
|
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;
|
|
// this.dataSearch();
|
this.$nextTick(() => {
|
config.isShow = false;
|
})
|
|
},
|
|
cancleMultCheck (config) {
|
config.isMultCheck = false;
|
config.data.forEach(opt => {
|
opt.isChecked = false;
|
});
|
},
|
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();
|
},
|
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.search-for-video-analyze {
|
padding: 20px 30px;
|
.filter-area {
|
.input-area {
|
display: flex;
|
align-items: center;
|
height: 50px;
|
.search-input {
|
width: 408px;
|
}
|
.el-date-editor {
|
margin: 0 20px;
|
}
|
}
|
.checked-config {
|
display: flex;
|
text-align: left;
|
margin-bottom: 10px;
|
position: relative;
|
.config-item {
|
padding-left: 10px;
|
margin: 0 0 5px 5px;
|
background: #f3f3f3;
|
border: 1px solid #ddd;
|
.remove {
|
cursor: pointer;
|
padding: 5px 5px;
|
margin-left: 5px;
|
}
|
&:hover {
|
background: #fff;
|
border-color: #3d68e1;
|
.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 #ddd;
|
.title {
|
padding: 10px 20px;
|
width: 100px;
|
text-align: left;
|
background: #f3f3f3;
|
}
|
.options-wrap {
|
flex: 1;
|
.options {
|
display: flex;
|
flex-wrap: wrap;
|
height: 40px;
|
overflow: hidden;
|
.option {
|
padding: 10px 20px;
|
height: 20px;
|
line-height: 20px;
|
&:hover {
|
color: #6486e7;
|
}
|
.el-checkbox {
|
padding-right: 6px;
|
}
|
}
|
}
|
.btns {
|
margin: 20px 0;
|
}
|
}
|
.right-btns {
|
width: 158px;
|
display: flex;
|
user-select: none;
|
justify-content: flex-end;
|
.more {
|
margin-top: 6px;
|
padding: 0px 12px;
|
border: 1px solid #ccc;
|
margin-right: 10px;
|
width: 48px;
|
height: 26px;
|
line-height: 26px;
|
&:hover {
|
color: #6486e7;
|
}
|
}
|
.multCheck {
|
margin-top: 6px;
|
width: 48px;
|
height: 26px;
|
line-height: 26px;
|
padding: 0px 12px;
|
border: 1px solid #ccc;
|
&:hover {
|
color: #6486e7;
|
border-color: #6486e7;
|
}
|
&.checked {
|
color: #3d68e1;
|
border-color: #3d68e1;
|
}
|
}
|
}
|
.el-menu.el-menu--horizontal {
|
border: none;
|
}
|
.config-submenu {
|
.el-submenu__title {
|
height: 40px;
|
line-height: 40px;
|
border: none;
|
}
|
.el-menu--popup {
|
display: flex;
|
width: 900px;
|
li.el-menu-item {
|
display: inline-block;
|
min-width: auto;
|
}
|
}
|
}
|
}
|
}
|
.tip {
|
color: #ccc;
|
}
|
}
|
.data-list {
|
margin-top: 20px;
|
.header-bar {
|
padding-bottom: 5px;
|
border-bottom: 1px solid #ddd;
|
.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;
|
border-radius: 3px;
|
&.menu {
|
margin-right: 10px;
|
}
|
&.current {
|
border-color: #3d68e1;
|
}
|
}
|
}
|
}
|
}
|
.content {
|
padding-top: 14px;
|
.el-col {
|
margin-bottom: 10px;
|
}
|
.card {
|
cursor: pointer;
|
position: relative;
|
text-align: left;
|
border: 1px solid #dedede;
|
border-radius: 5px;
|
.video-wrap {
|
background: aliceblue;
|
border-radius: 3px;
|
video {
|
border-radius: 3px;
|
}
|
}
|
.video-info {
|
padding: 10px;
|
.base-info {
|
> div {
|
margin-bottom: 5px;
|
}
|
label {
|
color: #999;
|
padding-right: 8px;
|
}
|
}
|
.mark-info {
|
margin: 10px 0;
|
color: #3d68e1;
|
.abnormal {
|
color: red;
|
}
|
}
|
.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;
|
.follow {
|
color: #3d68e1;
|
}
|
}
|
}
|
.el-table {
|
border: 1px solid #dedede;
|
th {
|
background: #f5f5f5;
|
color: #333;
|
}
|
.operation {
|
cursor: pointer;
|
}
|
}
|
}
|
.dialog-video {
|
.el-dialog {
|
width: 1180px;
|
}
|
.el-dialog__body {
|
background: #f5f5f5;
|
padding: 0;
|
}
|
.title-partment {
|
font-size: 14px;
|
color: #333;
|
line-height: 18px;
|
margin-bottom: 8px;
|
}
|
.block {
|
background: #fff;
|
padding: 10px;
|
border-radius: 3px;
|
}
|
.title {
|
font-size: 18px;
|
}
|
.content {
|
padding: 15px;
|
text-align: left;
|
.content-top {
|
margin-bottom: 10px;
|
.grid-check {
|
text-align: right;
|
margin-bottom: 6px;
|
span {
|
font-size: 20px;
|
color: #cacaca;
|
padding-left: 12px;
|
cursor: pointer;
|
}
|
}
|
.video-area {
|
display: flex;
|
.info-list {
|
width: 160px;
|
margin-right: 10px;
|
.video-name {
|
color: #666;
|
margin-bottom: 10px;
|
&.current {
|
color: #3d68e1;
|
}
|
i {
|
padding-right: 4px;
|
}
|
}
|
}
|
.players {
|
width: 960px;
|
height: 540px;
|
display: flex;
|
.video-item {
|
flex: 1;
|
background: black;
|
border: 1px solid #fff;
|
}
|
}
|
}
|
}
|
.content-bottom {
|
display: flex;
|
.bot-left {
|
flex: 1;
|
}
|
.bot-right {
|
width: 210px;
|
margin-left: 10px;
|
label {
|
color: #999;
|
padding-right: 8px;
|
}
|
}
|
}
|
}
|
}
|
.label-dialog {
|
.el-dialog {
|
width: 700px;
|
.label-check {
|
min-height: 400px;
|
margin-bottom: 20px;
|
.el-checkbox-group {
|
display: flex;
|
flex-wrap: wrap;
|
> label {
|
width: 50%;
|
text-align: left;
|
margin: 0;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
