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

Merge remote-tracking branch 'origin/wvp-28181-2.0' into commercial

Browse Source 
# Conflicts:
#	sql/update.sql
#	src/main/java/com/genersoft/iot/vmp/gb28181/bean/Device.java
#	src/main/java/com/genersoft/iot/vmp/gb28181/transmit/event/request/impl/AckRequestProcessor.java
#	src/main/java/com/genersoft/iot/vmp/gb28181/transmit/event/request/impl/InviteRequestProcessor.java
#	src/main/java/com/genersoft/iot/vmp/service/IPlayService.java
#	src/main/java/com/genersoft/iot/vmp/service/impl/PlayServiceImpl.java
#	web_src/src/components/dialog/deviceEdit.vue
#	web_src/src/components/dialog/devicePlayer.vue
This commit is contained in:
648540858
2022-06-27 10:16:21 +08:00
parent 038d360dd4 0da452293f
commit 26739237e2
106 changed files with 3638 additions and 1447 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
web_src/src/App.vue
View File

@@ -76,7 +76,7 @@ body,
line-height: 60px;
}
.el-main {
background-color: #e9eef3;
background-color: #f0f2f5;
color: #333;
text-align: center;
padding-top: 0px !important;
@@ -101,4 +101,8 @@ body,
box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
}
.table-header {
color: #727272;
font-weight: 600;
}
</style>

16
web_src/src/components/CloudRecord.vue
View File

@@ -18,19 +18,17 @@
<div v-if="!recordDetail">
<!--设备列表-->
<el-table :data="recordList" border style="width: 100%" :height="winHeight">
<el-table-column prop="app" label="应用名" align="center">
<el-table :data="recordList" style="width: 100%" :height="winHeight">
<el-table-column prop="app" label="应用名" >
</el-table-column>
<el-table-column prop="stream" label="流ID" align="center">
<el-table-column prop="stream" label="流ID" >
</el-table-column>
<el-table-column prop="time" label="时间" align="center">
<el-table-column prop="time" label="时间" >
</el-table-column>
<el-table-column label="操作" width="360" align="center" fixed="right">
<el-table-column label="操作" width="360" fixed="right">
<template slot-scope="scope">
<el-button-group>
<el-button size="mini" icon="el-icon-video-camera-solid" type="primary" @click="showRecordDetail(scope.row)">查看</el-button>
<!-- <el-button size="mini" icon="el-icon-delete" type="danger" @click="deleteRecord(scope.row)">删除</el-button>-->
</el-button-group>
<el-button size="medium" icon="el-icon-folder-opened" type="text" @click="showRecordDetail(scope.row)">查看</el-button>
<!-- <el-button size="mini" icon="el-icon-delete" type="danger" @click="deleteRecord(scope.row)">删除</el-button>-->
</template>
</el-table-column>
</el-table>

58
web_src/src/components/DeviceList.vue
View File

@@ -7,34 +7,33 @@
@click="getDeviceList()"></el-button>
</div>
</div>
<!-- <devicePlayer ref="devicePlayer"></devicePlayer> -->
<!--设备列表-->
<el-table :data="deviceList" border style="width: 100%;font-size: 12px;" :height="winHeight">
<el-table-column prop="name" label="名称" align="center">
<el-table :data="deviceList" style="width: 100%;font-size: 12px;" :height="winHeight" header-row-class-name="table-header">
<el-table-column prop="name" label="名称" min-width="160">
</el-table-column>
<el-table-column prop="deviceId" label="设备编号" width="180" align="center">
<el-table-column prop="deviceId" label="设备编号" min-width="200" >
</el-table-column>
<el-table-column label="地址" width="180" align="center">
<el-table-column label="地址" min-width="160" >
<template slot-scope="scope">
<div slot="reference" class="name-wrapper">
<el-tag size="medium">{{ scope.row.hostAddress }}</el-tag>
</div>
</template>
</el-table-column>
<el-table-column prop="manufacturer" label="厂家" align="center">
<el-table-column prop="manufacturer" label="厂家" min-width="120" >
</el-table-column>
<el-table-column label="流传输模式" align="center" width="120">
<el-table-column label="流传输模式" min-width="160" >
<template slot-scope="scope">
<el-select size="mini" @change="transportChange(scope.row)" v-model="scope.row.streamMode" placeholder="请选择">
<el-select size="mini" @change="transportChange(scope.row)" v-model="scope.row.streamMode" placeholder="请选择" style="width: 120px">
<el-option key="UDP" label="UDP" value="UDP"></el-option>
<el-option key="TCP-ACTIVE" label="TCP主动模式" :disabled="true" value="TCP-ACTIVE"></el-option>
<el-option key="TCP-PASSIVE" label="TCP被动模式" value="TCP-PASSIVE"></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column prop="channelCount" label="通道数" align="center">
<el-table-column prop="channelCount" label="通道数" min-width="120" >
</el-table-column>
<el-table-column label="状态" width="120" align="center">
<el-table-column label="状态" min-width="120">
<template slot-scope="scope">
<div slot="reference" class="name-wrapper">
<el-tag size="medium" v-if="scope.row.online == 1">在线</el-tag>
@@ -42,30 +41,32 @@
</div>
</template>
</el-table-column>
<el-table-column prop="keepaliveTime" label="最近心跳" align="center" width="140">
<el-table-column prop="keepaliveTime" label="最近心跳" min-width="160" >
</el-table-column>
<el-table-column prop="registerTime" label="最近注册" align="center" width="140">
</el-table-column>
<el-table-column prop="updateTime" label="更新时间" align="center" width="140">
</el-table-column>
<el-table-column prop="createTime" label="创建时间" align="center" width="140">
<el-table-column prop="registerTime" label="最近注册" min-width="160">
</el-table-column>
<!-- <el-table-column prop="updateTime" label="更新时间" width="140">-->
<!-- </el-table-column>-->
<!-- <el-table-column prop="createTime" label="创建时间" width="140">-->
<!-- </el-table-column>-->
<el-table-column label="操作" width="450" align="center" fixed="right">
<el-table-column label="操作" min-width="450" fixed="right">
<template slot-scope="scope">
<el-button size="mini" v-if="scope.row.online!=0" icon="el-icon-refresh" @click="refDevice(scope.row)"
<el-button type="text" size="medium" v-bind:disabled="scope.row.online==0" icon="el-icon-refresh" @click="refDevice(scope.row)"
@mouseover="getTooltipContent(scope.row.deviceId)">刷新
</el-button>
<el-button-group>
<el-button size="mini" icon="el-icon-video-camera-solid" v-bind:disabled="scope.row.online==0"
type="primary" @click="showChannelList(scope.row)">通道
</el-button>
<el-button size="mini" icon="el-icon-location" v-bind:disabled="scope.row.online==0" type="primary"
@click="showDevicePosition(scope.row)">定位
</el-button>
<el-button size="mini" icon="el-icon-edit" type="primary" @click="edit(scope.row)">编辑</el-button>
<el-button size="mini" icon="el-icon-delete" type="danger" @click="deleteDevice(scope.row)">删除</el-button>
</el-button-group>
<el-divider direction="vertical"></el-divider>
<el-button type="text" size="medium" icon="el-icon-video-camera" v-bind:disabled="scope.row.online==0"
@click="showChannelList(scope.row)">通道
</el-button>
<el-divider direction="vertical"></el-divider>
<el-button size="medium" icon="el-icon-location" v-bind:disabled="scope.row.online==0" type="text"
@click="showDevicePosition(scope.row)">定位
</el-button>
<el-divider direction="vertical"></el-divider>
<el-button size="medium" icon="el-icon-edit" type="text" @click="edit(scope.row)">编辑</el-button>
<el-divider direction="vertical"></el-divider>
<el-button size="medium" icon="el-icon-delete" type="text" @click="deleteDevice(scope.row)" style="color: #f56c6c">删除</el-button>
</template>
</el-table-column>
</el-table>
@@ -347,4 +348,5 @@ export default {
padding: 0.3rem;
width: 14.4rem;
}
</style>

2
web_src/src/components/MediaServerManger.vue
View File

@@ -15,7 +15,7 @@
<span style="font-size: 16px">{{item.id}}</span>
<el-button v-if="!item.defaultServer" icon="el-icon-edit" style="padding: 0;float: right;" type="text" @click="edit(item)">编辑</el-button>
<el-button v-if="item.defaultServer" icon="el-icon-edit" style="padding: 0;float: right;" type="text" @click="edit(item)">查看</el-button>
<el-button icon="el-icon-delete" style="margin-right: 10px;padding: 0;float: right;" type="text" @click="del(item)">移除</el-button>
<el-button v-if="!item.defaultServer" icon="el-icon-delete" style="margin-right: 10px;padding: 0;float: right;" type="text" @click="del(item)">移除</el-button>
<div style="margin-top: 13px; line-height: 12px; ">
<span style="font-size: 14px; color: #999; margin-top: 5px; ">{{item.ip}}</span>
<span style="font-size: 14px; color: #999; margin-top: 5px; float: right;">{{item.createTime}}</span>

32
web_src/src/components/ParentPlatformList.vue
View File

