XW-AIOT/wvp-platform
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

调整菜单结构，增加通道列表，支持节点搜索

Browse Source
This commit is contained in:
lin
2025-07-02 17:21:20 +08:00
parent e194c027cb
commit 8d488b33e9
44 changed files with 2865 additions and 249 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
web/src/api/group.js
View File

@@ -48,3 +48,15 @@ export function getPath(params) {
}
})
}
export function queryTree(params) {
const { page, count, query } = params
return request({
method: 'get',
url: `/api/group/tree/query`,
params: {
query: query,
page: page,
count: count
}
})
}

12
web/src/api/region.js
View File

@@ -81,4 +81,16 @@ export function queryPath(deviceId) {
}
})
}
export function queryTree(params) {
const { page, count, query } = params
return request({
method: 'get',
url: `/api/region/tree/query`,
params: {
query: query,
page: page,
count: count
}
})
}

1
web/src/icons/svg/devices.svg Normal file
View File

@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1751337772774" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19666" id="mx_n_1751337772775" xmlns:xlink="http://www.w3.org/1999/xlink" ><path d="M793.6 128a38.4 38.4 0 0 1 38.4 38.4v46.912h110.912a38.4 38.4 0 0 1 38.4 38.4V806.4a38.4 38.4 0 0 1-38.4 38.4L832 844.736v46.976a38.4 38.4 0 0 1-38.4 38.4H238.912a38.4 38.4 0 0 1-38.4-38.4V844.8L89.6 844.8a38.4 38.4 0 0 1-38.4-38.4V251.712a38.4 38.4 0 0 1 38.4-38.4h110.912V166.4a38.4 38.4 0 0 1 38.4-38.4H793.6z m-38.4 76.8H277.248v648.512H755.2V204.8zM200.448 290.112H128V768h72.512V290.112z m704 0H832V768h72.512V290.112z m-443.392 103.04l192 128a35.2 35.2 0 0 1 0 58.56l-192 128a35.2 35.2 0 0 1-54.72-29.312v-256c0-28.16 31.36-44.864 54.72-29.312z m15.68 94.976v124.48L570.112 550.4 476.8 488.128z" p-id="19667"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 964 B

1
web/src/icons/svg/devices1.svg Normal file
View File

@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1751336642026" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4525" xmlns:xlink="http://www.w3.org/1999/xlink" ><path d="M185.6 723.2v89.6h652.8v-89.6H185.6z m-6.4-64h665.6c31.7952 0 57.6 25.8048 57.6 57.6v102.4c0 31.7952-25.8048 57.6-57.6 57.6h-665.6A57.6 57.6 0 0 1 121.6 819.2v-102.4c0-31.7952 25.8048-57.6 57.6-57.6zM185.6 211.2v294.4h448v-294.4h-448zM179.2 147.2h460.8c31.7952 0 57.6 25.8048 57.6 57.6v307.2c0 31.7952-25.8048 57.6-57.6 57.6h-460.8A57.6 57.6 0 0 1 121.6 512V204.8c0-31.7952 25.8048-57.6 57.6-57.6z" p-id="4526"></path><path d="M697.6 415.4368l140.8 70.4V230.912l-140.8 70.4v114.0736z m121.4464-246.3232a57.6 57.6 0 0 1 83.3536 51.5072v275.5584a57.6 57.6 0 0 1-83.3536 51.5072l-185.4464-92.672V261.7856l185.4464-92.7232z" fill="#5A5A68" p-id="4527"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 971 B

8
web/src/layout/components/TagsView/index.vue
View File

@@ -17,10 +17,10 @@
</router-link>
</scroll-pane>
<ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
<li @click="refreshSelectedTag(selectedTag)">Refresh</li>
<li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">Close</li>
<li @click="closeOthersTags">Close Others</li>
<li @click="closeAllTags(selectedTag)">Close All</li>
<li @click="refreshSelectedTag(selectedTag)">刷新</li>
<li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">关闭</li>
<li @click="closeOthersTags">关闭其他</li>
<li @click="closeAllTags(selectedTag)">关闭所有</li>
</ul>
</div>
</template>

40
web/src/router/index.js
View File

@@ -66,14 +66,25 @@ export const constantRoutes = [
meta: { title: '分屏监控', icon: 'live' }
}]
},
{
path: '/channel',
component: Layout,
redirect: '/channel',
children: [{
path: '',
name: 'Channel',
component: () => import('@/views/channel/index'),
meta: {title: '通道列表', icon: 'channelManger'}
}]
},
{
path: '/device',
component: Layout,
redirect: '/device',
onlyIndex: 0,
name: '设备接入',
meta: { title: '设备接入', icon: 'devices' },
children: [
{
path: '',
path: '/device',
name: 'Device',
component: () => import('@/views/device/index'),
meta: { title: '国标设备', icon: 'device' }
@@ -82,30 +93,15 @@ export const constantRoutes = [
path: '/device/record/:deviceId/:channelDeviceId',
name: 'DeviceRecord',
component: () => import('@/views/device/channel/record'),
meta: { title: '国标录像' }
}
]
},
{
path: '/push',
component: Layout,
redirect: '/push',
children: [
},
{
path: '',
path: '/push',
name: 'PushList',
component: () => import('@/views/streamPush/index'),
meta: { title: '推流列表', icon: 'streamPush' }
}
]
},
{
path: '/proxy',
component: Layout,
redirect: '/proxy',
children: [
},
{
path: '',
path: '/proxy',
name: 'Proxy',
component: () => import('@/views/streamProxy/index'),
meta: { title: '拉流代理', icon: 'streamProxy' }

237
web/src/store/modules/commonChanel.js
View File

@@ -15,7 +15,22 @@ import {
clearUnusualCivilCodeList,
getIndustryList,
getTypeList,
getNetworkIdentificationList, playChannel, addToRegion, deleteFromRegion, addToGroup, deleteFromGroup
getNetworkIdentificationList, playChannel, addToRegion, deleteFromRegion, addToGroup, deleteFromGroup, getList,
addPointForCruise,
addPreset, auxiliary,
callPreset,
deletePointForCruise,
deletePreset, focus, iris, ptz,
queryPreset,
setCruiseSpeed,
setCruiseTime,
setLeftForScan,
setRightForScan,
setSpeedForScan,
startCruise,
startScan,
stopCruise,
stopScan, wiper, getAllForMap
} from '@/api/commonChannel'
const actions = {
@@ -238,6 +253,226 @@ const actions = {
reject(error)
})
})
},
getList({ commit }, param) {
return new Promise((resolve, reject) => {
getList(param).then(response => {
const { data } = response
resolve(data)
}).catch(error => {
reject(error)
})
})
},
setSpeedForScan({ commit }, params) {
return new Promise((resolve, reject) => {
setSpeedForScan(params).then(response => {
const { data } = response
resolve(data)
}).catch(error => {
reject(error)
})
})
},
setLeftForScan({ commit }, params) {
return new Promise((resolve, reject) => {
setLeftForScan(params).then(response => {
const { data } = response
resolve(data)
}).catch(error => {
reject(error)
})
})
},
setRightForScan({ commit }, params) {
return new Promise((resolve, reject) => {
setRightForScan(params).then(response => {
const { data } = response
resolve(data)
}).catch(error => {
reject(error)
})
})
},
startScan({ commit }, params) {
return new Promise((resolve, reject) => {
startScan(params).then(response => {
const { data } = response
resolve(data)
}).catch(error => {
reject(error)
})
})
},
stopScan({ commit }, params) {
return new Promise((resolve, reject) => {
stopScan(params).then(response => {
const { data } = response
resolve(data)
}).catch(error => {
reject(error)
})
})
},
addPointForCruise({ commit }, params) {
return new Promise((resolve, reject) => {
addPointForCruise(params).then(response => {
const { data } = response
resolve(data)
}).catch(error => {
reject(error)
})
})
},
deletePointForCruise({ commit }, params) {
return new Promise((resolve, reject) => {
deletePointForCruise(params).then(response => {
const { data } = response
resolve(data)
}).catch(error => {
reject(error)
})
})
},
setCruiseSpeed({ commit }, params) {
return new Promise((resolve, reject) => {
setCruiseSpeed(params).then(response => {
const { data } = response
resolve(data)
}).catch(error => {
reject(error)
})
})
},
setCruiseTime({ commit }, params) {
return new Promise((resolve, reject) => {
setCruiseTime(params).then(response => {
const { data } = response
resolve(data)
}).catch(error => {
reject(error)
})
})
},
startCruise({ commit }, params) {
return new Promise((resolve, reject) => {
startCruise(params).then(response => {
const { data } = response
resolve(data)
}).catch(error => {
reject(error)
})
})
},
stopCruise({ commit }, params) {
return new Promise((resolve, reject) => {
stopCruise(params).then(response => {
const { data } = response
resolve(data)
}).catch(error => {
reject(error)
})
})
},
addPreset({ commit }, params) {
return new Promise((resolve, reject) => {
addPreset(params).then(response => {
const { data } = response
resolve(data)
}).catch(error => {
reject(error)
})
})
},
queryPreset({ commit }, params) {
return new Promise((resolve, reject) => {
queryPreset(params).then(response => {
const { data } = response
resolve(data)
}).catch(error => {
reject(error)
})
})
},
callPreset({ commit }, params) {
return new Promise((resolve, reject) => {
callPreset(params).then(response => {
const { data } = response
resolve(data)
}).catch(error => {
reject(error)
})
})
},
deletePreset({ commit }, params) {
return new Promise((resolve, reject) => {
deletePreset(params).then(response => {
const { data } = response
resolve(data)
}).catch(error => {
reject(error)
})
})
},
auxiliary({ commit }, params) {
return new Promise((resolve, reject) => {
auxiliary(params).then(response => {
const { data } = response
resolve(data)
}).catch(error => {
reject(error)
})
})
},
wiper({ commit }, params) {
return new Promise((resolve, reject) => {
wiper(params).then(response => {
const { data } = response
resolve(data)
}).catch(error => {
reject(error)
})
})
},
ptz({ commit }, params) {
return new Promise((resolve, reject) => {
ptz(params).then(response => {
const { data } = response
resolve(data)
}).catch(error => {
reject(error)
})
})
},
iris({ commit }, params) {
return new Promise((resolve, reject) => {
iris(params).then(response => {
const { data } = response
resolve(data)
}).catch(error => {
reject(error)
})
})
},
focus({ commit }, params) {
return new Promise((resolve, reject) => {
focus(params).then(response => {
const { data } = response
resolve(data)
}).catch(error => {
reject(error)
})
})
},
getAllForMap({ commit }, params) {
return new Promise((resolve, reject) => {
getAllForMap(params).then(response => {
const { data } = response
resolve(data)
}).catch(error => {
reject(error)
})
})
}
}

12
web/src/store/modules/group.js
View File

@@ -1,7 +1,7 @@
import {
getTreeList,
update,
add, deleteGroup, getPath
add, deleteGroup, getPath, queryTree
} from '@/api/group'
const actions = {
@@ -54,6 +54,16 @@ const actions = {
reject(error)
})
})
},
queryTree({ commit }, param) {
return new Promise((resolve, reject) => {
queryTree(param).then(response => {
const { data } = response
resolve(data)
}).catch(error => {
reject(error)
})
})
}
}

12
web/src/store/modules/region.js
View File

@@ -6,7 +6,7 @@ import {
queryChildListInBase,
update,
add,
queryPath
queryPath, queryTree
} from '@/api/region'
const actions = {
@@ -89,6 +89,16 @@ const actions = {
reject(error)
})
})
},
queryTree({ commit }, param) {
return new Promise((resolve, reject) => {
queryTree(param).then(response => {
const { data } = response
resolve(data)
}).catch(error => {
reject(error)
})
})
}
}

30
web/src/views/channel/edit.vue Normal file
View File

@@ -0,0 +1,30 @@
<template>
<div id="ChannelEdit" v-loading="locading" style="width: 100%">
<div class="page-header">
<div class="page-title">
<el-page-header content="编辑通道" @back="close" />
</div>
</div>
<CommonChannelEdit :id="id" ref="commonChannelEdit" :save-success="close" :cancel="close" />
</div>
</template>
<script>
import CommonChannelEdit from '../common/CommonChannelEdit'
export default {
name: 'ChannelEdit',
components: {
CommonChannelEdit
},
props: ['id', 'closeEdit'],
data() {
return {}
},
methods: {
close: function() {
this.closeEdit()
}
}
}
</script>

