<!--
|
* @Author: shuishen 1109946754@qq.com
|
* @Date: 2023-02-23 09:09:09
|
* @LastEditors: shuishen 1109946754@qq.com
|
* @LastEditTime: 2023-04-09 04:02:32
|
* @FilePath: \srs-police-affairs\src\components\assemble\index.vue
|
* @Description: 聚合图标点的点击事件
|
*
|
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
|
-->
|
<template>
|
<div>
|
<el-dialog :title="dialogTile" :visible.sync="dialogVisible" :before-close="beforClose" :modal="true"
|
:modal-append-to-body="false" :close-on-click-modal="false" class="equiment-details-box-two">
|
<div class="header">
|
<div>
|
设备名称：
|
<input type="text" v-model="equimentSearchVal" placeholder="请输入…" />
|
</div>
|
|
<el-button type="primary" icon="el-icon-search" @click="searchEquiment">搜索</el-button>
|
<el-button type="primary" icon="el-icon-delete" @click="clearSearchEquiment">清空</el-button>
|
</div>
|
|
<div v-loading="equimentLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
|
element-loading-background="rgba(0, 0, 0, 0.5)" class="body">
|
<el-table :data="currentData" style="width: 100%"
|
:header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
|
:cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }">
|
<el-table-column label="序号" type="index" align="center">
|
<template slot-scope="scope">
|
<span>{{ (pages.current - 1) * pages.size + scope.$index + 1 }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column :show-overflow-tooltip="true" prop="name" label="设备名称"
|
min-width="320%"></el-table-column>
|
<el-table-column :show-overflow-tooltip="true" prop="channelId" label="通道编号"
|
min-width="160%"></el-table-column>
|
<el-table-column :show-overflow-tooltip="true" prop="deptName" label="所属派出所"
|
min-width="140%"></el-table-column>
|
<el-table-column label="设备状态">
|
<template slot-scope="scope">
|
<div class="state-box" :class="{ online: scope.row.status == '1' }"></div>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作">
|
<template slot-scope="scope">
|
<el-button @click="play(scope.row)" type="text" size="small" title="播放视频">
|
<i class="el-icon-video-play"></i>
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<div class="pages all-pagination-sty">
|
<el-pagination background layout="prev, pager, next, total" :total="searchData.length"
|
:page-size="pages.size" pager-count="3" :current-page="pages.current"
|
@current-change="handleCurrentChange"></el-pagination>
|
</div>
|
</div>
|
</el-dialog>
|
|
<play-video ref="videoBox"></play-video>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'assembleBox',
|
|
data () {
|
return {
|
equimentLoading: false,
|
tableData: [],
|
searchData: [],
|
dialogVisible: false,
|
dialogTile: '摄像头',
|
equimentSearchVal: '',
|
pages: {
|
size: 12,
|
current: 1
|
}
|
}
|
},
|
|
mounted () {
|
this.$nextTick(() => {
|
global.viewer.on(global.DC.MouseEventType.CLICK, this.viewerClick)
|
})
|
},
|
|
computed: {
|
currentData () {
|
return this.searchData.filter((item, index) =>
|
index >= (this.pages.current - 1) * this.pages.size && index < this.pages.current * this.pages.size
|
)
|
}
|
},
|
|
methods: {
|
/**
|
* @description: viewer点击
|
* @param {*} e
|
* @return {*}
|
*/
|
viewerClick (e) {
|
const that = this
|
let layerName
|
if (e.target && e.target != undefined && e.target.id && e.target.id.length) {
|
if (this.$route.path == '/layout/video/list') {
|
layerName = 'treeValAllLayer'
|
} else {
|
layerName = 'homeCameraLayers'
|
}
|
|
this.$EventBus.$emit('getOverLayerID', {
|
layerName,
|
ids: e.target.id,
|
cb (data) {
|
that.tableData = data
|
that.searchData = []
|
that.pages.current = 1
|
that.dialogVisible = true
|
that.equimentLoading = true
|
setTimeout(() => {
|
that.searchData = data
|
that.equimentLoading = false
|
}, 500)
|
}
|
})
|
}
|
},
|
|
/**
|
* @description: 弹窗关闭
|
* @return {*}
|
*/
|
beforClose () {
|
this.equimentSearchVal = ''
|
this.tableData = []
|
this.searchData = []
|
this.dialogVisible = false
|
},
|
|
/**
|
* @description: 视频播放
|
* @return {*}
|
*/
|
|
// 设备的视频播放
|
play (row) {
|
this.$refs.videoBox.play(row)
|
},
|
|
/**
|
* @description: 分页切换
|
* @return {*}
|
*/
|
handleCurrentChange (e) {
|
this.pages.current = e
|
},
|
|
|
searchEquiment () {
|
this.equimentLoading = true
|
this.pages.current = 1
|
setTimeout(() => {
|
this.equimentLoading = false
|
this.searchData = this.tableData.filter(item => item.name.indexOf(this.equimentSearchVal.trim()) != -1)
|
}, 500)
|
},
|
|
|
clearSearchEquiment () {
|
this.equimentLoading = true
|
this.equimentSearchVal = ''
|
setTimeout(() => {
|
this.equimentLoading = false
|
this.searchData = this.tableData
|
}, 500)
|
}
|
},
|
|
destory () {
|
this.equimentLoading = false
|
this.dialogVisible = false
|
global.viewer.off(global.DC.MouseEventType.CLICK, this.viewerClick)
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped></style>
|
