From 7e0e0b4445d3c03cc42005246fa879a4dc8e7e6d Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期五, 26 二月 2021 14:40:49 +0800
Subject: [PATCH] 朔黄事件标签弹窗调试；视频检索页筛选区字号颜色统一
---
vue.config.js | 2
src/pages/shuohuangMonitorAnalyze/components/eventVideos.vue | 80 +++++++++++++++++++++++++++++-----------
src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue | 18 ++++++--
src/api/shuohuang.ts | 5 ++
src/components/giantTree/index.vue | 9 +---
5 files changed, 79 insertions(+), 35 deletions(-)
diff --git a/src/api/shuohuang.ts b/src/api/shuohuang.ts
index 7b111d0..bb13c83 100644
--- a/src/api/shuohuang.ts
+++ b/src/api/shuohuang.ts
@@ -149,4 +149,9 @@
url:'/data/api-c/slot/getlst',
method: 'get',
params: query
+})
+export const getEventVideo = (query:any) => request({
+ url:'/data/api-c/lkg/getEventClip',
+ method: 'get',
+ params: query
})
\ No newline at end of file
diff --git a/src/components/giantTree/index.vue b/src/components/giantTree/index.vue
index 0a694bd..02f194a 100644
--- a/src/components/giantTree/index.vue
+++ b/src/components/giantTree/index.vue
@@ -83,8 +83,6 @@
{ min: 2, max: 10, message: "闀垮害鍦�2鍒�10涓瓧", trigger: "change" }
]
},
- evt: {},
- treeId: '',
};
},
created() {
@@ -105,6 +103,7 @@
methods: {
handleCreated: function (ztreeObj) {
this.ztreeObj = ztreeObj;
+ debugger
// console.log("handleCreated")
// onCreated 涓搷浣渮treeObj瀵硅薄灞曞紑绗竴涓妭鐐�
// ztreeObj.expandNode(ztreeObj.getNodes()[0], true);
@@ -245,12 +244,8 @@
this.showDialog = true;
},
itemClick(evt, treeId, treeNode) {
- debugger
- //let itemClickArgs = {evt,treeId};
- this.evt = evt;
- this.treeId = treeId;
console.log(evt,treeId)
- // sessionStorage.setItem('itemClickArgs',JSON.stringify(itemClickArgs))
+
this.TreeDataPool.selectedNode = treeNode;
this.TreeDataPool.treeType = this.treeName;
diff --git a/src/pages/shuohuangMonitorAnalyze/components/eventVideos.vue b/src/pages/shuohuangMonitorAnalyze/components/eventVideos.vue
index 0834011..b1a7e23 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/eventVideos.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/eventVideos.vue
@@ -1,17 +1,27 @@
<template>
<div class="event-video-content">
<div class="video-player">
- <video src></video>
+ <video :src="curVideo.ClipPath" controls></video>
</div>
<div class="more-videos">
<div class="top">
<div class="title">鏇村瑙嗛</div>
- <div class="total">鍏�<span class="num">{{total}}</span>鏉�</div>
+ <div class="total">
+ 鍏�
+ <span class="num">{{eventVideoArr.length}}</span>
+ 鏉�
+ </div>
</div>
<div class="gallery">
- <div class="video-item" v-for="item in 11" :key="item">
- <img src alt />
- <div class="time"></div>
+ <div
+ class="video-item"
+ :class="{'act':item.ID == curVideo.ID}"
+ v-for="item in eventVideoArr"
+ :key="item.ID"
+ @click="checkVideo(item)"
+ >
+ <img :src="item.Cover" alt />
+ <div class="time">{{item.EventTime}}</div>
</div>
</div>
</div>
@@ -21,14 +31,33 @@
<script>
export default {
props: {
- eventDetail: {
- type: Object,
- default: {}
- },
+ eventVideoArr: {
+ type: Array,
+ default: () => { return [] }
+ }
},
- data(){
+ data () {
return {
curVideo: {},
+ }
+ },
+ watch: {
+ eventVideoArr (n, o) {
+ if (n.length) {
+ this.curVideo = n[0]
+ }
+ }
+ },
+ mounted () {
+ //this.eventVideoArr.length && (this.curVideo = this.eventVideoArr[0]);
+ //this.curVideo = this.eventVideoArr[0];
+ this.$nextTick(() => {
+ this.eventVideoArr.length && (this.curVideo = this.eventVideoArr[0]);
+ })
+ },
+ methods: {
+ checkVideo (data) {
+ this.curVideo = data;
}
}
}
@@ -36,47 +65,54 @@
<style lang="scss">
.event-video-content {
- padding: 14px;
- .video-player{
+ padding: 10px 14px;
+ .video-player {
background: #fff;
margin-bottom: 14px;
- video{
+ video {
margin: 20px auto;
width: 576px;
height: 324px;
background: aquamarine;
}
}
- .more-videos{
+ .more-videos {
background: #fff;
- .top{
+ .top {
padding: 10px 20px;
display: flex;
justify-content: space-between;
- .total{
- .num{
+ .total {
+ .num {
+ padding: 0 2px;
color: #0096fa;
}
}
}
- .gallery{
+ .gallery {
display: flex;
flex-wrap: wrap;
padding: 0 20px 10px;
- max-height: 300px;
+ height: 300px;
overflow-y: auto;
// &:after{
// content: "";
// flex: auto;
// }
- .video-item{
+ .video-item {
width: 200px;
- height: 112.5px;
+ //height: 112.5px;
margin: 10px 40px;
- background: rgb(200, 223, 251);
+ //background: rgb(200, 223, 251);
padding: 10px;
border: 1px solid #eee;
border-radius: 3px;
+ &.act {
+ border-color: #0096fa;
+ }
+ img {
+ width: 100%;
+ }
}
}
}
diff --git a/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue b/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue
index 090a650..7aa45ce 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue
@@ -275,9 +275,9 @@
>
<div class="title" slot="title">
<i class="el-icon-connection"></i>
- <span>shoubi瑙嗛</span>
+ <span>{{curEvName}}瑙嗛</span>
</div>
- <event-videos :eventDetail="curEventDetail"></event-videos>
+ <event-videos :eventVideoArr="eventVideoArr"></event-videos>
</el-dialog>
</div>
</div>
@@ -292,6 +292,7 @@
getLabelMap,
delLabel,
editLabel,
+ getEventVideo
} from "@/api/shuohuang";
import VideoAnalyze from "./videoAnalyze";
import EventVideos from "./eventVideos";
@@ -414,7 +415,8 @@
labelDialogVisible: false,
selectedVideo: {},
eventDialogVisible: false,
- curEventDetail: {}
+ curEvName: '',
+ eventVideoArr: []
};
},
watch: {
@@ -432,6 +434,11 @@
checkEventVideo (label) {
this.eventDialogVisible = true;
this.curEventDetail = label;
+ let _this = this;
+ getEventVideo({Event:label.Event,LkgID:label.ParentID}).then(res=>{
+ _this.eventVideoArr = res.data;
+ _this.curEvName = label.Event;
+ })
},
handleTabSizeChange (size) {
this.tabPageSize = size;
@@ -528,7 +535,6 @@
} else {
_this.tabTotal = res.total;
_this.tabData = res.data;
- // debugger
_this.tabData = _this.tabData.map(function (item) {
const set = new Set()
item.LableLst.forEach(function (label) {
@@ -827,6 +833,8 @@
height: 40px;
line-height: 40px;
border: none;
+ color: #2c3e50;
+ font-size: 12px;
}
.el-menu--popup {
display: flex;
@@ -838,6 +846,7 @@
}
.highlevel-option {
font-size: 12px;
+ color: #2c3e50;
&:hover {
color: #6486e7;
}
@@ -907,7 +916,6 @@
position: relative;
text-align: left;
background: #fff;
- border: 1px solid #dedede;
border-radius: 5px;
height: 360px;
margin-bottom: 10px;
diff --git a/vue.config.js b/vue.config.js
index 254db78..8e6eadc 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -87,7 +87,7 @@
// }
// },
"/api-c": {
- target: 'http://192.168.20.10:8004',
+ target: 'http://192.168.20.113:8004',
changeOrigin: true
},
"/api-v": {
--
Gitblit v1.8.0