8
web/src/views/channel/group/index.vue
View File

@@ -4,7 +4,7 @@
ref="groupTree"
:show-header="true"
:edit="true"
:click-event="treeNodeClickEvent"
@clickEvent="treeNodeClickEvent"
:on-channel-change="onChannelChange"
:enable-add-channel="true"
:add-channel-to-group="addChannelToGroup"
@@ -20,7 +20,7 @@
<div style="float: right;">
<el-form-item label="搜索">
<el-input
v-model="searchSrt"
v-model="searchStr"
style="margin-right: 1rem; width: 10rem; "
placeholder="关键字"
prefix-icon="el-icon-search"
@@ -132,7 +132,7 @@ export default {
data() {
return {
channelList: [],
searchSrt: '',
searchStr: '',
channelType: '',
online: '',
hasGroup: 'false',
@@ -170,7 +170,7 @@ export default {
this.$store.dispatch('commonChanel/getParentList', {
page: this.currentPage,
count: this.count,
query: this.searchSrt,
query: this.searchStr,
online: this.online,
channelType: this.channelType,
groupDeviceId: this.groupDeviceId

439
web/src/views/channel/index.vue Executable file
View File

@@ -0,0 +1,439 @@
<template>
<div id="channelList" class="app-container" style="height: calc(100vh - 124px);">
<div v-if="!editId" style="height: 100%">
<el-form :inline="true" size="mini">
<el-form-item label="搜索">
<el-input
v-model="searchStr"
style="margin-right: 1rem; width: auto;"
placeholder="关键字"
prefix-icon="el-icon-search"
clearable
@input="search"
/>
</el-form-item>
<el-form-item label="在线状态">
<el-select
v-model="online"
style="width: 8rem; margin-right: 1rem;"
placeholder="请选择"
default-first-option
@change="search"
>
<el-option label="全部" value="" />
<el-option label="在线" value="true" />
<el-option label="离线" value="false" />
</el-select>
</el-form-item>
<el-form-item label="类型">
<el-select
v-model="channelType"
style="width: 8rem; margin-right: 1rem;"
placeholder="请选择"
default-first-option
@change="getChannelList"
>
<el-option label="全部" value="" />
<el-option v-for="item in Object.values($channelTypeList)" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item style="float: right;">
<el-button icon="el-icon-refresh-right" circle @click="refresh()" title="刷新表格"/>
</el-form-item>
</el-form>
<el-table
ref="channelListTable"
size="small"
:data="channelList"
height="calc(100% - 64px)"
style="width: 100%; font-size: 12px;"
header-row-class-name="table-header"
>
<el-table-column prop="gbName" label="名称" min-width="180" />
<el-table-column prop="gbDeviceId" label="编号" min-width="180" />
<el-table-column prop="gbManufacturer" label="厂家" min-width="100" />
<el-table-column label="类型" min-width="100">
<template v-slot:default="scope">
<div slot="reference" class="name-wrapper">
<el-tag size="medium" effect="plain" type="success" :style="$channelTypeList[scope.row.dataType].style">{{ $channelTypeList[scope.row.dataType].name }}</el-tag>
</div>
</template>
</el-table-column>
<el-table-column label="位置信息" min-width="150">
<template v-slot:default="scope">
<span v-if="scope.row.gbLongitude && scope.row.gbLatitude">{{ scope.row.gbLongitude }}<br>{{ scope.row.gbLatitude }}</span>
<span v-if="!scope.row.gbLongitude || !scope.row.gbLatitude">无</span>
</template>
</el-table-column>
<el-table-column prop="ptzType" label="云台类型" min-width="100">
<template v-slot:default="scope">
<div>{{ scope.row.ptzTypeText }}</div>
</template>
</el-table-column>
<el-table-column label="状态" min-width="100">
<template v-slot:default="scope">
<div slot="reference" class="name-wrapper">
<el-tag v-if="scope.row.gbStatus === 'ON'" size="medium">在线</el-tag>
<el-tag v-if="scope.row.gbStatus !== 'ON'" size="medium" type="info">离线</el-tag>
</div>
</template>
</el-table-column>
<el-table-column label="操作" min-width="210" fixed="right">
<template v-slot:default="scope">
<el-button
size="medium"
:disabled="scope.row.gbStatus !== 'ON'"
icon="el-icon-video-play"
type="text"
:loading="scope.row.playLoading"
@click="sendDevicePush(scope.row)"
>播放
</el-button>
<el-button
v-if="!!scope.row.streamId"
size="medium"
:disabled="device == null || device.online === 0"
icon="el-icon-switch-button"
type="text"
style="color: #f56c6c"
@click="stopDevicePush(scope.row)"
>停止
</el-button>
<el-divider direction="vertical" />
<el-button
size="medium"
type="text"
icon="el-icon-edit"
v-if="$store.getters.authority !== 2"
@click="handleEdit(scope.row)"
>
编辑
</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
style="text-align: right"
:current-page="currentPage"
:page-size="count"
:page-sizes="[15, 25, 35, 50]"
layout="total, sizes, prev, pager, next"
:total="total"
@size-change="handleSizeChange"
@current-change="currentChange"
/>
</div>
<devicePlayer ref="devicePlayer" />
<channel-edit v-if="editId" :id="editId" :close-edit="closeEdit" />
</div>
</template>
<script>
import devicePlayer from '@/views/common/channelPlayer/index.vue'
import Edit from './edit.vue'
export default {
name: 'ChannelList',
components: {
devicePlayer,
ChannelEdit: Edit
},
props: {
defaultPage: {
type: Number,
default: 1
},
defaultCount: {
type: Number,
default: 15
}
},
computed: {
excelName(){
return '通道列表-' + this.currentPage
}
},
data() {
return {
device: null,
channelList: [],
excelFields: {
名称: 'gbName',
编号: 'gbDeviceId',
厂家: 'gbManufacturer',
类型: {
field: 'dataType',
callback: (value) => {
return this.$channelTypeList[value].name
}
},
经度: 'gbLongitude',
纬度: 'gbLatitude',
云台类型: 'ptzTypeText',
状态: {
field: 'gbStatus',
callback: (value) => {
return value === 'ON' ? '在线' : '离线'
}
}
},
videoComponentList: [],
currentPlayerInfo: {}, // 当前播放对象
updateLooper: 0, // 数据刷新轮训标志
searchStr: '',
channelType: '',
online: '',
subStream: '',
winHeight: window.innerHeight - 200,
currentPage: this.defaultPage | 1,
count: this.defaultCount | 15,
total: 0,
beforeUrl: '/device',
editId: null,
}
},
mounted() {
this.initData()
},
destroyed() {
this.$destroy('videojs')
clearTimeout(this.updateLooper)
},
methods: {
initData: function() {
this.getChannelList()
},
initParam: function() {
this.currentPage = 1
this.count = 15
},
currentChange: function(val) {
this.currentPage = val
this.initData()
},
handleSizeChange: function(val) {
this.count = val
this.getChannelList()
},
getChannelList: function() {
this.$store.dispatch('commonChanel/getList', {
page: this.currentPage,
count: this.count,
query: this.searchStr,
online: this.online,
channelType: this.channelType
}).then(data => {
this.total = data.total
this.channelList = data.list
this.channelList.forEach(e => {
e.ptzType = e.ptzType + ''
this.$set(e, 'playLoading', false)
})
// 防止出现表格错位
this.$nextTick(() => {
this.$refs.channelListTable.doLayout()
})
})
},
// 通知设备上传媒体流
sendDevicePush: function(itemData) {
itemData.playLoading = true
this.$store.dispatch('commonChanel/playChannel', itemData.gbId)
.then((data) => {
itemData.streamId = data.stream
this.$refs.devicePlayer.openDialog('media', itemData.gbId, {
streamInfo: data,
hasAudio: itemData.hasAudio
})
setTimeout(() => {
this.initData()
}, 1000)
}).finally(() => {
itemData.playLoading = false
})
},
queryRecords: function(itemData) {
const deviceId = this.deviceId
const channelId = itemData.deviceId
this.$router.push(`/device/record/${deviceId}/${channelId}`)
},
queryCloudRecords: function(itemData) {
const deviceId = this.deviceId
const channelId = itemData.deviceId
this.$router.push(`/cloudRecord/detail/rtp/${deviceId}_${channelId}`)
},
startRecord: function(itemData) {
this.$store.dispatch('device/deviceRecord', {
deviceId: this.deviceId,
channelId: itemData.deviceId,
recordCmdStr: 'Record'
}).then(data => {
this.$message.success({
showClose: true,
message: '开始录像成功'
})
}).catch((error) => {
this.$message.error({
showClose: true,
message: error.message
})
})
},
stopRecord: function(itemData) {
this.$store.dispatch('device/deviceRecord', {
deviceId: this.deviceId,
channelId: itemData.deviceId,
recordCmdStr: 'StopRecord'
}).then(data => {
this.$message.success({
showClose: true,
message: '停止录像成功'
})
}).catch((error) => {
this.$message.error({
showClose: true,
message: error.message
})
})
},
stopDevicePush: function(itemData) {
this.$store.dispatch('play/stop', [itemData.deviceId]).then(data => {
this.initData()
}).catch((error) => {
if (error.response.status === 402) { // 已经停止过
this.initData()
} else {
console.log(error)
}
})
},
getSnap: function(row) {
const baseUrl = window.baseUrl ? window.baseUrl : ''
return ((process.env.NODE_ENV === 'development') ? process.env.VUE_APP_BASE_API : baseUrl) + '/api/device/query/snap/' + this.deviceId + '/' + row.deviceId
},
getBigSnap: function(row) {
return [this.getSnap(row)]
},
getSnapErrorEvent: function(deviceId, channelId) {
if (typeof (this.loadSnap[deviceId + channelId]) !== 'undefined') {
console.log('下载截图' + this.loadSnap[deviceId + channelId])
if (this.loadSnap[deviceId + channelId] > 5) {
delete this.loadSnap[deviceId + channelId]
return
}
setTimeout(() => {
const url = (process.env.NODE_ENV === 'development' ? 'debug' : '') + '/api/device/query/snap/' + deviceId + '/' + channelId
this.loadSnap[deviceId + channelId]++
document.getElementById(deviceId + channelId).setAttribute('src', url + '?' + new Date().getTime())
}, 1000)
}
},
showDevice: function() {
// this.$router.push(this.beforeUrl).then(() => {
// this.initParam()
// this.initData()
// })
this.$emit('show-device')
},
changeSubchannel(itemData) {
this.beforeUrl = this.$router.currentRoute.path
var url = `/${this.$router.currentRoute.name}/${this.$router.currentRoute.params.deviceId}/${itemData.deviceId}`
this.$router.push(url).then(() => {
this.searchStr = ''
this.channelType = ''
this.online = ''
this.initParam()
this.initData()
})
},
showSubChannels: function() {
this.$store.dispatch('device/querySubChannels', [
{
page: this.currentPage,
count: this.count,
query: this.searchStr,
online: this.online,
channelType: this.channelType
},
this.deviceId,
this.parentChannelId
])
.then(data => {
this.total = data.total
this.channelList = data.list
this.channelList.forEach(e => {
e.ptzType = e.ptzType + ''
})
// 防止出现表格错位
this.$nextTick(() => {
this.$refs.channelListTable.doLayout()
})
})
},
search: function() {
this.currentPage = 1
this.total = 0
this.initData()
},
updateChannel: function(row) {
this.$store.dispatch('device/changeChannelAudio', {
channelId: row.gbId,
audio: row.hasAudio
})
},
subStreamChange: function() {
this.$confirm('确定重置所有通道的码流类型?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$store.dispatch('device/updateChannelStreamIdentification', {
deviceDbId: this.device.id,
streamIdentification: this.subStream
})
.then(data => {
this.initData()
})
.finally(() => {
this.subStream = ''
})
}).catch(() => {
this.subStream = ''
})
},
channelSubStreamChange: function(row) {
this.$store.dispatch('device/updateChannelStreamIdentification', {
deviceDbId: row.deviceDbId,
id: row.id,
streamIdentification: row.streamIdentification
})
.then(data => {
this.initData()
})
.finally(() => {
this.subStream = ''
})
},
refresh: function() {
this.initData()
},
// 编辑
handleEdit(row) {
console.log(row)
this.editId = row.gbId
},
// 结束编辑
closeEdit: function() {
this.editId = null
this.getChannelList()
}
}
}
</script>

8
web/src/views/channel/region/index.vue
View File

@@ -4,7 +4,7 @@
ref="regionTree"
:show-header="true"
:edit="true"
:click-event="treeNodeClickEvent"
@clickEvent="treeNodeClickEvent"
:on-channel-change="onChannelChange"
:enable-add-channel="true"
:add-channel-to-civil-code="addChannelToCivilCode"
@@ -20,7 +20,7 @@
<div style="float: right;">
<el-form-item label="搜索">
<el-input
v-model="searchSrt"
v-model="searchStr"
style="width: 10rem; margin-right: 1rem;"
placeholder="关键字"
prefix-icon="el-icon-search"
@@ -130,7 +130,7 @@ export default {
data() {
return {
channelList: [],
searchSrt: '',
searchStr: '',
channelType: '',
online: '',
currentPage: 1,
@@ -166,7 +166,7 @@ export default {
this.$store.dispatch('commonChanel/getCivilCodeList', {
page: this.currentPage,
count: this.count,
query: this.searchSrt,
query: this.searchStr,
online: this.online,
channelType: this.channelType,
civilCode: this.regionDeviceId

16
web/src/views/common/DeviceTree.vue
View File

@@ -1,5 +1,5 @@
<template>
<div id="DeviceTree" class="device-tree-container">
<div id="DeviceTree" class="device-tree-container" style="height: 100%">
<div class="device-tree-header">
<div class="header-title">通道列表</div>
<div class="header-switch">
@@ -20,7 +20,7 @@
:edit="false"
:show-header="false"
:has-channel="true"
:click-event="treeNodeClickEvent"
@clickEvent="treeNodeClickEvent"
:default-expanded-keys="[]"
/>
<GroupTree
@@ -29,7 +29,7 @@
:edit="false"
:show-header="false"
:has-channel="true"
:click-event="treeNodeClickEvent"
@clickEvent="treeNodeClickEvent"
:default-expanded-keys="[]"
/>
</div>
@@ -53,10 +53,6 @@ export default {
type: Boolean,
default: false
},
clickEvent: {
type: Function,
default: null
},
contextMenuEvent: {
type: Function,
default: null
@@ -137,11 +133,7 @@ export default {
},
treeNodeClickEvent: function(data) {
if (data.leaf) {
console.log(23111)
console.log(data)
if (this.clickEvent) {
this.clickEvent(data.id)
}
this.$emit('clickEvent', data.id)
}
}
}

146
web/src/views/common/GroupTree.vue
View File

@@ -1,24 +1,14 @@
<template>
<div id="DeviceTree" style="border-right: 1px solid #EBEEF5; padding: 0 20px">
<div v-if="showHeader" class="page-header">
<el-form :inline="true" size="mini">
<el-form-item style="visibility: hidden">
<el-input
v-model="searchSrt"
style="margin-right: 1rem; width: 12rem;"
size="mini"
placeholder="关键字"
prefix-icon="el-icon-search"
clearable
@input="search"
/>
</el-form-item>
<el-form-item label="显示编号">
<el-checkbox v-model="showCode" />
</el-form-item>
</el-form>
<div id="groupTree" style="border-right: 1px solid #EBEEF5; height: 100%">
<div style="padding: 0 20px 0 10px;">
<el-input size="small" v-model="searchStr" @input="searchChange" suffix-icon="el-icon-search" placeholder="请输入搜索内容" clearable>
<!-- <el-select v-model="searchType" slot="prepend" placeholder="搜索类型" style="width: 80px">-->
<!-- <el-option label="目录" :value="0"></el-option>-->
<!-- <el-option label="通道" :value="1"></el-option>-->
<!-- </el-select>-->
</el-input>
</div>
<div>
<div v-if="!searchStr">
<el-alert
v-if="showAlert && edit"
title="操作提示"
@@ -26,6 +16,10 @@
type="info"
style="text-align: left"
/>
<div v-if="edit" style="float: right;margin-right: 24px;margin-top: 18px; font-size: 14px" >
显示编号： <el-checkbox v-model="showCode" />
</div>
<vue-easy-tree
ref="veTree"
class="flow-tree"
@@ -75,6 +69,49 @@
</template>
</vue-easy-tree>
</div>
<div v-if="searchStr" style="color: #606266; height: calc(100% - 32px); overflow: auto !important;">
<ul v-if="groupList.length > 0" style="list-style: none; margin: 0; padding: 10px">
<li v-for="item in groupList" :key="item.id" class="channel-list-li" style="height: 26px; align-items: center;cursor: pointer;" @click="listClickHandler(item)">
<span
v-if="chooseId !== item.deviceId"
style="color: #409EFF; font-size: 20px"
class="iconfont icon-bianzubeifen3"
/>
<span
v-if="chooseId === item.deviceId"
style="color: #c60135; font-size: 20px"
class="iconfont icon-bianzubeifen3"
/>
<div>
<div style="margin-left: 4px; margin-bottom: 3px; font-size: 15px">{{item.name}}</div>
<div style="margin-left: 4px; font-size: 13px; color: #808181">{{item.deviceId}}</div>
</div>
</li>
</ul>
<ul v-if="channelList.length > 0" style="list-style: none; margin: 0; padding: 10px; overflow: auto">
<li v-for="item in channelList" :key="item.id" class="channel-list-li" @click="channelLstClickHandler(item)">
<span
v-if="item.gbStatus === 'ON'"
style="color: #409EFF; font-size: 20px"
class="iconfont icon-shexiangtou2"
/>
<span
v-if="item.gbStatus !== 'ON'"
style="color: #808181; font-size: 20px"
class="iconfont icon-shexiangtou2"
/>
<div>
<div style="margin-left: 4px; margin-bottom: 3px; font-size: 15px">{{item.gbName}}</div>
<div style="margin-left: 4px; font-size: 13px; color: #808181">{{item.gbDeviceId}}</div>
</div>
</li>
</ul>
<div v-if="this.currentPage * this.count < this.total" style="text-align: center;">
<el-button type="text" @click="loadListMore">加载更多</el-button>
</div>
</div>
<groupEdit ref="groupEdit" />
<gbDeviceSelect ref="gbDeviceSelect" />
<gbChannelSelect ref="gbChannelSelect" data-type="group" />
@@ -93,7 +130,7 @@ export default {
GbChannelSelect,
VueEasyTree, groupEdit, gbDeviceSelect
},
props: ['edit', 'enableAddChannel', 'clickEvent', 'onChannelChange', 'showHeader', 'hasChannel', 'addChannelToGroup', 'treeHeight'],
props: ['edit', 'enableAddChannel', 'onChannelChange', 'showHeader', 'hasChannel', 'addChannelToGroup', 'treeHeight'],
data() {
return {
props: {
@@ -102,9 +139,14 @@ export default {
},
showCode: false,
showAlert: true,
searchSrt: '',
searchStr: '',
chooseId: '',
treeData: []
treeData: [],
currentPage: this.defaultPage | 1,
count: this.defaultCount | 15,
total: 0,
groupList: [],
channelList: []
}
},
created() {
@@ -118,8 +160,44 @@ export default {
// this.performance = "";
},
methods: {
search() {
searchChange() {
this.currentPage = 1
this.total = 0
if (this.edit) {
this.groupList = []
this.queryGroup()
}else {
this.channelList = []
this.queryChannelList()
}
},
loadListMore: function() {
this.currentPage += 1
if (this.edit) {
this.queryGroup()
}else {
this.queryChannelList()
}
},
queryGroup: function() {
this.$store.dispatch('group/queryTree', {
query: this.searchStr,
page: this.currentPage,
count: this.count
}).then(data => {
this.total = data.total
this.groupList = this.groupList.concat(data.list)
})
},
queryChannelList: function() {
this.$store.dispatch('commonChanel/getList', {
page: this.currentPage,
count: this.count,
query: this.searchStr
}).then(data => {
this.total = data.total
this.channelList = this.channelList.concat(data.list)
})
},
loadNode: function(node, resolve) {
if (node.level === 0) {
@@ -136,7 +214,7 @@ export default {
return
}
this.$store.dispatch('group/getTreeList', {
query: this.searchSrt,
query: this.searchStr,
parent: node.data.id,
hasChannel: this.hasChannel
}).then(data => {
@@ -144,6 +222,8 @@ export default {
this.showAlert = false
}
resolve(data)
}).finally(() => {
this.locading = false
})
}
},
@@ -348,9 +428,17 @@ export default {
},
nodeClickHandler: function(data, node, tree) {
this.chooseId = data.deviceId
if (this.clickEvent) {
this.clickEvent(data)
}
this.$emit('clickEvent', data)
},
listClickHandler: function(data) {
this.chooseId = data.deviceId
this.$emit('clickEvent', data)
},
channelLstClickHandler: function(data) {
this.$emit('clickEvent', {
leaf: true,
id: data.gbId
})
}
}
}
@@ -375,7 +463,7 @@ export default {
.flow-tree {
overflow: auto;
margin: 10px;
padding-top: 10px;
}
.flow-tree .vue-recycle-scroller__item-wrapper{
height: 100%;

159
web/src/views/common/RegionTree.vue
View File

@@ -1,24 +1,14 @@
<template>
<div id="DeviceTree" style="border-right: 1px solid #EBEEF5; padding: 0 20px">
<div v-if="showHeader" class="page-header">
<el-form :inline="true" size="mini">
<el-form-item style="visibility: hidden">
<el-input
v-model="searchSrt"
style="margin-right: 1rem; width: 12rem;"
size="mini"
placeholder="关键字"
prefix-icon="el-icon-search"
clearable
@input="search"
/>
</el-form-item>
<el-form-item label="显示编号">
<el-checkbox v-model="showCode" />
</el-form-item>
</el-form>
<div id="regionTree" style="border-right: 1px solid #EBEEF5; height: 100%">
<div style="padding: 0 20px 0 10px;">
<el-input size="small" v-model="searchStr" @input="searchChange" suffix-icon="el-icon-search" placeholder="请输入搜索内容" clearable>
<!-- <el-select v-model="searchType" slot="prepend" placeholder="搜索类型" style="width: 80px">-->
<!-- <el-option label="目录" :value="0"></el-option>-->
<!-- <el-option label="通道" :value="1"></el-option>-->
<!-- </el-select>-->
</el-input>
</div>
<div>
<div v-if="!searchStr">
<el-alert
v-if="showAlert && edit"
title="操作提示"
@@ -26,6 +16,10 @@
type="info"
style="text-align: left"
/>
<div v-if="edit" style="float: right;margin-right: 24px;margin-top: 18px; font-size: 14px" >
显示编号： <el-checkbox v-model="showCode" />
</div>
<vue-easy-tree
ref="veTree"
class="flow-tree"
@@ -75,6 +69,49 @@
</template>
</vue-easy-tree>
</div>
<div v-if="searchStr" style="color: #606266; height: calc(100% - 32px); overflow: auto !important;">
<ul v-if="regionList.length > 0" style="list-style: none; margin: 0; padding: 10px">
<li v-for="item in regionList" :key="item.id" class="channel-list-li" style="height: 26px; align-items: center;cursor: pointer;" @click="listClickHandler(item)">
<span
v-if="chooseId !== item.deviceId"
style="color: #409EFF; font-size: 20px"
class="iconfont icon-bianzubeifen3"
/>
<span
v-if="chooseId === item.deviceId"
style="color: #c60135; font-size: 20px"
class="iconfont icon-bianzubeifen3"
/>
<div>
<div style="margin-left: 4px; margin-bottom: 3px; font-size: 15px">{{item.name}}</div>
<div style="margin-left: 4px; font-size: 13px; color: #808181">{{item.deviceId}}</div>
</div>
</li>
</ul>
<ul v-if="channelList.length > 0" style="list-style: none; margin: 0; padding: 10px; overflow: auto">
<li v-for="item in channelList" :key="item.id" class="channel-list-li" @click="channelLstClickHandler(item)">
<span
v-if="item.gbStatus === 'ON'"
style="color: #409EFF; font-size: 20px"
class="iconfont icon-shexiangtou2"
/>
<span
v-if="item.gbStatus !== 'ON'"
style="color: #808181; font-size: 20px"
class="iconfont icon-shexiangtou2"
/>
<div>
<div style="margin-left: 4px; margin-bottom: 3px; font-size: 15px">{{item.gbName}}</div>
<div style="margin-left: 4px; font-size: 13px; color: #808181">{{item.gbDeviceId}}</div>
</div>
</li>
</ul>
<div v-if="this.currentPage * this.count < this.total" style="text-align: center;">
<el-button type="text" @click="loadListMore">加载更多</el-button>
</div>
</div>
<regionEdit ref="regionEdit" />
<gbDeviceSelect ref="gbDeviceSelect" />
<GbChannelSelect ref="gbChannelSelect" data-type="civilCode" />
@@ -86,6 +123,7 @@ import VueEasyTree from '@wchbrad/vue-easy-tree'
import regionEdit from './../dialog/regionEdit'
import gbDeviceSelect from './../dialog/GbDeviceSelect'
import GbChannelSelect from '../dialog/GbChannelSelect.vue'
import chooseCivilCode from '@/views/dialog/chooseCivilCode.vue'
export default {
name: 'DeviceTree',
@@ -93,17 +131,24 @@ export default {
GbChannelSelect,
VueEasyTree, regionEdit, gbDeviceSelect
},
props: ['edit', 'enableAddChannel', 'clickEvent', 'onChannelChange', 'showHeader', 'hasChannel', 'addChannelToCivilCode', 'treeHeight'],
props: ['edit', 'enableAddChannel', 'onChannelChange', 'showHeader', 'hasChannel', 'addChannelToCivilCode', 'treeHeight'],
data() {
return {
props: {
label: 'name'
label: 'name',
children: 'children'
},
searchType: 0,
showCode: false,
showAlert: true,
searchSrt: '',
searchStr: '',
chooseId: '',
treeData: []
treeData: [],
currentPage: this.defaultPage | 1,
count: this.defaultCount | 15,
total: 0,
regionList: [],
channelList: []
}
},
created() {
@@ -117,8 +162,44 @@ export default {
// this.performance = "";
},
methods: {
search() {
searchChange() {
this.currentPage = 1
this.total = 0
if (this.edit) {
this.regionList = []
this.queryRegion()
}else {
this.channelList = []
this.queryChannelList()
}
},
loadListMore: function() {
this.currentPage += 1
if (this.edit) {
this.queryRegion()
}else {
this.queryChannelList()
}
},
queryRegion: function() {
this.$store.dispatch('region/queryTree', {
query: this.searchStr,
page: this.currentPage,
count: this.count
}).then(data => {
this.total = data.total
this.regionList = this.regionList.concat(data.list)
})
},
queryChannelList: function() {
this.$store.dispatch('commonChanel/getList', {
page: this.currentPage,
count: this.count,
query: this.searchStr
}).then(data => {
this.total = data.total
this.channelList = this.channelList.concat(data.list)
})
},
loadNode: function(node, resolve) {
if (node.level === 0) {
@@ -135,7 +216,7 @@ export default {
return
}
this.$store.dispatch('region/getTreeList', {
query: this.searchSrt,
query: this.searchStr,
parent: node.data.id,
hasChannel: this.hasChannel
})
@@ -158,7 +239,6 @@ export default {
if (!this.edit) {
return
}
console.log(node.level)
if (node.data.type === 0) {
const menuItem = [
{
@@ -349,9 +429,17 @@ export default {
},
nodeClickHandler: function(data, node, tree) {
this.chooseId = data.deviceId
if (this.clickEvent) {
this.clickEvent(data)
}
this.$emit('clickEvent', data)
},
listClickHandler: function(data) {
this.chooseId = data.deviceId
this.$emit('clickEvent', data)
},
channelLstClickHandler: function(data) {
this.$emit('clickEvent', {
leaf: true,
id: data.gbId
})
}
}
}
@@ -382,11 +470,18 @@ export default {
.flow-tree {
overflow: auto;
margin: 10px;
padding-top: 10px;
}
.flow-tree .vue-recycle-scroller__item-wrapper{
height: 100%;
overflow-x: auto;
}
.channel-list-li {
height: 24px;
align-items: center;
cursor: pointer;
display: grid;
grid-template-columns: 26px 1fr;
margin-bottom: 18px
}
</style>

899
web/src/views/common/channelPlayer/index.vue Executable file
View File

@@ -0,0 +1,899 @@
<template>
<div id="devicePlayer" v-loading="isLoging">
<el-dialog
v-if="showVideoDialog"
v-el-drag-dialog
title="视频播放"
top="0"
:close-on-click-modal="false"
:visible.sync="showVideoDialog"
@close="close()"
>
<div style="width: 100%; height: 100%">
<el-tabs
v-if="Object.keys(this.player).length > 1"
v-model="activePlayer"
type="card"
:stretch="true"
@tab-click="changePlayer"
>
<el-tab-pane label="Jessibuca" name="jessibuca">
<jessibucaPlayer
v-if="activePlayer === 'jessibuca'"
ref="jessibuca"
:visible.sync="showVideoDialog"
:video-url="videoUrl"
:error="videoError"
:message="videoError"
:has-audio="hasAudio"
fluent
autoplay
live
/>
</el-tab-pane>
<el-tab-pane label="WebRTC" name="webRTC">
<rtc-player
v-if="activePlayer === 'webRTC'"
ref="webRTC"
:visible.sync="showVideoDialog"
:video-url="videoUrl"
:error="videoError"
:message="videoError"
height="100px"
:has-audio="hasAudio"
fluent
autoplay
live
/>
</el-tab-pane>
<el-tab-pane label="h265web" name="h265web">
<h265web
v-if="activePlayer === 'h265web'"
ref="h265web"
:video-url="videoUrl"
:error="videoError"
:message="videoError"
:has-audio="hasAudio"
fluent
autoplay
live
:show-button="true"
/>
</el-tab-pane>
</el-tabs>
<jessibucaPlayer
v-if="Object.keys(this.player).length == 1 && this.player.jessibuca"
ref="jessibuca"
:visible.sync="showVideoDialog"
:video-url="videoUrl"
:error="videoError"
:message="videoError"
:has-audio="hasAudio"
fluent
autoplay
live
/>
<rtc-player
v-if="Object.keys(this.player).length == 1 && this.player.webRTC"
ref="jessibuca"
:visible.sync="showVideoDialog"
:video-url="videoUrl"
:error="videoError"
:message="videoError"
height="100px"
:has-audio="hasAudio"
fluent
autoplay
live
/>
<h265web
v-if="Object.keys(this.player).length == 1 && this.player.h265web"
ref="jessibuca"
:visible.sync="showVideoDialog"
:video-url="videoUrl"
:error="videoError"
:message="videoError"
height="100px"
:has-audio="hasAudio"
fluent
autoplay
live
/>
</div>
<div id="shared" style="text-align: right; margin-top: 1rem;">
<el-tabs v-model="tabActiveName" @tab-click="tabHandleClick">
<el-tab-pane label="实时视频" name="media">
<div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem;">
<span style="width: 5rem; line-height: 2.5rem; text-align: right;">播放地址：</span>
<el-input v-model="getPlayerShared.sharedUrl" :disabled="true">
<template slot="append">
<i
class="cpoy-btn el-icon-document-copy"
title="点击拷贝"
style="cursor: pointer"
@click="copyUrl(getPlayerShared.sharedUrl)"
/>
</template>
</el-input>
</div>
<div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem;">
<span style="width: 5rem; line-height: 2.5rem; text-align: right;">iframe：</span>
<el-input v-model="getPlayerShared.sharedIframe" :disabled="true">
<template slot="append">
<i
class="cpoy-btn el-icon-document-copy"
title="点击拷贝"
style="cursor: pointer"
@click="copyUrl(getPlayerShared.sharedIframe)"
/>
</template>
</el-input>
</div>
<div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem;">
<span style="width: 5rem; line-height: 2.5rem; text-align: right;">资源地址：</span>
<el-input v-model="getPlayerShared.sharedRtmp" :disabled="true">
<el-button
slot="append"
icon="el-icon-document-copy"
title="点击拷贝"
style="cursor: pointer"
@click="copyUrl(getPlayerShared.sharedIframe)"
/>
<el-dropdown v-if="streamInfo" slot="prepend" trigger="click" @command="copyUrl">
<el-button>
更多地址<i class="el-icon-arrow-down el-icon--right" />
</el-button>
<el-dropdown-menu>
<el-dropdown-item v-if="streamInfo.flv" :command="streamInfo.flv">
<el-tag>FLV:</el-tag>
<span>{{ streamInfo.flv }}</span>
</el-dropdown-item>
<el-dropdown-item v-if="streamInfo.https_flv" :command="streamInfo.https_flv">
<el-tag>FLV(https):</el-tag>
<span>{{ streamInfo.https_flv }}</span>
</el-dropdown-item>
<el-dropdown-item v-if="streamInfo.ws_flv" :command="streamInfo.ws_flv">
<el-tag>FLV(ws):</el-tag>
<span>{{ streamInfo.ws_flv }}</span>
</el-dropdown-item>
<el-dropdown-item v-if="streamInfo.wss_flv" :command="streamInfo.wss_flv">
<el-tag>FLV(wss):</el-tag>
<span>{{ streamInfo.wss_flv }}</span>
</el-dropdown-item>
<el-dropdown-item v-if="streamInfo.fmp4" :command="streamInfo.fmp4">
<el-tag>FMP4:</el-tag>
<span>{{ streamInfo.fmp4 }}</span>
</el-dropdown-item>
<el-dropdown-item v-if="streamInfo.https_fmp4" :command="streamInfo.https_fmp4">
<el-tag>FMP4(https):</el-tag>
<span>{{ streamInfo.https_fmp4 }}</span>
</el-dropdown-item>
<el-dropdown-item v-if="streamInfo.ws_fmp4" :command="streamInfo.ws_fmp4">
<el-tag>FMP4(ws):</el-tag>
<span>{{ streamInfo.ws_fmp4 }}</span>
</el-dropdown-item>
<el-dropdown-item v-if="streamInfo.wss_fmp4" :command="streamInfo.wss_fmp4">
<el-tag>FMP4(wss):</el-tag>
<span>{{ streamInfo.wss_fmp4 }}</span>
</el-dropdown-item>
<el-dropdown-item v-if="streamInfo.hls" :command="streamInfo.hls">
<el-tag>HLS:</el-tag>
<span>{{ streamInfo.hls }}</span>
</el-dropdown-item>
<el-dropdown-item v-if="streamInfo.https_hls" :command="streamInfo.https_hls">
<el-tag>HLS(https):</el-tag>
<span>{{ streamInfo.https_hls }}</span>
</el-dropdown-item>
<el-dropdown-item v-if="streamInfo.ws_hls" :command="streamInfo.ws_hls">
<el-tag>HLS(ws):</el-tag>
<span>{{ streamInfo.ws_hls }}</span>
</el-dropdown-item>
<el-dropdown-item v-if="streamInfo.wss_hls" :command="streamInfo.wss_hls">
<el-tag>HLS(wss):</el-tag>
<span>{{ streamInfo.wss_hls }}</span>
</el-dropdown-item>
<el-dropdown-item v-if="streamInfo.ts" :command="streamInfo.ts">
<el-tag>TS:</el-tag>
<span>{{ streamInfo.ts }}</span>
</el-dropdown-item>
<el-dropdown-item v-if="streamInfo.https_ts" :command="streamInfo.https_ts">
<el-tag>TS(https):</el-tag>
<span>{{ streamInfo.https_ts }}</span>
</el-dropdown-item>
<el-dropdown-item v-if="streamInfo.ws_ts" :command="streamInfo.ws_ts">
<el-tag>TS(ws):</el-tag>
<span>{{ streamInfo.ws_ts }}</span>
</el-dropdown-item>
<el-dropdown-item v-if="streamInfo.wss_ts" :command="streamInfo.wss_ts">
<el-tag>TS(wss):</el-tag>
<span>{{ streamInfo.wss_ts }}</span>
</el-dropdown-item>
<el-dropdown-item v-if="streamInfo.rtc" :command="streamInfo.rtc">
<el-tag>RTC:</el-tag>
<span>{{ streamInfo.rtc }}</span>
</el-dropdown-item>
<el-dropdown-item v-if="streamInfo.rtcs" :command="streamInfo.rtcs">
<el-tag>RTCS:</el-tag>
<span>{{ streamInfo.rtcs }}</span>
</el-dropdown-item>
<el-dropdown-item v-if="streamInfo.rtmp" :command="streamInfo.rtmp">
<el-tag>RTMP:</el-tag>
<span>{{ streamInfo.rtmp }}</span>
</el-dropdown-item>
<el-dropdown-item v-if="streamInfo.rtmps" :command="streamInfo.rtmps">
<el-tag>RTMPS:</el-tag>
<span>{{ streamInfo.rtmps }}</span>
</el-dropdown-item>
<el-dropdown-item v-if="streamInfo.rtsp" :command="streamInfo.rtsp">
<el-tag>RTSP:</el-tag>
<span>{{ streamInfo.rtsp }}</span>
</el-dropdown-item>
<el-dropdown-item v-if="streamInfo.rtsps" :command="streamInfo.rtsps">
<el-tag>RTSPS:</el-tag>
<span>{{ streamInfo.rtsps }}</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-input>
</div>
</el-tab-pane>
<!--{"code":0,"data":{"paths":["22-29-30.mp4"],"rootPath":"/home/kkkkk/Documents/ZLMediaKit/release/linux/Debug/www/record/hls/kkkkk/2020-05-11/"}}-->
<!--遥控界面-->
<el-tab-pane v-if="showPtz" label="云台控制" name="control">
<div style="display: grid; grid-template-columns: 240px auto; height: 180px; overflow: auto">
<div style="display: grid; grid-template-columns: 6.25rem auto;">
<div class="control-wrapper">
<div class="control-btn control-top" @mousedown="ptzCamera('up')" @mouseup="ptzCamera('stop')">
<i class="el-icon-caret-top" />
<div class="control-inner-btn control-inner" />
</div>
<div class="control-btn control-left" @mousedown="ptzCamera('left')" @mouseup="ptzCamera('stop')">
<i class="el-icon-caret-left" />
<div class="control-inner-btn control-inner" />
</div>
<div class="control-btn control-bottom" @mousedown="ptzCamera('down')" @mouseup="ptzCamera('stop')">
<i class="el-icon-caret-bottom" />
<div class="control-inner-btn control-inner" />
</div>
<div class="control-btn control-right" @mousedown="ptzCamera('right')" @mouseup="ptzCamera('stop')">
<i class="el-icon-caret-right" />
<div class="control-inner-btn control-inner" />
</div>
<div class="control-round">
<div class="control-round-inner"><i class="fa fa-pause-circle" /></div>
</div>
<div class="contro-speed" style="position: absolute; left: 4px; top: 7rem; width: 6.25rem;">
<el-slider v-model="controSpeed" :max="100" />
</div>
</div>
<div>
<div class="ptz-btn-box">
<div style="" title="变倍+" @mousedown="ptzCamera('zoomin')" @mouseup="ptzCamera('stop')">
<i class="el-icon-zoom-in control-zoom-btn" style="font-size: 1.5rem;" />
</div>
<div style="" title="变倍-" @mousedown="ptzCamera('zoomout')" @mouseup="ptzCamera('stop')">
<i class="el-icon-zoom-out control-zoom-btn" style="font-size: 1.5rem;" />
</div>
</div>
<div class="ptz-btn-box">
<div title="聚焦+" @mousedown="focusCamera('near')" @mouseup="focusCamera('stop')">
<i class="iconfont icon-bianjiao-fangda control-zoom-btn" style="font-size: 1.5rem;" />
</div>
<div title="聚焦-" @mousedown="focusCamera('far')" @mouseup="focusCamera('stop')">
<i class="iconfont icon-bianjiao-suoxiao control-zoom-btn" style="font-size: 1.5rem;" />
</div>
</div>
<div class="ptz-btn-box">
<div title="光圈+" @mousedown="irisCamera('in')" @mouseup="irisCamera('stop')">
<i class="iconfont icon-guangquan control-zoom-btn" style="font-size: 1.5rem;" />
</div>
<div title="光圈-" @mousedown="irisCamera('out')" @mouseup="irisCamera('stop')">
<i class="iconfont icon-guangquan- control-zoom-btn" style="font-size: 1.5rem;" />
</div>
</div>
</div>
</div>
<div style="text-align: left" v-if="tabActiveName === 'control'">
<el-select
v-model="ptzMethod"
style="width: 100%"
size="mini"
placeholder="请选择云台功能"
>
<el-option label="预置点" value="preset" />
<el-option label="巡航组" value="cruise" />
<el-option label="自动扫描" value="scan" />
<el-option label="雨刷" value="wiper" />
<el-option label="辅助开关" value="switch" />
</el-select>
<ptzPreset v-if="ptzMethod === 'preset'" :channel-id="channelId" style="margin-top: 1rem" />
<ptzCruising v-if="ptzMethod === 'cruise'" :channel-id="channelId" style="margin-top: 1rem" />
<ptzScan v-if="ptzMethod === 'scan'" :channel-id="channelId" style="margin-top: 1rem" />
<ptzWiper v-if="ptzMethod === 'wiper'" :channel-id="channelId" style="margin-top: 1rem" />
<ptzSwitch v-if="ptzMethod === 'switch'" :channel-id="channelId" style="margin-top: 1rem" />
</div>
</div>
</el-tab-pane>
<el-tab-pane label="编码信息" name="codec">
<mediaInfo ref="mediaInfo" :app="app" :stream="streamId" :media-server-id="mediaServerId" />
</el-tab-pane>
<el-tab-pane v-if="showBroadcast" label="语音对讲" name="broadcast">
<div style="padding: 0 10px">
<!-- <el-switch v-model="broadcastMode" :disabled="broadcastStatus !== -1" active-color="#409EFF"-->
<!-- active-text="喊话(Broadcast)"-->
<!-- inactive-text="对讲(Talk)"></el-switch>-->
<el-radio-group v-model="broadcastMode" :disabled="broadcastStatus !== -1">
<el-radio :label="true">喊话(Broadcast)</el-radio>
<el-radio :label="false">对讲(Talk)</el-radio>
</el-radio-group>
</div>
<div class="trank" style="text-align: center;">
<el-button
:type="getBroadcastStatus()"
:disabled="broadcastStatus === -2"
circle
icon="el-icon-microphone"
style="font-size: 32px; padding: 24px;margin-top: 24px;"
@click="broadcastStatusClick()"
/>
<p>
<span v-if="broadcastStatus === -2">正在释放资源</span>
<span v-if="broadcastStatus === -1">点击开始对讲</span>
<span v-if="broadcastStatus === 0">等待接通中...</span>
<span v-if="broadcastStatus === 1">请说话</span>
</p>
</div>
</el-tab-pane>
</el-tabs>
</div>
</el-dialog>
</div>
</template>
<script>
import elDragDialog from '@/directive/el-drag-dialog'
import crypto from 'crypto'
import rtcPlayer from '../rtcPlayer.vue'
import jessibucaPlayer from '../jessibuca.vue'
import PtzPreset from './ptzPreset.vue'
import PtzCruising from './ptzCruising.vue'
import ptzScan from './ptzScan.vue'
import ptzWiper from './ptzWiper.vue'
import ptzSwitch from './ptzSwitch.vue'
import mediaInfo from '../mediaInfo.vue'
import H265web from '../h265web.vue'
export default {
name: 'DevicePlayer',
directives: { elDragDialog },
components: {
H265web,
PtzPreset, PtzCruising, ptzScan, ptzWiper, ptzSwitch, mediaInfo,
jessibucaPlayer, rtcPlayer
},
props: {},
data() {
return {
video: 'http://lndxyj.iqilu.com/public/upload/2019/10/14/8c001ea0c09cdc59a57829dabc8010fa.mp4',
videoUrl: '',
activePlayer: 'jessibuca',
// 如何你只是用一种播放器，直接注释掉不用的部分即可
player: {
jessibuca: ['ws_flv', 'wss_flv'],
webRTC: ['rtc', 'rtcs'],
h265web: ['ws_flv', 'wss_flv']
},
showVideoDialog: false,
channelId: null,
streamId: '',
ptzMethod: 'preset',
ptzPresetId: '',
app: '',
mediaServerId: '',
tabActiveName: 'media',
hasAudio: false,
loadingRecords: false,
recordsLoading: false,
isLoging: false,
controSpeed: 30,
timeVal: 0,
timeMin: 0,
timeMax: 1440,
presetPos: 1,
cruisingSpeed: 100,
cruisingTime: 5,
cruisingGroup: 0,
scanSpeed: 100,
scanGroup: 0,
tracks: [],
showPtz: true,
showBroadcast: true,
showRrecord: true,
sliderTime: 0,
seekTime: 0,
recordStartTime: 0,
showTimeText: '00:00:00',
streamInfo: null,
broadcastMode: true,
broadcastRtc: null,
broadcastStatus: -1 // -2 正在释放资源 -1 默认状态 0 等待接通 1 接通成功
}
},
computed: {
getPlayerShared: function() {
return {
sharedUrl: window.location.origin + '/#/play/wasm/' + encodeURIComponent(this.videoUrl),
sharedIframe: '' + window.location.origin + '<iframe src="/public#/play/wasm/"></iframe>' + encodeURIComponent(this.videoUrl) + '',
sharedRtmp: this.videoUrl
}
}
},
created() {
this.broadcastStatus = -1
if (Object.keys(this.player).length === 1) {
this.activePlayer = Object.keys(this.player)[0]
}
},
methods: {
tabHandleClick: function(tab, event) {
console.log(tab)
this.tracks = []
if (tab.name === 'codec') {
this.$refs.mediaInfo.startTask()
} else {
this.$refs.mediaInfo.stopTask()
}
},
changePlayer: function(tab) {
console.log(this.player[tab.name][0])
this.activePlayer = tab.name
this.videoUrl = this.getUrlByStreamInfo()
console.log(this.videoUrl)
},
openDialog: function(tab, channelId, param) {
if (this.showVideoDialog) {
return
}
this.tabActiveName = tab
this.channelId = channelId
this.streamId = ''
this.mediaServerId = ''
this.app = ''
this.videoUrl = ''
if (this.$refs[this.activePlayer]) {
this.$refs[this.activePlayer].pause()
}
switch (tab) {
case 'media':
this.play(param.streamInfo, param.hasAudio)
break
case 'streamPlay':
this.tabActiveName = 'media'
this.showRrecord = false
this.showPtz = false
this.showBroadcast = false
this.play(param.streamInfo, param.hasAudio)
break
case 'control':
break
}
},
play: function(streamInfo, hasAudio) {
this.streamInfo = streamInfo
this.hasAudio = hasAudio
this.isLoging = false
// this.videoUrl = streamInfo.rtc;
this.videoUrl = this.getUrlByStreamInfo()
this.streamId = streamInfo.stream
this.app = streamInfo.app
this.mediaServerId = streamInfo.mediaServerId
this.playFromStreamInfo(false, streamInfo)
},
getUrlByStreamInfo() {
console.log(this.streamInfo)
let streamInfo = this.streamInfo
if (this.streamInfo.transcodeStream) {
streamInfo = this.streamInfo.transcodeStream
}
if (location.protocol === 'https:') {
this.videoUrl = streamInfo[this.player[this.activePlayer][1]]
} else {
this.videoUrl = streamInfo[this.player[this.activePlayer][0]]
}
return this.videoUrl
},
playFromStreamInfo: function(realHasAudio, streamInfo) {
this.showVideoDialog = true
this.hasaudio = realHasAudio && this.hasaudio
if (this.$refs[this.activePlayer]) {
this.$refs[this.activePlayer].play(this.getUrlByStreamInfo(streamInfo))
} else {
this.$nextTick(() => {
this.$refs[this.activePlayer].play(this.getUrlByStreamInfo(streamInfo))
})
}
},
close: function() {
console.log('关闭视频')
if (this.$refs[this.activePlayer]) {
this.$refs[this.activePlayer].pause()
}
this.videoUrl = ''
this.showVideoDialog = false
this.stopBroadcast()
},
ptzCamera: function(command) {
console.log('云台控制：' + command)
this.$store.dispatch('commonChanel/ptz',
[
this.channelId,
command,
parseInt(this.controSpeed * 255 / 100),
parseInt(this.controSpeed * 255 / 100),
parseInt(this.controSpeed * 16 / 100)
])
},
irisCamera: function(command) {
this.$store.dispatch('commonChanel/iris',
[
this.channelId,
command,
parseInt(this.controSpeed * 255 / 100)
])
},
focusCamera: function(command) {
this.$store.dispatch('commonChanel/focus',
[
this.channelId,
command,
parseInt(this.controSpeed * 255 / 100)
])
},
// ////////////////////播放器事件处理//////////////////////////
videoError: function(e) {
console.log('播放器错误：' + JSON.stringify(e))
},
copyUrl: function(dropdownItem) {
console.log(dropdownItem)
this.$copyText(dropdownItem).then((e) => {
this.$message.success({
showClose: true,
message: '成功拷贝到粘贴板'
})
}, (e) => {
})
},
getBroadcastStatus() {
if (this.broadcastStatus == -2) {
return 'primary'
}
if (this.broadcastStatus == -1) {
return 'primary'
}
if (this.broadcastStatus == 0) {
return 'warning'
}
if (this.broadcastStatus === 1) {
return 'danger'
}
},
broadcastStatusClick() {
if (this.broadcastStatus === -1) {
// 默认状态， 开始
this.broadcastStatus = 0
// 发起语音对讲
this.$store.dispatch('play/broadcastStart', [ this.channelId, this.broadcastMode])
.then(data => {
const streamInfo = data.streamInfo
if (document.location.protocol.includes('https')) {
this.startBroadcast(streamInfo.rtcs)
} else {
this.startBroadcast(streamInfo.rtc)
}
})
} else if (this.broadcastStatus === 1) {
this.broadcastStatus = -1
this.broadcastRtc.close()
}
},
startBroadcast(url) {
// 获取推流鉴权Key
this.$store.dispatch('user/getUserInfo')
.then((data) => {
if (data == null) {
this.broadcastStatus = -1
return
}
const pushKey = data.pushKey
// 获取推流鉴权KEY
url += '&sign=' + crypto.createHash('md5').update(pushKey, 'utf8').digest('hex')
console.log('开始语音喊话： ' + url)
this.broadcastRtc = new ZLMRTCClient.Endpoint({
debug: true, // 是否打印日志
zlmsdpUrl: url, // 流地址
simulecast: false,
useCamera: false,
audioEnable: true,
videoEnable: false,
recvOnly: false
})
this.broadcastRtc.on(ZLMRTCClient.Events.WEBRTC_NOT_SUPPORT, (e) => { // 获取到了本地流
console.error('不支持webrtc', e)
this.$message({
showClose: true,
message: '不支持webrtc, 无法进行语音喊话',
type: 'error'
})
this.broadcastStatus = -1
})
this.broadcastRtc.on(ZLMRTCClient.Events.WEBRTC_ICE_CANDIDATE_ERROR, (e) => { // ICE 协商出错
console.error('ICE 协商出错')
this.$message({
showClose: true,
message: 'ICE 协商出错',
type: 'error'
})
this.broadcastStatus = -1
})
this.broadcastRtc.on(ZLMRTCClient.Events.WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED, (e) => { // offer anwser 交换失败
console.error('offer anwser 交换失败', e)
this.$message({
showClose: true,
message: 'offer anwser 交换失败' + e,
type: 'error'
})
this.broadcastStatus = -1
})
this.broadcastRtc.on(ZLMRTCClient.Events.WEBRTC_ON_CONNECTION_STATE_CHANGE, (e) => { // offer anwser 交换失败
console.log('状态改变', e)
if (e === 'connecting') {
this.broadcastStatus = 0
} else if (e === 'connected') {
this.broadcastStatus = 1
} else if (e === 'disconnected') {
this.broadcastStatus = -1
}
})
this.broadcastRtc.on(ZLMRTCClient.Events.CAPTURE_STREAM_FAILED, (e) => { // offer anwser 交换失败
console.log('捕获流失败', e)
this.$message({
showClose: true,
message: '捕获流失败' + e,
type: 'error'
})
this.broadcastStatus = -1
})
}).catch(e => {
this.$message({
showClose: true,
message: e,
type: 'error'
})
this.broadcastStatus = -1
})
},
stopBroadcast() {
this.broadcastRtc.close()
this.broadcastStatus = -1
this.$store.dispatch('play/broadcastStop', [this.channelId])
}
}
}
</script>
<style>
.control-wrapper {
position: relative;
width: 6.25rem;
height: 6.25rem;
max-width: 6.25rem;
max-height: 6.25rem;
border-radius: 100%;
margin-top: 1.5rem;
margin-left: 0.5rem;
float: left;
}
.control-panel {
position: relative;
top: 0;
left: 5rem;
height: 11rem;
max-height: 11rem;
}
.control-btn {
display: flex;
justify-content: center;
position: absolute;
width: 44%;
height: 44%;
border-radius: 5px;
border: 1px solid #78aee4;
box-sizing: border-box;
transition: all 0.3s linear;
}
.control-btn:hover {
cursor: pointer
}
.control-btn i {
font-size: 20px;
color: #78aee4;
display: flex;
justify-content: center;
align-items: center;
}
.control-btn i:hover {
cursor: pointer
}
.control-zoom-btn:hover {
cursor: pointer
}
.control-round {
position: absolute;
top: 21%;
left: 21%;
width: 58%;
height: 58%;
background: #fff;
border-radius: 100%;
}
.control-round-inner {
position: absolute;
left: 13%;
top: 13%;
display: flex;
justify-content: center;
align-items: center;
width: 70%;
height: 70%;
font-size: 40px;
color: #78aee4;
border: 1px solid #78aee4;
border-radius: 100%;
transition: all 0.3s linear;
}
.control-inner-btn {
position: absolute;
width: 60%;
height: 60%;
background: #fafafa;
}
.control-top {
top: -8%;
left: 27%;
transform: rotate(-45deg);
border-radius: 5px 100% 5px 0;
}
.control-top i {
transform: rotate(45deg);
border-radius: 5px 100% 5px 0;
}
.control-top .control-inner {
left: -1px;
bottom: 0;
border-top: 1px solid #78aee4;
border-right: 1px solid #78aee4;
border-radius: 0 100% 0 0;
}
.control-top .fa {
transform: rotate(45deg) translateY(-7px);
}
.control-left {
top: 27%;
left: -8%;
transform: rotate(45deg);
border-radius: 5px 0 5px 100%;
}
.control-left i {
transform: rotate(-45deg);
}
.control-left .control-inner {
right: -1px;
top: -1px;
border-bottom: 1px solid #78aee4;
border-left: 1px solid #78aee4;
border-radius: 0 0 0 100%;
}
.control-left .fa {
transform: rotate(-45deg) translateX(-7px);
}
.control-right {
top: 27%;
right: -8%;
transform: rotate(45deg);
border-radius: 5px 100% 5px 0;
}
.control-right i {
transform: rotate(-45deg);
}
.control-right .control-inner {
left: -1px;
bottom: -1px;
border-top: 1px solid #78aee4;
border-right: 1px solid #78aee4;
border-radius: 0 100% 0 0;
}
.control-right .fa {
transform: rotate(-45deg) translateX(7px);
}
.control-bottom {
left: 27%;
bottom: -8%;
transform: rotate(45deg);
border-radius: 0 5px 100% 5px;
}
.control-bottom i {
transform: rotate(-45deg);
}
.control-bottom .control-inner {
top: -1px;
left: -1px;
border-bottom: 1px solid #78aee4;
border-right: 1px solid #78aee4;
border-radius: 0 0 100% 0;
}
.control-bottom .fa {
transform: rotate(-45deg) translateY(7px);
}
.trank {
width: 80%;
height: 180px;
text-align: left;
padding: 0 10%;
overflow: auto;
}
.trankInfo {
width: 80%;
padding: 0 10%;
}
.el-dialog__body{
padding: 10px 20px;
}
.ptz-btn-box {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 0 2rem;
height: 3rem;
line-height: 4rem;
}
</style>

328
web/src/views/common/channelPlayer/ptzCruising.vue Normal file
View File

@@ -0,0 +1,328 @@
<template>
<div id="ptzCruising">
<div style="display: grid; grid-template-columns: 80px auto; line-height: 28px">
<span>巡航组号: </span>
<el-input
v-model="cruiseId"
min="1"
max="255"
placeholder="巡航组号"
addon-before="巡航组号"
addon-after="(1-255)"
size="mini"
/>
</div>
<p>
<el-tag
v-for="(item, index) in presetList"
:key="item.presetId"
closable
style="margin-right: 1rem; cursor: pointer"
@close="delPreset(item, index)"
>
{{ item.presetName ? item.presetName : item.presetId }}
</el-tag>
</p>
<el-form v-if="selectPresetVisible" size="mini" :inline="true">
<el-form-item>
<el-select v-model="selectPreset" placeholder="请选择预置点">
<el-option
v-for="item in allPresetList"
:key="item.presetId"
:label="item.presetName"
:value="item"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="addCruisePoint">保存</el-button>
<el-button type="primary" @click="cancelAddCruisePoint">取消</el-button>
</el-form-item>
</el-form>
<el-button v-else size="mini" @click="selectPresetVisible=true">添加巡航点</el-button>
<el-form v-if="setSpeedVisible" size="mini" :inline="true">
<el-form-item>
<el-input
v-if="setSpeedVisible"
v-model="cruiseSpeed"
min="1"
max="4095"
placeholder="巡航速度"
addon-before="巡航速度"
addon-after="(1-4095)"
size="mini"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="setCruiseSpeed">保存</el-button>
<el-button @click="cancelSetCruiseSpeed">取消</el-button>
</el-form-item>
</el-form>
<el-button v-else size="mini" @click="setSpeedVisible = true">设置巡航速度</el-button>
<el-form v-if="setTimeVisible" size="mini" :inline="true">
<el-form-item>
<el-input
v-model="cruiseTime"
min="1"
max="4095"
placeholder="巡航停留时间(秒)"
addon-before="巡航停留时间(秒)"
addon-after="(1-4095)"
style="width: 100%;"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="setCruiseTime">保存</el-button>
<el-button @click="cancelSetCruiseTime">取消</el-button>
</el-form-item>
</el-form>
<el-button v-else size="mini" @click="setTimeVisible = true">设置巡航时间</el-button>
<el-button size="mini" @click="startCruise">开始巡航</el-button>
<el-button size="mini" @click="stopCruise">停止巡航</el-button>
<el-button size="mini" type="danger" @click="deleteCruise">删除巡航</el-button>
</div>
</template>
<script>
export default {
name: 'PtzCruising',
components: {},
props: ['channelId'],
data() {
return {
cruiseId: 1,
presetList: [],
allPresetList: [],
selectPreset: '',
inputVisible: false,
selectPresetVisible: false,
setSpeedVisible: false,
setTimeVisible: false,
cruiseSpeed: '',
cruiseTime: ''
}
},
created() {
this.getPresetList()
},
methods: {
getPresetList: function() {
this.$store.dispatch('commonChanel/queryPreset', [this.channelId])
.then((data) => {
this.allPresetList = data
})
},
addCruisePoint: function() {
const loading = this.$loading({
lock: true,
fullscreen: true,
text: '正在发送指令',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
this.$store.dispatch('commonChanel/addPointForCruise',
[this.channelId, this.cruiseId, this.selectPreset.presetId])
.then((data) => {
this.presetList.push(this.selectPreset)
}).catch((error) => {
this.$message({
showClose: true,
message: error,
type: 'error'
})
}).finally(() => {
this.selectPreset = ''
this.selectPresetVisible = false
loading.close()
})
},
cancelAddCruisePoint: function() {
this.selectPreset = ''
this.selectPresetVisible = false
},
delPreset: function(preset, index) {
const loading = this.$loading({
lock: true,
fullscreen: true,
text: '正在发送指令',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
this.$store.dispatch('commonChanel/deletePointForCruise',
[this.channelId, this.cruiseId, preset.presetId])
.then((data) => {
this.presetList.splice(index, 1)
}).catch((error) => {
this.$message({
showClose: true,
message: error,
type: 'error'
})
}).finally(() => {
loading.close()
})
},
deleteCruise: function(preset, index) {
this.$confirm('确定删除此巡航组', '提示', {
dangerouslyUseHTMLString: true,
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
const loading = this.$loading({
lock: true,
fullscreen: true,
text: '正在发送指令',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
this.$store.dispatch('commonChanel/deletePointForCruise',
[this.channelId, this.cruiseId, 0])
.then((data) => {
this.presetList = []
}).catch((error) => {
this.$message({
showClose: true,
message: error,
type: 'error'
})
}).finally(() => {
loading.close()
})
})
},
setCruiseSpeed: function() {
const loading = this.$loading({
lock: true,
fullscreen: true,
text: '正在发送指令',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
this.$store.dispatch('commonChanel/setCruiseSpeed',
[this.channelId, this.cruiseId, this.cruiseSpeed])
.then((data) => {
this.$message({
showClose: true,
message: '保存成功',
type: 'success'
})
}).catch((error) => {
this.$message({
showClose: true,
message: error,
type: 'error'
})
}).finally(() => {
this.cruiseSpeed = ''
this.setSpeedVisible = false
loading.close()
})
},
cancelSetCruiseSpeed: function() {
this.cruiseSpeed = ''
this.setSpeedVisible = false
},
setCruiseTime: function() {
const loading = this.$loading({
lock: true,
fullscreen: true,
text: '正在发送指令',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
this.$store.dispatch('commonChanel/setCruiseTime',
[this.channelId, this.cruiseId, this.cruiseTime])
.then((data) => {
this.$message({
showClose: true,
message: '保存成功',
type: 'success'
})
}).catch((error) => {
this.$message({
showClose: true,
message: error,
type: 'error'
})
}).finally(() => {
this.setTimeVisible = false
this.cruiseTime = ''
loading.close()
})
},
cancelSetCruiseTime: function() {
this.setTimeVisible = false
this.cruiseTime = ''
},
startCruise: function() {
const loading = this.$loading({
lock: true,
fullscreen: true,
text: '正在发送指令',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
this.$store.dispatch('commonChanel/startCruise',
[this.channelId, this.cruiseId])
.then((data) => {
this.$message({
showClose: true,
message: '发送成功',
type: 'success'
})
}).catch((error) => {
this.$message({
showClose: true,
message: error,
type: 'error'
})
}).finally(() => {
this.setTimeVisible = false
this.cruiseTime = ''
loading.close()
})
},
stopCruise: function() {
const loading = this.$loading({
lock: true,
fullscreen: true,
text: '正在发送指令',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
this.$store.dispatch('commonChanel/stopCruise',
[this.channelId, this.cruiseId])
.then((data) => {
this.$message({
showClose: true,
message: '发送成功',
type: 'success'
})
}).catch((error) => {
this.$message({
showClose: true,
message: error,
type: 'error'
})
}).finally(() => {
this.setTimeVisible = false
this.cruiseTime = ''
loading.close()
})
}
}
}
</script>
<style>
.channel-form {
display: grid;
background-color: #FFFFFF;
padding: 1rem 2rem 0 2rem;
grid-template-columns: 1fr 1fr 1fr;
gap: 1rem;
}
</style>

152
web/src/views/common/channelPlayer/ptzPreset.vue Normal file
View File

@@ -0,0 +1,152 @@
<template>
<div id="ptzPreset" style="width: 100%">
<el-tag
v-for="item in presetList"
:key="item.presetId"
closable
size="mini"
style="margin-right: 1rem; cursor: pointer; margin-bottom: 0.6rem"
@close="delPreset(item)"
@click="gotoPreset(item)"
>
{{ item.presetName?item.presetName:item.presetId }}
</el-tag>
<el-input
v-if="inputVisible"
ref="saveTagInput"
v-model="ptzPresetId"
min="1"
max="255"
placeholder="预置位编号"
addon-before="预置位编号"
addon-after="(1-255)"
style="width: 300px; vertical-align: bottom;"
size="small"
>
<template v-slot:append>
<el-button @click="addPreset()">保存</el-button>
<el-button @click="cancel()">取消</el-button>
</template>
</el-input>
<el-button v-else size="small" @click="showInput">+ 添加</el-button>
</div>
</template>
<script>
export default {
name: 'PtzPreset',
components: {},
props: ['channelId'],
data() {
return {
presetList: [],
inputVisible: false,
ptzPresetId: ''
}
},
created() {
this.getPresetList()
},
methods: {
getPresetList: function() {
this.$store.dispatch('commonChanel/queryPreset', [this.channelId])
.then(data => {
this.presetList = data
// 防止出现表格错位
this.$nextTick(() => {
this.$refs.channelListTable.doLayout()
})
})
},
showInput() {
this.inputVisible = true
this.$nextTick(_ => {
this.$refs.saveTagInput.$refs.input.focus()
})
},
addPreset: function() {
const loading = this.$loading({
lock: true,
fullscreen: true,
text: '正在发送指令',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
this.$store.dispatch('commonChanel/addPreset', [this.channelId, this.ptzPresetId])
.then(data => {
setTimeout(() => {
this.inputVisible = false
this.ptzPresetId = ''
this.getPresetList()
}, 1000)
}).catch((error) => {
loading.close()
this.inputVisible = false
this.ptzPresetId = ''
this.$message({
showClose: true,
message: error,
type: 'error'
})
}).finally(() => {
loading.close()
})
},
cancel: function() {
this.inputVisible = false
this.ptzPresetId = ''
},
gotoPreset: function(preset) {
console.log(preset)
this.$store.dispatch('commonChanel/callPreset', [this.channelId, preset.presetId])
.then(data => {
this.$message({
showClose: true,
message: '调用成功',
type: 'success'
})
}).catch((error) => {
this.$message({
showClose: true,
message: error,
type: 'error'
})
})
},
delPreset: function(preset) {
this.$confirm('确定删除此预置位', '提示', {
dangerouslyUseHTMLString: true,
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
const loading = this.$loading({
lock: true,
fullscreen: true,
text: '正在发送指令',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
this.$store.dispatch('commonChanel/deletePreset', [this.channelId, preset.presetId])
.then(data => {
setTimeout(() => {
this.getPresetList()
}, 1000)
}).catch((error) => {
this.$message({
showClose: true,
message: error,
type: 'error'
})
}).finally(() => {
loading.close()
})
}).catch(() => {
})
}
}
}
</script>

212
web/src/views/common/channelPlayer/ptzScan.vue Normal file
View File

@@ -0,0 +1,212 @@
<template>
<div id="ptzScan">
<div style="display: grid; grid-template-columns: 80px auto; line-height: 28px">
<span>扫描组号: </span>
<el-input
v-model="scanId"
min="1"
max="255"
placeholder="扫描组号"
addon-before="扫描组号"
addon-after="(1-255)"
size="mini"
/>
</div>
<el-button size="mini" @click="setScanLeft">设置左边界</el-button>
<el-button size="mini" @click="setScanRight">设置右边界</el-button>
<el-form v-if="setSpeedVisible" size="mini" :inline="true">
<el-form-item>
<el-input
v-if="setSpeedVisible"
v-model="speed"
min="1"
max="4095"
placeholder="巡航速度"
addon-before="巡航速度"
addon-after="(1-4095)"
size="mini"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="setSpeed">保存</el-button>
<el-button @click="cancelSetSpeed">取消</el-button>
</el-form-item>
</el-form>
<el-button v-else size="mini" @click="setSpeedVisible = true">设置扫描速度</el-button>
<el-button size="mini" @click="startScan">开始自动扫描</el-button>
<el-button size="mini" @click="stopScan">停止自动扫描</el-button>
</div>
</template>
<script>
export default {
name: 'PtzScan',
components: {},
props: ['channelId'],
data() {
return {
scanId: 1,
setSpeedVisible: false,
speed: ''
}
},
created() {
},
methods: {
setSpeed: function() {
const loading = this.$loading({
lock: true,
fullscreen: true,
text: '正在发送指令',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
this.$store.dispatch('commonChanel/setSpeedForScan', [this.channelId, this.scanId, this.speed])
.then(data => {
this.$message({
showClose: true,
message: '保存成功',
type: 'success'
})
})
.catch((error) => {
this.$message({
showClose: true,
message: error,
type: 'error'
})
}).finally(() => {
this.speed = ''
this.setSpeedVisible = false
loading.close()
})
},
cancelSetSpeed: function() {
this.speed = ''
this.setSpeedVisible = false
},
setScanLeft: function() {
const loading = this.$loading({
lock: true,
fullscreen: true,
text: '正在发送指令',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
this.$store.dispatch('commonChanel/setLeftForScan', [this.channelId, this.scanId])
.then(data => {
this.$message({
showClose: true,
message: '保存成功',
type: 'success'
})
})
.catch((error) => {
this.$message({
showClose: true,
message: error,
type: 'error'
})
}).finally(() => {
this.speed = ''
this.setSpeedVisible = false
loading.close()
})
},
setScanRight: function() {
const loading = this.$loading({
lock: true,
fullscreen: true,
text: '正在发送指令',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
this.$store.dispatch('commonChanel/setRightForScan', [this.channelId, this.scanId])
.then(data => {
this.$message({
showClose: true,
message: '保存成功',
type: 'success'
})
})
.catch((error) => {
this.$message({
showClose: true,
message: error,
type: 'error'
})
}).finally(() => {
this.speed = ''
this.setSpeedVisible = false
loading.close()
})
},
startScan: function() {
const loading = this.$loading({
lock: true,
fullscreen: true,
text: '正在发送指令',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
this.$store.dispatch('commonChanel/startScan', [this.channelId, this.scanId])
.then(data => {
this.$message({
showClose: true,
message: '发送成功',
type: 'success'
})
})
.catch((error) => {
this.$message({
showClose: true,
message: error,
type: 'error'
})
}).finally(() => {
loading.close()
})
},
stopScan: function() {
const loading = this.$loading({
lock: true,
fullscreen: true,
text: '正在发送指令',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
this.$store.dispatch('commonChanel/stopScan', [this.channelId, this.scanId])
.then(data => {
this.$message({
showClose: true,
message: '发送成功',
type: 'success'
})
})
.catch((error) => {
this.$message({
showClose: true,
message: error,
type: 'error'
})
}).finally(() => {
loading.close()
})
}
}
}
</script>
<style>
.channel-form {
display: grid;
background-color: #FFFFFF;
padding: 1rem 2rem 0 2rem;
grid-template-columns: 1fr 1fr 1fr;
gap: 1rem;
}
</style>

76
web/src/views/common/channelPlayer/ptzSwitch.vue Normal file
View File

@@ -0,0 +1,76 @@
<template>
<div id="ptzScan">
<el-form size="mini" :inline="true">
<el-form-item>
<el-input
v-model="switchId"
min="1"
max="4095"
placeholder="开关编号"
addon-before="开关编号"
addon-after="(2-255)"
size="mini"
/>
</el-form-item>
<el-form-item>
<el-button size="mini" @click="open('on')">开启</el-button>
<el-button size="mini" @click="open('off')">关闭</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: 'PtzScan',
components: {},
props: ['channelId'],
data() {
return {
switchId: 1
}
},
created() {
},
methods: {
open: function(command) {
const loading = this.$loading({
lock: true,
fullscreen: true,
text: '正在发送指令',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
this.$store.dispatch('commonChanel/auxiliary', [this.channelId, command, this.switchId])
.then(data => {
this.$message({
showClose: true,
message: '保存成功',
type: 'success'
})
})
.catch((error) => {
this.$message({
showClose: true,
message: error,
type: 'error'
})
}).finally(() => {
loading.close()
})
}
}
}
</script>
<style>
.channel-form {
display: grid;
background-color: #FFFFFF;
padding: 1rem 2rem 0 2rem;
grid-template-columns: 1fr 1fr 1fr;
gap: 1rem;
}
</style>

58
web/src/views/common/channelPlayer/ptzWiper.vue Normal file
View File

@@ -0,0 +1,58 @@
<template>
<div id="ptzWiper">
<el-button size="mini" @click="open('on')">开启</el-button>
<el-button size="mini" @click="open('off')">关闭</el-button>
</div>
</template>
<script>
export default {
name: 'PtzWiper',
components: {},
props: ['channelId'],
data() {
return {}
},
created() {
},
methods: {
open: function(command) {
const loading = this.$loading({
lock: true,
fullscreen: true,
text: '正在发送指令',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
this.$store.dispatch('commonChanel/wiper', [this.channelId, command])
.then(data => {
this.$message({
showClose: true,
message: '保存成功',
type: 'success'
})
})
.catch((error) => {
this.$message({
showClose: true,
message: error,
type: 'error'
})
}).finally(() => {
loading.close()
})
}
}
}
</script>
<style>
.channel-form {
display: grid;
background-color: #FFFFFF;
padding: 1rem 2rem 0 2rem;
grid-template-columns: 1fr 1fr 1fr;
gap: 1rem;
}
</style>

10
web/src/views/device/channel/index.vue
View File

@@ -7,7 +7,7 @@
</el-form-item>
<el-form-item label="搜索">
<el-input
v-model="searchSrt"
v-model="searchStr"
style="margin-right: 1rem; width: auto;"
placeholder="关键字"
prefix-icon="el-icon-search"
@@ -248,7 +248,7 @@ export default {
videoComponentList: [],
currentPlayerInfo: {}, // 当前播放对象
updateLooper: 0, // 数据刷新轮训标志
searchSrt: '',
searchStr: '',
channelType: '',
online: '',
subStream: '',
@@ -322,7 +322,7 @@ export default {
this.$store.dispatch('device/queryChannels', [this.deviceId, {
page: this.currentPage,
count: this.count,
query: this.searchSrt,
query: this.searchStr,
online: this.online,
channelType: this.channelType
}]).then(data => {
@@ -465,7 +465,7 @@ export default {
var url = `/${this.$router.currentRoute.name}/${this.$router.currentRoute.params.deviceId}/${itemData.deviceId}`
this.$router.push(url).then(() => {
this.searchSrt = ''
this.searchStr = ''
this.channelType = ''
this.online = ''
this.initParam()
@@ -477,7 +477,7 @@ export default {
{
page: this.currentPage,
count: this.count,
query: this.searchSrt,
query: this.searchStr,
online: this.online,
channelType: this.channelType
},

6
web/src/views/device/list.vue
View File

@@ -3,7 +3,7 @@
<el-form :inline="true" size="mini">
<el-form-item label="搜索">
<el-input
v-model="searchSrt"
v-model="searchStr"
style="margin-right: 1rem; width: auto;"
placeholder="关键字"
prefix-icon="el-icon-search"
@@ -185,7 +185,7 @@ export default {
return {
deviceList: [], // 设备列表
currentDevice: {}, // 当前操作设备对象
searchSrt: '',
searchStr: '',
online: null,
videoComponentList: [],
updateLooper: 0, // 数据刷新轮训标志
@@ -231,7 +231,7 @@ export default {
this.$store.dispatch('device/queryDevices', {
page: this.currentPage,
count: this.count,
query: this.searchSrt,
query: this.searchStr,
status: this.online
}).then((data) => {
this.total = data.total

8
web/src/views/dialog/GbChannelSelect.vue
View File

@@ -14,7 +14,7 @@
<el-form :inline="true" size="mini">
<el-form-item label="搜索">
<el-input
v-model="searchSrt"
v-model="searchStr"
style="margin-right: 1rem; width: auto;"
placeholder="关键字"
prefix-icon="el-icon-search"
@@ -117,7 +117,7 @@ export default {
showDialog: false,
channelList: [], // 设备列表
currentDevice: {}, // 当前操作设备对象
searchSrt: '',
searchStr: '',
online: null,
channelType: '',
videoComponentList: [],
@@ -154,7 +154,7 @@ export default {
page: this.currentPage,
count: this.count,
channelType: this.channelType,
query: this.searchSrt,
query: this.searchStr,
online: this.online
})
.then(data => {
@@ -167,7 +167,7 @@ export default {
this.$store.dispatch('commonChanel/getParentList', {
page: this.currentPage,
count: this.count,
query: this.searchSrt,
query: this.searchStr,
channelType: this.channelType,
online: this.online
})

6
web/src/views/dialog/GbDeviceSelect.vue
View File

@@ -13,7 +13,7 @@
><el-form :inline="true" size="mini">
<el-form-item label="搜索">
<el-input
v-model="searchSrt"
v-model="searchStr"
style="margin-right: 1rem; width: auto;"
size="mini"
placeholder="关键字"
@@ -92,7 +92,7 @@ export default {
showDialog: false,
deviceList: [], // 设备列表
currentDevice: {}, // 当前操作设备对象
searchSrt: '',
searchStr: '',
online: null,
videoComponentList: [],
updateLooper: 0, // 数据刷新轮训标志
@@ -129,7 +129,7 @@ export default {
this.$store.dispatch('device/queryDevices', {
page: this.currentPage,
count: this.count,
query: this.searchSrt,
query: this.searchStr,
status: this.online
})
.then(data => {

6
web/src/views/dialog/UnusualGroupChannelSelect.vue
View File

@@ -14,7 +14,7 @@
<el-form :inline="true" size="mini">
<el-form-item label="搜索">
<el-input
v-model="searchSrt"
v-model="searchStr"
style="margin-right: 1rem; width: auto;"
size="mini"
placeholder="关键字"
@@ -132,7 +132,7 @@ export default {
return {
showDialog: false,
channelList: [], // 设备列表
searchSrt: '',
searchStr: '',
online: null,
channelType: '',
winHeight: 580,
@@ -165,7 +165,7 @@ export default {
page: this.currentPage,
count: this.count,
channelType: this.channelType,
query: this.searchSrt,
query: this.searchStr,
online: this.online
})
.then(data => {

6
web/src/views/dialog/UnusualRegionChannelSelect.vue
View File

@@ -14,7 +14,7 @@
<el-form :inline="true" size="mini">
<el-form-item label="搜索">
<el-input
v-model="searchSrt"
v-model="searchStr"
style="margin-right: 1rem; width: auto;"
size="mini"
placeholder="关键字"
@@ -144,7 +144,7 @@ export default {
return {
showDialog: false,
channelList: [], // 设备列表
searchSrt: '',
searchStr: '',
online: null,
channelType: '',
winHeight: 580,
@@ -177,7 +177,7 @@ export default {
page: this.currentPage,
count: this.count,
channelType: this.channelType,
query: this.searchSrt,
query: this.searchStr,
online: this.online
})
.then((data) => {

6
web/src/views/dialog/linkChannelRecord.vue
View File

@@ -10,7 +10,7 @@
<el-form :inline="true" size="mini">
<el-form-item label="搜索">
<el-input
v-model="searchSrt"
v-model="searchStr"
style="margin-right: 1rem; width: auto;"
placeholder="关键字"
prefix-icon="el-icon-search"
@@ -120,7 +120,7 @@ export default {
showDialog: false,
chooseData: {},
channelList: [],
searchSrt: '',
searchStr: '',
channelType: '',
online: '',
hasLink: 'false',
@@ -161,7 +161,7 @@ export default {
this.$store.dispatch('recordPlan/queryChannelList', {
page: this.currentPage,
count: this.count,
query: this.searchSrt,
query: this.searchStr,
online: this.online,
channelType: this.channelType,
planId: this.planId,

6
web/src/views/dialog/shareChannelAdd.vue
View File

@@ -8,7 +8,7 @@
<el-form :inline="true" size="mini">
<el-form-item label="搜索">
<el-input
v-model="searchSrt"
v-model="searchStr"
style="margin-right: 1rem; width: auto;"
size="mini"
placeholder="关键字"
@@ -134,7 +134,7 @@ export default {
data() {
return {
channelList: [],
searchSrt: '',
searchStr: '',
channelType: '',
online: '',
hasShare: 'false',
@@ -168,7 +168,7 @@ export default {
this.$store.dispatch('platform/getChannelList', {
page: this.currentPage,
count: this.count,
query: this.searchSrt,
query: this.searchStr,
online: this.online,
channelType: this.channelType,
platformId: this.platformId,

79
web/src/views/live/index.vue
View File

@@ -1,8 +1,8 @@
<template>
<div id="live" class="live-container">
<div v-loading="loading" class="live-content" element-loading-text="拼命加载中">
<div class="device-tree-container">
<DeviceTree :click-event="clickEvent" :context-menu-event="contextMenuEvent" />
<div class="device-tree-container-box">
<DeviceTree @clickEvent="clickEvent" :context-menu-event="contextMenuEvent" />
</div>
<div class="video-container">
<div class="control-bar">
@@ -281,7 +281,7 @@ export default {
flex-direction: row;
}
.device-tree-container {
.device-tree-container-box {
width: 300px;
min-width: 250px;
max-width: 400px;
@@ -295,7 +295,7 @@ export default {
flex-direction: column;
}
.device-tree-container {
.device-tree-container-box {
width: 100%;
max-width: 100%;
height: 200px;
@@ -402,76 +402,5 @@ export default {
}
}
.videoList {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
.video-item {
position: relative;
width: 15rem;
height: 10rem;
margin-right: 1rem;
background-color: #000000;
}
.video-item-img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 100%;
height: 100%;
}
.video-item-img:after {
content: "";
display: inline-block;
position: absolute;
z-index: 2;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 3rem;
height: 3rem;
background-image: url("../../assets/loading.png");
background-size: cover;
background-color: #000000;
}
.video-item-title {
position: absolute;
bottom: 0;
color: #000000;
background-color: #ffffff;
line-height: 1.5rem;
padding: 0.3rem;
width: 14.4rem;
}
.baidumap {
width: 100%;
height: 100%;
border: none;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
/* 去除百度地图版权那行字 和 百度logo */
.baidumap > .BMap_cpyCtrl {
display: none !important;
}
.baidumap > .anchorBL {
display: none !important;
}
</style>

6
web/src/views/platform/index.vue
View File

@@ -4,7 +4,7 @@
<el-form :inline="true" size="mini">
<el-form-item label="搜索">
<el-input
v-model="searchSrt"
v-model="searchStr"
style="margin-right: 1rem; width: auto;"
size="mini"
placeholder="关键字"
@@ -159,7 +159,7 @@ export default {
defaultPlatform: null,
platform: null,
pushChannelLoading: false,
searchSrt: '',
searchStr: '',
currentPage: 1,
count: 15,
total: 0
@@ -296,7 +296,7 @@ export default {
this.$store.dispatch('platform/query', {
count: this.count,
page: this.currentPage,
query: this.searchSrt
query: this.searchStr
})
.then((data) => {
this.total = data.total

6
web/src/views/recordPlan/index.vue
View File

@@ -4,7 +4,7 @@
<el-form :inline="true" size="mini">
<el-form-item label="搜索">
<el-input
v-model="searchSrt"
v-model="searchStr"
style="margin-right: 1rem; width: auto;"
placeholder="关键字"
prefix-icon="el-icon-search"
@@ -72,7 +72,7 @@ export default {
data() {
return {
recordPlanList: [],
searchSrt: '',
searchStr: '',
currentPage: 1,
count: 15,
total: 0,
@@ -101,7 +101,7 @@ export default {
this.$store.dispatch('recordPlan/queryList', {
page: this.currentPage,
count: this.count,
query: this.searchSrt
query: this.searchStr
})
.then(data => {
this.total = data.total

6
web/src/views/streamProxy/index.vue
View File

@@ -4,7 +4,7 @@
<el-form :inline="true" size="mini">
<el-form-item label="搜索">
<el-input
v-model="searchSrt"
v-model="searchStr"
style="margin-right: 1rem; width: auto;"
placeholder="关键字"
prefix-icon="el-icon-search"
@@ -144,7 +144,7 @@ export default {
count: 15,
total: 0,
streamProxy: null,
searchSrt: '',
searchStr: '',
mediaServerId: '',
pulling: '',
mediaServerList: []
@@ -193,7 +193,7 @@ export default {
this.$store.dispatch('streamProxy/queryList', {
page: this.currentPage,
count: this.count,
query: this.searchSrt,
query: this.searchStr,
pulling: this.pulling,
mediaServerId: this.mediaServerId
})

5
web/src/views/streamPush/buildPushStreamUrl.vue
View File

@@ -56,7 +56,7 @@
</el-form-item>
<el-form-item>
<div style="float: right;">
<el-button type="primary" @click="onSubmit">确认</el-button>
<el-button @click="close">关闭</el-button>
</div>
</el-form-item>
</el-form>
@@ -126,9 +126,6 @@ export default {
openDialog: function(callback) {
this.endCallback = callback
this.showDialog = true
},
onSubmit: function() {
},
close: function() {
this.showDialog = false

6
web/src/views/streamPush/index.vue
View File

@@ -4,7 +4,7 @@
<el-form :inline="true" size="mini">
<el-form-item label="搜索">
<el-input
v-model="searchSrt"
v-model="searchStr"
style="margin-right: 1rem; width: auto;"
placeholder="关键字"
prefix-icon="el-icon-search"
@@ -167,7 +167,7 @@ export default {
currentPage: 1,
count: 15,
total: 0,
searchSrt: '',
searchStr: '',
pushing: '',
mediaServerId: '',
mediaServerList: [],
@@ -204,7 +204,7 @@ export default {
this.$store.dispatch('streamPush/queryList', {
page: this.currentPage,
count: this.count,
query: this.searchSrt,
query: this.searchStr,
pushing: this.pushing,
mediaServerId: this.mediaServerId
})