web页面集成 (c6e8b341) | Commits | guzijian / wvp-GB28181-pro

	1	+//loading效果组件
	2	+
	3	+<template>
	4	+<div class="loadEffect" :style="{marginTop: marginTop? marginTop : '50%'}">
	5	+ <span class="ld-span"></span>
	6	+ <span class="ld-span"></span>
	7	+ <span class="ld-span"></span>
	8	+ <span class="ld-span"></span>
	9	+ <span class="ld-span"></span>
	10	+ <span class="ld-span"></span>
	11	+ <span class="ld-span"></span>
	12	+ <span class="ld-span"></span>
	13	+</div>
	14	+</template>
	15	+
	16	+<script>
	17	+export default {
	18	+ name: 'Loading',
	19	+ props: ["marginTop"]
	20	+
	21	+}
	22	+</script>
	23	+
	24	+<style scoped>
	25	+.loadEffect{
	26	+ width: 100px;
	27	+ height: 100px;
	28	+ position: relative;
	29	+ margin: 0 auto;
	30	+ position: relative;
	31	+ top:-50px;
	32	+ margin-top:50%;
	33	+ transform: scale(.5)
	34	+}
	35	+.loadEffect .ld-span{
	36	+ display: inline-block;
	37	+ width: 20px;
	38	+ height: 20px;
	39	+ border-radius: 50%;
	40	+ background: #67e7d5;
	41	+ position: absolute;
	42	+ -webkit-animation: load 1.04s ease infinite;
	43	+}
	44	+@-webkit-keyframes load{
	45	+ 0%{
	46	+ -webkit-transform: scale(1.2);
	47	+ opacity: 1;
	48	+ }
	49	+ 100%{
	50	+ -webkit-transform: scale(.3);
	51	+ opacity: 0.5;
	52	+ }
	53	+}
	54	+.loadEffect .ld-span:nth-child(1){
	55	+ left: 0;
	56	+ top: 50%;
	57	+ margin-top:-10px;
	58	+ -webkit-animation-delay:0.13s;
	59	+}
	60	+.loadEffect .ld-span:nth-child(2){
	61	+ left: 14px;
	62	+ top: 14px;
	63	+ -webkit-animation-delay:0.26s;
	64	+}
	65	+.loadEffect .ld-span:nth-child(3){
	66	+ left: 50%;
	67	+ top: 0;
	68	+ margin-left: -10px;
	69	+ -webkit-animation-delay:0.39s;
	70	+}
	71	+.loadEffect .ld-span:nth-child(4){
	72	+ top: 14px;
	73	+ right:14px;
	74	+ -webkit-animation-delay:0.52s;
	75	+}
	76	+.loadEffect .ld-span:nth-child(5){
	77	+ right: 0;
	78	+ top: 50%;
	79	+ margin-top:-10px;
	80	+ -webkit-animation-delay:0.65s;
	81	+}
	82	+.loadEffect .ld-span:nth-child(6){
	83	+ right: 14px;
	84	+ bottom:14px;
	85	+ -webkit-animation-delay:0.78s;
	86	+}
	87	+.loadEffect .ld-span:nth-child(7){
	88	+ bottom: 0;
	89	+ left: 50%;
	90	+ margin-left: -10px;
	91	+ -webkit-animation-delay:0.91s;
	92	+}
	93	+.loadEffect .ld-span:nth-child(8){
	94	+ bottom: 14px;
	95	+ left: 14px;
	96	+ -webkit-animation-delay:1.04s;
	97	+}
	98	+</style>
...	...

web_src/src/components/Login.vue 0 → 100644