@@ -4,14 +4,15 @@
<div class="page-title">上级平台列表</div>
<div class="page-header-btn">
<el-button icon="el-icon-plus" size="mini" style="margin-right: 1rem;" type="primary" @click="addParentPlatform">添加</el-button>
<el-button icon="el-icon-refresh-right" circle size="mini" @click="refresh()"></el-button>
</div>
</div>
<!--设备列表-->
<el-table :data="platformList" border style="width: 100%" :height="winHeight">
<el-table-column prop="name" label="名称" align="center"></el-table-column>
<el-table-column prop="serverGBId" label="平台编号" align="center"></el-table-column>
<el-table-column label="是否启用" width="120" align="center">
<el-table :data="platformList" style="width: 100%" :height="winHeight">
<el-table-column prop="name" label="名称" ></el-table-column>
<el-table-column prop="serverGBId" label="平台编号" min-width="200"></el-table-column>
<el-table-column label="是否启用" min-width="80" >
<template slot-scope="scope">
<div slot="reference" class="name-wrapper">
<el-tag size="medium" v-if="scope.row.enable">已启用</el-tag>
@@ -19,7 +20,7 @@
</div>
</template>
</el-table-column>
<el-table-column label="状态" width="120" align="center">
<el-table-column label="状态" min-width="80" >
<template slot-scope="scope">
<div slot="reference" class="name-wrapper">
<el-tag size="medium" v-if="scope.row.status">在线</el-tag>
@@ -27,17 +28,17 @@
</div>
</template>
</el-table-column>
<el-table-column label="地址" width="180" align="center">
<el-table-column label="地址" min-width="160" >
<template slot-scope="scope">
<div slot="reference" class="name-wrapper">
<el-tag size="medium">{{ scope.row.serverIP}}:{{scope.row.serverPort }}</el-tag>
</div>
</template>
</el-table-column>
<el-table-column prop="deviceGBId" label="设备国标编号" width="200" align="center"></el-table-column>
<el-table-column prop="transport" label="信令传输模式" width="120" align="center"></el-table-column>
<el-table-column prop="channelCount" label="通道数" width="120" align="center"></el-table-column>
<el-table-column label="订阅信息" width="240" align="center" fixed="right">
<el-table-column prop="deviceGBId" label="设备国标编号" min-width="200" ></el-table-column>
<el-table-column prop="transport" label="信令传输模式" min-width="120" ></el-table-column>
<el-table-column prop="channelCount" label="通道数" min-width="120" ></el-table-column>
<el-table-column label="订阅信息" min-width="120" fixed="right">
<template slot-scope="scope">
<i v-if="scope.row.alarmSubscribe" style="font-size: 20px" title="报警订阅" class="iconfont icon-gbaojings subscribe-on " ></i>
<i v-if="!scope.row.alarmSubscribe" style="font-size: 20px" title="报警订阅" class="iconfont icon-gbaojings subscribe-off " ></i>
@@ -48,11 +49,11 @@
</template>
</el-table-column>
<el-table-column label="操作" width="300" align="center" fixed="right">
<el-table-column label="操作" min-width="240" fixed="right">
<template slot-scope="scope">
<el-button size="mini" icon="el-icon-edit" @click="editPlatform(scope.row)">编辑</el-button>
<el-button size="mini" icon="el-icon-share" type="primary" @click="chooseChannel(scope.row)">选择通道</el-button>
<el-button size="mini" icon="el-icon-delete" type="danger" @click="deletePlatform(scope.row)">删除</el-button>
<el-button size="medium" icon="el-icon-edit" type="text" @click="editPlatform(scope.row)">编辑</el-button>
<el-button size="medium" icon="el-icon-share" type="text" @click="chooseChannel(scope.row)">选择通道</el-button>
<el-button size="medium" icon="el-icon-delete" type="text" style="color: #f56c6c" @click="deletePlatform(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
@@ -168,6 +169,9 @@ export default {
console.log(error);
});
},
refresh: function (){
this.initData();
}
}

51
web_src/src/components/PushVideoList.vue
View File

@@ -34,52 +34,54 @@
<el-button icon="el-icon-delete" size="mini" style="margin-right: 1rem;"
:disabled="multipleSelection.length === 0" type="danger" @click="batchDel">批量移除
</el-button>
<el-button icon="el-icon-refresh-right" circle size="mini" @click="refresh()"></el-button>
</div>
</div>
<devicePlayer ref="devicePlayer"></devicePlayer>
<addStreamTOGB ref="addStreamTOGB"></addStreamTOGB>
<el-table ref="pushListTable" :data="pushList" border style="width: 100%" :height="winHeight"
<el-table ref="pushListTable" :data="pushList" style="width: 100%" :height="winHeight"
@selection-change="handleSelectionChange" :row-key="(row)=> row.app + row.stream">
<el-table-column align="center" type="selection" :reserve-selection="true" width="55">
<el-table-column type="selection" :reserve-selection="true" min-width="55">
</el-table-column>
<el-table-column prop="name" label="名称" align="center">
<el-table-column prop="name" label="名称" min-width="200">
</el-table-column>
<el-table-column prop="app" label="APP" align="center">
<el-table-column prop="app" label="APP" min-width="200">
</el-table-column>
<el-table-column prop="stream" label="流ID" align="center">
<el-table-column prop="stream" label="流ID" min-width="200">
</el-table-column>
<el-table-column prop="gbId" label="国标编码" width="200" align="center">
<el-table-column prop="gbId" label="国标编码" min-width="200" >
</el-table-column>
<el-table-column prop="mediaServerId" label="流媒体" width="200" align="center">
<el-table-column prop="mediaServerId" label="流媒体" min-width="200" >
</el-table-column>
<el-table-column label="开始时间" align="center" width="200">
<el-table-column label="开始时间" min-width="200">
<template slot-scope="scope">
<el-button-group>
{{ dateFormat(parseInt(scope.row.createStamp)) }}
</el-button-group>
</template>
</el-table-column>
<el-table-column label="正在推流" align="center" width="100">
<el-table-column label="正在推流" min-width="100">
<template slot-scope="scope">
{{ (scope.row.status == false && scope.row.gbId == null) || scope.row.status ? '是' : '否' }}
</template>
</el-table-column>
<el-table-column label="操作" width="360" align="center" fixed="right">
<el-table-column label="操作" min-width="360" fixed="right">
<template slot-scope="scope">
<el-button-group>
<el-button size="mini" icon="el-icon-video-play"
v-if="(scope.row.status == false && scope.row.gbId == null) || scope.row.status"
@click="playPush(scope.row)">播放
</el-button>
<el-button size="mini" icon="el-icon-delete" type="danger" @click="stopPush(scope.row)">移除</el-button>
<el-button size="mini" icon="el-icon-position" type="primary" v-if="!!!scope.row.gbId"
@click="addToGB(scope.row)">加入国标
</el-button>
<el-button size="mini" icon="el-icon-position" type="primary" v-if="!!scope.row.gbId"
@click="removeFromGB(scope.row)">移出国标
</el-button>
</el-button-group>
<el-button size="medium" icon="el-icon-video-play"
v-if="(scope.row.status == false && scope.row.gbId == null) || scope.row.status"
@click="playPush(scope.row)" type="text">播放
</el-button>
<el-divider direction="vertical"></el-divider>
<el-button size="medium" icon="el-icon-delete" type="text" @click="stopPush(scope.row)" style="color: #f56c6c" >移除</el-button>
<el-divider direction="vertical"></el-divider>
<el-button size="medium" icon="el-icon-position" type="text" v-if="!!!scope.row.gbId"
@click="addToGB(scope.row)">加入国标
</el-button>
<el-divider v-if="!!!scope.row.gbId" direction="vertical"></el-divider>
<el-button size="medium" icon="el-icon-position" type="text" v-if="!!scope.row.gbId"
@click="removeFromGB(scope.row)">移出国标
</el-button>
</template>
</el-table-column>
</el-table>
@@ -284,6 +286,9 @@ export default {
handleSelectionChange: function (val) {
this.multipleSelection = val;
},
refresh: function () {
this.initData();
},
}
};
</script>

50
web_src/src/components/StreamProxyList.vue
View File

