From 7f37e751c1c9f98671bc3fc06216aeb7781dd386 Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期三, 24 二月 2021 07:25:58 +0800
Subject: [PATCH] 应用中心已激活板块版式更新，添加更新tab页，添加批量更新应用和sdk功能；朔黄标注时间点格式化
---
src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue | 128 +++++++++++++++++++++++++++---------------
1 files changed, 81 insertions(+), 47 deletions(-)
diff --git a/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue b/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue
index e4b36d7..d312194 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue
@@ -118,16 +118,16 @@
<div class="left">
<div>
<el-select v-model="IsFollow" size="mini" @change="filterSearchData">
- <el-option value='' label="鍏ㄩ儴"></el-option>
+ <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="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>
@@ -147,7 +147,7 @@
<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="CLIP+data.VideoCover" alt />
+ <img :src="data.VideoCover" alt />
</div>
<div class="video-info">
<div class="base-info">
@@ -187,6 +187,7 @@
</el-col>
</el-row>
<el-pagination
+ class="pagination-center"
background
@size-change="handleTabSizeChange"
@current-change="handleCurrentChange"
@@ -201,7 +202,7 @@
<el-table :data="tableData" fit ref="elTable">
<el-table-column label="鍚嶇О" prop="VideoName" sortable width="500">
<template slot-scope="scope">
- <div style="cursor:pointer;">{{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>
@@ -216,6 +217,7 @@
</el-table-column>
</el-table>
<el-pagination
+ class="pagination-center"
@size-change="handleTableSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="curTablePage"
@@ -251,12 +253,13 @@
components: {
VideoAnalyze
},
- data () {
+ data() {
return {
- CLIP: 'http://192.168.20.113/',
+ 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: [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,
@@ -268,7 +271,7 @@
pickerOptions: {
shortcuts: [{
text: '浠婂ぉ',
- onClick (picker) {
+ onClick(picker) {
const end = new Date();
const start = new Date();
start.setHours(0, 0, 0);
@@ -276,7 +279,7 @@
}
}, {
text: '鏄ㄥぉ',
- onClick (picker) {
+ onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24);
@@ -287,7 +290,7 @@
}
}, {
text: '杩戜笁澶�',
- onClick (picker) {
+ onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
@@ -295,7 +298,7 @@
}
}, {
text: '杩戜竴鍛�',
- onClick (picker) {
+ onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
@@ -310,6 +313,7 @@
showAdvance: true,
fixedOneLineHeight: 40,
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' },
@@ -318,7 +322,7 @@
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 }
- ],
+ ],
videoDialogVisible: false,
hiddenDanger: 1,
labelDialogVisible: false,
@@ -327,46 +331,47 @@
},
watch: {
checkedConfigs: {
- handler (n, o) {
+ handler(n, o) {
this.filterSearchData()
},
deep: true
}
},
- mounted () {
+ mounted() {
this.init();
},
methods: {
- handleTabSizeChange (size) {
+ handleTabSizeChange(size) {
this.tabPageSize = size;
this.filterSearchData()
},
- handleTableSizeChange (size) {
+ handleTableSizeChange(size) {
this.tablePageSize = size;
this.filterSearchData()
},
- handleCurrentChange () {
+ handleCurrentChange() {
this.filterSearchData()
},
//浜岀骇鏌ヨ
- filterSearchData () {
+ filterSearchData() {
let _this = this;
let isFollow = '';
- if(this.IsFollow === ''){
+ if (this.IsFollow === '') {
isFollow = ''
- }else if(!!this.IsFollow){
+ } else if (!!this.IsFollow) {
isFollow = '1'
- }else{
+ } 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',
- IsFollow: isFollow
+ IsFollow: isFollow,
+ IsOperate: this.IsOperate
};
let filterQuerys = [];
this.checkedConfigs.forEach(config => {
@@ -392,7 +397,7 @@
})
},
//涓�绾ф煡璇�
- init () {
+ init() {
let _this = this;
let query = {
KeyWord: this.keyword,
@@ -401,7 +406,8 @@
PageIndex: this.showType == 'list' ? this.curTablePage : this.showType == 'list',
PageSize: this.showType == 'list' ? this.tablePageSize : this.tabPageSize,
IsDetail: this.showType == 'list',
- IsFollow: this.IsFollow
+ IsFollow: this.IsFollow,
+ IsOperate: this.IsOperate,
};
this.optionalConfigs = [];
this.highLevelConfigs = [];
@@ -416,11 +422,17 @@
res.filterlst.forEach(config => {
this.$set(config, 'isShow', true);
- config.data = Object.keys(config.Node).map(key => {
+ // config.data = Object.keys(config.Node).map(key => {
+ // let obj = {};
+ // obj.name = key;
+ // obj.id = config.Node[key]
+ // return obj
+ // });
+ config.data = config.Node.map((item) => {
let obj = {};
- obj.name = key;
- obj.id = config.Node[key]
- return obj
+ obj.name = item[0];
+ obj.id = item[1];
+ return obj;
});
config.id = config.ID;
config.title = config.NameZn;
@@ -449,7 +461,7 @@
})
},
- toggleFollow (data) {
+ toggleFollow(data) {
data.IsFollow = !data.IsFollow;
this.updataVideo(data);
if (data.IsFollow) {
@@ -459,27 +471,27 @@
});
}
},
- updataVideo (data) {
+ updataVideo(data) {
let _this = this;
updateVideoAnalyze(data).then(res => {
//浜岀骇鏌ヨ
});
},
- checkVideoDetail (data) {
+ checkVideoDetail(data) {
let _this = this;
_this.selectedVideo = data;
_this.videoDialogVisible = true;
},
- checkFollow () {
+ checkFollow() {
},
- checkType (type) {
+ checkType(type) {
this.showType = type;
this.filterSearchData()
},
- clearCheckedConfigs () {
+ clearCheckedConfigs() {
this.checkedConfigs.forEach(config => {
config.isShow = true;
config.data.forEach(d => {
@@ -489,7 +501,7 @@
this.checkedConfigs = [];
this.showAdvance = true;
},
- removeCheckedConfig (config) {
+ removeCheckedConfig(config) {
config.isShow = true;
if (config.IsAdvanced) {
this.showAdvance = true;
@@ -500,7 +512,7 @@
let index = this.checkedConfigs.findIndex(one => one.id == config.id);
this.checkedConfigs.splice(index, 1);
},
- checkOption (config, option) {
+ checkOption(config, option) {
if (option) {
option.isChecked = true;
}
@@ -517,20 +529,20 @@
},
- cancleMultCheck (config) {
+ cancleMultCheck(config) {
config.isMultCheck = false;
config.data.forEach(opt => {
opt.isChecked = false;
});
},
- handleSelect (key, keyPath) {
+ handleSelect(key, keyPath) {
},
- showMore (config) {
+ 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) {
+ toggleMultCheck(config) {
config.isMultCheck = !config.isMultCheck;
this.optionalConfigs.forEach(conf => {
if (conf.id == config.id) {
@@ -539,7 +551,7 @@
conf.isMultCheck = false;
})
},
- dataSearch () {
+ dataSearch() {
console.log(this.checkedConfigs);
this.$forceUpdate();
},
@@ -551,7 +563,7 @@
<style lang="scss">
.search-for-video-analyze {
padding: 20px 30px;
- .flex-box{
+ .flex-box {
display: flex;
}
.filter-area {
@@ -673,8 +685,17 @@
}
.el-menu.el-menu--horizontal {
border: none;
+
}
.config-submenu {
+ .el-menu--horizontal{
+ //max-width: 700px;
+ //overflow-x: auto;
+ left: 20px!important;
+ &>ul{
+ flex-wrap: wrap;
+ }
+ }
.el-submenu__title {
height: 40px;
line-height: 40px;
@@ -744,11 +765,20 @@
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 {
@@ -801,6 +831,10 @@
cursor: pointer;
}
}
+ .pagination-center{
+ text-align: center;
+ margin: 10px auto;
+ }
}
.dialog-video {
z-index: 2096 !important;
--
Gitblit v1.8.0