View file @c6e8b34

	1	+<template>
	2	+<div class="login" id="login">
	3	+ <a href="javascript:;" class="log-close"><i class="icons close"></i></a>
	4	+ <div class="log-bg">
	5	+ <div class="log-cloud cloud1"></div>
	6	+ <div class="log-cloud cloud2"></div>
	7	+ <div class="log-cloud cloud3"></div>
	8	+ <div class="log-cloud cloud4"></div>
	9	+
	10	+ <div class="log-logo">Welcome!</div>
	11	+ <div class="log-text"></div>
	12	+ </div>
	13	+ <div class="log-email">
	14	+ <input type="text" placeholder="用户名" :class="'log-input' + (username==''?' log-input-empty':'')" v-model="username"><input type="password" placeholder="密码" :class="'log-input' + (password==''?' log-input-empty':'')" v-model="password">
	15	+ <a href="javascript:;" class="log-btn" @click="login" >登录</a>
	16	+ </div>
	17	+ <Loading v-if="isLoging" marginTop="-30%"></Loading>
	18	+</div>
	19	+</template>
	20	+
	21	+<script>
	22	+import Loading from './Loading.vue'
	23	+import crypto from 'crypto'
	24	+export default {
	25	+ name: 'Login',
	26	+ data(){
	27	+ return {
	28	+ isLoging: false,
	29	+ username: '',
	30	+ password: ''
	31	+ }
	32	+ },
	33	+ components:{
	34	+ Loading
	35	+ },
	36	+ created(){
	37	+ var that = this;
	38	+ document.onkeydown = function(e) {
	39	+ var key = window.event.keyCode;
	40	+ if (key == 13) {
	41	+ that.login();
	42	+ }
	43	+ }
	44	+
	45	+ },
	46	+ methods:{
	47	+
	48	+ //登录逻辑
	49	+ login(){
	50	+ if(this.username!='' && this.password!=''){
	51	+ this.toLogin();
	52	+ }
	53	+ },
	54	+
	55	+ //登录请求
	56	+ toLogin(){
	57	+
	58	+ //一般要跟后端了解密码的加密规则
	59	+ //这里例子用的哈希算法来自./js/sha1.min.js
	60	+
	61	+ //需要想后端发送的登录参数
	62	+ let loginParam = {
	63	+ username: this.username,
	64	+ password: crypto.createHash('md5').update(this.password, "utf8").digest('hex')
	65	+ }
	66	+ var that = this;
	67	+ //设置在登录状态
	68	+ this.isLoging = true;
	69	+
	70	+ this.$axios.get("/auth/login",{
	71	+ params: loginParam
	72	+ } )
	73	+ .then(function (res) {
	74	+ console.log(JSON.stringify(res));
	75	+ if (res.data == "success") {
	76	+ that.$cookies.set("session", {"username": that.username}) ;
	77	+ //登录成功后
	78	+ that.$router.push('/');
	79	+ }
	80	+ })
	81	+ .catch(function (error) {
	82	+ console.log(error);
	83	+ });
	84	+
	85	+
	86	+
	87	+ },
	88	+ setCookie: function (cname, cvalue, exdays) {
	89	+ var d = new Date();
	90	+ d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
	91	+ var expires = "expires=" + d.toUTCString();
	92	+ console.info(cname + "=" + cvalue + "; " + expires);
	93	+ document.cookie = cname + "=" + cvalue + "; " + expires;
	94	+ console.info(document.cookie);
	95	+ },
	96	+ }
	97	+}
	98	+</script>
	99	+
	100	+<style scoped>
	101	+.login{position: fixed; overflow: hidden;left: 50%; margin-left: -250px; top:50%; margin-top: -350px; width: 500px; min-height: 555px; z-index: 10; right: 140px; background: #fff;-webkit-border-radius: 5px;
	102	+-moz-border-radius: 5px;
	103	+-ms-border-radius: 5px;
	104	+-o-border-radius: 5px;
	105	+border-radius: 5px; -webkit-box-shadow: 0px 3px 16px -5px #070707; box-shadow: 0px 3px 16px -5px #070707}
	106	+.log-close{display: block; position: absolute; top:12px; right: 12px; opacity: 1;}
	107	+.log-close:hover .icons{transform: rotate(180deg);}
	108	+.log-close .icons{opacity: 1; transition: all .3s}
	109	+.log-cloud{background-image: url(../assets/login-cloud.png); width: 63px ;height: 40px; position: absolute; z-index: 1}
	110	+.login .cloud1{top:21px; left: -30px; transform: scale(.6); animation: cloud1 20s linear infinite;}
	111	+.login .cloud2{top:87px; right: 20px; animation: cloud2 19s linear infinite;}
	112	+.login .cloud3{top:160px; left: 5px;transform: scale(.8);animation: cloud3 21s linear infinite;}
	113	+.login .cloud4{top:150px; left: -40px;transform: scale(.4);animation: cloud4 19s linear infinite;}
	114	+.log-bg{background: url(../assets/login-bg.jpg); width: 100%; height: 312px; overflow: hidden;}
	115	+.log-logo{height: 80px; margin: 120px auto 25px; text-align: center; color: #1fcab3; font-weight: bold; font-size: 40px;}
	116	+.log-text{color: #57d4c3; font-size: 13px; text-align: center; margin: 0 auto;}
	117	+.log-logo,.log-text{z-index: 2}
	118	+.icons{background:url(../assets/icons.png) no-repeat; display: inline-block;}
	119	+.close{height:16px;width:16px;background-position:-13px 0;}
	120	+.login-email{height:17px;width:29px;background-position:-117px 0;}
	121	+
	122	+.log-btns{padding: 15px 0; margin: 0 auto;}
	123	+.log-btn{width:402px; display: block; text-align: left; line-height: 50px;margin:0 auto 15px; height:50px; color:#fff; font-size:13px;-webkit-border-radius: 5px; background-color: #3B5999;
	124	+-moz-border-radius: 5px;
	125	+-ms-border-radius: 5px;
	126	+-o-border-radius: 5px;
	127	+border-radius: 5px;
	128	+position: relative;}
	129	+.log-btn.tw{background-color: #13B4E9}
	130	+.log-btn.email{background-color: #50E3CE}
	131	+.log-btn:hover,.log-btn:focus{color: #fff; opacity: .8;}
	132	+
	133	+.log-email{text-align: center; margin-top: 20px;}
	134	+.log-email .log-btn{background-color: #50E3CE;text-align: center;}
	135	+.log-input-empty{border: 1px solid #f37474 !important;}
	136	+.isloading{background: #d6d6d6}
	137	+.log-btn .icons{margin-left: 30px; vertical-align: middle;}
	138	+.log-btn .text{left: 95px; line-height: 50px; text-align: left; position: absolute;}
	139	+.log-input{width: 370px;overflow: hidden; padding: 0 15px;font-size: 13px; border: 1px solid #EBEBEB; margin:0 auto 15px; height: 48px; line-height: 48px; -webkit-border-radius: 5px;
	140	+-moz-border-radius: 5px;
	141	+-ms-border-radius: 5px;
	142	+-o-border-radius: 5px;
	143	+border-radius: 5px;}
	144	+.log-input.warn{border: 1px solid #f88787}
	145	+
	146	+ @-webkit-keyframes cloud1 {
	147	+ 0%{left: 200px}
	148	+ 100%{left:-130px;}
	149	+}
	150	+@keyframes cloud1{
	151	+ 0%{left: 200px}
	152	+ 100%{left:-130px;}
	153	+}
	154	+
	155	+ @-webkit-keyframes cloud2 {
	156	+ 0%{left:500px;}
	157	+ 100%{left:-90px;}
	158	+}
	159	+@keyframes cloud2{
	160	+ 0%{left:500px;}
	161	+ 100%{left:-90px;}
	162	+}
	163	+
	164	+@-webkit-keyframes cloud3 {
	165	+ 0%{left:620px;}
	166	+ 100%{left:-70px;}
	167	+}
	168	+@keyframes cloud3{
	169	+ 0%{left:620px;}
	170	+ 100%{left:-70px;}
	171	+}@-webkit-keyframes cloud4 {
	172	+ 0%{left:100px;}
	173	+ 100%{left:-70px;}
	174	+}
	175	+@keyframes cloud4{
	176	+ 0%{left:100px;}
	177	+ 100%{left:-70px;}
	178	+}
	179	+
	180	+</style>
...	...

web_src/src/components/UiHeader.vue 0 → 100644

View file @c6e8b34

	1	+<template>
	2	+ <div id="UiHeader">
	3	+ <el-menu router :default-active="this.$route.path" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" mode="horizontal">
	4	+ <el-menu-item index="/">控制台</el-menu-item>
	5	+ <el-menu-item index="/videoList">设备列表</el-menu-item>
	6	+ <!-- <el-menu-item index="/videoReplay">录像回看</el-menu-item> -->
	7	+ <!-- <el-menu-item index="4">级联设置</el-menu-item> -->
	8	+ <el-menu-item style="float: right;" @click="loginout">退出</el-menu-item>
	9	+ </el-menu>
	10	+ </div>
	11	+</template>
	12	+
	13	+<script>
	14	+export default {
	15	+ name: "UiHeader",
	16	+ methods:{
	17	+
	18	+ loginout(){
	19	+ // 删除cookie，回到登录页面
	20	+ this.$cookies.remove("session");
	21	+ this.$router.push('/login');
	22	+ },
	23	+ }
	24	+}
	25	+
	26	+</script>
0	27	\ No newline at end of file
...	...

web_src/src/components/channelList.vue 0 → 100644

View file @c6e8b34

	1	+<template>
	2	+ <div id="channelList">
	3	+ <el-container>
	4	+
	5	+ <el-header>
	6	+ <uiHeader></uiHeader>
	7	+ </el-header>
	8	+ <el-main>
	9	+ <div style="background-color: #FFFFFF; position: relative; padding: 1rem 0.5rem 0.5rem 0.5rem; text-align: center;">
	10	+ <span style="font-size: 1rem; font-weight: 500; ">通道列表({{parentChannelId ==0 ? deviceId:parentChannelId}})</span>
	11	+
	12	+ </div>
	13	+ <div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;font-size: 14px;">
	14	+ <el-button icon="el-icon-arrow-left" size="mini" style="margin-right: 1rem;" @click="showDevice">返回</el-button>
	15	+ 搜索: <el-input @input="search" style="margin-right: 1rem; width: auto;" size="mini" placeholder="关键字" prefix-icon="el-icon-search" v-model="searchSrt" clearable> </el-input>
	16	+
	17	+ 通道类型: <el-select size="mini" @change="search" style="margin-right: 1rem;" v-model="channelType" placeholder="请选择" default-first-option>
	18	+ <el-option label="全部" value="" ></el-option>
	19	+ <el-option label="设备" value="false"></el-option>
	20	+ <el-option label="子目录" value="true" ></el-option>
	21	+ </el-select>
	22	+ 在线状态: <el-select size="mini" @change="search" v-model="online" placeholder="请选择" default-first-option>
	23	+ <el-option label="全部" value=""></el-option>
	24	+ <el-option label="在线" value="on"></el-option>
	25	+ <el-option label="离线" value="off"></el-option>
	26	+ </el-select>
	27	+
	28	+ </div>
	29	+ <devicePlayer ref="devicePlayer"></devicePlayer>
	30	+ <!--设备列表-->
	31	+ <el-table ref="channelListTable" :data="deviceChannelList" :height="winHeight" border style="width: 100%">
	32	+ <el-table-column prop="channelId" label="通道编号" width="210">
	33	+ </el-table-column>
	34	+ <el-table-column prop="name" label="通道名称" width="500">
	35	+ </el-table-column>
	36	+ <el-table-column prop="subCount" label="子节点数">
	37	+ </el-table-column>
	38	+ <el-table-column prop="ptztypeText" label="云台类型">
	39	+ </el-table-column>
	40	+ <el-table-column label="操作" width="240" align="center" fixed="right">
	41	+ <template slot-scope="scope">
	42	+ <el-button size="mini" icon="el-icon-video-play" v-if="scope.row.parental == 0" @click="sendDevicePush(scope.row)">预览视频</el-button>
	43	+ <el-button size="mini" icon="el-icon-s-open" type="primary" v-if="scope.row.parental == 1" @click="changeSubchannel(scope.row)">查看子目录</el-button>
	44	+ <!-- <el-button size="mini" @click="sendDevicePush(scope.row)">录像查询</el-button> -->
	45	+ </template>
	46	+ </el-table-column>
	47	+ </el-table>
	48	+ <el-pagination
	49	+ style="float: right"
	50	+ @size-change="handleSizeChange"
	51	+ @current-change="currentChange"
	52	+ :current-page="currentPage"
	53	+ :page-size="count"
	54	+ :page-sizes="[15, 20, 30, 50]"
	55	+ layout="total, sizes, prev, pager, next"
	56	+ :total="total">
	57	+ </el-pagination>
	58	+
	59	+ </el-main>
	60	+ </el-container>
	61	+ </div>
	62	+</template>
	63	+
	64	+<script>
	65	+ import devicePlayer from './gb28181/devicePlayer.vue'
	66	+ import uiHeader from './UiHeader.vue'
	67	+ export default {
	68	+ name: 'channelList',
	69	+ components: {
	70	+ devicePlayer,
	71	+ uiHeader
	72	+ },
	73	+ data() {
	74	+ return {
	75	+ deviceId: this.$route.params.deviceId,
	76	+ parentChannelId: this.$route.params.parentChannelId,
	77	+ deviceChannelList: [],
	78	+ videoComponentList: [],
	79	+ currentPlayerInfo: {}, //当前播放对象
	80	+ updateLooper: 0, //数据刷新轮训标志
	81	+ searchSrt: "",
	82	+ channelType: "",
	83	+ online: "",
	84	+ winHeight: window.innerHeight - 250,
	85	+ currentPage: parseInt(this.$route.params.page),
	86	+ count: parseInt(this.$route.params.count),
	87	+ total:0,
	88	+ beforeUrl:"/videoList"
	89	+ };
	90	+ },
	91	+
	92	+ mounted() {
	93	+ this.initData();
	94	+ // this.updateLooper = setInterval(this.initData, 10000);
	95	+ },
	96	+ destroyed() {
	97	+ this.$destroy('videojs');
	98	+ clearTimeout(this.updateLooper);
	99	+ },
	100	+ methods: {
	101	+ initData: function() {
	102	+ if (this.parentChannelId == "" \|\| this.parentChannelId == 0 ) {
	103	+ this.getDeviceChannelList();
	104	+ }else{
	105	+ this.showSubchannels();
	106	+ }
	107	+
	108	+ },
	109	+ initParam: function(){
	110	+ this.deviceId= this.$route.params.deviceId;
	111	+ this.parentChannelId= this.$route.params.parentChannelId;
	112	+ this.currentPage= parseInt(this.$route.params.page);
	113	+ this.count= parseInt(this.$route.params.count);
	114	+ if (this.parentChannelId == "" \|\| this.parentChannelId == 0 ) {
	115	+ this.beforeUrl = "/videoList"
	116	+ }
	117	+
	118	+ },
	119	+ currentChange: function(val){
	120	+ var url = `/${this.$router.currentRoute.name}/${this.deviceId}/${this.parentChannelId}/${this.count}/${val}`
	121	+ console.log(url)
	122	+ this.$router.push(url).then(()=>{
	123	+ this.initParam();
	124	+ this.initData();
	125	+ })
	126	+ },
	127	+ handleSizeChange: function(val){
	128	+ var url = `/${this.$router.currentRoute.name}/${this.$router.params.deviceId}/${this.$router.params.parentChannelId}/${val}/1`
	129	+ this.$router.push(url).then(()=>{
	130	+ this.initParam();
	131	+ this.initData();
	132	+ })
	133	+
	134	+ },
	135	+ getDeviceChannelList: function() {
	136	+ let that = this;
	137	+ console.log(this.currentPage - 1)
	138	+
	139	+ this.$axios.get(`/api/devices/${this.$route.params.deviceId}/channels`,{
	140	+ params: {
	141	+ page: that.currentPage - 1,
	142	+ count: that.count,
	143	+ query: that.searchSrt,
	144	+ online: that.online,
	145	+ channelType: that.channelType
	146	+ }
	147	+ } )
	148	+ .then(function (res) {
	149	+ console.log(res);
	150	+ that.total = res.data.total;
	151	+ that.deviceChannelList = res.data.data;
	152	+ // 防止出现表格错位
	153	+ that.$nextTick(()=>{
	154	+ that.$refs.channelListTable.doLayout();
	155	+ })
	156	+ })
	157	+ .catch(function (error) {
	158	+ console.log(error);
	159	+ });
	160	+
	161	+ },
	162	+
	163	+
	164	+ //gb28181平台对接
	165	+ //刷新设备信息
	166	+ refDevice: function(itemData) {
	167	+ ///api/devices/{deviceId}/sync
	168	+ console.log("刷新对应设备:" + itemData.deviceId);
	169	+ this.$axios({
	170	+ method: 'post',
	171	+ url: '/api/devices/' + itemData.deviceId + '/sync'
	172	+ }).then(function(res) {
	173	+ // console.log("刷新设备结果："+JSON.stringify(res));
	174	+ }).catch(function(e) {
	175	+ that.$message({
	176	+ showClose: true,
	177	+ message: '请求成功',
	178	+ type: 'success'
	179	+ });
	180	+ });;
	181	+ },
	182	+ //通知设备上传媒体流
	183	+ sendDevicePush: function(itemData) {
	184	+ let deviceId = this.deviceId;
	185	+
	186	+ let channelId = itemData.channelId;
	187	+ console.log("通知设备推流1：" + deviceId + " : " + channelId);
	188	+ let that = this;
	189	+ this.$axios({
	190	+ method: 'get',
	191	+ url: '/api/play/' + deviceId + '/' + channelId
	192	+ }).then(function(res) {
	193	+ let ssrc = res.data.ssrc;
	194	+ that.$refs.devicePlayer.play(res.data,deviceId,channelId);
	195	+ }).catch(function(e) {
	196	+ });
	197	+ },
	198	+ showDevice: function(){
	199	+ this.$router.push(this.beforeUrl).then(()=>{
	200	+ this.initParam();
	201	+ this.initData();
	202	+ })
	203	+ },
	204	+ changeSubchannel(itemData) {
	205	+ console.log(this.$router.currentRoute)
	206	+ this.beforeUrl = this.$router.currentRoute.path;
	207	+
	208	+ var url = `/${this.$router.currentRoute.name}/${this.$router.currentRoute.params.deviceId}/${itemData.channelId}/${this.$router.currentRoute.params.count}/1`
	209	+ this.$router.push(url).then(()=>{
	210	+ this.searchSrt= "";
	211	+ this.channelType= "";
	212	+ this.online= "";
	213	+ this.initParam();
	214	+ this.initData();
	215	+ })
	216	+ },
	217	+ showSubchannels: function(channelId){
	218	+ let that = this;
	219	+
	220	+ this.$axios.get(`/api/subChannels/${this.deviceId}/${this.parentChannelId}/channels`,{
	221	+ params: {
	222	+ page: that.currentPage - 1,
	223	+ count: that.count,
	224	+ query: that.searchSrt,
	225	+ online: that.online,
	226	+ channelType: that.channelType
	227	+ }
	228	+ } )
	229	+ .then(function (res) {
	230	+ that.total = res.data.total;
	231	+ that.deviceChannelList = res.data.data;
	232	+ // 防止出现表格错位
	233	+ that.$nextTick(()=>{
	234	+ that.$refs.channelListTable.doLayout();
	235	+ })
	236	+ })
	237	+ .catch(function (error) {
	238	+ console.log(error);
	239	+ });
	240	+ },
	241	+ search: function() {
	242	+ console.log(this.searchSrt)
	243	+ this.currentPage = 1;
	244	+ this.total = 0;
	245	+ this.initData();
	246	+ }
	247	+
	248	+ }
	249	+ };
	250	+</script>
	251	+
	252	+<style>
	253	+ .videoList {
	254	+ display: flex;
	255	+ flex-wrap: wrap;
	256	+ align-content: flex-start;
	257	+ }
	258	+
	259	+ .video-item {
	260	+ position: relative;
	261	+ width: 15rem;
	262	+ height: 10rem;
	263	+ margin-right: 1rem;
	264	+ background-color: #000000;
	265	+ }
	266	+
	267	+ .video-item-img {
	268	+ position: absolute;
	269	+ top: 0;
	270	+ bottom: 0;
	271	+ left: 0;
	272	+ right: 0;
	273	+ margin: auto;
	274	+ width: 100%;
	275	+ height: 100%;
	276	+ }
	277	+
	278	+ .video-item-img:after {
	279	+ content: "";
	280	+ display: inline-block;
	281	+ position: absolute;
	282	+ z-index: 2;
	283	+ top: 0;
	284	+ bottom: 0;
	285	+ left: 0;
	286	+ right: 0;
	287	+ margin: auto;
	288	+ width: 3rem;
	289	+ height: 3rem;
	290	+ background-image: url("../assets/loading.png");
	291	+ background-size: cover;
	292	+ background-color: #000000;
	293	+ }
	294	+
	295	+ .video-item-title {
	296	+ position: absolute;
	297	+ bottom: 0;
	298	+ color: #000000;
	299	+ background-color: #ffffff;
	300	+ line-height: 1.5rem;
	301	+ padding: 0.3rem;
	302	+ width: 14.4rem;
	303	+ }
	304	+</style>
...	...

web_src/src/components/control.vue 0 → 100644

View file @c6e8b34

	1	+<template>
	2	+ <div id="app">
	3	+ <el-container>
	4	+ <el-header>
	5	+ <uiHeader></uiHeader>
	6	+ </el-header>
	7	+ <el-main>
	8	+ <div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;">
	9	+ <span style="font-size: 1rem; font-weight: bold;">控制台</span>
	10	+ <div style="position: absolute; right: 1rem; top: 0.3rem;">
	11	+ <el-popover placement="bottom" width="750" height="300" trigger="click">
	12	+ <div style="height: 600px;overflow:auto;">
	13	+ <table class="table-c" cellspacing="0">
	14	+ <tr v-for="(value, key, index) in serverConfig">
	15	+ <td style="width: 18rem; text-align: right;">{{ key }}</td>
	16	+ <td style="width: 33rem; text-align:left">{{ value }}</td>
	17	+ </tr>
	18	+ </table>
	19	+ </div>
	20	+ <el-button type="primary" slot="reference" size="mini" @click="getServerConfig()">查看服务器配置</el-button>
	21	+ </el-popover>
	22	+ <el-button style="margin-left: 1rem;" type="danger" size="mini" @click="reStartServer()">重启服务器</el-button>
	23	+ </div>
	24	+ </div>
	25	+ <el-row :gutter="30">
	26	+ <el-col :span="12"><div class="control-table" id="ThreadsLoad">table1</div></el-col>
	27	+ <el-col :span="12"><div class="control-table" id="WorkThreadsLoad">table2</div></el-col>
	28	+ </el-row>
	29	+ <el-table :data="allSessionData" style="margin-top: 1rem;">
	30	+ <el-table-column prop="peer_ip" label="远端"></el-table-column>
	31	+ <el-table-column prop="local_ip" label="本地"></el-table-column>
	32	+ <el-table-column prop="typeid" label="类型"></el-table-column>
	33	+ <el-table-column align="right">
	34	+ <template slot="header" slot-scope="scope">
	35	+ <el-button icon="el-icon-refresh-right" circle @click="getAllSession()"></el-button>
	36	+ </template>
	37	+ <template slot-scope="scope">
	38	+ <el-button @click.native.prevent="deleteRow(scope.$index, allSessionData)" type="text" size="small">移除</el-button>
	39	+ </template>
	40	+ </el-table-column>
	41	+ </el-table>
	42	+
	43	+ </el-main>
	44	+ <!-- <el-footer style="position: absolute; bottom: 0; width: 100%;">ZLMediaKit-VUE_UI v1</el-footer> -->
	45	+ </el-container>
	46	+
	47	+ </div>
	48	+</template>
	49	+
	50	+<script>
	51	+
	52	+import uiHeader from './UiHeader.vue'
	53	+
	54	+import echarts from 'echarts';
	55	+export default {
	56	+ name: 'app',
	57	+ components: {
	58	+ echarts,
	59	+ uiHeader
	60	+ },
	61	+ data() {
	62	+ return {
	63	+ tableOption: {
	64	+ // legend: {},
	65	+ xAxis: {},
	66	+ yAxis: {},
	67	+ label: {},
	68	+ tooltip: {},
	69	+ dataZoom: [],
	70	+ series: []
	71	+ },
	72	+ table1Option: {
	73	+ // legend: {},
	74	+ xAxis: {},
	75	+ yAxis: {},
	76	+ label: {},
	77	+ tooltip: {},
	78	+ series: []
	79	+ },
	80	+ mChart: null,
	81	+ mChart1: null,
	82	+ charZoomStart: 0,
	83	+ charZoomEnd: 100,
	84	+ chartInterval: 0, //更新图表统计图定时任务标识
	85	+ allSessionData: [],
	86	+ visible: false,
	87	+ serverConfig: {}
	88	+ };
	89	+ },
	90	+ mounted() {
	91	+ this.getAllSession();
	92	+ this.initTable();
	93	+ this.updateData();
	94	+ this.chartInterval = setInterval(this.updateData, 3000);
	95	+ },
	96	+ destroyed() {
	97	+ clearInterval(this.chartInterval); //释放定时任务
	98	+ },
	99	+ methods: {
	100	+ updateData: function() {
	101	+ this.getThreadsLoad();
	102	+ },
	103	+ /**
	104	+ * 获取线程状态
	105	+ */
	106	+ getThreadsLoad: function() {
	107	+ let that = this;
	108	+ this.$axios({
	109	+ method: 'get',
	110	+ url: '/zlm/index/api/getThreadsLoad'
	111	+ }).then(function(res) {
	112	+ if (res.data.code == 0) {
	113	+ that.tableOption.xAxis.data.push(new Date().toLocaleTimeString());
	114	+ that.table1Option.xAxis.data.push(new Date().toLocaleTimeString());
	115	+
	116	+ for (var i = 0; i < res.data.data.length; i++) {
	117	+ if (that.tableOption.series[i] === undefined) {
	118	+ let data = {
	119	+ data: [],
	120	+ type: 'line'
	121	+ };
	122	+ let data1 = {
	123	+ data: [],
	124	+ type: 'line'
	125	+ };
	126	+ data.data.push(res.data.data[i].delay);
	127	+ data1.data.push(res.data.data[i].load);
	128	+ that.tableOption.series.push(data);
	129	+ that.table1Option.series.push(data1);
	130	+ } else {
	131	+ that.tableOption.series[i].data.push(res.data.data[i].delay);
	132	+ that.table1Option.series[i].data.push(res.data.data[i].load);
	133	+ }
	134	+ }
	135	+ that.tableOption.dataZoom[0].start = that.charZoomStart;
	136	+ that.tableOption.dataZoom[0].end = that.charZoomEnd;
	137	+ that.table1Option.dataZoom[0].start = that.charZoomStart;
	138	+ that.table1Option.dataZoom[0].end = that.charZoomEnd;
	139	+ //that.myChart = echarts.init(document.getElementById('ThreadsLoad'));
	140	+ that.myChart.setOption(that.tableOption, true);
	141	+ // that.myChart1 = echarts.init(document.getElementById('WorkThreadsLoad'));
	142	+ that.myChart1.setOption(that.table1Option, true);
	143	+ }
	144	+ });
	145	+ },
	146	+ initTable: function() {
	147	+ let that = this;
	148	+ this.tableOption.xAxis = {
	149	+ type: 'category',
	150	+ data: [], // x轴数据
	151	+ name: '时间', // x轴名称
	152	+ // x轴名称样式
	153	+ nameTextStyle: {
	154	+ fontWeight: 300,
	155	+ fontSize: 15
	156	+ }
	157	+ };
	158	+ this.tableOption.yAxis = {
	159	+ type: 'value',
	160	+ name: '延迟率', // y轴名称
	161	+ boundaryGap: [0, '100%'],
	162	+ max: 100,
	163	+ axisLabel: {
	164	+ show: true,
	165	+ interval: 'auto',
	166	+ formatter: '{value} %'
	167	+ },
	168	+ // y轴名称样式
	169	+ nameTextStyle: {
	170	+ fontWeight: 300,
	171	+ fontSize: 15
	172	+ }
	173	+ };
	174	+ this.tableOption.dataZoom = [
	175	+ {
	176	+ show: true,
	177	+ start: this.charZoomStart,
	178	+ end: this.charZoomEnd
	179	+ }
	180	+ ];
	181	+ this.myChart = echarts.init(document.getElementById('ThreadsLoad'));
	182	+ this.myChart.setOption(this.tableOption);
	183	+ this.myChart.on('dataZoom', function(event) {
	184	+ if (event.batch) {
	185	+ that.charZoomStart = event.batch[0].start;
	186	+ that.charZoomEnd = event.batch[0].end;
	187	+ } else {
	188	+ that.charZoomStart = event.start;
	189	+ that.charZoomEnd = event.end;
	190	+ }
	191	+ });
	192	+
	193	+ this.table1Option.xAxis = {
	194	+ type: 'category',
	195	+ data: [], // x轴数据
	196	+ name: '时间', // x轴名称
	197	+ // x轴名称样式
	198	+ nameTextStyle: {
	199	+ fontWeight: 300,
	200	+ fontSize: 15
	201	+ }
	202	+ };
	203	+ this.table1Option.yAxis = {
	204	+ type: 'value',
	205	+ name: '负载率', // y轴名称
	206	+ boundaryGap: [0, '100%'],
	207	+ max: 100,
	208	+ axisLabel: {
	209	+ show: true,
	210	+ interval: 'auto',
	211	+ formatter: '{value} %'
	212	+ },
	213	+ // y轴名称样式
	214	+ nameTextStyle: {
	215	+ fontWeight: 300,
	216	+ fontSize: 15
	217	+ }
	218	+ };
	219	+ this.table1Option.dataZoom = [
	220	+ {
	221	+ show: true,
	222	+ start: this.charZoomStart,
	223	+ end: this.charZoomEnd
	224	+ }
	225	+ ];
	226	+ this.myChart1 = echarts.init(document.getElementById('WorkThreadsLoad'));
	227	+ this.myChart1.setOption(this.table1Option);
	228	+ this.myChart1.on('dataZoom', function(event) {
	229	+ if (event.batch) {
	230	+ that.charZoomStart = event.batch[0].start;
	231	+ that.charZoomEnd = event.batch[0].end;
	232	+ } else {
	233	+ that.charZoomStart = event.start;
	234	+ that.charZoomEnd = event.end;
	235	+ }
	236	+ });
	237	+ },
	238	+
	239	+ getAllSession: function() {
	240	+ let that = this;
	241	+ that.allSessionData = [];
	242	+ console.log("地址："+'/zlm/index/api/getAllSession');
	243	+ this.$axios({
	244	+ method: 'get',
	245	+ url: '/zlm/index/api/getAllSession'
	246	+ }).then(function(res) {
	247	+ res.data.data.forEach(item => {
	248	+ let data = {
	249	+ peer_ip: item.peer_ip,
	250	+ local_ip: item.local_ip,
	251	+ typeid: item.typeid,
	252	+ id: item.id
	253	+ };
	254	+ that.allSessionData.push(data);
	255	+ });
	256	+ });
	257	+ },
	258	+ getServerConfig: function() {
	259	+ let that = this;
	260	+ this.$axios({
	261	+ method: 'get',
	262	+ url: '/zlm/index/api/getServerConfig'
	263	+ }).then(function(res) {
	264	+ that.serverConfig = res.data.data[0];
	265	+ that.visible = true;
	266	+ });
	267	+ },
	268	+ reStartServer: function() {
	269	+ let that = this;
	270	+ this.$confirm('此操作将重启媒体服务器, 是否继续?', '提示', {
	271	+ confirmButtonText: '确定',
	272	+ cancelButtonText: '取消',
	273	+ type: 'warning'
	274	+ }).then(() => {
	275	+ let that = this;
	276	+ this.$axios({
	277	+ method: 'get',
	278	+ url: '/zlm/index/api/restartServer'
	279	+ }).then(function(res) {
	280	+ that.getAllSession();
	281	+ if (res.data.code == 0) {
	282	+ that.$message({
	283	+ type: 'success',
	284	+ message: '操作完成'
	285	+ });
	286	+ }
	287	+ });
	288	+ });
	289	+ },
	290	+ deleteRow: function(index, tabledata) {
	291	+ let that = this;
	292	+ this.$confirm('此操作将断开该通信链路, 是否继续?', '提示', {
	293	+ confirmButtonText: '确定',
	294	+ cancelButtonText: '取消',
	295	+ type: 'warning'
	296	+ })
	297	+ .then(() => {
	298	+ that.deleteSession(tabledata[index].id);
	299	+ })
	300	+ .catch(() => {
	301	+ console.log('id：' + JSON.stringify(tabledata[index]));
	302	+ this.$message({
	303	+ type: 'info',
	304	+ message: '已取消删除'
	305	+ });
	306	+ });
	307	+ console.log(JSON.stringify(tabledata[index]));
	308	+ },
	309	+ deleteSession: function(id) {
	310	+ let that = this;
	311	+ this.$axios({
	312	+ method: 'get',
	313	+ url: '/zlm/index/api/kick_session&id=' + id
	314	+ }).then(function(res) {
	315	+ that.getAllSession();
	316	+ that.$message({
	317	+ type: 'success',
	318	+ message: '删除成功!'
	319	+ });
	320	+ });
	321	+ }
	322	+ }
	323	+};
	324	+</script>
	325	+
	326	+<style>
	327	+#app {
	328	+ height: 100%;
	329	+}
	330	+.control-table {
	331	+ background-color: #ffffff;
	332	+ height: 25rem;
	333	+}
	334	+.table-c {
	335	+ border-right: 1px solid #dcdcdc;
	336	+ border-bottom: 1px solid #dcdcdc;
	337	+}
	338	+.table-c td {
	339	+ border-left: 1px solid #dcdcdc;
	340	+ border-top: 1px solid #dcdcdc;
	341	+ padding: 0.2rem;
	342	+}
	343	+.el-table {
	344	+ width: 99.9% !important;
	345	+}
	346	+</style>
...	...

web_src/src/components/gb28181/devicePlayer.vue 0 → 100644

View file @c6e8b34

	1	+<template>
	2	+ <div id="devicePlayer">
	3	+ <el-dialog title="视频播放" top="0" :visible.sync="showVideoDialog" :destroy-on-close="true" @close="stop()">
	4	+ <LivePlayer v-if="showVideoDialog" ref="videoPlayer" :videoUrl="videoUrl" :error="videoError" fluent autoplay live stretch></LivePlayer>
	5	+ <div id="shared" style="text-align: right; margin-top: 1rem;">
	6	+ <el-tabs v-model="tabActiveName">
	7	+ <el-tab-pane label="媒体流信息" name="media">
	8	+ <div style="margin-bottom: 0.5rem;">
	9	+ <el-button type="primary" size="small" @click="playRecord(true, '')">播放</el-button>
	10	+ <el-button type="primary" size="small" @click="startRecord()">录制</el-button>
	11	+ <el-button type="primary" size="small" @click="stopRecord()">停止录制</el-button>
	12	+ </div>
	13	+ <div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem;">
	14	+ <span style="width: 5rem; line-height: 2.5rem; text-align: right;">播放地址：</span>
	15	+ <el-input v-model="getPlayerShared.sharedUrl" :disabled="true" v-on:click.native="copySharedInfo(getPlayerShared.sharedUrl)"></el-input>
	16	+ </div>
	17	+ <div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem;">
	18	+ <span style="width: 5rem; line-height: 2.5rem; text-align: right;">iframe：</span>
	19	+ <el-input v-model="getPlayerShared.sharedIframe" :disabled="true" v-on:click.native="copySharedInfo(getPlayerShared.sharedIframe)"></el-input>
	20	+ </div>
	21	+ <div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem;">
	22	+ <span style="width: 5rem; line-height: 2.5rem; text-align: right;">资源地址：</span>
	23	+ <el-input v-model="getPlayerShared.sharedRtmp" :disabled="true" v-on:click.native="copySharedInfo(getPlayerShared.sharedRtmp)"></el-input>
	24	+ </div>
	25	+ </el-tab-pane>
	26	+ <!--{"code":0,"data":{"paths":["22-29-30.mp4"],"rootPath":"/home/kkkkk/Documents/ZLMediaKit/release/linux/Debug/www/record/hls/kkkkk/2020-05-11/"}}-->
	27	+ <el-tab-pane label="录像查询" name="second">
	28	+ <el-date-picker v-model="videoHistory.startTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="开始时间"
	29	+ @change="recordList()"></el-date-picker>
	30	+ <el-date-picker v-model="videoHistory.endTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="结束时间"
	31	+ @change="recordList()"></el-date-picker>
	32	+ <el-table :data="videoHistory.searchHistoryResult" style="width: 100%">
	33	+ <el-table-column label="名称" prop="name" width="150"></el-table-column>
	34	+ <el-table-column label="文件" prop="filePath" width="300"></el-table-column>
	35	+ <el-table-column label="开始时间" prop="startTime" width="160"></el-table-column>
	36	+ <el-table-column label="结束时间" prop="endTime" width="160"></el-table-column>
	37	+
	38	+ <el-table-column label="操作">
	39	+ <template slot-scope="scope">
	40	+ <el-button type="primary" size="mini" @click="playRecord(false, scope.row)">播放</el-button>
	41	+ </template>
	42	+ </el-table-column>
	43	+ </el-table>
	44	+ </el-tab-pane>
	45	+ <!--遥控界面-->
	46	+ <el-tab-pane label="云台控制" name="third">
	47	+ <div style="display: flex; justify-content: center;">
	48	+ <div class="control-wrapper">
	49	+ <div class="control-btn control-top" @mousedown="ptzCamera(0, 1, 0)" @mouseup="ptzCamera(0, 0, 0)">
	50	+ <i class="el-icon-caret-top"></i>
	51	+ <div class="control-inner-btn control-inner"></div>
	52	+ </div>
	53	+ <div class="control-btn control-left" @mousedown="ptzCamera(1, 0, 0)" @mouseup="ptzCamera(0, 0, 0)">
	54	+ <i class="el-icon-caret-left"></i>
	55	+ <div class="control-inner-btn control-inner"></div>
	56	+ </div>
	57	+ <div class="control-btn control-bottom" @mousedown="ptzCamera(0, 2, 0)" @mouseup="ptzCamera(0, 0, 0)">
	58	+ <i class="el-icon-caret-bottom"></i>
	59	+ <div class="control-inner-btn control-inner"></div>
	60	+ </div>
	61	+ <div class="control-btn control-right" @mousedown="ptzCamera(2, 0, 0)" @mouseup="ptzCamera(0, 0, 0)">
	62	+ <i class="el-icon-caret-right"></i>
	63	+ <div class="control-inner-btn control-inner"></div>
	64	+ </div>
	65	+ <div class="control-round">
	66	+ <div class="control-round-inner"><i class="fa fa-pause-circle"></i></div>
	67	+ </div>
	68	+
	69	+ <div style="position: absolute; left: 7.25rem; top: 1.25rem" @mousedown="ptzCamera(0, 0, 2)" @mouseup="ptzCamera(0, 0, 0)"><i
	70	+ class="el-icon-zoom-in" style="font-size: 1.875rem;"></i></div>
	71	+ <div style="position: absolute; left: 7.25rem; top: 3.25rem; font-size: 1.875rem;" @mousedown="ptzCamera(0, 0, 1)"
	72	+ @mouseup="ptzCamera(0, 0, 0)"><i class="el-icon-zoom-out"></i></div>
	73	+ </div>
	74	+ </div>
	75	+
	76	+ </el-tab-pane>
	77	+ </el-tabs>
	78	+ </div>
	79	+ </el-dialog>
	80	+ </div>
	81	+</template>
	82	+
	83	+<script>
	84	+ import LivePlayer from '@liveqing/liveplayer'
	85	+ export default {
	86	+ name: 'devicePlayer',
	87	+ props: {},
	88	+ components: {
	89	+ LivePlayer
	90	+ },
	91	+ computed: {
	92	+ getPlayerShared: function() {
	93	+ return {
	94	+ sharedUrl: window.location.host + '/' + this.videoUrl,
	95	+ sharedIframe: '<iframe src="' + window.location.host + '/' + this.videoUrl + '"></iframe>',
	96	+ sharedRtmp: this.videoUrl
	97	+ };
	98	+ }
	99	+ },
	100	+ created() {
	101	+ // this.videoHistory.searchHistoryResult = falsificationData.recordData.recordList;
	102	+ },
	103	+ data() {
	104	+ return {
	105	+ video:'http://lndxyj.iqilu.com/public/upload/2019/10/14/8c001ea0c09cdc59a57829dabc8010fa.mp4',
	106	+ videoUrl: '',
	107	+ videoHistory: {
	108	+ startTime: '',
	109	+ endTime: '',
	110	+ searchHistoryResult: [] //媒体流历史记录搜索结果
	111	+ },
	112	+ showVideoDialog: false,
	113	+ normalssrc: '',
	114	+ ssrc: '',
	115	+ deviceId: '',
	116	+ channelId: '',
	117	+ tabActiveName: 'media'
	118	+ };
	119	+ },
	120	+ methods: {
	121	+
	122	+ play: function(streamInfo, deviceId, channelId) {
	123	+ this.ssrc = streamInfo.ssrc;
	124	+ this.deviceId = deviceId;
	125	+ this.channelId = channelId;
	126	+ this.videoUrl = streamInfo.flv + "?" + new Date().getTime();
	127	+ this.showVideoDialog = true;
	128	+ console.log(this.ssrc);
	129	+ },
	130	+ stop: function() {
	131	+ console.log('关闭视频');
	132	+ this.$refs.videoPlayer.pause();
	133	+ this.videoUrl = '';
	134	+ this.showVideoDialog = false;
	135	+ this.$axios({
	136	+ method: 'post',
	137	+ url: '/api/play/' + this.ssrc + '/stop'
	138	+ }).then(function(res) {
	139	+ console.log(JSON.stringify(res));
	140	+ });
	141	+
	142	+ this.$axios({
	143	+ method: 'post',
	144	+ url: '/api/playback/' + this.ssrc + '/stop'
	145	+ }).then(function(res) {
	146	+ console.log(JSON.stringify(res));
	147	+ });
	148	+ },
	149	+ copySharedInfo: function(data) {
	150	+ console.log('复制内容：' + data);
	151	+ let _this = this;
	152	+ this.$copyText(data).then(
	153	+ function(e) {
	154	+ _this.$message({
	155	+ showClose: true,
	156	+ message: '复制成功',
	157	+ type: 'success'
	158	+ });
	159	+ },
	160	+ function(e) {
	161	+ _this.$message({
	162	+ showClose: true,
	163	+ message: '复制失败，请手动复制',
	164	+ type: 'error'
	165	+ });
	166	+ }
	167	+ );
	168	+ },
	169	+
	170	+ recordList: function() {
	171	+ if (!this.videoHistory.startTime \|\| !this.videoHistory.endTime) {
	172	+ return;
	173	+ }
	174	+ let that = this;
	175	+ this.$axios({
	176	+ method: 'get',
	177	+ url: '/api/record/' + this.deviceId + '/' + this.channelId + '?startTime=' + this.videoHistory
	178	+ .startTime + '&endTime=' + this.videoHistory.endTime
	179	+ }).then(function(res) {
	180	+ console.log(JSON.stringify(res));
	181	+ }).catch(function(e) {
	182	+ // that.videoHistory.searchHistoryResult = falsificationData.recordData;
	183	+ });
	184	+
	185	+ },
	186	+ playRecord: function(isBackLive, rowData) {
	187	+ let that = this;
	188	+ if(isBackLive){
	189	+ this.videoUrl=this.getVideoUrlBySsrc(this.normalssrc);
	190	+ return;
	191	+ }
	192	+ this.$axios({
	193	+ method: 'get',
	194	+ url: '/api/playback/' + this.deviceId + '/' + this.channelId + '?startTime=' + rowData.startTime + '&endTime=' +
	195	+ rowData.endTime
	196	+ }).then(function(res) {
	197	+ let ssrc = res.data.ssrc;
	198	+ that.videoUrl = that.getVideoUrlBySsrc(ssrc);
	199	+ //that.videoUrl='http://hls.cntv.kcdnvip.com/asp/hls/main/0303000a/3/default/f466089412c04a759c5515dbfcc3ac3d/main.m3u8?maxbr=2048';
	200	+ });
	201	+
	202	+ },
	203	+ ptzCamera: function(leftRight, upDown, zoom) {
	204	+ console.log('云台控制：' + leftRight + ' : ' + upDown + " : " + zoom);
	205	+ let that = this;
	206	+ this.$axios({
	207	+ method: 'post',
	208	+ url: '/api/ptz/' + this.deviceId + '/' + this.channelId + '?leftRight=' + leftRight + '&upDown=' + upDown +
	209	+ '&inOut=' + zoom + '&moveSpeed=50&zoomSpeed=50'
	210	+ }).then(function(res) {});
	211	+ },
	212	+ //////////////////////播放器事件处理//////////////////////////
	213	+ videoError:function(e){
	214	+ console.log("播放器错误："+JSON.stringify(e));
	215	+ }
	216	+ }
	217	+ };
	218	+</script>
	219	+
	220	+<style>
	221	+ .control-wrapper {
	222	+ position: relative;
	223	+ width: 6.25rem;
	224	+ height: 6.25rem;
	225	+ max-width: 6.25rem;
	226	+ max-height: 6.25rem;
	227	+ margin: 0 auto;
	228	+ border-radius: 100%;
	229	+ float: left;
	230	+ }
	231	+
	232	+ .control-btn {
	233	+ display: flex;
	234	+ justify-content: center;
	235	+ position: absolute;
	236	+ width: 44%;
	237	+ height: 44%;
	238	+ border-radius: 5px;
	239	+ border: 1px solid #78aee4;
	240	+ box-sizing: border-box;
	241	+ transition: all 0.3s linear;
	242	+ }
	243	+
	244	+ .control-btn i {
	245	+ font-size: 20px;
	246	+ color: #78aee4;
	247	+ display: flex;
	248	+ justify-content: center;
	249	+ align-items: center;
	250	+ }
	251	+
	252	+ .control-round {
	253	+ position: absolute;
	254	+ top: 21%;
	255	+ left: 21%;
	256	+ width: 58%;
	257	+ height: 58%;
	258	+ background: #fff;
	259	+ border-radius: 100%;
	260	+ }
	261	+
	262	+ .control-round-inner {
	263	+ position: absolute;
	264	+ left: 15%;
	265	+ top: 15%;
	266	+ display: flex;
	267	+ justify-content: center;
	268	+ align-items: center;
	269	+ width: 70%;
	270	+ height: 70%;
	271	+ font-size: 40px;
	272	+ color: #78aee4;
	273	+ border: 1px solid #78aee4;
	274	+ border-radius: 100%;
	275	+ transition: all 0.3s linear;
	276	+ }
	277	+
	278	+ .control-inner-btn {
	279	+ position: absolute;
	280	+ width: 60%;
	281	+ height: 60%;
	282	+ background: #fafafa;
	283	+ }
	284	+
	285	+ .control-top {
	286	+ top: -8%;
	287	+ left: 27%;
	288	+ transform: rotate(-45deg);
	289	+ border-radius: 5px 100% 5px 0;
	290	+ }
	291	+
	292	+ .control-top i {
	293	+ transform: rotate(45deg);
	294	+ border-radius: 5px 100% 5px 0;
	295	+ }
	296	+
	297	+ .control-top .control-inner {
	298	+ left: -1px;
	299	+ bottom: 0;
	300	+ border-top: 1px solid #78aee4;
	301	+ border-right: 1px solid #78aee4;
	302	+ border-radius: 0 100% 0 0;
	303	+ }
	304	+
	305	+ .control-top .fa {
	306	+ transform: rotate(45deg) translateY(-7px);
	307	+ }
	308	+
	309	+ .control-left {
	310	+ top: 27%;
	311	+ left: -8%;
	312	+ transform: rotate(45deg);
	313	+ border-radius: 5px 0 5px 100%;
	314	+ }
	315	+
	316	+ .control-left i {
	317	+ transform: rotate(-45deg);
	318	+ }
	319	+
	320	+ .control-left .control-inner {
	321	+ right: -1px;
	322	+ top: -1px;
	323	+ border-bottom: 1px solid #78aee4;
	324	+ border-left: 1px solid #78aee4;
	325	+ border-radius: 0 0 0 100%;
	326	+ }
	327	+
	328	+ .control-left .fa {
	329	+ transform: rotate(-45deg) translateX(-7px);
	330	+ }
	331	+
	332	+ .control-right {
	333	+ top: 27%;
	334	+ right: -8%;
	335	+ transform: rotate(45deg);
	336	+ border-radius: 5px 100% 5px 0;
	337	+ }
	338	+
	339	+ .control-right i {
	340	+ transform: rotate(-45deg);
	341	+ }
	342	+
	343	+ .control-right .control-inner {
	344	+ left: -1px;
	345	+ bottom: -1px;
	346	+ border-top: 1px solid #78aee4;
	347	+ border-right: 1px solid #78aee4;
	348	+ border-radius: 0 100% 0 0;
	349	+ }
	350	+
	351	+ .control-right .fa {
	352	+ transform: rotate(-45deg) translateX(7px);
	353	+ }
	354	+
	355	+ .control-bottom {
	356	+ left: 27%;
	357	+ bottom: -8%;
	358	+ transform: rotate(45deg);
	359	+ border-radius: 0 5px 100% 5px;
	360	+ }
	361	+
	362	+ .control-bottom i {
	363	+ transform: rotate(-45deg);
	364	+ }
	365	+
	366	+ .control-bottom .control-inner {
	367	+ top: -1px;
	368	+ left: -1px;
	369	+ border-bottom: 1px solid #78aee4;
	370	+ border-right: 1px solid #78aee4;
	371	+ border-radius: 0 0 100% 0;
	372	+ }
	373	+
	374	+ .control-bottom .fa {
	375	+ transform: rotate(-45deg) translateY(7px);
	376	+ }
	377	+</style>
...	...

web_src/src/components/videoList.vue 0 → 100644

View file @c6e8b34

	1	+<template>
	2	+ <div id="app">
	3	+ <el-container>
	4	+
	5	+ <el-header>
	6	+ <uiHeader></uiHeader>
	7	+ </el-header>
	8	+ <el-main>
	9	+ <div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;">
	10	+ <span style="font-size: 1rem; font-weight: bold;">设备列表</span>
	11	+ <div style="position: absolute; right: 1rem; top: 0.3rem;">
	12	+ <el-button icon="el-icon-refresh-right" circle size="mini" @click="getDeviceList()"></el-button>
	13	+ </div>
	14	+ </div>
	15	+ <devicePlayer ref="devicePlayer"></devicePlayer>
	16	+ <!--设备列表-->
	17	+ <el-table :data="deviceList" border style="width: 100%" :height="winHeight">
	18	+ <el-table-column prop="name" label="名称" width="180" align="center">
	19	+ </el-table-column>
	20	+ <el-table-column prop="deviceId" label="设备编号" width="240" align="center">
	21	+ </el-table-column>
	22	+ <el-table-column label="地址" width="180" align="center">
	23	+ <template slot-scope="scope">
	24	+ <div slot="reference" class="name-wrapper">
	25	+ <el-tag size="medium">{{ scope.row.host.address }}</el-tag>
	26	+ </div>
	27	+ </template>
	28	+ </el-table-column>
	29	+ <el-table-column prop="manufacturer" label="厂家" align="center">
	30	+ </el-table-column>
	31	+ <el-table-column prop="model" label="固件版本" align="center">
	32	+ </el-table-column>
	33	+ <el-table-column prop="transport" label="通讯方式" align="center">
	34	+ </el-table-column>
	35	+ <el-table-column prop="channelCount" label="通道数" align="center">
	36	+ </el-table-column>
	37	+ <el-table-column label="状态" width="180" align="center">
	38	+ <template slot-scope="scope">
	39	+ <div slot="reference" class="name-wrapper">
	40	+ <el-tag size="medium">{{ scope.row.online==1?'在线' :'离线'}}</el-tag>
	41	+ </div>
	42	+ </template>
	43	+ </el-table-column>
	44	+
	45	+ <el-table-column label="操作" width="240" align="center" fixed="right">
	46	+ <template slot-scope="scope">
	47	+ <el-button size="mini" icon="el-icon-refresh" @click="refDevice(scope.row)">刷新</el-button>
	48	+ <el-button size="mini" icon="el-icon-s-open" type="primary" @click="showChannelList(scope.row)">查看通道</el-button>
	49	+ </template>
	50	+ </el-table-column>
	51	+ </el-table>
	52	+ <el-pagination
	53	+ style="float: right"
	54	+ @size-change="handleSizeChange"
	55	+ @current-change="currentChange"
	56	+ :current-page="currentPage"
	57	+ :page-size="count"
	58	+ :page-sizes="[15, 25, 35, 50]"
	59	+ layout="total, sizes, prev, pager, next"
	60	+ :total="total">
	61	+ </el-pagination>
	62	+
	63	+ </el-main>
	64	+ </el-container>
	65	+ </div>
	66	+</template>
	67	+
	68	+<script>
	69	+ import devicePlayer from './gb28181/devicePlayer.vue'
	70	+ import uiHeader from './UiHeader.vue'
	71	+ export default {
	72	+ name: 'app',
	73	+ components: {
	74	+ devicePlayer,
	75	+ uiHeader
	76	+ },
	77	+ data() {
	78	+ return {
	79	+ deviceList: [], //设备列表
	80	+ currentDevice: {}, //当前操作设备对象
	81	+
	82	+ videoComponentList: [],
	83	+ updateLooper: 0, //数据刷新轮训标志
	84	+ currentDeviceChannelsLenth:0,
	85	+ winHeight: window.innerHeight - 200,
	86	+ currentPage:1,
	87	+ count:15,
	88	+ total:0
	89	+ };
	90	+ },
	91	+ computed: {
	92	+ getcurrentDeviceChannels: function() {
	93	+ let data = this.currentDevice['channelMap'];
	94	+ let channels = null;
	95	+ if (data) {
	96	+ channels = Object.keys(data).map(key => {
	97	+ return data[key];
	98	+ });
	99	+ this.currentDeviceChannelsLenth = channels.length;
	100	+ }
	101	+
	102	+ console.log("数据：" + JSON.stringify(channels));
	103	+ return channels;
	104	+ }
	105	+ },
	106	+ mounted() {
	107	+ this.initData();
	108	+ this.updateLooper = setInterval(this.initData, 10000);
	109	+ },
	110	+ destroyed() {
	111	+ this.$destroy('videojs');
	112	+ clearTimeout(this.updateLooper);
	113	+ },
	114	+ methods: {
	115	+ initData: function() {
	116	+ this.getDeviceList();
	117	+ },
	118	+ currentChange: function(val){
	119	+ this.currentPage = val;
	120	+ this.getDeviceList();
	121	+ },
	122	+ handleSizeChange: function(val){
	123	+ this.count = val;
	124	+ this.getDeviceList();
	125	+ },
	126	+ getDeviceList: function() {
	127	+ let that = this;
	128	+
	129	+ this.$axios.get(`/api/devices`,{
	130	+ params: {
	131	+ page: that.currentPage - 1,
	132	+ count: that.count
	133	+ }
	134	+ } )
	135	+ .then(function (res) {
	136	+ console.log(res);
	137	+ that.total = res.data.total;
	138	+ that.deviceList = res.data.data;
	139	+ })
	140	+ .catch(function (error) {
	141	+ console.log(error);
	142	+ });
	143	+
	144	+ },
	145	+ showChannelList: function(row) {
	146	+ console.log(JSON.stringify(row))
	147	+ this.$router.push(`/channelList/${row.deviceId}/0/15/1`);
	148	+ },
	149	+
	150	+
	151	+ //gb28181平台对接
	152	+ //刷新设备信息
	153	+ refDevice: function(itemData) {
	154	+ ///api/devices/{deviceId}/sync
	155	+ console.log("刷新对应设备:" + itemData.deviceId);
	156	+ this.$axios({
	157	+ method: 'post',
	158	+ url: '/api/devices/' + itemData.deviceId + '/sync'
	159	+ }).then(function(res) {
	160	+ // console.log("刷新设备结果："+JSON.stringify(res));
	161	+ }).catch(function(e) {
	162	+ that.$message({
	163	+ showClose: true,
	164	+ message: '请求成功',
	165	+ type: 'success'
	166	+ });
	167	+ });;
	168	+ },
	169	+ //通知设备上传媒体流
	170	+ sendDevicePush: function(itemData) {
	171	+ let deviceId = this.currentDevice.deviceId;
	172	+ let channelId = itemData.channelId;
	173	+ console.log("通知设备推流1：" + deviceId + " : " + channelId);
	174	+ let that = this;
	175	+ this.$axios({
	176	+ method: 'get',
	177	+ url: '/api/play/' + deviceId + '/' + channelId
	178	+ }).then(function(res) {
	179	+ let ssrc = res.data.ssrc;
	180	+ that.$refs.devicePlayer.play(ssrc,deviceId,channelId);
	181	+ }).catch(function(e) {
	182	+ });
	183	+ }
	184	+
	185	+ }
	186	+ };
	187	+</script>
	188	+
	189	+<style>
	190	+ .videoList {
	191	+ display: flex;
	192	+ flex-wrap: wrap;
	193	+ align-content: flex-start;
	194	+ }
	195	+
	196	+ .video-item {
	197	+ position: relative;
	198	+ width: 15rem;
	199	+ height: 10rem;
	200	+ margin-right: 1rem;
	201	+ background-color: #000000;
	202	+ }
	203	+
	204	+ .video-item-img {
	205	+ position: absolute;
	206	+ top: 0;
	207	+ bottom: 0;
	208	+ left: 0;
	209	+ right: 0;
	210	+ margin: auto;
	211	+ width: 100%;
	212	+ height: 100%;
	213	+ }
	214	+
	215	+ .video-item-img:after {
	216	+ content: "";
	217	+ display: inline-block;
	218	+ position: absolute;
	219	+ z-index: 2;
	220	+ top: 0;
	221	+ bottom: 0;
	222	+ left: 0;
	223	+ right: 0;
	224	+ margin: auto;
	225	+ width: 3rem;
	226	+ height: 3rem;
	227	+ background-image: url("../assets/loading.png");
	228	+ background-size: cover;
	229	+ background-color: #000000;
	230	+ }
	231	+
	232	+ .video-item-title {
	233	+ position: absolute;
	234	+ bottom: 0;
	235	+ color: #000000;
	236	+ background-color: #ffffff;
	237	+ line-height: 1.5rem;
	238	+ padding: 0.3rem;
	239	+ width: 14.4rem;
	240	+ }
	241	+</style>
...	...

web_src/src/main.js 0 → 100644

View file @c6e8b34

	1	+import Vue from 'vue';
	2	+import App from './App.vue';
	3	+Vue.config.productionTip = false;
	4	+import ElementUI from 'element-ui';
	5	+import 'element-ui/lib/theme-chalk/index.css';
	6	+import router from './router/index.js';
	7	+import axios from 'axios';
	8	+import VueCookies from 'vue-cookies';
	9	+
	10	+import echarts from 'echarts';
	11	+import VueClipboard from 'vue-clipboard2'
	12	+Vue.use(VueClipboard)
	13	+Vue.use(ElementUI);
	14	+Vue.use(VueCookies);
	15	+Vue.prototype.$axios = axios;
	16	+
	17	+axios.defaults.baseURL = (process.env.NODE_ENV === 'development') ? process.env.BASE_API : "";
	18	+
	19	+Vue.prototype.$cookies.config(60*30);
	20	+
	21	+
	22	+new Vue({
	23	+ router: router,
	24	+ render: h => h(App),
	25	+}).$mount('#app')
...	...

guzijian / wvp-GB28181-pro · Commits

GitLab

web页面集成