@@ -5,14 +5,15 @@
<div class="page-header-btn">
<el-button icon="el-icon-plus" size="mini" style="margin-right: 1rem;" type="primary" @click="addStreamProxy">添加代理</el-button>
<el-button v-if="false" icon="el-icon-search" size="mini" style="margin-right: 1rem;" type="primary" @click="addOnvif">搜索ONVIF</el-button>
<el-button icon="el-icon-refresh-right" circle size="mini" @click="refresh()"></el-button>
</div>
</div>
<devicePlayer ref="devicePlayer"></devicePlayer>
<el-table :data="streamProxyList" border style="width: 100%" :height="winHeight">
<el-table-column prop="name" label="名称" align="center" show-overflow-tooltip/>
<el-table-column prop="app" label="流应用名" align="center" show-overflow-tooltip/>
<el-table-column prop="stream" label="流ID" align="center" show-overflow-tooltip/>
<el-table-column label="流地址" width="400" align="center" show-overflow-tooltip >
<el-table :data="streamProxyList" style="width: 100%" :height="winHeight">
<el-table-column prop="name" label="名称" min-width="120" show-overflow-tooltip/>
<el-table-column prop="app" label="流应用名" min-width="120" show-overflow-tooltip/>
<el-table-column prop="stream" label="流ID" min-width="120" show-overflow-tooltip/>
<el-table-column label="流地址" min-width="400" show-overflow-tooltip >
<template slot-scope="scope">
<div slot="reference" class="name-wrapper">
@@ -27,8 +28,8 @@
</div>
</template>
</el-table-column>
<el-table-column prop="mediaServerId" label="流媒体" width="150" align="center"></el-table-column>
<el-table-column label="类型" width="100" align="center">
<el-table-column prop="mediaServerId" label="流媒体" min-width="180" ></el-table-column>
<el-table-column label="类型" width="100" >
<template slot-scope="scope">
<div slot="reference" class="name-wrapper">
<el-tag size="medium">{{scope.row.type}}</el-tag>
@@ -36,8 +37,8 @@
</template>
</el-table-column>
<el-table-column prop="gbId" label="国标编码" width="180" align="center" show-overflow-tooltip/>
<el-table-column label="状态" width="120" align="center">
<el-table-column prop="gbId" label="国标编码" min-width="180" show-overflow-tooltip/>
<el-table-column label="状态" min-width="120" >
<template slot-scope="scope">
<div slot="reference" class="name-wrapper">
<el-tag size="medium" v-if="scope.row.status">在线</el-tag>
@@ -45,7 +46,7 @@
</div>
</template>
</el-table-column>
<el-table-column label="启用" width="120" align="center">
<el-table-column label="启用" min-width="120" >
<template slot-scope="scope">
<div slot="reference" class="name-wrapper">
<el-tag size="medium" v-if="scope.row.enable">已启用</el-tag>
@@ -53,8 +54,8 @@
</div>
</template>
</el-table-column>
<el-table-column prop="createTime" label="创建时间" align="center" width="150" show-overflow-tooltip/>
<el-table-column label="转HLS" width="120" align="center">
<el-table-column prop="createTime" label="创建时间" min-width="150" show-overflow-tooltip/>
<el-table-column label="转HLS" min-width="120" >
<template slot-scope="scope">
<div slot="reference" class="name-wrapper">
<el-tag size="medium" v-if="scope.row.enable_hls">已启用</el-tag>
@@ -62,7 +63,7 @@
</div>
</template>
</el-table-column>
<el-table-column label="MP4录制" width="120" align="center">
<el-table-column label="MP4录制" min-width="120" >
<template slot-scope="scope">
<div slot="reference" class="name-wrapper">
<el-tag size="medium" v-if="scope.row.enable_mp4">已启用</el-tag>
@@ -70,7 +71,7 @@
</div>
</template>
</el-table-column>
<el-table-column label="无人观看自动删除" width="160" align="center">
<el-table-column label="无人观看自动删除" min-width="160" >
<template slot-scope="scope">
<div slot="reference" class="name-wrapper">
<el-tag size="medium" v-if="scope.row.enable_remove_none_reader">已启用</el-tag>
@@ -80,14 +81,15 @@
</el-table-column>
<el-table-column label="操作" width="360" align="center" fixed="right">
<el-table-column label="操作" width="360" fixed="right">
<template slot-scope="scope">
<el-button-group>
<el-button size="mini" icon="el-icon-video-play" v-if="scope.row.enable" @click="play(scope.row)">播放</el-button>
<el-button size="mini" icon="el-icon-close" type="success" v-if="scope.row.enable" @click="stop(scope.row)">停用</el-button>
<el-button size="mini" icon="el-icon-check" type="primary" :loading="startBtnLaoding" v-if="!scope.row.enable" @click="start(scope.row)">启用</el-button>
<el-button size="mini" icon="el-icon-delete" type="danger" @click="deleteStreamProxy(scope.row)">删除</el-button>
</el-button-group>
<el-button size="medium" icon="el-icon-video-play" type="text" v-if="scope.row.enable" @click="play(scope.row)">播放</el-button>
<el-divider direction="vertical"></el-divider>
<el-button size="medium" icon="el-icon-switch-button" type="text" v-if="scope.row.enable" @click="stop(scope.row)">停用</el-button>
<el-divider direction="vertical"></el-divider>
<el-button size="medium" icon="el-icon-check" type="text" :loading="startBtnLaoding" v-if="!scope.row.enable" @click="start(scope.row)">启用</el-button>
<el-divider v-if="!scope.row.enable" direction="vertical"></el-divider>
<el-button size="medium" icon="el-icon-delete" type="text" style="color: #f56c6c" @click="deleteStreamProxy(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
@@ -305,8 +307,10 @@
console.log(error);
that.getListLoading = false;
});
}
},
refresh: function (){
this.initData();
}
}
};
</script>

163
web_src/src/components/channelList.vue
View File

