| | |
| | | <div class="header-bar clearfix"> |
| | | <div class="left"> |
| | | <div> |
| | | <el-select v-model="watch" size="mini"> |
| | | <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="2" 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="settle" size="mini"> |
| | | <el-select v-model="IsOperate" size="mini" @change="filterSearchData"> |
| | | <el-option value label="全部"></el-option> |
| | | <el-option value="1" label="未处理"></el-option> |
| | | <el-option value="2" label="已处理"></el-option> |
| | | <el-option value="0" label="未处理"></el-option> |
| | | <el-option value="1" label="已处理"></el-option> |
| | | </el-select> |
| | | </div> |
| | | </div> |
| | |
| | | </div> |
| | | </div> |
| | | <div class="mark-info"> |
| | | <div class="abnormal" v-if="data.IsUnusual==='1'"> |
| | | <span v-for="(mark,index) in data.marks" :key="index">{{mark}}</span> |
| | | <div class="abnormal" v-if="data.LableLst&&data.LableLst.length"> |
| | | <span v-for="(label,index) in data.LableLst" :key="index">{{label.Desc}}</span> |
| | | </div> |
| | | <div v-else> |
| | | <span>无异常</span> |
| | |
| | | </el-col> |
| | | </el-row> |
| | | <el-pagination |
| | | class="pagination-center" |
| | | background |
| | | @size-change="handleTabSizeChange" |
| | | @current-change="handleCurrentChange" |
| | |
| | | </el-table-column> |
| | | </el-table> |
| | | <el-pagination |
| | | class="pagination-center" |
| | | @size-change="handleTableSizeChange" |
| | | @current-change="handleCurrentChange" |
| | | :current-page.sync="curTablePage" |
| | |
| | | class="dialog-video" |
| | | :visible="videoDialogVisible" |
| | | @close="videoDialogVisible=false" |
| | | :append-to-body="false" |
| | | > |
| | | <div slot="title" class="title"> |
| | | <div class="center"> |
| | |
| | | <span>播放视频</span> |
| | | </div> |
| | | </div> |
| | | |
| | | <video-analyze :videoDetails="selectedVideo" /> |
| | | </el-dialog> |
| | | </div> |
| | |
| | | }, |
| | | data() { |
| | | return { |
| | | CLIP: 'http://192.168.20.113/', |
| | | CLIP: 'http://', |
| | | keyword: '', |
| | | 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")], |
| | | 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)], |
| | | curTabPage: 1, |
| | | curTablePage: 1, |
| | | tabPageSize: 8, |
| | |
| | | highLevelConfigs: [], |
| | | showAdvance: true, |
| | | fixedOneLineHeight: 40, |
| | | watch: '', |
| | | 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' }, |
| | |
| | | { 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, |
| | |
| | | }, |
| | | methods: { |
| | | handleTabSizeChange(size) { |
| | | debugger |
| | | this.tabPageSize = size; |
| | | this.filterSearchData() |
| | | }, |
| | |
| | | //二级查询 |
| | | filterSearchData() { |
| | | let _this = this; |
| | | let isFollow = ''; |
| | | if (this.IsFollow === '') { |
| | | isFollow = '' |
| | | } else if (!!this.IsFollow) { |
| | | isFollow = '1' |
| | | } else { |
| | | isFollow = '0' |
| | | } |
| | | let query = { |
| | | KeyWord: this.keyword, |
| | | StartDate: this.searchTime[0], |
| | | EndDate: this.searchTime[1], |
| | | PageIndex: this.showType == 'list' ? this.curTablePage : this.showType == 'list', |
| | | PageIndex: this.showType == 'list' ? this.curTablePage : this.curTabPage, |
| | | PageSize: this.showType == 'list' ? this.tablePageSize : this.tabPageSize, |
| | | IsDetail: this.showType == 'list' |
| | | IsDetail: this.showType == 'list', |
| | | IsFollow: isFollow, |
| | | IsOperate: this.IsOperate |
| | | }; |
| | | let filterQuerys = []; |
| | | this.checkedConfigs.forEach(config => { |
| | |
| | | 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' |
| | | IsDetail: this.showType == 'list', |
| | | IsFollow: this.IsFollow, |
| | | IsOperate: this.IsOperate, |
| | | }; |
| | | this.optionalConfigs = []; |
| | | this.highLevelConfigs = []; |
| | |
| | | obj.id = config.Node[key] |
| | | return obj |
| | | }); |
| | | // 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 => { |
| | |
| | | let _this = this; |
| | | _this.selectedVideo = data; |
| | | _this.videoDialogVisible = true; |
| | | |
| | | }, |
| | | checkFollow() { |
| | | |
| | |
| | | <style lang="scss"> |
| | | .search-for-video-analyze { |
| | | padding: 20px 30px; |
| | | .flex-box { |
| | | display: flex; |
| | | } |
| | | .filter-area { |
| | | .input-area { |
| | | display: flex; |
| | |
| | | text-align: left; |
| | | border: 1px solid #dedede; |
| | | border-radius: 5px; |
| | | height: 350px; |
| | | .video-wrap { |
| | | background: aliceblue; |
| | | border-radius: 3px; |
| | | width: 100%; |
| | | padding-top: 56.25%; |
| | | height: 0; |
| | | position: relative; |
| | | img { |
| | | position: absolute; |
| | | top: 0; |
| | | width: 100%; |
| | | border-radius: 3px; |
| | | height: 100%; |
| | | object-fit: contain; |
| | | // width: 100%; |
| | | // max-height: 200px; |
| | | // border-radius: 3px; |
| | | } |
| | | } |
| | | .video-info { |
| | |
| | | cursor: pointer; |
| | | } |
| | | } |
| | | .pagination-center{ |
| | | text-align: center; |
| | | margin: 10px auto; |
| | | } |
| | | } |
| | | .dialog-video { |
| | | z-index: 2096 !important; |
| | | .el-dialog { |
| | | width: 1180px; |
| | | height: 918px; |
| | | } |
| | | .el-dialog__body { |
| | | background: #f5f5f5; |