From 72132ca70ecd2916ab5be7bb534c2b8d558e4686 Mon Sep 17 00:00:00 2001
From: 648540858 <648540858@qq.com>
Date: 星期四, 05 一月 2023 09:38:19 +0800
Subject: [PATCH] Merge pull request #713 from xu-bin-bin/wvp-28181-2.0
---
web_src/src/components/StreamProxyList.vue | 372 +++++++++++++++++++++++++++++++---------------------
1 files changed, 223 insertions(+), 149 deletions(-)
diff --git a/web_src/src/components/StreamProxyList.vue b/web_src/src/components/StreamProxyList.vue
index f76a164..47ccde8 100644
--- a/web_src/src/components/StreamProxyList.vue
+++ b/web_src/src/components/StreamProxyList.vue
@@ -1,119 +1,145 @@
<template>
- <div id="streamProxyList">
- <el-container>
- <el-header>
- <uiHeader></uiHeader>
- </el-header>
- <el-main>
- <div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;">
- <span style="font-size: 1rem; font-weight: bold;">鎷夋祦浠ｇ悊鍒楄〃</span>
- </div>
- <div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;font-size: 14px;">
- <el-button icon="el-icon-plus" size="mini" style="margin-right: 1rem;" type="primary" @click="addStreamProxy">娣诲姞浠ｇ悊</el-button>
- </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="娴両D" align="center" show-overflow-tooltip/>
- <el-table-column label="娴佸湴鍧�" width="400" align="center" show-overflow-tooltip >
- <template slot-scope="scope">
- <div slot="reference" class="name-wrapper">
-
- <el-tag size="medium" v-if="scope.row.type == 'default'">
- <i class="cpoy-btn el-icon-document-copy" title="鐐瑰嚮鎷疯礉" v-clipboard="scope.row.url" @success="$message({type:'success', message:'鎴愬姛鎷疯礉鍒扮矘璐存澘'})"></i>
- {{scope.row.url}}
- </el-tag>
- <el-tag size="medium" v-if="scope.row.type != 'default'">
- <i class="cpoy-btn el-icon-document-copy" title="鐐瑰嚮鎷疯礉" v-clipboard="scope.row.src_url" @success="$message({type:'success', message:'鎴愬姛鎷疯礉鍒扮矘璐存澘'})"></i>
- {{scope.row.src_url}}
- </el-tag>
- </div>
- </template>
- </el-table-column>
- <el-table-column prop="gbId" label="鍥芥爣缂栫爜" width="180" align="center" show-overflow-tooltip/>
- <el-table-column label="杞琀LS" width="120" align="center">
- <template slot-scope="scope">
- <div slot="reference" class="name-wrapper">
- <el-tag size="medium" v-if="scope.row.enable_hls">宸插惎鐢�</el-tag>
- <el-tag size="medium" type="info" v-if="!scope.row.enable_hls">鏈惎鐢�</el-tag>
- </div>
- </template>
- </el-table-column>
- <el-table-column label="MP4褰曞埗" width="120" align="center">
- <template slot-scope="scope">
- <div slot="reference" class="name-wrapper">
- <el-tag size="medium" v-if="scope.row.enable_mp4">宸插惎鐢�</el-tag>
- <el-tag size="medium" type="info" v-if="!scope.row.enable_mp4">鏈惎鐢�</el-tag>
- </div>
- </template>
- </el-table-column>
- <el-table-column label="鍚敤" width="120" align="center">
- <template slot-scope="scope">
- <div slot="reference" class="name-wrapper">
- <el-tag size="medium" v-if="scope.row.enable">宸插惎鐢�</el-tag>
- <el-tag size="medium" type="info" v-if="!scope.row.enable">鏈惎鐢�</el-tag>
- </div>
- </template>
- </el-table-column>
+ <div id="streamProxyList" style="width: 100%">
+ <div class="page-header">
+ <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="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" 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="娴両D" 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">
- <el-table-column label="鎿嶄綔" width="360" align="center" 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" 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 size="mini" icon="el-icon-position" type="primary" >鍔犲叆鍥芥爣</el-button> -->
- </el-button-group>
- </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, 25, 35, 50]"
- layout="total, sizes, prev, pager, next"
- :total="total">
- </el-pagination>
- <streamProxyEdit ref="streamProxyEdit" ></streamProxyEdit>
- </el-main>
- </el-container>
+ <el-tag size="medium" v-if="scope.row.type == 'default'">
+ <i class="cpoy-btn el-icon-document-copy" title="鐐瑰嚮鎷疯礉" v-clipboard="scope.row.url" @success="$message({type:'success', message:'鎴愬姛鎷疯礉鍒扮矘璐存澘'})"></i>
+ {{scope.row.url}}
+ </el-tag>
+ <el-tag size="medium" v-if="scope.row.type != 'default'">
+ <i class="cpoy-btn el-icon-document-copy" title="鐐瑰嚮鎷疯礉" v-clipboard="scope.row.src_url" @success="$message({type:'success', message:'鎴愬姛鎷疯礉鍒扮矘璐存澘'})"></i>
+ {{scope.row.src_url}}
+ </el-tag>
+ </div>
+ </template>
+ </el-table-column>
+ <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 === "default"? "鐩存帴浠ｇ悊":"FFMPEG浠ｇ悊"}}</el-tag>
+ </div>
+ </template>
+ </el-table-column>
+
+ <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>
+ <el-tag size="medium" type="info" v-if="!scope.row.status">绂荤嚎</el-tag>
+ </div>
+ </template>
+ </el-table-column>
+ <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>
+ <el-tag size="medium" type="info" v-if="!scope.row.enable">鏈惎鐢�</el-tag>
+ </div>
+ </template>
+ </el-table-column>
+ <el-table-column prop="createTime" label="鍒涘缓鏃堕棿" min-width="150" 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.enable_audio">宸插惎鐢�</el-tag>
+ <el-tag size="medium" type="info" v-if="!scope.row.enable_audio">鏈惎鐢�</el-tag>
+ </div>
+ </template>
+ </el-table-column>
+ <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_mp4">宸插惎鐢�</el-tag>
+ <el-tag size="medium" type="info" v-if="!scope.row.enable_mp4">鏈惎鐢�</el-tag>
+ </div>
+ </template>
+ </el-table-column>
+ <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>
+ <el-tag size="medium" v-if="scope.row.enable_disable_none_reader">鍋滅敤</el-tag>
+ <el-tag size="medium" type="info" v-if="!scope.row.enable_remove_none_reader && !scope.row.enable_disable_none_reader">涓嶅仛澶勭悊</el-tag>
+ </div>
+ </template>
+ </el-table-column>
+
+
+ <el-table-column label="鎿嶄綔" width="360" fixed="right">
+ <template slot-scope="scope">
+ <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="scope.row.startBtnLoading" 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>
+ <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>
+ <streamProxyEdit ref="streamProxyEdit" ></streamProxyEdit>
+ <onvifEdit ref="onvifEdit" ></onvifEdit>
</div>
</template>
<script>
import streamProxyEdit from './dialog/StreamProxyEdit.vue'
+ import onvifEdit from './dialog/onvifEdit.vue'
import devicePlayer from './dialog/devicePlayer.vue'
- import uiHeader from './UiHeader.vue'
+ import uiHeader from '../layout/UiHeader.vue'
export default {
name: 'streamProxyList',
components: {
devicePlayer,
streamProxyEdit,
+ onvifEdit,
uiHeader
},
data() {
return {
- streamProxyList: [],
+ streamProxyList: [],
currentPusher: {}, //褰撳墠鎿嶄綔璁惧瀵硅薄
updateLooper: 0, //鏁版嵁鍒锋柊杞鏍囧織
currentDeviceChannelsLenth:0,
- winHeight: window.innerHeight - 200,
+ winHeight: window.innerHeight - 250,
currentPage:1,
count:15,
total:0,
- getListLoading: false
+ startBtnLoading: false
};
},
computed: {
},
mounted() {
this.initData();
- // this.updateLooper = setInterval(this.initData, 10000);
+ this.startUpdateList()
},
destroyed() {
this.$destroy('videojs');
@@ -123,6 +149,12 @@
initData: function() {
this.getStreamProxyList();
},
+ stopUpdateList: function (){
+ window.clearInterval(this.updateLooper)
+ },
+ startUpdateList: function (){
+ this.updateLooper = setInterval(this.initData, 1000);
+ },
currentChange: function(val){
this.currentPage = val;
this.getStreamProxyList();
@@ -133,108 +165,150 @@
},
getStreamProxyList: function() {
let that = this;
- this.getListLoading = true;
- this.$axios.get(`/api/proxy/list`,{
+ this.$axios({
+ method: 'get',
+ url:`/api/proxy/list`,
params: {
page: that.currentPage,
count: that.count
}
- } )
- .then(function (res) {
- console.log(res);
- console.log(res.data.list);
- that.total = res.data.total;
- that.streamProxyList = res.data.list;
- that.getListLoading = false;
- })
- .catch(function (error) {
+ }).then(function (res) {
+ if (res.data.code === 0) {
+ that.total = res.data.data.total;
+ for (let i = 0; i < res.data.data.list.length; i++) {
+ res.data.data.list[i]["startBtnLoading"] = false;
+ }
+ that.streamProxyList = res.data.data.list;
+ }
+ }).catch(function (error) {
console.log(error);
- that.getListLoading = false;
});
},
addStreamProxy: function(){
this.$refs.streamProxyEdit.openDialog(null, this.initData)
},
+ addOnvif: function(){
+ this.$axios({
+ method: 'get',
+ url:`/api/onvif/search?timeout=3000`,
+ }).then((res) =>{
+ if (res.data.code === 0 ){
+ if (res.data.data.length > 0) {
+ this.$refs.onvifEdit.openDialog(res.data.data, (url)=>{
+ if (url != null) {
+ this.$refs.onvifEdit.close();
+ this.$refs.streamProxyEdit.openDialog({type: "default", url: url, src_url: url}, this.initData())
+ }
+ })
+ }else {
+ this.$message.success("鏈壘鍒板彲鐢ㄨ澶�");
+ }
+ }else {
+ this.$message.error(res.data.msg);
+ }
+
+ }).catch((error)=> {
+ this.$message.error(error.response.data.msg);
+ });
+
+ },
saveStreamProxy: function(){
},
play: function(row){
let that = this;
- this.getListLoading = true;
- this.$axios.get(`/api/media/getStreamInfoByAppAndStream`,{
+ this.$axios({
+ method: 'get',
+ url:`/api/push/getPlayUrl`,
params: {
app: row.app,
- stream: row.stream
+ stream: row.stream,
+ mediaServerId: row.mediaServerId
}
- })
- .then(function (res) {
- that.getListLoading = false;
- that.$refs.devicePlayer.openDialog("streamPlay", null, null, {
- streamInfo: res.data,
- hasAudio: true
- });
- })
- .catch(function (error) {
+ }).then(function (res) {
+ if (res.data.code === 0) {
+ that.$refs.devicePlayer.openDialog("streamPlay", null, null, {
+ streamInfo: res.data.data,
+ hasAudio: true
+ });
+ }else {
+ that.$message({
+ showClose: true,
+ message: "鑾峰彇鍦板潃澶辫触锛�" + res.data.msg,
+ type: "error",
+ });
+ }
+
+ }).catch(function (error) {
console.log(error);
- that.getListLoading = false;
});
-
+
},
deleteStreamProxy: function(row){
- console.log(1111)
let that = this;
- this.getListLoading = true;
- this.$axios.get(`/api/proxy/del`,{
- params: {
- app: row.app,
- stream: row.stream
- }
- })
- .then(function (res) {
- that.getListLoading = false;
- that.initData()
- })
- .catch(function (error) {
- console.log(error);
- that.getListLoading = false;
- });
+ that.$axios({
+ method:"delete",
+ url:"/api/proxy/del",
+ params:{
+ app: row.app,
+ stream: row.stream
+ }
+ }).then((res)=>{
+ that.initData()
+ }).catch(function (error) {
+ console.log(error);
+ });
},
start: function(row){
- let that = this;
- this.getListLoading = true;
- this.$axios.get(`/api/proxy/start`,{
+ this.stopUpdateList()
+ this.$set(row, 'startBtnLoading', true)
+ this.$axios({
+ method: 'get',
+ url:`/api/proxy/start`,
params: {
app: row.app,
stream: row.stream
}
- })
- .then(function (res) {
- that.getListLoading = false;
- that.initData()
- })
- .catch(function (error) {
+ }).then((res)=> {
+ if (res.data.code === 0){
+ this.initData()
+ }else {
+ this.$message({
+ showClose: true,
+ message: "鍚姩澶辫触锛岃妫�鏌ュ湴鍧�鏄惁鍙敤锛�",
+ type: "error",
+ });
+ }
+ this.$set(row, 'startBtnLoading', false)
+ this.startUpdateList()
+ }).catch((error)=> {
console.log(error);
- that.getListLoading = false;
+ this.$message({
+ showClose: true,
+ message: "鍚姩澶辫触锛岃妫�鏌ュ湴鍧�鏄惁鍙敤锛�",
+ type: "error",
+ });
+ this.$set(row, 'startBtnLoading', false)
+ this.startUpdateList()
});
},
stop: function(row){
let that = this;
- this.getListLoading = true;
- this.$axios.get(`/api/proxy/stop`,{
+ this.$axios({
+ method: 'get',
+ url:`/api/proxy/stop`,
params: {
app: row.app,
stream: row.stream
}
- })
- .then(function (res) {
- that.getListLoading = false;
+ }).then(function (res) {
that.initData()
- })
- .catch(function (error) {
+ }).catch(function (error) {
console.log(error);
- that.getListLoading = false;
});
- }
-
+ },
+ refresh: function (){
+ this.initData();
+ }
}
};
</script>
--
Gitblit v1.8.0