|
<template>
<div class="page-main">
<t-button-group class="top-btn">
<t-button :color="tabId === 1 ? 'primary' : 'secondary'" @click="tabClick(1)">风场大门</t-button>
<t-button :color="tabId === 2 ? 'primary' : 'secondary'" @click="tabClick(2)">集控室</t-button>
</t-button-group>
<div class="page-top">
<span>风场:</span>
<t-select v-model="gateFieldData" clearable @change="getVideoSurveillanceData(true)">
<t-option v-for="(item,index) in organizationList" :key="index" :value="item.id">{{ item.org }}</t-option>
</t-select>
</div>
<div class="page-bottom">
<div v-for="(item,index) in videoList" :key="index">
<t-card class="card-video">
<img :src="item.url" class="card-image">
<div slot="foot" class="bottom">
<span v-tooltip="item.videoDetail">{{ item.videoDetail.content | handleText }}</span>
<div style="margin-left:auto">
<t-button v-tooltip="item.options1" class="bottom-btn" @click="goDistinguishRecord(item.videoId)">
<t-icon size="16" icon="image-outline"></t-icon>
</t-button>
<t-button v-tooltip="item.options2" class="bottom-btn" @click="handleReview(item.videoId)">
<t-icon size="16" icon="piechart-outline"></t-icon>
</t-button>
<t-button v-tooltip="item.options3" class="bottom-btn">
<t-icon size="16" icon="arrow-expand-all-outline"></t-icon>
</t-button>
</div>
</div>
</t-card>
</div>
</div>
<t-pager :page-size="videoPageSize" :current="videoCurrent" :total="videoTotal" :sizer-range="[ 5, 10, 20, 30 ]" class="pager" show-elevator @on-change="onChangeGate"></t-pager>
<replay-dialog :list="replayList" :visibled.sync="showReplayDialog" />
</div>
</template>
<script>
import sysapi from '@/api/videoSurveillance'
import commonapi from '@/api/common'
import ReplayDialog from './components/ReplayDialog'
export default {
components: { ReplayDialog },
filters: {
handleText (value) {
if (!value) return ''
if (value.length > 13) {
return value.slice(0, 13) + '...'
}
return value
}
},
data () {
return {
videoCurrent: 1, // 大门分页数据
videoPageSize: 10, // 大门分页数据
videoTotal: 100, // 大门分页总数
tabId: 1,
paramsObj: { // 接口请求数据
page: 0,
limit: 10
},
departments: '',
organizationList: [], // 风场数据
gateFieldData: 101101,
videoList: [],
totalList: [],
roomList: [],
showReplayDialog: false,
replayList: []
}
},
mounted () {
this.getWindFiledList() // 获取风场列表
this.getVideoSurveillanceData() // 获取视频监控界面数据
},
methods: {
async handleReview (id) {
// const res = await sysapi.getVideoPlayBack(id)
// console.log(res)
this.replayList = [{
fileName: '12月14 16:55',
fileId: 'ai-video_5A02296PAKA885B-video20201214165526.mp4',
fileType: 'video/mp4'
}, {
fileName: '12月14 16:56',
fileId: 'ai-video_5A02296PAKA885B-video20201214165527.mp4',
fileType: 'video/mp4'
}, {
fileName: '12月14 16:57',
fileId: 'ai-video_5A02296PAKA885B-video20201214165528.mp4',
fileType: 'video/mp4'
}, {
fileName: '12月14 16:58',
fileId: 'ai-video_5A02296PAKA885B-video20201214165529.mp4',
fileType: 'video/mp4'
}, {
fileName: '12月14 16:59',
fileId: 'ai-video_5A02296PAKA885B-video20201214165530.mp4',
fileType: 'video/mp4'
}, {
fileName: '12月14 17:00',
fileId: 'ai-video_5A02296PAKA885B-video20201214165531.mp4',
fileType: 'video/mp4'
}]
this.replayList = [{
sources: [{
src: 'http://10.19.90.34:19000/tool-image/tool-image_7fa1f7b30f0640f2a67ac8b4c2e0b574.mp4',
type: 'video/mp4'
}]
}, {
sources: [{
src: 'http://10.19.90.34:19000/tool-image/tool-image_7fa1f7b30f0640f2a67ac8b4c2e0b574.mp4',
type: 'video/mp4'
}]
}]
this.showReplayDialog = true
},
async tabClick (id) {
this.paramsObj.page = 0
this.videoList = []
this.tabId = id
this.videoCurrent = 1
this.getVideoSurveillanceData()
},
getWindFiledList () {
commonapi.getDepartments().then(resp => {
this.organizationList = []
console.log(resp)
this.organizationList = resp.data.map(item => {
return {
org: item.name,
id: item.id
}
})
}, err => {
this.$Message.danger('获取风场列表失败！')
console.log(err)
})
},
// 获得风场大门数据
getVideoSurveillanceData (isWind) {
if (isWind) {
this.videoList = []
}
if (this.videoList.length <= 10) {
this.paramsObj.page = this.videoCurrent
sysapi.getVideoSurveillanceData({ params: this.paramsObj }).then(res => {
this.departments = res.data.departments
this.videoTotal = this.departments[this.tabId - 1].total
res.data.data.forEach((element, index) => {
if (element.departmentId === this.tabId) {
this.videoList.push(element)
}
})
this.videoList.forEach(element => {
if (typeof (element.videoDetail) === 'object') {
var txt = element.videoDetail.content
} else { txt = element.videoDetail }
element.videoDetail = {}
element.videoDetail.content = txt
element.videoDetail.placement = 'top'
})
this.getVideoSurveillanceData()
})
}
},
// 进入识别记录界面
goDistinguishRecord (id) {
this.$router.push({ path: '/videoSurveillance/distinguishRecord', query: { videoId: id } })
},
// 风场大门分页
onChangeGate (val) {
this.videoList = []
this.videoCurrent = val
this.getVideoSurveillanceData()
}
}
}
</script>
<style lang="scss" scoped>
.page-main {
padding: 30px 24px 24px 24px;
.top-btn {
float: right;
}
.page-bottom {
display: flex;
width: 100%;
flex-wrap: wrap;
margin-left: -24px;
.card-video-first,
.card-video {
width: 354px;
height: 240px;
margin-top: 20px;
.card-image {
width: 100%;
height: 100%;
}
.bottom {
padding: 0 12px;
display: flex;
align-items: center;
background-color: rgba(0, 0, 0, 0.5);
height: 40px;
color: #fff;
font-size: 14px;
.bottom-btn {
color: #fff;
border: none;
padding: 0 !important;
&:hover {
color: #0089d4;
}
}
}
}
.card-video {
.card-footer {
padding: 0px 0 0 24px !important;
background: none;
width: 100%;
position: absolute;
border-top: none;
bottom: 0px;
}
.card-block,
.card-video-block {
margin-left: 24px;
padding: 0 !important;
}
}
}
.pager {
margin-right: auto;
margin: 21px 0px 24px 0;
float: right;
}
.btn-primary,
.radio-group-button .form-radio:checked,
.radio-group-button .form-radio[checked] {
color: #0089d4;
background-color: #fff;
border: 1px solid #0089d4;
}
.btn-secondary,
.radio-group-button .form-radio,
.checkbox-group--button .form-checkbox .form-checkbox__inner,
.btn-dashed-secondary,
.btn-outline-secondary {
background: none;
}
}
</style>
|