@@ -2,10 +2,10 @@
<div id="channelList" style="width: 100%">
<div class="page-header">
<div class="page-title">
<el-button icon="el-icon-arrow-left" size="mini" style="margin-right: 1rem;" type="primary" @click="showDevice">
返回
</el-button>
通道列表({{ parentChannelId == 0 ? deviceId : parentChannelId }})</div>
<el-button icon="el-icon-back" size="mini" style="font-size: 20px; color: #000;" type="text" @click="showDevice" ></el-button>
<el-divider direction="vertical"></el-divider>
通道列表
</div>
<div class="page-header-btn">
搜索:
<el-input @input="search" style="margin-right: 1rem; width: auto;" size="mini" placeholder="关键字"
@@ -25,84 +25,85 @@
<el-option label="在线" value="true"></el-option>
<el-option label="离线" value="false"></el-option>
</el-select>
<el-checkbox size="mini" v-model="autoList" @change="autoListChange">
自动刷新
</el-checkbox>
<el-button icon="el-icon-refresh-right" circle size="mini" @click="refresh()"></el-button>
</div>
</div>
<devicePlayer ref="devicePlayer" v-loading="isLoging"></devicePlayer>
<!--设备列表-->
<el-table ref="channelListTable" :data="deviceChannelList" :height="winHeight" border style="width: 100%">
<el-table-column prop="channelId" label="通道编号" width="200">
<el-table ref="channelListTable" :data="deviceChannelList" :height="winHeight" style="width: 100%" header-row-class-name="table-header">
<el-table-column prop="channelId" label="通道编号" min-width="200">
</el-table-column>
<el-table-column prop="name" label="通道名称">
<el-table-column prop="deviceId" label="设备编号" min-width="200">
</el-table-column>
<el-table-column label="快照" width="80" align="center">
<template slot-scope="scope">
<img style="max-height: 3rem;max-width: 4rem;"
v-if="scope.row.subCount === 0 && scope.row.parental === 0"
:id="scope.row.deviceId + '_' + scope.row.channelId"
:src="getSnap(scope.row)"
@error="getSnapErrorEvent($event.target.id)"
alt="">
<!-- <el-image-->
<!-- :id="'snapImg_' + scope.row.deviceId + '_' + scope.row.channelId"-->
<!-- :src="getSnap(scope.row)"-->
<!-- @error="getSnapErrorEvent($event, scope.row)"-->
<!-- :fit="'contain'">-->
<!-- <div slot="error" class="image-slot">-->
<!-- <i class="el-icon-picture-outline"></i>-->
<!-- </div>-->
<!-- </el-image>-->
<el-table-column prop="name" label="通道名称" min-width="200">
</el-table-column>
<el-table-column label="快照" min-width="120">
<template v-slot:default="scope">
<el-image
:src="getSnap(scope.row)"
:preview-src-list="getBigSnap(scope.row)"
@error="getSnapErrorEvent(scope.row.deviceId, scope.row.channelId)"
:fit="'contain'"
style="width: 60px">
<div slot="error" class="image-slot">
<i class="el-icon-picture-outline"></i>
</div>
</el-image>
</template>
</el-table-column>
<el-table-column prop="subCount" label="子节点数">
<el-table-column prop="subCount" label="子节点数" min-width="120">
</el-table-column>
<el-table-column prop="manufacture" label="厂家">
<el-table-column prop="manufacture" label="厂家" min-width="120">
</el-table-column>
<el-table-column label="位置信息" align="center">
<el-table-column label="位置信息" min-width="200">
<template slot-scope="scope">
<span>{{ scope.row.longitude }},{{ scope.row.latitude }}</span>
<span v-if="scope.row.longitude*scope.row.latitude > 0">{{ scope.row.longitude }},<br>{{ scope.row.latitude }}</span>
<span v-if="scope.row.longitude*scope.row.latitude === 0">无</span>
</template>
</el-table-column>
<el-table-column prop="ptztypeText" label="云台类型"/>
<el-table-column label="开启音频" align="center">
<el-table-column prop="ptztypeText" label="云台类型" min-width="120"/>
<el-table-column label="开启音频" min-width="120">
<template slot-scope="scope">
<el-switch @change="updateChannel(scope.row)" v-model="scope.row.hasAudio" active-color="#409EFF">
</el-switch>
</template>
</el-table-column>
<el-table-column label="状态" width="180" align="center">
<el-table-column label="状态" min-width="120">
<template slot-scope="scope">
<div slot="reference" class="name-wrapper">
<el-tag size="medium" v-if="scope.row.status == 1">开启</el-tag>
<el-tag size="medium" type="info" v-if="scope.row.status == 0">关闭</el-tag>
<el-tag size="medium" v-if="scope.row.status === 1">在线</el-tag>
<el-tag size="medium" type="info" v-if="scope.row.status === 0">离线</el-tag>
</div>
</template>
</el-table-column>
<el-table-column label="操作" width="280" align="center" fixed="right">
<el-table-column label="操作" min-width="280" fixed="right">
<template slot-scope="scope">
<el-button-group>
<!-- <el-button size="mini" icon="el-icon-video-play" v-if="scope.row.parental == 0" @click="sendDevicePush(scope.row)">播放</el-button> -->
<el-button size="mini" icon="el-icon-video-play" @click="sendDevicePush(scope.row)">播放</el-button>
<el-button size="mini" icon="el-icon-switch-button" type="danger" v-if="!!scope.row.streamId"
@click="stopDevicePush(scope.row)">停止
</el-button>
<el-button size="mini" icon="el-icon-s-open" type="primary" v-if="scope.row.subCount > 0 || scope.row.parental === 1"
@click="changeSubchannel(scope.row)">查看
</el-button>
<el-button size="mini" icon="el-icon-video-camera" type="primary" @click="queryRecords(scope.row)">设备录像
</el-button>
<!-- <el-button size="mini" @click="sendDevicePush(scope.row)">录像查询</el-button> -->
</el-button-group>
<!-- <el-button size="mini" icon="el-icon-video-play" v-if="scope.row.parental == 0" @click="sendDevicePush(scope.row)">播放</el-button> -->
<el-button size="medium" icon="el-icon-video-play" type="text" @click="sendDevicePush(scope.row)">播放</el-button>
<el-button size="medium" icon="el-icon-switch-button" type="text" style="color: #f56c6c" v-if="!!scope.row.streamId"
@click="stopDevicePush(scope.row)">停止
</el-button>
<el-divider direction="vertical"></el-divider>
<el-button size="medium" icon="el-icon-s-open" type="text" v-if="scope.row.subCount > 0 || scope.row.parental === 1"
@click="changeSubchannel(scope.row)">查看
</el-button>
<el-divider v-if="scope.row.subCount > 0 || scope.row.parental === 1" direction="vertical"></el-divider>
<el-button size="medium" icon="el-icon-video-camera" type="text" @click="queryRecords(scope.row)">设备录像
</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination style="float: right" @size-change="handleSizeChange" @current-change="currentChange"
:current-page="currentPage" :page-size="count" :page-sizes="[15, 20, 30, 50]"
layout="total, sizes, prev, pager, next" :total="total">
<el-pagination
style="float: right"
@size-change="handleSizeChange"
@current-change="currentChange"
:current-page="currentPage"
:page-size="count"
:page-sizes="[15, 25, 35, 50]"
layout="total, sizes, prev, pager, next"
:total="total">
</el-pagination>
</div>
</template>
@@ -111,6 +112,8 @@
import devicePlayer from './dialog/devicePlayer.vue'
import uiHeader from '../layout/UiHeader.vue'
import moment from "moment";
import DviceService from "./service/DeviceService";
import DeviceService from "./service/DeviceService";
export default {
name: 'channelList',
@@ -120,6 +123,8 @@ export default {
},
data() {
return {
deviceService: new DeviceService(),
device: null,
deviceId: this.$route.params.deviceId,
parentChannelId: this.$route.params.parentChannelId,
deviceChannelList: [],
@@ -135,16 +140,21 @@ export default {
total: 0,
beforeUrl: "/deviceList",
isLoging: false,
autoList: true,
loadSnap: {}
};
},
mounted() {
this.initData();
if (this.autoList) {
this.updateLooper = setInterval(this.initData, 5000);
if (this.deviceId) {
this.deviceService.getDevice(this.deviceId, (result)=>{
this.device = result;
}, (error)=>{
console.log("获取设备信息失败")
console.error(error)
})
}
this.initData();
},
destroyed() {
@@ -177,12 +187,8 @@ export default {
})
},
handleSizeChange: function (val) {
var url = `/${this.$router.currentRoute.name}/${this.$router.params.deviceId}/${this.$router.params.parentChannelId}/${val}/1`
this.$router.push(url).then(() => {
this.initParam();
this.initData();
})
this.count = val;
this.getDeviceChannelList();
},
getDeviceChannelList: function () {
let that = this;
@@ -227,7 +233,7 @@ export default {
setTimeout(() => {
let snapId = deviceId + "_" + channelId;
that.loadSnap[snapId] = 0;
that.loadSnap[deviceId + channelId] = 0;
that.getSnapErrorEvent(snapId)
}, 5000)
that.$refs.devicePlayer.openDialog("media", deviceId, channelId, {
@@ -269,19 +275,24 @@ export default {
});
},
getSnap: function (row) {
return '/static/snap/' + row.deviceId + '_' + row.channelId + '.jpg'
let url = (process.env.NODE_ENV === 'development'? "debug": "") + '/api/device/query/snap/' + row.deviceId + '/' + row.channelId
return url
},
getSnapErrorEvent: function (id) {
getBigSnap: function (row) {
return [this.getSnap(row)]
},
getSnapErrorEvent: function (deviceId, channelId) {
if (typeof (this.loadSnap[id]) != "undefined") {
console.log("下载截图" + this.loadSnap[id])
if (this.loadSnap[id] > 5) {
delete this.loadSnap[id];
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(() => {
this.loadSnap[id]++
document.getElementById(id).setAttribute("src", '/static/snap/' + id + '.jpg?' + new Date().getTime())
let 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)
}
@@ -342,12 +353,8 @@ export default {
console.log(JSON.stringify(res));
});
},
autoListChange: function () {
if (this.autoList) {
this.updateLooper = setInterval(this.initData, 1500);
} else {
window.clearInterval(this.updateLooper);
}
refresh: function () {
this.initData();
}
}

24
web_src/src/components/common/DeviceTree.vue
View File

@@ -84,22 +84,34 @@ export default {
}else {
resolve([])
}
}, (list)=>{
console.log("设备加载完成")
}, (error)=>{
})
}
if (node.level === 1) {
this.deviceService.getAllChannel(true, true, node.data.id, (catalogData) => {
this.deviceService.getAllChannel(false, true, node.data.id, (channelData) => {
let data = catalogData.concat(channelData)
this.channelDataHandler(data, resolve)
let channelArray = []
this.deviceService.getAllChannel(true, true, node.data.id, catalogData =>{
channelArray = channelArray.concat(catalogData)
this.channelDataHandler(channelArray, resolve)
},(endCatalogData) => {
this.deviceService.getAllChannel(false, true, node.data.id, channelData => {
channelArray = channelArray.concat(channelData)
this.channelDataHandler(channelArray, resolve)
}, endChannelList => {
})
})
}else if (node.level > 1){
let channelArray = []
this.deviceService.getAllSubChannel(true, node.data.deviceId, node.data.id, (catalogData)=>{
channelArray = channelArray.concat(catalogData)
this.channelDataHandler(channelArray, resolve)
}, (endCatalogData)=>{
this.deviceService.getAllSubChannel(false, node.data.deviceId, node.data.id, (channelData)=>{
let data = catalogData.concat(channelData)
this.channelDataHandler(data, resolve)
channelArray = channelArray.concat(channelData)
this.channelDataHandler(channelArray, resolve)
})
})
}

79
web_src/src/components/common/jessibuca.vue
View File

@@ -23,11 +23,11 @@
</template>
<script>
let jessibucaPlayer = {};
export default {
name: 'jessibuca',
data() {
return {
jessibuca: null,
playing: false,
isNotMute: false,
quieting: false,
@@ -49,6 +49,7 @@ export default {
window.onerror = (msg) => {
// console.error(msg)
};
console.log(this._uid)
let paramUrl = decodeURIComponent(this.$route.params.url)
this.$nextTick(() => {
this.updatePlayerDomSize()
@@ -88,7 +89,7 @@ export default {
let options = {};
console.log("hasAudio " + this.hasAudio)
this.jessibuca = new window.Jessibuca(Object.assign(
jessibucaPlayer[this._uid] = new window.Jessibuca(Object.assign(
{
container: this.$refs.container,
videoBuffer: 0.2, // 最大缓冲时长，单位秒
@@ -117,70 +118,70 @@ export default {
},
options
));
let jessibuca = jessibucaPlayer[this._uid];
let _this = this;
this.jessibuca.on("load", function () {
jessibuca.on("load", function () {
console.log("on load init");
});
this.jessibuca.on("log", function (msg) {
jessibuca.on("log", function (msg) {
console.log("on log", msg);
});
this.jessibuca.on("record", function (msg) {
jessibuca.on("record", function (msg) {
console.log("on record:", msg);
});
this.jessibuca.on("pause", function () {
jessibuca.on("pause", function () {
_this.playing = false;
});
this.jessibuca.on("play", function () {
jessibuca.on("play", function () {
_this.playing = true;
});
this.jessibuca.on("fullscreen", function (msg) {
jessibuca.on("fullscreen", function (msg) {
console.log("on fullscreen", msg);
_this.fullscreen = msg
});
this.jessibuca.on("mute", function (msg) {
jessibuca.on("mute", function (msg) {
console.log("on mute", msg);
_this.isNotMute = !msg;
});
this.jessibuca.on("audioInfo", function (msg) {
jessibuca.on("audioInfo", function (msg) {
// console.log("audioInfo", msg);
});
this.jessibuca.on("videoInfo", function (msg) {
jessibuca.on("videoInfo", function (msg) {
// this.videoInfo = msg;
console.log("videoInfo", msg);
});
this.jessibuca.on("bps", function (bps) {
jessibuca.on("bps", function (bps) {
// console.log('bps', bps);
});
let _ts = 0;
this.jessibuca.on("timeUpdate", function (ts) {
jessibuca.on("timeUpdate", function (ts) {
// console.log('timeUpdate,old,new,timestamp', _ts, ts, ts - _ts);
_ts = ts;
});
this.jessibuca.on("videoInfo", function (info) {
jessibuca.on("videoInfo", function (info) {
console.log("videoInfo", info);
});
this.jessibuca.on("error", function (error) {
jessibuca.on("error", function (error) {
console.log("error", error);
});
this.jessibuca.on("timeout", function () {
jessibuca.on("timeout", function () {
console.log("timeout");
});
this.jessibuca.on('start', function () {
jessibuca.on('start', function () {
console.log('start');
})
this.jessibuca.on("performance", function (performance) {
jessibuca.on("performance", function (performance) {
let show = "卡顿";
if (performance === 2) {
show = "非常流畅";
@@ -189,25 +190,25 @@ export default {
}
_this.performance = show;
});
this.jessibuca.on('buffer', function (buffer) {
jessibuca.on('buffer', function (buffer) {
// console.log('buffer', buffer);
})
this.jessibuca.on('stats', function (stats) {
jessibuca.on('stats', function (stats) {
// console.log('stats', stats);
})
this.jessibuca.on('kBps', function (kBps) {
jessibuca.on('kBps', function (kBps) {
_this.kBps = Math.round(kBps);
});
// 显示时间戳 PTS
this.jessibuca.on('videoFrame', function () {
jessibuca.on('videoFrame', function () {
})
//
this.jessibuca.on('metadata', function () {
jessibuca.on('metadata', function () {
});
},
@@ -216,40 +217,40 @@ export default {
},
play: function (url) {
console.log(url)
if (this.jessibuca) {
if (jessibucaPlayer[this._uid]) {
this.destroy();
}
this.create();
this.jessibuca.on("play", () => {
jessibucaPlayer[this._uid].on("play", () => {
this.playing = true;
this.loaded = true;
this.quieting = this.jessibuca.quieting;
this.quieting = jessibuca.quieting;
});
if (this.jessibuca.hasLoaded()) {
this.jessibuca.play(url);
if (jessibucaPlayer[this._uid].hasLoaded()) {
jessibucaPlayer[this._uid].play(url);
} else {
this.jessibuca.on("load", () => {
jessibucaPlayer[this._uid].on("load", () => {
console.log("load 播放")
this.jessibuca.play(url);
jessibucaPlayer[this._uid].play(url);
});
}
},
pause: function () {
if (this.jessibuca) {
this.jessibuca.pause();
if (jessibucaPlayer[this._uid]) {
jessibucaPlayer[this._uid].pause();
}
this.playing = false;
this.err = "";
this.performance = "";
},
destroy: function () {
if (this.jessibuca) {
this.jessibuca.destroy();
if (jessibucaPlayer[this._uid]) {
jessibucaPlayer[this._uid].destroy();
}
if (document.getElementById("buttonsBox") == null) {
this.$refs.container.appendChild(this.btnDom)
}
this.jessibuca = null;
jessibucaPlayer[this._uid] = null;
this.playing = false;
this.err = "";
this.performance = "";
@@ -262,7 +263,7 @@ export default {
},
fullscreenSwich: function () {
let isFull = this.isFullscreen()
this.jessibuca.setFullscreen(!isFull)
jessibucaPlayer[this._uid].setFullscreen(!isFull)
this.fullscreen = !isFull;
},
isFullscreen: function () {
@@ -273,8 +274,8 @@ export default {
}
},
destroyed() {
if (this.jessibuca) {
this.jessibuca.destroy();
if (jessibucaPlayer[this._uid]) {
jessibucaPlayer[this._uid].destroy();
}
this.playing = false;
this.loaded = false;

6
web_src/src/components/control.vue
View File

@@ -235,10 +235,8 @@
<el-table-column prop="local_ip" label="本地"></el-table-column>
<el-table-column prop="typeid" label="类型"></el-table-column>
<el-table-column align="right">
<template slot="header" slot-scope="scope">
<el-button icon="el-icon-refresh-right" circle @click="getAllSession()"></el-button>
</template>
<template slot-scope="scope">
<template v-slot:default="scope">
<el-button size="mini" icon="el-icon-refresh-right" circle @click="getAllSession()"></el-button>
<el-button @click.native.prevent="deleteRow(scope.$index, allSessionData)" type="text" size="small">移除
</el-button>
</template>

6
web_src/src/components/dialog/deviceEdit.vue
View File

@@ -39,6 +39,12 @@
<el-form-item label="语音发送通道" prop="name">
<el-input v-model="form.audioChannelForReceive" clearable></el-input>
</el-form-item>
<el-form-item label="地理坐标系" prop="geoCoordSys" >
<el-select v-model="form.geoCoordSys" style="float: left; width: 100%" >
<el-option key="WGS84" label="WGS84" value="WGS84"></el-option>
<el-option key="GCJ02" label="GCJ02" value="GCJ02"></el-option>
</el-select>
</el-form-item>
<el-form-item label="目录订阅" title="0为取消订阅" prop="subscribeCycleForCatalog" >
<el-input v-model="form.subscribeCycleForCatalog" clearable ></el-input>
</el-form-item>

300
web_src/src/components/dialog/devicePlayer.vue
View File

@@ -3,9 +3,23 @@
<el-dialog title="视频播放" top="0" :close-on-click-modal="false" :visible.sync="showVideoDialog" @close="close()">
<!-- <LivePlayer v-if="showVideoDialog" ref="videoPlayer" :videoUrl="videoUrl" :error="videoError" :message="videoError" :hasaudio="hasaudio" fluent autoplay live></LivePlayer> -->
<player ref="videoPlayer" :visible.sync="showVideoDialog" :videoUrl="videoUrl" :error="videoError" :message="videoError" :height="false" :hasAudio="hasAudio" fluent autoplay live ></player>
<div style="width: 100%; height: 100%">
<el-tabs type="card" :stretch="true" v-model="activePlayer" @tab-click="changePlayer" v-if="Object.keys(this.player).length > 1">
<el-tab-pane label="Jessibuca" name="jessibuca">
<jessibucaPlayer v-if="activePlayer === 'jessibuca'" ref="jessibuca" :visible.sync="showVideoDialog" :videoUrl="videoUrl" :error="videoError" :message="videoError" height="100px" :hasAudio="hasAudio" fluent autoplay live ></jessibucaPlayer>
</el-tab-pane>
<el-tab-pane label="WebRTC" name="webRTC">
<rtc-player v-if="activePlayer === 'webRTC'" ref="webRTC" :visible.sync="showVideoDialog" :videoUrl="videoUrl" :error="videoError" :message="videoError" height="100px" :hasAudio="hasAudio" fluent autoplay live ></rtc-player>
</el-tab-pane>
<el-tab-pane label="h265web">h265web敬请期待</el-tab-pane>
<el-tab-pane label="wsPlayer">wsPlayer 敬请期待</el-tab-pane>
</el-tabs>
<jessibucaPlayer v-if="Object.keys(this.player).length == 1 && this.player.jessibuca" ref="jessibuca" :visible.sync="showVideoDialog" :videoUrl="videoUrl" :error="videoError" :message="videoError" height="100px" :hasAudio="hasAudio" fluent autoplay live ></jessibucaPlayer>
<rtc-player v-if="Object.keys(this.player).length == 1 && this.player.webRTC" ref="jessibuca" :visible.sync="showVideoDialog" :videoUrl="videoUrl" :error="videoError" :message="videoError" height="100px" :hasAudio="hasAudio" fluent autoplay live ></rtc-player>
</div>
<div id="shared" style="text-align: right; margin-top: 1rem;">
<el-tabs v-model="tabActiveName" @tab-click="tabHandleClick">
<el-tabs v-model="tabActiveName" @tab-click="tabHandleClick" >
<el-tab-pane label="实时视频" name="media">
<div style="margin-bottom: 0.5rem;">
<!-- <el-button type="primary" size="small" @click="playRecord(true, '')">播放</el-button>-->
@@ -31,10 +45,100 @@
<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" >
<template slot="append">
<i class="cpoy-btn el-icon-document-copy" title="点击拷贝" v-clipboard="getPlayerShared.sharedRtmp" @success="$message({type:'success', message:'成功拷贝到粘贴板'})"></i>
</template>
<el-button slot="append" icon="el-icon-document-copy" title="点击拷贝" v-clipboard="getPlayerShared.sharedRtmp" @success="$message({type:'success', message:'成功拷贝到粘贴板'})"></el-button>
<el-dropdown slot="prepend" v-if="streamInfo" trigger="click" @command="copyUrl">
<el-button >
更多地址<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown" >
<el-dropdown-item :command="streamInfo.flv">
<el-tag >FLV:</el-tag>
<span>{{ streamInfo.flv }}</span>
</el-dropdown-item>
<el-dropdown-item :command="streamInfo.https_flv">
<el-tag >FLV(https):</el-tag>
<span>{{ streamInfo.https_flv }}</span>
</el-dropdown-item>
<el-dropdown-item :command="streamInfo.ws_flv">
<el-tag >FLV(ws):</el-tag>
<span >{{ streamInfo.ws_flv }}</span>
</el-dropdown-item>
<el-dropdown-item :command="streamInfo.wss_flv">
<el-tag >FLV(wss):</el-tag>
<span>{{ streamInfo.wss_flv }}</span>
</el-dropdown-item>
<el-dropdown-item :command="streamInfo.fmp4">
<el-tag >FMP4:</el-tag>
<span>{{ streamInfo.fmp4 }}</span>
</el-dropdown-item>
<el-dropdown-item :command="streamInfo.https_fmp4">
<el-tag >FMP4(https):</el-tag>
<span>{{ streamInfo.https_fmp4 }}</span>
</el-dropdown-item>
<el-dropdown-item :command="streamInfo.ws_fmp4">
<el-tag >FMP4(ws):</el-tag>
<span>{{ streamInfo.ws_fmp4 }}</span>
</el-dropdown-item>
<el-dropdown-item :command="streamInfo.wss_fmp4">
<el-tag >FMP4(wss):</el-tag>
<span>{{ streamInfo.wss_fmp4 }}</span>
</el-dropdown-item>
<el-dropdown-item :command="streamInfo.hls">
<el-tag>HLS:</el-tag>
<span>{{ streamInfo.hls }}</span>
</el-dropdown-item>
<el-dropdown-item :command="streamInfo.https_hls">
<el-tag >HLS(https):</el-tag>
<span>{{ streamInfo.https_hls }}</span>
</el-dropdown-item>
<el-dropdown-item :command="streamInfo.ws_hls">
<el-tag >HLS(ws):</el-tag>
<span>{{ streamInfo.ws_hls }}</span>
</el-dropdown-item>
<el-dropdown-item :command="streamInfo.wss_hls">
<el-tag >HLS(wss):</el-tag>
<span>{{ streamInfo.wss_hls }}</span>
</el-dropdown-item>
<el-dropdown-item :command="streamInfo.ts">
<el-tag>TS:</el-tag>
<span>{{ streamInfo.ts }}</span>
</el-dropdown-item>
<el-dropdown-item :command="streamInfo.https_ts">
<el-tag>TS(https):</el-tag>
<span>{{ streamInfo.https_ts }}</span>
</el-dropdown-item>
<el-dropdown-item :command="streamInfo.ws_ts">
<el-tag>TS(ws):</el-tag>
<span>{{ streamInfo.ws_ts }}</span>
</el-dropdown-item>
<el-dropdown-item :command="streamInfo.wss_ts">
<el-tag>TS(wss):</el-tag>
<span>{{ streamInfo.wss_ts }}</span>
</el-dropdown-item>
<el-dropdown-item :command="streamInfo.rtc">
<el-tag >RTC:</el-tag>
<span>{{ streamInfo.rtc }}</span>
</el-dropdown-item>
<el-dropdown-item :command="streamInfo.rtmp">
<el-tag >RTMP:</el-tag>
<span>{{ streamInfo.rtmp }}</span>
</el-dropdown-item>
<el-dropdown-item :command="streamInfo.rtmps">
<el-tag >RTMPS:</el-tag>
<span>{{ streamInfo.rtmps }}</span>
</el-dropdown-item>
<el-dropdown-item :command="streamInfo.rtsp">
<el-tag >RTSP:</el-tag>
<span>{{ streamInfo.rtsp }}</span>
</el-dropdown-item>
<el-dropdown-item :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/"}}-->
@@ -115,27 +219,27 @@
<div class="control-panel">
<el-button-group>
<el-tag style="position :absolute; left: 0rem; top: 0rem; width: 5rem; text-align: center" size="medium" type="info">预置位编号</el-tag>
<el-tag style="position :absolute; left: 0rem; top: 0rem; width: 5rem; text-align: center" size="medium">预置位编号</el-tag>
<el-input-number style="position: absolute; left: 5rem; top: 0rem; width: 6rem" size="mini" v-model="presetPos" controls-position="right" :precision="0" :step="1" :min="1" :max="255"></el-input-number>
<el-button style="position: absolute; left: 11rem; top: 0rem; width: 5rem" size="mini" icon="el-icon-add-location" @click="presetPosition(129, presetPos)">设置</el-button>
<el-button style="position: absolute; left: 27rem; top: 0rem; width: 5rem" size="mini" type="primary" icon="el-icon-place" @click="presetPosition(130, presetPos)">调用</el-button>
<el-button style="position: absolute; left: 16rem; top: 0rem; width: 5rem" size="mini" icon="el-icon-delete-location" @click="presetPosition(131, presetPos)">删除</el-button>
<el-tag style="position :absolute; left: 0rem; top: 2.5rem; width: 5rem; text-align: center" size="medium" type="info">巡航速度</el-tag>
<el-tag style="position :absolute; left: 0rem; top: 2.5rem; width: 5rem; text-align: center" size="medium">巡航速度</el-tag>
<el-input-number style="position: absolute; left: 5rem; top: 2.5rem; width: 6rem" size="mini" v-model="cruisingSpeed" controls-position="right" :precision="0" :min="1" :max="4095"></el-input-number>
<el-button style="position: absolute; left: 11rem; top: 2.5rem; width: 5rem" size="mini" icon="el-icon-loading" @click="setSpeedOrTime(134, cruisingGroup, cruisingSpeed)">设置</el-button>
<el-tag style="position :absolute; left: 16rem; top: 2.5rem; width: 5rem; text-align: center" size="medium" type="info">停留时间</el-tag>
<el-tag style="position :absolute; left: 16rem; top: 2.5rem; width: 5rem; text-align: center" size="medium">停留时间</el-tag>
<el-input-number style="position: absolute; left: 21rem; top: 2.5rem; width: 6rem" size="mini" v-model="cruisingTime" controls-position="right" :precision="0" :min="1" :max="4095"></el-input-number>
<el-button style="position: absolute; left: 27rem; top: 2.5rem; width: 5rem" size="mini" icon="el-icon-timer" @click="setSpeedOrTime(135, cruisingGroup, cruisingTime)">设置</el-button>
<el-tag style="position :absolute; left: 0rem; top: 4.5rem; width: 5rem; text-align: center" size="medium" type="info">巡航组编号</el-tag>
<el-tag style="position :absolute; left: 0rem; top: 4.5rem; width: 5rem; text-align: center" size="medium">巡航组编号</el-tag>
<el-input-number style="position: absolute; left: 5rem; top: 4.5rem; width: 6rem" size="mini" v-model="cruisingGroup" controls-position="right" :precision="0" :min="0" :max="255"></el-input-number>
<el-button style="position: absolute; left: 11rem; top: 4.5rem; width: 5rem" size="mini" icon="el-icon-add-location" @click="setCommand(132, cruisingGroup, presetPos)">添加点</el-button>
<el-button style="position: absolute; left: 16rem; top: 4.5rem; width: 5rem" size="mini" icon="el-icon-delete-location" @click="setCommand(133, cruisingGroup, presetPos)">删除点</el-button>
<el-button style="position: absolute; left: 21rem; top: 4.5rem; width: 5rem" size="mini" icon="el-icon-delete" @click="setCommand(133, cruisingGroup, 0)">删除组</el-button>
<el-button style="position: absolute; left: 27rem; top: 5rem; width: 5rem" size="mini" type="primary" icon="el-icon-video-camera-solid" @click="setCommand(136, cruisingGroup, 0)">巡航</el-button>
<el-tag style="position :absolute; left: 0rem; top: 7rem; width: 5rem; text-align: center" size="medium" type="info">扫描速度</el-tag>
<el-tag style="position :absolute; left: 0rem; top: 7rem; width: 5rem; text-align: center" size="medium">扫描速度</el-tag>
<el-input-number style="position: absolute; left: 5rem; top: 7rem; width: 6rem" size="mini" v-model="scanSpeed" controls-position="right" :precision="0" :min="1" :max="4095"></el-input-number>
<el-button style="position: absolute; left: 11rem; top: 7rem; width: 5rem" size="mini" icon="el-icon-loading" @click="setSpeedOrTime(138, scanGroup, scanSpeed)">设置</el-button>
<el-tag style="position :absolute; left: 0rem; top: 9rem; width: 5rem; text-align: center" size="medium" type="info">扫描组编号</el-tag>
<el-tag style="position :absolute; left: 0rem; top: 9rem; width: 5rem; text-align: center" size="medium">扫描组编号</el-tag>
<el-input-number style="position: absolute; left: 5rem; top: 9rem; width: 6rem" size="mini" v-model="scanGroup" controls-position="right" :precision="0" :step="1" :min="0" :max="255"></el-input-number>
<el-button style="position: absolute; left: 11rem; top: 9rem; width: 5rem" size="mini" icon="el-icon-d-arrow-left" @click="setCommand(137, scanGroup, 1)">左边界</el-button>
<el-button style="position: absolute; left: 16rem; top: 9rem; width: 5rem" size="mini" icon="el-icon-d-arrow-right" @click="setCommand(137, scanGroup, 2)">右边界</el-button>
@@ -172,26 +276,28 @@
</div>
</el-tab-pane>
</el-tabs>
</div>
</el-dialog>
<recordDownload ref="recordDownload"></recordDownload>
</div>
</template>
<script>
import player from '../dialog/rtcPlayer.vue'
import rtcPlayer from '../dialog/rtcPlayer.vue'
// import LivePlayer from '@liveqing/liveplayer'
// import player from '../dialog/easyPlayer.vue'
// import player from '../dialog/jessibuca.vue'
import jessibucaPlayer from '../common/jessibuca.vue'
import recordDownload from '../dialog/recordDownload.vue'
export default {
name: 'devicePlayer',
props: {},
components: {
player,
jessibucaPlayer, rtcPlayer, recordDownload,
},
computed: {
getPlayerShared: function () {
return {
sharedUrl: window.location.origin + '/#/play/wasm/' + encodeURIComponent(this.videoUrl),
sharedIframe: '<iframe src="' + window.location.origin + '/#/play/wasm/' + encodeURIComponent(this.videoUrl) + '"></iframe>',
@@ -199,11 +305,22 @@ export default {
};
}
},
created() {},
created() {
console.log(this.player)
if (Object.keys(this.player).length === 1) {
this.activePlayer = Object.keys(this.player)[0]
}
},
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", "rtc"],
},
videoHistory: {
date: '',
searchHistoryResult: [] //媒体流历史记录搜索结果
@@ -241,6 +358,7 @@ export default {
seekTime: 0,
recordStartTime: 0,
showTimeText: "00:00:00",
streamInfo: null,
};
},
methods: {
@@ -250,7 +368,7 @@ export default {
that.tracks = [];
that.tracksLoading = true;
that.tracksNotLoaded = false;
if (tab.name == "codec") {
if (tab.name === "codec") {
this.$axios({
method: 'get',
url: '/zlm/' +this.mediaServerId+ '/index/api/getMediaInfo?vhost=__defaultVhost__&schema=rtmp&app='+ this.app +'&stream='+ this.streamId
@@ -269,6 +387,12 @@ export default {
}).catch(function (e) {});
}
},
changePlayer: function (tab) {
console.log(this.player[tab.name][0])
this.activePlayer = tab.name;
this.videoUrl = this.streamInfo[this.player[tab.name][0]]
console.log(this.videoUrl)
},
openDialog: function (tab, deviceId, channelId, param) {
this.tabActiveName = tab;
this.channelId = channelId;
@@ -277,8 +401,8 @@ export default {
this.mediaServerId = "";
this.app = "";
this.videoUrl = ""
if (!!this.$refs.videoPlayer) {
this.$refs.videoPlayer.pause();
if (!!this.$refs[this.activePlayer]) {
this.$refs[this.activePlayer].pause();
}
switch (tab) {
case "media":
@@ -303,44 +427,32 @@ export default {
console.log(val)
},
play: function (streamInfo, hasAudio) {
this.streamInfo = streamInfo;
this.hasAudio = hasAudio;
this.isLoging = false;
this.videoUrl = streamInfo.rtc;
// this.videoUrl = this.getUrlByStreamInfo(streamInfo);
this.streamId = streamInfo.streamId;
// 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(streamInfo){
let baseZlmApi = process.env.NODE_ENV === 'development'?`${location.host}/debug/zlm`:`${location.host}/zlm`
// return `${baseZlmApi}/${streamInfo.app}/${streamInfo.streamId}.flv`;
// return `http://${baseZlmApi}/${streamInfo.app}/${streamInfo.streamId}.flv`;
getUrlByStreamInfo(){
if (location.protocol === "https:") {
if (streamInfo.wss_flv === null) {
console.error("媒体服务器未配置ssl端口, 使用http端口")
// this.$message({
// showClose: true,
// message: '媒体服务器未配置ssl端口, ',
// type: 'error'
// });
return streamInfo.ws_flv
}else {
return streamInfo.wss_flv;
}
this.videoUrl = this.streamInfo[this.player[this.activePlayer][1]]
}else {
return streamInfo.ws_flv;
this.videoUrl = this.streamInfo[this.player[this.activePlayer][0]]
}
return this.videoUrl;
},
coverPlay: function () {
var that = this;
this.coverPlaying = true;
this.$refs.videoPlayer.pause()
this.$refs[this.activePlayer].pause()
that.$axios({
method: 'post',
url: '/api/play/convert/' + that.streamId
url: '/api/gb_record/convert/' + that.streamId
}).then(function (res) {
if (res.data.code == 0) {
that.convertKey = res.data.key;
@@ -369,7 +481,7 @@ export default {
},
convertStopClick: function() {
this.convertStop(()=>{
this.$refs.videoPlayer.play(this.videoUrl)
this.$refs[this.activePlayer].play(this.videoUrl)
});
},
convertStop: function(callback) {
@@ -394,12 +506,12 @@ export default {
playFromStreamInfo: function (realHasAudio, streamInfo) {
this.showVideoDialog = true;
this.hasaudio = realHasAudio && this.hasaudio;
this.$refs.videoPlayer.play(this.getUrlByStreamInfo(streamInfo))
this.$refs[this.activePlayer].play(this.getUrlByStreamInfo(streamInfo))
},
close: function () {
console.log('关闭视频');
if (!!this.$refs.videoPlayer){
this.$refs.videoPlayer.pause();
if (!!this.$refs[this.activePlayer]){
this.$refs[this.activePlayer].pause();
}
this.videoUrl = '';
this.coverPlaying = false;
@@ -450,9 +562,19 @@ export default {
method: 'get',
url: '/api/gb_record/query/' + this.deviceId + '/' + this.channelId + '?startTime=' + startTime + '&endTime=' + endTime
}).then(function (res) {
// 处理时间信息
that.videoHistory.searchHistoryResult = res.data.recordList;
that.recordsLoading = false;
console.log(res)
if(res.data.code === 0) {
// 处理时间信息
that.videoHistory.searchHistoryResult = res.data.data.recordList;
that.recordsLoading = false;
}else {
this.$message({
showClose: true,
message: res.data.msg,
type: "error",
});
}
}).catch(function (e) {
console.log(e.message);
// that.videoHistory.searchHistoryResult = falsificationData.recordData;
@@ -474,8 +596,8 @@ export default {
console.log(this.seekTime)
if (that.streamId != "") {
that.stopPlayRecord(function () {
that.streamId = "",
that.playRecord(row);
that.streamId = "";
that.playRecord(row);
})
} else {
this.$axios({
@@ -483,21 +605,22 @@ export default {
url: '/api/playback/start/' + this.deviceId + '/' + this.channelId + '?startTime=' + row.startTime + '&endTime=' +
row.endTime
}).then(function (res) {
var streamInfo = res.data;
that.app = streamInfo.app;
that.streamId = streamInfo.streamId;
that.mediaServerId = streamInfo.mediaServerId;
that.videoUrl = that.getUrlByStreamInfo(streamInfo);
that.streamInfo = res.data;
that.app = that.streamInfo.app;
that.streamId = that.streamInfo.stream;
that.mediaServerId = that.streamInfo.mediaServerId;
that.ssrc = that.streamInfo.ssrc;
that.videoUrl = that.getUrlByStreamInfo();
that.recordPlay = true;
});
}
},
stopPlayRecord: function (callback) {
this.$refs.videoPlayer.pause();
this.$refs[this.activePlayer].pause();
this.videoUrl = '';
this.$axios({
method: 'get',
url: '/api/playback/stop/' + this.deviceId + "/" + this.channelId
url: '/api/playback/stop/' + this.deviceId + "/" + this.channelId + "/" + this.streamId
}).then(function (res) {
if (callback) callback()
});
@@ -505,33 +628,47 @@ export default {
downloadRecord: function (row) {
let that = this;
if (that.streamId != "") {
that.stopDownloadRecord(function () {
that.streamId = "",
that.downloadRecord(row);
that.stopDownloadRecord(function (res) {
if (res.code == 0) {
that.streamId = "";
that.downloadRecord(row);
}else {
this.$message({
showClose: true,
message: res.data.msg,
type: "error",
});
}
})
} else {
this.$axios({
method: 'get',
url: '/api/download/start/' + this.deviceId + '/' + this.channelId + '?startTime=' + row.startTime + '&endTime=' +
url: '/api/gb_record/download/start/' + this.deviceId + '/' + this.channelId + '?startTime=' + row.startTime + '&endTime=' +
row.endTime + '&downloadSpeed=4'
}).then(function (res) {
var streamInfo = res.data;
that.app = streamInfo.app;
that.streamId = streamInfo.streamId;
that.mediaServerId = streamInfo.mediaServerId;
that.videoUrl = that.getUrlByStreamInfo(streamInfo);
that.recordPlay = true;
if (res.data.code == 0) {
let streamInfo = res.data.data;
that.recordPlay = false;
that.$refs.recordDownload.openDialog(that.deviceId, that.channelId, streamInfo.app, streamInfo.stream, streamInfo.mediaServerId);
}else {
that.$message({
showClose: true,
message: res.data.msg,
type: "error",
});
}
});
}
},
stopDownloadRecord: function (callback) {
this.$refs.videoPlayer.pause();
this.$refs[this.activePlayer].pause();
this.videoUrl = '';
this.$axios({
method: 'get',
url: '/api/download/stop/' + this.deviceId + "/" + this.channelId
}).then(function (res) {
if (callback) callback()
url: '/api/gb_record/download/stop/' + this.deviceId + "/" + this.channelId+ "/" + this.streamId
}).then((res)=> {
if (callback) callback(res)
});
},
ptzCamera: function (command) {
@@ -539,8 +676,6 @@ export default {
let that = this;
this.$axios({
method: 'post',
// url: '/api/ptz/' + this.deviceId + '/' + this.channelId + '?leftRight=' + leftRight + '&upDown=' + upDown +
// '&inOut=' + zoom + '&moveSpeed=50&zoomSpeed=50'
url: '/api/ptz/control/' + this.deviceId + '/' + this.channelId + '?command=' + command + '&horizonSpeed=' + this.controSpeed + '&verticalSpeed=' + this.controSpeed + '&zoomSpeed=' + this.controSpeed
}).then(function (res) {});
},
@@ -620,13 +755,21 @@ export default {
console.log(resultArray)
return resultArray;
},
copyUrl: function (dropdownItem){
console.log(dropdownItem)
this.$copyText(dropdownItem).then((e)=> {
this.$message.success("成功拷贝到粘贴板");
}, (e)=> {
})
},
gbPlay(){
console.log('前端控制：播放');
this.$axios({
method: 'get',
url: '/api/playback/resume/' + this.streamId
}).then((res)=> {
this.$refs.videoPlayer.play(this.videoUrl)
this.$refs[this.activePlayer].play(this.videoUrl)
});
},
gbPause(){
@@ -655,8 +798,13 @@ export default {
this.$axios({
method: 'get',
url: `/api/playback/seek/${this.streamId }/` + Math.floor(this.seekTime * val / 100000)
}).then(function (res) {});
}
}).then( (res)=> {
setTimeout(()=>{
this.$refs[this.activePlayer].play(this.videoUrl)
}, 600)
});
},
}
};

18
web_src/src/components/dialog/rtcPlayer.vue
View File

@@ -7,11 +7,11 @@
</template>
<script>
let webrtcPlayer = null;
export default {
name: 'rtcPlayer',
data() {
return {
webrtcPlayer: null,
timer: null
};
},
@@ -35,7 +35,7 @@ export default {
},
methods: {
play: function (url) {
this.webrtcPlayer = new ZLMRTCClient.Endpoint({
webrtcPlayer = new ZLMRTCClient.Endpoint({
element: document.getElementById('webRtcPlayerBox'),// video 标签
debug: true,// 是否打印日志
zlmsdpUrl: url,//流地址
@@ -45,17 +45,17 @@ export default {
videoEnable: false,
recvOnly: true,
})
this.webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_ICE_CANDIDATE_ERROR,(e)=>{// ICE 协商出错
webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_ICE_CANDIDATE_ERROR,(e)=>{// ICE 协商出错
console.error('ICE 协商出错')
this.eventcallbacK("ICE ERROR", "ICE 协商出错")
});
this.webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_ON_REMOTE_STREAMS,(e)=>{//获取到了远端流，可以播放
webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_ON_REMOTE_STREAMS,(e)=>{//获取到了远端流，可以播放
console.error('播放成功',e.streams)
this.eventcallbacK("playing", "播放成功")
});
this.webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED,(e)=>{// offer anwser 交换失败
webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED,(e)=>{// offer anwser 交换失败
console.error('offer anwser 交换失败',e)
this.eventcallbacK("OFFER ANSWER ERROR ", "offer anwser 交换失败")
if (e.code ==-400 && e.msg=="流不存在"){
@@ -68,7 +68,7 @@ export default {
}
});
this.webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_ON_LOCAL_STREAM,(s)=>{// 获取到了本地流
webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_ON_LOCAL_STREAM,(s)=>{// 获取到了本地流
// document.getElementById('selfVideo').srcObject=s;
this.eventcallbacK("LOCAL STREAM", "获取到了本地流")
@@ -76,9 +76,9 @@ export default {
},
pause: function () {
if (this.webrtcPlayer != null) {
this.webrtcPlayer.close();
this.webrtcPlayer = null;
if (webrtcPlayer != null) {
webrtcPlayer.close();
webrtcPlayer = null;
}
},

38
web_src/src/components/devicePosition.vue → web_src/src/components/map.vue
View File

@@ -49,7 +49,7 @@ import devicePlayer from './dialog/devicePlayer.vue'
import queryTrace from './dialog/queryTrace.vue'
export default {
name: "devicePosition",
name: "map",
components: {
MapComponent,
DeviceTree,
@@ -183,12 +183,27 @@ export default {
this.clean()
this.closeInfoBox()
let params = [];
let longitudeStr;
let latitudeStr;
if (window.mapParam.coordinateSystem == "GCJ-02") {
longitudeStr = "longitudeGcj02";
latitudeStr = "latitudeGcj02";
}else if (window.mapParam.coordinateSystem == "WGS84") {
longitudeStr = "longitudeWgs84";
latitudeStr = "latitudeWgs84";
}else {
longitudeStr = "longitude";
latitudeStr = "latitude";
}
for (let i = 0; i < channels.length; i++) {
if (channels[i].longitude * channels[i].latitude === 0) {
let longitude = channels[i][longitudeStr];
let latitude = channels[i][latitudeStr];
if (longitude * latitude === 0) {
continue;
}
let item = {
position: [channels[i].longitude, channels[i].latitude],
position: [longitude, latitude],
image: {
src: this.getImageByChannel(channels[i]),
anchor: [0.5, 1]
@@ -202,7 +217,7 @@ export default {
this.layer = this.$refs.map.addLayer(params, this.featureClickEvent)
console.log(4)
if (params.length === 1) {
this.$refs.map.panTo([channels[0].longitude, channels[0].latitude], mapParam.maxZoom)
this.$refs.map.panTo([channels[0][longitudeStr], channels[0][latitudeStr]], mapParam.maxZoom)
} else if (params.length > 1) {
this.$refs.map.fit(this.layer)
} else {
@@ -251,7 +266,20 @@ export default {
this.channel = channels[0]
}
this.$nextTick(() => {
this.infoBoxId = this.$refs.map.openInfoBox([this.channel.longitude, this.channel.latitude], this.$refs.infobox, [0, -50])
let longitudeStr;
let latitudeStr;
if (window.mapParam.coordinateSystem == "GCJ-02") {
longitudeStr = "longitudeGcj02";
latitudeStr = "latitudeGcj02";
}else if (window.mapParam.coordinateSystem == "WGS84") {
longitudeStr = "longitudeWgs84";
latitudeStr = "latitudeWgs84";
}else {
longitudeStr = "longitude";
latitudeStr = "latitude";
}
let position = [this.channel[longitudeStr], this.channel[latitudeStr]];
this.infoBoxId = this.$refs.map.openInfoBox(position, this.$refs.infobox, [0, -50])
})
},
closeInfoBox: function () {

46
web_src/src/components/service/DeviceService.js
View File

@@ -21,47 +21,60 @@ class DeviceService{
if (typeof (errorCallback) == "function") errorCallback(error)
});
}
getAllDeviceList(callback, errorCallback) {
getDevice(deviceId, callback, errorCallback){
this.$axios({
method: 'get',
url:`/api/device/query/devices/${deviceId}`,
}).then((res) => {
if (typeof (callback) == "function") callback(res.data)
}).catch((error) => {
console.log(error);
if (typeof (errorCallback) == "function") errorCallback(error)
});
}
getAllDeviceList(callback,endCallback, errorCallback) {
let currentPage = 1;
let count = 100;
let deviceList = []
this.getAllDeviceListIteration(deviceList, currentPage, count, (data) => {
if (typeof (callback) == "function") callback(data)
}, errorCallback)
this.getAllDeviceListIteration(deviceList, currentPage, count, callback, endCallback, errorCallback)
}
getAllDeviceListIteration(deviceList, currentPage, count, callback, errorCallback) {
getAllDeviceListIteration(deviceList, currentPage, count, callback, endCallback, errorCallback) {
this.getDeviceList(currentPage, count, (data) => {
if (data.list) {
if (typeof (callback) == "function") callback(data.list)
deviceList = deviceList.concat(data.list);
if (deviceList.length < data.total) {
currentPage ++
this.getAllDeviceListIteration(deviceList, currentPage, count, callback, errorCallback)
this.getAllDeviceListIteration(deviceList, currentPage, count, callback, endCallback, errorCallback)
}else {
if (typeof (callback) == "function") callback(deviceList)
if (typeof (endCallback) == "function") endCallback(deviceList)
}
}
}, errorCallback)
}
getAllChannel(isCatalog, catalogUnderDevice, deviceId, callback, errorCallback) {
getAllChannel(isCatalog, catalogUnderDevice, deviceId, callback, endCallback, errorCallback) {
let currentPage = 1;
let count = 100;
let catalogList = []
this.getAllChannelIteration(isCatalog, catalogUnderDevice, deviceId, catalogList, currentPage, count, callback, errorCallback)
this.getAllChannelIteration(isCatalog, catalogUnderDevice, deviceId, catalogList, currentPage, count, callback, endCallback, errorCallback)
}
getAllChannelIteration(isCatalog, catalogUnderDevice, deviceId, catalogList, currentPage, count, callback, errorCallback) {
getAllChannelIteration(isCatalog, catalogUnderDevice, deviceId, catalogList, currentPage, count, callback, endCallback, errorCallback) {
this.getChanel(isCatalog, catalogUnderDevice, deviceId, currentPage, count, (data) => {
if (data.list) {
if (typeof (callback) == "function") callback(data.list)
catalogList = catalogList.concat(data.list);
if (catalogList.length < data.total) {
currentPage ++
this.getAllChannelIteration(isCatalog,catalogUnderDevice, deviceId, catalogList, currentPage, count, callback, errorCallback)
}else {
console.log(1)
if (typeof (callback) == "function") callback(catalogList)
if (typeof (endCallback) == "function") endCallback(catalogList)
}
}
}, errorCallback)
@@ -84,22 +97,23 @@ class DeviceService{
}
getAllSubChannel(isCatalog, deviceId, channelId, callback, errorCallback) {
getAllSubChannel(isCatalog, deviceId, channelId, callback, endCallback, errorCallback) {
let currentPage = 1;
let count = 100;
let catalogList = []
this.getAllSubChannelIteration(isCatalog, deviceId, channelId, catalogList, currentPage, count, callback, errorCallback)
this.getAllSubChannelIteration(isCatalog, deviceId, channelId, catalogList, currentPage, count, callback, endCallback, errorCallback)
}
getAllSubChannelIteration(isCatalog, deviceId,channelId, catalogList, currentPage, count, callback, errorCallback) {
getAllSubChannelIteration(isCatalog, deviceId,channelId, catalogList, currentPage, count, callback, endCallback, errorCallback) {
this.getSubChannel(isCatalog, deviceId, channelId, currentPage, count, (data) => {
if (data.list) {
if (typeof (callback) == "function") callback(data.list)
catalogList = catalogList.concat(data.list);
if (catalogList.length < data.total) {
currentPage ++
this.getAllSubChannelIteration(isCatalog, deviceId, channelId, catalogList, currentPage, count, callback, errorCallback)
this.getAllSubChannelIteration(isCatalog, deviceId, channelId, catalogList, currentPage, count, callback, endCallback, errorCallback)
}else {
if (typeof (callback) == "function") callback(catalogList)
if (typeof (endCallback) == "function") endCallback(catalogList)
}
}
}, errorCallback)

12
web_src/src/layout/UiHeader.vue
View File

@@ -1,9 +1,11 @@
<template>
<div id="UiHeader">
<el-menu router :default-active="activeIndex" menu-trigger="click" background-color="#545c64" text-color="#fff"
active-text-color="#ffd04b" mode="horizontal">
<el-menu router :default-active="activeIndex" menu-trigger="click" background-color="#001529" text-color="#fff"
active-text-color="#1890ff" mode="horizontal">
<el-menu-item index="/control">控制台</el-menu-item>
<el-menu-item index="/live">实时监控</el-menu-item>
<el-menu-item index="/live">分屏监控</el-menu-item>
<el-menu-item index="/deviceList">国标设备</el-menu-item>
<el-menu-item index="/map">电子地图</el-menu-item>
<el-menu-item index="/pushVideoList">推流列表</el-menu-item>
@@ -148,4 +150,8 @@ export default {
#UiHeader .el-switch__label.is-active{
color: #409EFF;
}
#UiHeader .el-menu-item.is-active {
color: #fff!important;
background-color: #1890ff!important;
}
</style>

12
web_src/src/router/index.js
View File

@@ -7,7 +7,7 @@ import deviceList from '../components/DeviceList.vue'
import channelList from '../components/channelList.vue'
import pushVideoList from '../components/PushVideoList.vue'
import streamProxyList from '../components/StreamProxyList.vue'
import devicePosition from '../components/devicePosition.vue'
import map from '../components/map.vue'
import login from '../components/Login.vue'
import parentPlatformList from '../components/ParentPlatformList.vue'
import cloudRecord from '../components/CloudRecord.vue'
@@ -69,9 +69,9 @@ export default new VueRouter({
component: parentPlatformList,
},
{
path: '/devicePosition/:deviceId/:parentChannelId/:count/:page',
name: 'devicePosition',
component: devicePosition,
path: '/map/:deviceId/:parentChannelId/:count/:page',
name: 'map',
component: map,
},
{
path: '/cloudRecord',
@@ -100,8 +100,8 @@ export default new VueRouter({
},
{
path: '/map',
name: 'devicePosition',
component: devicePosition,
name: 'map',
component: map,
},
]
},