From c6e8b341f3e266c857622e59d67edd1457be144e Mon Sep 17 00:00:00 2001
From: 648540858 <648540858@qq.com>
Date: Sat, 10 Oct 2020 17:33:29 +0800
Subject: [PATCH] =?UTF-8?q?web=E9=A1=B5=E9=9D=A2=E9=9B=86=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web_src/src/assets/loading.png                | Bin 0 -> 2763 bytes
 web_src/src/assets/login-bg.jpg               | Bin 0 -> 4068 bytes
 web_src/src/assets/login-cloud.png            | Bin 0 -> 3388 bytes
 web_src/src/assets/logo.png                   | Bin 0 -> 6849 bytes
 web_src/src/assets/play.png                   | Bin 0 -> 546 bytes
 web_src/src/components/Loading.vue            |  98 +++++
 web_src/src/components/Login.vue              | 180 +++++++++
 web_src/src/components/UiHeader.vue           |  26 ++
 web_src/src/components/channelList.vue        | 304 ++++++++++++++
 web_src/src/components/control.vue            | 346 ++++++++++++++++
 .../src/components/gb28181/devicePlayer.vue   | 377 ++++++++++++++++++
 web_src/src/components/videoList.vue          | 241 +++++++++++
 web_src/src/main.js                           |  25 ++
 13 files changed, 1597 insertions(+)
 create mode 100644 web_src/src/assets/loading.png
 create mode 100644 web_src/src/assets/login-bg.jpg
 create mode 100644 web_src/src/assets/login-cloud.png
 create mode 100644 web_src/src/assets/logo.png
 create mode 100644 web_src/src/assets/play.png
 create mode 100644 web_src/src/components/Loading.vue
 create mode 100644 web_src/src/components/Login.vue
 create mode 100644 web_src/src/components/UiHeader.vue
 create mode 100644 web_src/src/components/channelList.vue
 create mode 100644 web_src/src/components/control.vue
 create mode 100644 web_src/src/components/gb28181/devicePlayer.vue
 create mode 100644 web_src/src/components/videoList.vue
 create mode 100644 web_src/src/main.js

diff --git a/web_src/src/assets/loading.png b/web_src/src/assets/loading.png
new file mode 100644
index 0000000000000000000000000000000000000000..fa490e6b080df0f18703f78aeffe2cc500924442
GIT binary patch
literal 2763
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
F_#fYb_>ceq

literal 0
HcmV?d00001

diff --git a/web_src/src/assets/login-bg.jpg b/web_src/src/assets/login-bg.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..ee27d8e0b19def7fe8dad55b8cf765165ae85503
GIT binary patch
literal 4068
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
Mut`r>V)}0V2XPU?sQ>@~

literal 0
HcmV?d00001

diff --git a/web_src/src/assets/login-cloud.png b/web_src/src/assets/login-cloud.png
new file mode 100644
index 0000000000000000000000000000000000000000..02b1958b2dd0ca92889505c054dba41af544a21b
GIT binary patch
literal 3388
zcmbVPc{r5&9v^fpLx&<KO2$|s%won^$~rSbMjEnYX~xW8FpHVNSks|IvWr%cQZkVu
zm8G~RObf!X6m!bNkr;(6S?=hZ&b@z}=REhh@AJOD_51mJ_dnh=H`o1}f$Bg20I=D~
z5rY@cHsViTR$4qdWq?=2lNtx>&2eW0aiWPV3c!xc2&90VXvAO&o<bzYM08O00RU1g
zs)skn8|Pw4V$dMO4H*cR#uTFgfPFSxCXp0I;eY}u!Bn~xSoEkF45E^)z+R>}7><di
zgisx0SrqqJR}WHb7|DVRwy_57<64RdXcP_+#HEGP*_K=@@Hbvd@p|JJ3I=@>;e=U%
z|1ioM=LSMESQL;c1Yt~q!Qmhj3Ia!(qEK)nkO>TK0)>fRlrbD>X^OHmF$4YifW_Ka
z<RD8t#^Fz0;++*Zgu`K4LZQ*o(U52agux1i!YwQ;HaJX7jKvbh>=-(S$Tg<3wZAi9
zC~Ojo%H&WPbkGJPF_00-u>y-N{lf(s6NmeYn9lw)P~wn5xkM%u4uL^wv<<($NwYb4
z%74uGTWPjO43h%IQ`n417D=3sAnos9aqRwC(T1Sd8q0$$syHdca14VKNu$s?P8ch&
z_y$6zk}XXF&B#b|q?s{_L^d}LL?98y=ENYfu{p{lNPJ;ILLlMadHxP>?qG^FMPltR
z7AOli9E-9*V_*&r7<)Ucojn49z<kF#(b*g#okaPrn=01*C)VO0v6g5Sg~(yBJQ$4d
z?^WOy!r(C2Aq*x6?T!NJdr|3RMl{=CBSn9BjG?foQ53QRi$Mc@i?Jp3Z}k6fzW;$I
z|G%+=ij9J96v}@U&i5m6HEt~bY6J1+uSTNK#ofaaw~4;3rw;%iM{vT}d2olGA9<Fm
zv40D%fjxDu+p&mX6eBEDdWz}<{Jg#nh~nZl$%8=+1SxYJd3ZwmZGKzF2X&q|3@>=?
z@9%%9pdjWm`PXfLsr5OLbJlolJYjqxb_Jc)Jn?CG{oM~HdWx&NSA9WolZj!?ACIn?
z#TJ~D?m&4Td)suYWTj;ug1vrs7j%BCEfx(6C=Fg~8d>#iT+V9}jl53CNL25y4o(@W
z*MyM)a>jbRGr%}J;Zi(`=W6XC1R|Yu@4ee2AxD_HDpI^Bg3f&n)n{iI+K1jBoX8g3
zEE0r#_0@FINl|Cbi|*_}hfj>(Rv4_~8KG^IBkqP|dlW3Tz8KF{R_7;oni;pYjTO|H
zMG|>gmu-4Vj$Jo%4N6{0l9NAwv2n6^Ppf7v@$UT#@15?qXhG~j5r*5X+JuU%oFs$#
zs<BUXVfS#JE3orBRZ8_nnqqJGYNKlu&n`h@S7KHPapjxJYqRwQj{?35-QpI$_@CZU
zGyD+eKc)TxuBYBT9se$M+@)kC6xnuz`x|1l!GO)2jORKhq_`*jtf*kGuUrSMyrAT#
zo_+K}=a)k8@u$DcU7vQ%^z%>mP52U~=~X(MzX>5o)R4uDo@u)$l25F28Q8YpQ&?f~
zK<&j5wWg0(&Ly{;dFcZ40;Z`?7f<U&xTfbsT@~0w8`(=4XD%X1eiJ$RpRNzqrhWE+
zRw-?1TL#)M%^WMsc5lkJ&Vgj?VY?hd!#$Q?<F$79h@R&4Fi(Clq*?UWPh6#uPvjZW
zCZsRS!}~^-<f8`b-bEn+b-#0fc?*3~rbSf6d{bJKJCdipYUtNetun1TEerk<&saKQ
zQ)LJFDP(F3*pr^2v9O7(Ywz6Z?p0)dw)Dtc(Sd-=YU+e`e{W3_<iIK3HfG_etB@;u
zx4Lx)rQr7UKPz7gAMn@G%PqMHF!&Ja3^~8n-2H5Lt~oeU;_}5_xXh5UWt0$-)bL&h
z6+jGgJf*$M{LF+@xN|^PlOt%qTuw|T=J;Uasr-`V(Y5(j)!RuK_$?aglQ%o_*fQ`C
zIVHJMR~CU=!QE;Op~>DwNrALwks&7xVSCYjd;8pu<6iYfp$+PDKC<mIWwo+6Rb3@#
z=@Wd3eeN)$n9Q$p&(+eq*b2YAebYPVlBM}c{_(>2n)i0}g?CnZgT8SJvoWZcO0r<I
zA#C#v={BV5W2q$Xf|H(9+XJ%=T~*Lm&W`#jRtHUBPn;&-$-R#jtvF_;;fLTAd6yBJ
z`NvOT&;IT^%KTxg*G=V8;eiA>>;BURTy43f_Sb(<n!ofIpPlnBf2#9VLC;h91IK<k
zcB(A+r{7c#_M7{Kgt+nLejhV`BMMhRrC#}3W`lc~L{j<PF*c)B>rexIhh0P4Ctf?Y
z5h|yn3ao~Mdn0R)@c9pbY;@M3QnI?d>6zl$^R_j%QwyYov6dbjx6a$0Cwmo4lkD*%
zk3N(%vckb1fnVaUG9`?()Lz<treGohj{@X$dk>3tXU)%QTO}N<TCaGxQn+)`{^(`H
zOZ~$NW!~D}C46185%XGy7u&O>itWsGXojHbL)f=|o@e5Zrk_o26Lr5W9}+<lT<P<p
ziVr2%oobXr6Svg<xLe~~$bKS5Hr!!0-`ZU*)rh}hrk1<7EI+=Id)hE}$uX45dV@mT
zO8o3-lgMkE-<0xjc?#XQ5>?vssOne>HPR5{1u{<CHY6ns<|CNd^_kBmrcxxzKimJ<
zso#H)^GjlRTjWd>5I!)v@Vvdt`UKoj?@*E6#hoe1O3v*<E@HP&w`Y*8V(FoxTZF_Q
zH$$K-JJc-Hpn34Cp56GSdkb;TB`baj^%Lz(tT_C$%ih!1Phebqf(%mSoH}%CDw4ih
zxHu$9k8iE%d3`ukU1uC`6Zy_ub2Q;?Z~qlx;_D~XXM*+bUYlv>6!C~*B2FtWLL(I~
zkStx$09hy`$L)@>30`EWWJo?aG2*6KxG+k|z4d-fM=dQ1o4^2aGjE<f`5<ZRu)hIW
zzg!Q`hv6$7(%+XPX^l8E>e~mO&TilK*nP7p*7xYN7SAK%ja*t@xUqTbHLH~}%@E}u
z0`hBb94NW18{ynFG>}>t*_JpfXgyg|owK{|TCUKelpA~k%Py7;dwFpGlcdR+?W$mK
zXUjcZ2@LFulx<?P->^_E(_VLXblJ>9slK^zAma-)-M4G|x`W{6+wFz1^FZxAk$&b-
z{PkPAo|RXGO{HR|Zubl{7A=1ChQFxRR#Z}{Y#ER`Ofl+kU604n9`!YS#J)POkWkuY
zHZ(Wp0hEz4ZT_elq2GyXA)pRj+BYP#*Rk$Fd~Ya4p*FCZyZP+nSeJtG%B@^lR#Vrk
zAgpx?em^Yho`|uq{8r7QA3OQ}ny=Dip49o<6^+9IRef{x;9J=SZweM&KR$o(Aphel
zs&VE?CC_}wEzdOv$~q;?Q!npkZZ9}_IBn<|qA^ycxwyI$yB0t=U(XWg0tK(_rltKj
zm(zh1ZFs%e6k_X^94sDHAOgeiz!{$`d`iTtT|0#n=jtS_JpqqY>na^zYP^A+P)l<O
zH;cYA+*>AW=T~w~FYD>%?!re!$HZmW)*V;TzEhGub|Ig&C21hUFIVgSBO#~m+%$5I
z?GjNhi9a3dWB1|QJkHP8d1nAXLQ(4Gb3%tGZ3sLiZD^Ezc$d<_W(%J;Z<Mna4rnNz
z20NnncIg?K5bo@j&b*6Y7u!Y1N7Zlo)pUkbprgqTl*!%+Smk#GSf}wo0(NV!n$Ikx
zC)<cruv~oZ6KvJlaI&=2BXN_<@dsy9bDuN$^7ob%Ud?sK&!U|pFzW$R5o-><ntPvL
z^SNIE*kg7d|4h41x3BC8;PH)vrcL^1+b@=|5+qWGy>6@5dgfiE9Eo>{I9fa>Y^^~*
zGLo;7xv;nI!{px2%wA;l3o3J<$9qc^@9<!uFl6b+`K3G0>`v=7sllesUm5Gwf8EvB
z`_4<_Vr{oHM(JWrjWD!_{v*GlWM$E=^lAOT>-`T2y^AKQjaD5m6Gk0yIx7Z(8<l<A
z_XNruDrq6nKNQCOrm5<7bR;%Y(AQ;6z;TRZ2qxsOR!b!54yWY0`?G}y7WgwlQEYJM
zBox!7m)=wVFsEazNlr_`t))qECd<Kf)LVJ89sKP`v`VUbN2MZkbz%o3zV$>}@L+U%
jbbt!dKIONmW=RD=&KHPlJ#T`z@jv5)b;aDaC;a?xa|_pe

literal 0
HcmV?d00001

diff --git a/web_src/src/assets/logo.png b/web_src/src/assets/logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..f3d2503fc2a44b5053b0837ebea6e87a2d339a43
GIT binary patch
literal 6849
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

literal 0
HcmV?d00001

diff --git a/web_src/src/assets/play.png b/web_src/src/assets/play.png
new file mode 100644
index 0000000000000000000000000000000000000000..e4b33f33ed554fa13bd60a533983b1787e61fb6b
GIT binary patch
literal 546
zcmV+-0^R+IP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm0005$Nkl<ZXhZFo
zKT8}z7>A#q;0F*3L5p-rB?eIt3mdz90qcOBm;}MX*2=;<X@h@BVG{^}G{H_tz*P3Z
zLKD$6w(^F7yKoU@c6MfOXW+KInc4UGJ?|W|BMN_1c>N3j+BO(vz|4k#SzsRc34D=s
z+fS(40A@A^ya%536nqJ+NjmHoL@fX_n+8sR;YSMn2rNswY8s?2z$f5^r?_iiwP_o{
z0A@A<xZ<kLZPZ59BL0PKX3v4sz}C3w*f<EB=N(=LU<UZ+UHRbw$!+u-z+pKXuO#i)
z4B@|NZ2)u&_zb+1^eYCWO@Jge+6IWWkqdwW`P11Odm$~A6F@B+IRbQTyq2`<vym%6
zWgEEzcx{vb(6#XnSdnDCZB-J0t9wJzR>=Stz(lWw(hRup$0YskS{MNM{-+cFehxe-
zxrNpxZI`-<kANjfcclTiL*5%nI}f#E?wi>A(UU8HOTE~`oHzAc_dw;;a|8%VJtu%#
zpOLu$)K0x^fTAz9lB6DMU<&vVct}f{dMtpuUUvmmeUe}3Mgh3VW_AoLcnBK1QcnRe
z348@cAAx8z^=N>Og{Qz<V6kVxGhkEFhpPP*J1+PzcmIWE=0L`QTS?zz3ksbd4G{Xm
k)Z+&LsS^!duXqE00hl%GF`D@-eE<Le07*qoM6N<$f<*u7;Q#;t

literal 0
HcmV?d00001

diff --git a/web_src/src/components/Loading.vue b/web_src/src/components/Loading.vue
new file mode 100644
index 00000000..433705e8
--- /dev/null
+++ b/web_src/src/components/Loading.vue
@@ -0,0 +1,98 @@
+//loading效果组件
+
+<template>
+<div class="loadEffect" :style="{marginTop: marginTop? marginTop : '50%'}">
+    <span class="ld-span"></span>
+    <span class="ld-span"></span>
+    <span class="ld-span"></span>
+    <span class="ld-span"></span>
+    <span class="ld-span"></span>
+    <span class="ld-span"></span>
+    <span class="ld-span"></span>
+    <span class="ld-span"></span>
+</div>
+</template>
+
+<script>
+export default {
+  name: 'Loading',
+  props: ["marginTop"]
+
+}
+</script>
+
+<style scoped>
+.loadEffect{
+    width: 100px;
+    height: 100px;
+    position: relative;
+    margin: 0 auto;
+    position: relative;
+    top:-50px;
+    margin-top:50%;
+    transform: scale(.5)
+}
+.loadEffect .ld-span{
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background: #67e7d5;
+    position: absolute;
+    -webkit-animation: load 1.04s ease infinite;
+}
+@-webkit-keyframes load{
+    0%{
+    -webkit-transform: scale(1.2);
+    opacity: 1;
+    }
+    100%{
+    -webkit-transform: scale(.3);
+    opacity: 0.5;
+    }
+}
+.loadEffect .ld-span:nth-child(1){
+    left: 0;
+    top: 50%;
+    margin-top:-10px;
+    -webkit-animation-delay:0.13s;
+}
+.loadEffect .ld-span:nth-child(2){
+    left: 14px;
+    top: 14px;
+    -webkit-animation-delay:0.26s;
+}
+.loadEffect .ld-span:nth-child(3){
+    left: 50%;
+    top: 0;
+    margin-left: -10px;
+    -webkit-animation-delay:0.39s;
+}
+.loadEffect .ld-span:nth-child(4){
+    top: 14px;
+    right:14px;
+    -webkit-animation-delay:0.52s;
+}
+.loadEffect .ld-span:nth-child(5){
+    right: 0;
+    top: 50%;
+    margin-top:-10px;
+    -webkit-animation-delay:0.65s;
+}
+.loadEffect .ld-span:nth-child(6){
+    right: 14px;
+    bottom:14px;
+    -webkit-animation-delay:0.78s;
+}
+.loadEffect .ld-span:nth-child(7){
+    bottom: 0;
+    left: 50%;
+    margin-left: -10px;
+    -webkit-animation-delay:0.91s;
+}
+.loadEffect .ld-span:nth-child(8){
+    bottom: 14px;
+    left: 14px;
+    -webkit-animation-delay:1.04s;
+}
+</style>
diff --git a/web_src/src/components/Login.vue b/web_src/src/components/Login.vue
new file mode 100644
index 00000000..030d3eec
--- /dev/null
+++ b/web_src/src/components/Login.vue
@@ -0,0 +1,180 @@
+<template>
+<div class="login" id="login">
+    <a href="javascript:;" class="log-close"><i class="icons close"></i></a>
+    <div class="log-bg">
+        <div class="log-cloud cloud1"></div>
+        <div class="log-cloud cloud2"></div>
+        <div class="log-cloud cloud3"></div>
+        <div class="log-cloud cloud4"></div>
+
+        <div class="log-logo">Welcome!</div>
+        <div class="log-text"></div>
+    </div>
+    <div class="log-email">
+        <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">
+        <a href="javascript:;" class="log-btn" @click="login" >登录</a>
+    </div>
+    <Loading v-if="isLoging" marginTop="-30%"></Loading>
+</div>
+</template>
+
+<script>
+import Loading from './Loading.vue'
+import crypto from 'crypto'
+export default {
+  name: 'Login',
+  data(){
+  	return {
+      isLoging: false,
+  		username: '',
+  		password: ''
+  	}
+  },
+  components:{
+    Loading
+  },
+  created(){
+  var that = this;
+  document.onkeydown = function(e) {
+    var key = window.event.keyCode;
+    if (key == 13) {
+      that.login();
+    }
+  }
+
+  },
+  methods:{
+
+  	//登录逻辑
+  	login(){
+  		if(this.username!='' && this.password!=''){
+  			this.toLogin();
+  		}
+  	},
+
+  	//登录请求
+  	toLogin(){
+
+  		//一般要跟后端了解密码的加密规则
+  		//这里例子用的哈希算法来自./js/sha1.min.js
+
+  		//需要想后端发送的登录参数
+  		let loginParam = {
+  			username: this.username,
+  			password: crypto.createHash('md5').update(this.password, "utf8").digest('hex')
+  		}
+      var that = this;
+      //设置在登录状态
+      this.isLoging = true;
+
+      this.$axios.get("/auth/login",{
+        params: loginParam
+      } )
+      .then(function (res) {
+        console.log(JSON.stringify(res));
+          if (res.data == "success") {
+            that.$cookies.set("session", {"username": that.username}) ;
+            //登录成功后
+            that.$router.push('/');
+          }
+      })
+      .catch(function (error) {
+        console.log(error);
+      });
+
+
+
+    },
+     setCookie: function (cname, cvalue, exdays) {
+                var d = new Date();
+                d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
+                var expires = "expires=" + d.toUTCString();
+                console.info(cname + "=" + cvalue + "; " + expires);
+                document.cookie = cname + "=" + cvalue + "; " + expires;
+                console.info(document.cookie);
+            },
+  }
+}
+</script>
+
+<style scoped>
+.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;
+-moz-border-radius: 5px;
+-ms-border-radius: 5px;
+-o-border-radius: 5px;
+border-radius: 5px; -webkit-box-shadow:  0px 3px 16px -5px #070707; box-shadow:  0px 3px 16px -5px #070707}
+.log-close{display: block; position: absolute; top:12px; right: 12px; opacity: 1;}
+.log-close:hover .icons{transform: rotate(180deg);}
+.log-close .icons{opacity: 1; transition: all .3s}
+.log-cloud{background-image: url(../assets/login-cloud.png); width: 63px ;height: 40px; position: absolute; z-index: 1}
+.login .cloud1{top:21px; left: -30px; transform: scale(.6); animation: cloud1 20s linear infinite;}
+.login .cloud2{top:87px; right: 20px; animation: cloud2 19s linear infinite;}
+.login .cloud3{top:160px; left: 5px;transform: scale(.8);animation: cloud3 21s linear infinite;}
+.login .cloud4{top:150px; left: -40px;transform: scale(.4);animation: cloud4 19s linear infinite;}
+.log-bg{background: url(../assets/login-bg.jpg); width: 100%; height: 312px; overflow: hidden;}
+.log-logo{height: 80px; margin: 120px auto 25px; text-align: center; color: #1fcab3; font-weight: bold; font-size: 40px;}
+.log-text{color: #57d4c3; font-size: 13px; text-align: center; margin: 0 auto;}
+.log-logo,.log-text{z-index: 2}
+.icons{background:url(../assets/icons.png) no-repeat; display: inline-block;}
+.close{height:16px;width:16px;background-position:-13px 0;}
+.login-email{height:17px;width:29px;background-position:-117px 0;}
+
+.log-btns{padding: 15px 0; margin: 0 auto;}
+.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;
+-moz-border-radius: 5px;
+-ms-border-radius: 5px;
+-o-border-radius: 5px;
+border-radius: 5px;
+position: relative;}
+.log-btn.tw{background-color: #13B4E9}
+.log-btn.email{background-color: #50E3CE}
+.log-btn:hover,.log-btn:focus{color: #fff; opacity: .8;}
+
+.log-email{text-align: center; margin-top: 20px;}
+.log-email .log-btn{background-color: #50E3CE;text-align: center;}
+.log-input-empty{border: 1px solid #f37474 !important;}
+.isloading{background: #d6d6d6}
+.log-btn .icons{margin-left: 30px; vertical-align: middle;}
+.log-btn .text{left: 95px; line-height: 50px; text-align: left; position: absolute;}
+.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;
+-moz-border-radius: 5px;
+-ms-border-radius: 5px;
+-o-border-radius: 5px;
+border-radius: 5px;}
+.log-input.warn{border: 1px solid #f88787}
+
+ @-webkit-keyframes cloud1 {
+    0%{left: 200px}
+    100%{left:-130px;}
+}
+@keyframes cloud1{
+    0%{left: 200px}
+    100%{left:-130px;}
+}
+
+ @-webkit-keyframes cloud2 {
+    0%{left:500px;}
+    100%{left:-90px;}
+}
+@keyframes cloud2{
+    0%{left:500px;}
+    100%{left:-90px;}
+}
+
+@-webkit-keyframes cloud3 {
+    0%{left:620px;}
+    100%{left:-70px;}
+}
+@keyframes cloud3{
+    0%{left:620px;}
+    100%{left:-70px;}
+}@-webkit-keyframes cloud4 {
+    0%{left:100px;}
+    100%{left:-70px;}
+}
+@keyframes cloud4{
+    0%{left:100px;}
+    100%{left:-70px;}
+}
+
+</style>
diff --git a/web_src/src/components/UiHeader.vue b/web_src/src/components/UiHeader.vue
new file mode 100644
index 00000000..67f310a6
--- /dev/null
+++ b/web_src/src/components/UiHeader.vue
@@ -0,0 +1,26 @@
+<template>
+	<div id="UiHeader">
+		<el-menu router :default-active="this.$route.path" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" mode="horizontal">
+            <el-menu-item index="/">控制台</el-menu-item>
+            <el-menu-item index="/videoList">设备列表</el-menu-item>
+            <!-- <el-menu-item index="/videoReplay">录像回看</el-menu-item> -->
+            <!-- <el-menu-item index="4">级联设置</el-menu-item> -->
+            <el-menu-item style="float: right;" @click="loginout">退出</el-menu-item>
+        </el-menu>
+	</div>
+</template>
+
+<script>
+export default {
+    name: "UiHeader",
+    methods:{
+
+  	    loginout(){
+            // 删除cookie，回到登录页面
+            this.$cookies.remove("session");
+            this.$router.push('/login');
+        },
+    }
+}
+
+</script>
\ No newline at end of file
diff --git a/web_src/src/components/channelList.vue b/web_src/src/components/channelList.vue
new file mode 100644
index 00000000..5cd108e9
--- /dev/null
+++ b/web_src/src/components/channelList.vue
@@ -0,0 +1,304 @@
+<template>
+	<div id="channelList">
+		<el-container>
+
+			<el-header>
+				<uiHeader></uiHeader>
+			</el-header>
+			<el-main>
+				<div style="background-color: #FFFFFF; position: relative; padding: 1rem 0.5rem 0.5rem 0.5rem; text-align: center;">
+					<span style="font-size: 1rem; font-weight: 500; ">通道列表({{parentChannelId ==0 ? deviceId:parentChannelId}})</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-arrow-left" size="mini" style="margin-right: 1rem;" @click="showDevice">返回</el-button>
+					搜索: <el-input @input="search" style="margin-right: 1rem; width: auto;" size="mini" placeholder="关键字" prefix-icon="el-icon-search" v-model="searchSrt" clearable> </el-input>
+
+					通道类型: <el-select size="mini" @change="search" style="margin-right: 1rem;" v-model="channelType" placeholder="请选择" default-first-option>
+						<el-option label="全部" value="" ></el-option>
+						<el-option label="设备" value="false"></el-option>
+						<el-option label="子目录" value="true" ></el-option>
+					</el-select>
+					在线状态: <el-select size="mini" @change="search" v-model="online" placeholder="请选择" default-first-option>
+						<el-option label="全部" value=""></el-option>
+						<el-option label="在线" value="on"></el-option>
+						<el-option label="离线" value="off"></el-option>
+					</el-select>
+
+				</div>
+				<devicePlayer ref="devicePlayer"></devicePlayer>
+				<!--设备列表-->
+				<el-table ref="channelListTable" :data="deviceChannelList" :height="winHeight" border style="width: 100%">
+					<el-table-column prop="channelId" label="通道编号" width="210">
+						</el-table-column>
+						<el-table-column prop="name" label="通道名称" width="500">
+						</el-table-column>
+						<el-table-column prop="subCount" label="子节点数">
+						</el-table-column>
+						<el-table-column prop="ptztypeText" label="云台类型">
+						</el-table-column>
+						<el-table-column label="操作" width="240" align="center" fixed="right">
+							<template slot-scope="scope">
+								<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-s-open"  type="primary" v-if="scope.row.parental == 1" @click="changeSubchannel(scope.row)">查看子目录</el-button>
+								<!-- <el-button size="mini" @click="sendDevicePush(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>
+
+			</el-main>
+		</el-container>
+	</div>
+</template>
+
+<script>
+	 import devicePlayer from './gb28181/devicePlayer.vue'
+	 import uiHeader from './UiHeader.vue'
+	export default {
+		name: 'channelList',
+		components: {
+			devicePlayer,
+			uiHeader
+		},
+		data() {
+			return {
+				deviceId: this.$route.params.deviceId,
+				parentChannelId: this.$route.params.parentChannelId,
+				deviceChannelList: [],
+				videoComponentList: [],
+				currentPlayerInfo: {}, //当前播放对象
+				updateLooper: 0, //数据刷新轮训标志
+				searchSrt: "",
+				channelType: "",
+				online: "",
+				winHeight: window.innerHeight - 250,
+				currentPage: parseInt(this.$route.params.page),
+				count: parseInt(this.$route.params.count),
+				total:0,
+				beforeUrl:"/videoList"
+			};
+		},
+
+		mounted() {
+			this.initData();
+			// this.updateLooper = setInterval(this.initData, 10000);
+		},
+		destroyed() {
+			this.$destroy('videojs');
+			clearTimeout(this.updateLooper);
+		},
+		methods: {
+			initData: function() {
+				if (this.parentChannelId == "" || this.parentChannelId == 0 ) {
+					this.getDeviceChannelList();
+				}else{
+					this.showSubchannels();
+				}
+
+			},
+			initParam: function(){
+				this.deviceId= this.$route.params.deviceId;
+				this.parentChannelId= this.$route.params.parentChannelId;
+				this.currentPage= parseInt(this.$route.params.page);
+				this.count= parseInt(this.$route.params.count);
+				if (this.parentChannelId == "" || this.parentChannelId == 0 ) {
+					this.beforeUrl = "/videoList"
+				}
+
+			},
+			currentChange: function(val){
+				var url = `/${this.$router.currentRoute.name}/${this.deviceId}/${this.parentChannelId}/${this.count}/${val}`
+				console.log(url)
+				this.$router.push(url).then(()=>{
+					this.initParam();
+					this.initData();
+				})
+			},
+			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();
+				})
+
+			},
+			getDeviceChannelList: function() {
+				let that = this;
+				console.log(this.currentPage - 1)
+
+				this.$axios.get(`/api/devices/${this.$route.params.deviceId}/channels`,{
+					params: {
+						page: that.currentPage - 1,
+						count: that.count,
+						query: that.searchSrt,
+						online: that.online,
+						channelType: that.channelType
+					}
+				} )
+				.then(function (res) {
+					console.log(res);
+					that.total = res.data.total;
+					that.deviceChannelList = res.data.data;
+					// 防止出现表格错位
+					that.$nextTick(()=>{
+						that.$refs.channelListTable.doLayout();
+					})
+				})
+				.catch(function (error) {
+					console.log(error);
+				});
+
+			},
+
+
+			//gb28181平台对接
+			//刷新设备信息
+			refDevice: function(itemData) {
+				///api/devices/{deviceId}/sync
+				console.log("刷新对应设备:" + itemData.deviceId);
+				this.$axios({
+					method: 'post',
+					url: '/api/devices/' + itemData.deviceId + '/sync'
+				}).then(function(res) {
+					// console.log("刷新设备结果："+JSON.stringify(res));
+				}).catch(function(e) {
+					that.$message({
+						showClose: true,
+						message: '请求成功',
+						type: 'success'
+					});
+				});;
+			},
+			//通知设备上传媒体流
+			sendDevicePush: function(itemData) {
+				let deviceId = this.deviceId;
+
+				let channelId = itemData.channelId;
+				console.log("通知设备推流1：" + deviceId + " : " + channelId);
+				let that = this;
+				this.$axios({
+					method: 'get',
+					url: '/api/play/' + deviceId + '/' + channelId
+				}).then(function(res) {
+					let ssrc = res.data.ssrc;
+					that.$refs.devicePlayer.play(res.data,deviceId,channelId);
+				}).catch(function(e) {
+				});
+			},
+			showDevice: function(){
+				this.$router.push(this.beforeUrl).then(()=>{
+					this.initParam();
+					this.initData();
+				})
+			},
+			changeSubchannel(itemData) {
+				console.log(this.$router.currentRoute)
+				this.beforeUrl = this.$router.currentRoute.path;
+
+				var url = `/${this.$router.currentRoute.name}/${this.$router.currentRoute.params.deviceId}/${itemData.channelId}/${this.$router.currentRoute.params.count}/1`
+				this.$router.push(url).then(()=>{
+					this.searchSrt= "";
+					this.channelType= "";
+					this.online= "";
+					this.initParam();
+					this.initData();
+				})
+			},
+			showSubchannels: function(channelId){
+				let that = this;
+
+				this.$axios.get(`/api/subChannels/${this.deviceId}/${this.parentChannelId}/channels`,{
+					params: {
+						page: that.currentPage - 1,
+						count: that.count,
+						query: that.searchSrt,
+						online: that.online,
+						channelType: that.channelType
+					}
+				} )
+				.then(function (res) {
+					that.total = res.data.total;
+					that.deviceChannelList = res.data.data;
+					// 防止出现表格错位
+					that.$nextTick(()=>{
+						that.$refs.channelListTable.doLayout();
+					})
+				})
+				.catch(function (error) {
+					console.log(error);
+				});
+			},
+			search: function() {
+				console.log(this.searchSrt)
+				this.currentPage = 1;
+				this.total = 0;
+				this.initData();
+			}
+
+		}
+	};
+</script>
+
+<style>
+	.videoList {
+		display: flex;
+		flex-wrap: wrap;
+		align-content: flex-start;
+	}
+
+	.video-item {
+		position: relative;
+		width: 15rem;
+		height: 10rem;
+		margin-right: 1rem;
+		background-color: #000000;
+	}
+
+	.video-item-img {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		margin: auto;
+		width: 100%;
+		height: 100%;
+	}
+
+	.video-item-img:after {
+		content: "";
+		display: inline-block;
+		position: absolute;
+		z-index: 2;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		margin: auto;
+		width: 3rem;
+		height: 3rem;
+		background-image: url("../assets/loading.png");
+		background-size: cover;
+		background-color: #000000;
+	}
+
+	.video-item-title {
+		position: absolute;
+		bottom: 0;
+		color: #000000;
+		background-color: #ffffff;
+		line-height: 1.5rem;
+		padding: 0.3rem;
+		width: 14.4rem;
+	}
+</style>
diff --git a/web_src/src/components/control.vue b/web_src/src/components/control.vue
new file mode 100644
index 00000000..316db30f
--- /dev/null
+++ b/web_src/src/components/control.vue
@@ -0,0 +1,346 @@
+<template>
+	<div id="app">
+		<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 style="position: absolute; right: 1rem; top: 0.3rem;">
+						<el-popover placement="bottom" width="750" height="300" trigger="click">
+							<div style="height: 600px;overflow:auto;">
+								<table class="table-c" cellspacing="0">
+									<tr v-for="(value, key, index) in serverConfig">
+										<td style="width: 18rem; text-align: right;">{{ key }}</td>
+										<td style="width: 33rem; text-align:left">{{ value }}</td>
+									</tr>
+								</table>
+							</div>
+							<el-button type="primary" slot="reference" size="mini" @click="getServerConfig()">查看服务器配置</el-button>
+						</el-popover>
+						<el-button style="margin-left: 1rem;" type="danger" size="mini" @click="reStartServer()">重启服务器</el-button>
+					</div>
+				</div>
+				<el-row :gutter="30">
+					<el-col :span="12"><div class="control-table" id="ThreadsLoad">table1</div></el-col>
+					<el-col :span="12"><div class="control-table" id="WorkThreadsLoad">table2</div></el-col>
+				</el-row>
+				<el-table :data="allSessionData" style="margin-top: 1rem;">
+					<el-table-column prop="peer_ip" label="远端"></el-table-column>
+					<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">
+							<el-button @click.native.prevent="deleteRow(scope.$index, allSessionData)" type="text" size="small">移除</el-button>
+						</template>
+					</el-table-column>
+				</el-table>
+
+			</el-main>
+			<!-- <el-footer style="position: absolute; bottom: 0; width: 100%;">ZLMediaKit-VUE_UI v1</el-footer> -->
+		</el-container>
+
+	</div>
+</template>
+
+<script>
+
+import uiHeader from './UiHeader.vue'
+
+import echarts from 'echarts';
+export default {
+	name: 'app',
+	components: {
+		echarts,
+		uiHeader
+	},
+	data() {
+		return {
+			tableOption: {
+				// legend: {},
+				xAxis: {},
+				yAxis: {},
+				label: {},
+				tooltip: {},
+				dataZoom: [],
+				series: []
+			},
+			table1Option: {
+				// legend: {},
+				xAxis: {},
+				yAxis: {},
+				label: {},
+				tooltip: {},
+				series: []
+			},
+			mChart: null,
+			mChart1: null,
+			charZoomStart: 0,
+			charZoomEnd: 100,
+			chartInterval: 0, //更新图表统计图定时任务标识
+			allSessionData: [],
+			visible: false,
+			serverConfig: {}
+		};
+	},
+	mounted() {
+		this.getAllSession();
+		this.initTable();
+		this.updateData();
+		this.chartInterval = setInterval(this.updateData, 3000);
+	},
+	destroyed() {
+		clearInterval(this.chartInterval); //释放定时任务
+	},
+	methods: {
+		updateData: function() {
+			this.getThreadsLoad();
+		},
+		/**
+		 * 获取线程状态
+		 */
+		getThreadsLoad: function() {
+			let that = this;
+			this.$axios({
+				method: 'get',
+				url: '/zlm/index/api/getThreadsLoad'
+			}).then(function(res) {
+				if (res.data.code == 0) {
+					that.tableOption.xAxis.data.push(new Date().toLocaleTimeString());
+					that.table1Option.xAxis.data.push(new Date().toLocaleTimeString());
+
+					for (var i = 0; i < res.data.data.length; i++) {
+						if (that.tableOption.series[i] === undefined) {
+							let data = {
+								data: [],
+								type: 'line'
+							};
+							let data1 = {
+								data: [],
+								type: 'line'
+							};
+							data.data.push(res.data.data[i].delay);
+							data1.data.push(res.data.data[i].load);
+							that.tableOption.series.push(data);
+							that.table1Option.series.push(data1);
+						} else {
+							that.tableOption.series[i].data.push(res.data.data[i].delay);
+							that.table1Option.series[i].data.push(res.data.data[i].load);
+						}
+					}
+					that.tableOption.dataZoom[0].start = that.charZoomStart;
+					that.tableOption.dataZoom[0].end = that.charZoomEnd;
+					that.table1Option.dataZoom[0].start = that.charZoomStart;
+					that.table1Option.dataZoom[0].end = that.charZoomEnd;
+					//that.myChart = echarts.init(document.getElementById('ThreadsLoad'));
+					that.myChart.setOption(that.tableOption, true);
+					// that.myChart1 = echarts.init(document.getElementById('WorkThreadsLoad'));
+					that.myChart1.setOption(that.table1Option, true);
+				}
+			});
+		},
+		initTable: function() {
+			let that = this;
+			this.tableOption.xAxis = {
+				type: 'category',
+				data: [], // x轴数据
+				name: '时间', // x轴名称
+				// x轴名称样式
+				nameTextStyle: {
+					fontWeight: 300,
+					fontSize: 15
+				}
+			};
+			this.tableOption.yAxis = {
+				type: 'value',
+				name: '延迟率', // y轴名称
+				boundaryGap: [0, '100%'],
+				max: 100,
+				axisLabel: {
+					show: true,
+					interval: 'auto',
+					formatter: '{value} %'
+				},
+				// y轴名称样式
+				nameTextStyle: {
+					fontWeight: 300,
+					fontSize: 15
+				}
+			};
+			this.tableOption.dataZoom = [
+				{
+					show: true,
+					start: this.charZoomStart,
+					end: this.charZoomEnd
+				}
+			];
+			this.myChart = echarts.init(document.getElementById('ThreadsLoad'));
+			this.myChart.setOption(this.tableOption);
+			this.myChart.on('dataZoom', function(event) {
+				if (event.batch) {
+					that.charZoomStart = event.batch[0].start;
+					that.charZoomEnd = event.batch[0].end;
+				} else {
+					that.charZoomStart = event.start;
+					that.charZoomEnd = event.end;
+				}
+			});
+
+			this.table1Option.xAxis = {
+				type: 'category',
+				data: [], // x轴数据
+				name: '时间', // x轴名称
+				// x轴名称样式
+				nameTextStyle: {
+					fontWeight: 300,
+					fontSize: 15
+				}
+			};
+			this.table1Option.yAxis = {
+				type: 'value',
+				name: '负载率', // y轴名称
+				boundaryGap: [0, '100%'],
+				max: 100,
+				axisLabel: {
+					show: true,
+					interval: 'auto',
+					formatter: '{value} %'
+				},
+				// y轴名称样式
+				nameTextStyle: {
+					fontWeight: 300,
+					fontSize: 15
+				}
+			};
+			this.table1Option.dataZoom = [
+				{
+					show: true,
+					start: this.charZoomStart,
+					end: this.charZoomEnd
+				}
+			];
+			this.myChart1 = echarts.init(document.getElementById('WorkThreadsLoad'));
+			this.myChart1.setOption(this.table1Option);
+			this.myChart1.on('dataZoom', function(event) {
+				if (event.batch) {
+					that.charZoomStart = event.batch[0].start;
+					that.charZoomEnd = event.batch[0].end;
+				} else {
+					that.charZoomStart = event.start;
+					that.charZoomEnd = event.end;
+				}
+			});
+		},
+
+		getAllSession: function() {
+			let that = this;
+			that.allSessionData = [];
+			console.log("地址："+'/zlm/index/api/getAllSession');
+			this.$axios({
+				method: 'get',
+				url: '/zlm/index/api/getAllSession'
+			}).then(function(res) {
+				res.data.data.forEach(item => {
+					let data = {
+						peer_ip: item.peer_ip,
+						local_ip: item.local_ip,
+						typeid: item.typeid,
+						id: item.id
+					};
+					that.allSessionData.push(data);
+				});
+			});
+		},
+		getServerConfig: function() {
+			let that = this;
+			this.$axios({
+				method: 'get',
+				url: '/zlm/index/api/getServerConfig'
+			}).then(function(res) {
+				that.serverConfig = res.data.data[0];
+				that.visible = true;
+			});
+		},
+		reStartServer: function() {
+			let that = this;
+			this.$confirm('此操作将重启媒体服务器, 是否继续?', '提示', {
+				confirmButtonText: '确定',
+				cancelButtonText: '取消',
+				type: 'warning'
+			}).then(() => {
+				let that = this;
+				this.$axios({
+					method: 'get',
+					url: '/zlm/index/api/restartServer'
+				}).then(function(res) {
+					that.getAllSession();
+					if (res.data.code == 0) {
+						that.$message({
+							type: 'success',
+							message: '操作完成'
+						});
+					}
+				});
+			});
+		},
+		deleteRow: function(index, tabledata) {
+			let that = this;
+			this.$confirm('此操作将断开该通信链路, 是否继续?', '提示', {
+				confirmButtonText: '确定',
+				cancelButtonText: '取消',
+				type: 'warning'
+			})
+				.then(() => {
+					that.deleteSession(tabledata[index].id);
+				})
+				.catch(() => {
+					console.log('id：' + JSON.stringify(tabledata[index]));
+					this.$message({
+						type: 'info',
+						message: '已取消删除'
+					});
+				});
+			console.log(JSON.stringify(tabledata[index]));
+		},
+		deleteSession: function(id) {
+			let that = this;
+			this.$axios({
+				method: 'get',
+				url: '/zlm/index/api/kick_session&id=' + id
+			}).then(function(res) {
+				that.getAllSession();
+				that.$message({
+					type: 'success',
+					message: '删除成功!'
+				});
+			});
+		}
+	}
+};
+</script>
+
+<style>
+#app {
+	height: 100%;
+}
+.control-table {
+	background-color: #ffffff;
+	height: 25rem;
+}
+.table-c {
+	border-right: 1px solid #dcdcdc;
+	border-bottom: 1px solid #dcdcdc;
+}
+.table-c td {
+	border-left: 1px solid #dcdcdc;
+	border-top: 1px solid #dcdcdc;
+	padding: 0.2rem;
+}
+.el-table {
+	width: 99.9% !important;
+}
+</style>
diff --git a/web_src/src/components/gb28181/devicePlayer.vue b/web_src/src/components/gb28181/devicePlayer.vue
new file mode 100644
index 00000000..e193d7cf
--- /dev/null
+++ b/web_src/src/components/gb28181/devicePlayer.vue
@@ -0,0 +1,377 @@
+<template>
+	<div id="devicePlayer">
+		<el-dialog title="视频播放" top="0" :visible.sync="showVideoDialog" :destroy-on-close="true" @close="stop()">
+      <LivePlayer v-if="showVideoDialog" ref="videoPlayer" :videoUrl="videoUrl" :error="videoError" fluent autoplay live stretch></LivePlayer>
+			<div id="shared" style="text-align: right; margin-top: 1rem;">
+				<el-tabs v-model="tabActiveName">
+					<el-tab-pane label="媒体流信息" name="media">
+						<div style="margin-bottom: 0.5rem;">
+							<el-button type="primary" size="small" @click="playRecord(true, '')">播放</el-button>
+							 <el-button type="primary" size="small" @click="startRecord()">录制</el-button>
+							 <el-button type="primary" size="small" @click="stopRecord()">停止录制</el-button>
+						</div>
+						<div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem;">
+							<span style="width: 5rem; line-height: 2.5rem; text-align: right;">播放地址：</span>
+							<el-input v-model="getPlayerShared.sharedUrl" :disabled="true" v-on:click.native="copySharedInfo(getPlayerShared.sharedUrl)"></el-input>
+						</div>
+						<div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem;">
+							<span style="width: 5rem; line-height: 2.5rem; text-align: right;">iframe：</span>
+							<el-input v-model="getPlayerShared.sharedIframe" :disabled="true" v-on:click.native="copySharedInfo(getPlayerShared.sharedIframe)"></el-input>
+						</div>
+						<div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem;">
+							<span style="width: 5rem; line-height: 2.5rem; text-align: right;">资源地址：</span>
+							<el-input v-model="getPlayerShared.sharedRtmp" :disabled="true" v-on:click.native="copySharedInfo(getPlayerShared.sharedRtmp)"></el-input>
+						</div>
+					</el-tab-pane>
+					<!--{"code":0,"data":{"paths":["22-29-30.mp4"],"rootPath":"/home/kkkkk/Documents/ZLMediaKit/release/linux/Debug/www/record/hls/kkkkk/2020-05-11/"}}-->
+					<el-tab-pane label="录像查询" name="second">
+						<el-date-picker v-model="videoHistory.startTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="开始时间"
+						 @change="recordList()"></el-date-picker>
+						<el-date-picker v-model="videoHistory.endTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="结束时间"
+						 @change="recordList()"></el-date-picker>
+						<el-table :data="videoHistory.searchHistoryResult" style="width: 100%">
+							<el-table-column label="名称" prop="name" width="150"></el-table-column>
+							<el-table-column label="文件" prop="filePath" width="300"></el-table-column>
+							<el-table-column label="开始时间" prop="startTime" width="160"></el-table-column>
+							<el-table-column label="结束时间" prop="endTime" width="160"></el-table-column>
+
+							<el-table-column label="操作">
+								<template slot-scope="scope">
+									<el-button type="primary" size="mini" @click="playRecord(false, scope.row)">播放</el-button>
+								</template>
+							</el-table-column>
+						</el-table>
+					</el-tab-pane>
+					<!--遥控界面-->
+					<el-tab-pane label="云台控制" name="third">
+						<div style="display: flex; justify-content: center;">
+							<div class="control-wrapper">
+								<div class="control-btn control-top" @mousedown="ptzCamera(0, 1, 0)" @mouseup="ptzCamera(0, 0, 0)">
+									<i class="el-icon-caret-top"></i>
+									<div class="control-inner-btn control-inner"></div>
+								</div>
+								<div class="control-btn control-left" @mousedown="ptzCamera(1, 0, 0)" @mouseup="ptzCamera(0, 0, 0)">
+									<i class="el-icon-caret-left"></i>
+									<div class="control-inner-btn control-inner"></div>
+								</div>
+								<div class="control-btn control-bottom" @mousedown="ptzCamera(0, 2, 0)" @mouseup="ptzCamera(0, 0, 0)">
+									<i class="el-icon-caret-bottom"></i>
+									<div class="control-inner-btn control-inner"></div>
+								</div>
+								<div class="control-btn control-right" @mousedown="ptzCamera(2, 0, 0)" @mouseup="ptzCamera(0, 0, 0)">
+									<i class="el-icon-caret-right"></i>
+									<div class="control-inner-btn control-inner"></div>
+								</div>
+								<div class="control-round">
+									<div class="control-round-inner"><i class="fa fa-pause-circle"></i></div>
+								</div>
+
+								<div style="position: absolute; left: 7.25rem; top: 1.25rem" @mousedown="ptzCamera(0, 0, 2)" @mouseup="ptzCamera(0, 0, 0)"><i
+									 class="el-icon-zoom-in" style="font-size: 1.875rem;"></i></div>
+								<div style="position: absolute; left: 7.25rem; top: 3.25rem; font-size: 1.875rem;" @mousedown="ptzCamera(0, 0, 1)"
+								 @mouseup="ptzCamera(0, 0, 0)"><i class="el-icon-zoom-out"></i></div>
+							</div>
+						</div>
+
+					</el-tab-pane>
+				</el-tabs>
+			</div>
+		</el-dialog>
+	</div>
+</template>
+
+<script>
+	import LivePlayer from '@liveqing/liveplayer'
+	export default {
+		name: 'devicePlayer',
+		props: {},
+		components: {
+			LivePlayer
+		},
+		computed: {
+			getPlayerShared: function() {
+        return {
+					sharedUrl: window.location.host + '/' + this.videoUrl,
+					sharedIframe: '<iframe src="' + window.location.host + '/' + this.videoUrl + '"></iframe>',
+					sharedRtmp: this.videoUrl
+				};
+			}
+		},
+		created() {
+			// this.videoHistory.searchHistoryResult = falsificationData.recordData.recordList;
+		},
+		data() {
+			return {
+				video:'http://lndxyj.iqilu.com/public/upload/2019/10/14/8c001ea0c09cdc59a57829dabc8010fa.mp4',
+				videoUrl: '',
+				videoHistory: {
+					startTime: '',
+					endTime: '',
+					searchHistoryResult: [] //媒体流历史记录搜索结果
+				},
+				showVideoDialog: false,
+				normalssrc: '',
+				ssrc: '',
+				deviceId: '',
+				channelId: '',
+				tabActiveName: 'media'
+			};
+		},
+		methods: {
+
+			play: function(streamInfo, deviceId, channelId) {
+        this.ssrc = streamInfo.ssrc;
+				this.deviceId = deviceId;
+				this.channelId = channelId;
+				this.videoUrl = streamInfo.flv + "?" + new Date().getTime();
+				this.showVideoDialog = true;
+				console.log(this.ssrc);
+			},
+			stop: function() {
+				console.log('关闭视频');
+				this.$refs.videoPlayer.pause();
+				this.videoUrl = '';
+				this.showVideoDialog = false;
+				this.$axios({
+					method: 'post',
+					url: '/api/play/' + this.ssrc + '/stop'
+				}).then(function(res) {
+					console.log(JSON.stringify(res));
+				});
+
+				this.$axios({
+					method: 'post',
+					url: '/api/playback/' + this.ssrc + '/stop'
+				}).then(function(res) {
+					console.log(JSON.stringify(res));
+				});
+			},
+			copySharedInfo: function(data) {
+				console.log('复制内容：' + data);
+				let _this = this;
+				this.$copyText(data).then(
+					function(e) {
+						_this.$message({
+							showClose: true,
+							message: '复制成功',
+							type: 'success'
+						});
+					},
+					function(e) {
+						_this.$message({
+							showClose: true,
+							message: '复制失败，请手动复制',
+							type: 'error'
+						});
+					}
+				);
+			},
+
+			recordList: function() {
+				if (!this.videoHistory.startTime || !this.videoHistory.endTime) {
+					return;
+				}
+				let that = this;
+				this.$axios({
+					method: 'get',
+					url: '/api/record/' + this.deviceId + '/' + this.channelId + '?startTime=' + this.videoHistory
+						.startTime + '&endTime=' + this.videoHistory.endTime
+				}).then(function(res) {
+					console.log(JSON.stringify(res));
+				}).catch(function(e) {
+					// that.videoHistory.searchHistoryResult = falsificationData.recordData;
+				});
+
+			},
+			playRecord: function(isBackLive, rowData) {
+				let that = this;
+				if(isBackLive){
+					this.videoUrl=this.getVideoUrlBySsrc(this.normalssrc);
+					return;
+				}
+				this.$axios({
+					method: 'get',
+					url: '/api/playback/' + this.deviceId + '/' + this.channelId + '?startTime=' + rowData.startTime + '&endTime=' +
+						rowData.endTime
+				}).then(function(res) {
+					let ssrc = res.data.ssrc;
+					 that.videoUrl = that.getVideoUrlBySsrc(ssrc);
+					//that.videoUrl='http://hls.cntv.kcdnvip.com/asp/hls/main/0303000a/3/default/f466089412c04a759c5515dbfcc3ac3d/main.m3u8?maxbr=2048';
+				});
+
+			},
+			ptzCamera: function(leftRight, upDown, zoom) {
+				console.log('云台控制：' + leftRight + ' : ' + upDown + " : " + zoom);
+				let that = this;
+				this.$axios({
+					method: 'post',
+					url: '/api/ptz/' + this.deviceId + '/' + this.channelId + '?leftRight=' + leftRight + '&upDown=' + upDown +
+						'&inOut=' + zoom + '&moveSpeed=50&zoomSpeed=50'
+				}).then(function(res) {});
+			},
+			//////////////////////播放器事件处理//////////////////////////
+			videoError:function(e){
+				console.log("播放器错误："+JSON.stringify(e));
+			}
+		}
+	};
+</script>
+
+<style>
+	.control-wrapper {
+		position: relative;
+		width: 6.25rem;
+		height: 6.25rem;
+		max-width: 6.25rem;
+		max-height: 6.25rem;
+		margin: 0 auto;
+		border-radius: 100%;
+		float: left;
+	}
+
+	.control-btn {
+		display: flex;
+		justify-content: center;
+		position: absolute;
+		width: 44%;
+		height: 44%;
+		border-radius: 5px;
+		border: 1px solid #78aee4;
+		box-sizing: border-box;
+		transition: all 0.3s linear;
+	}
+
+	.control-btn i {
+		font-size: 20px;
+		color: #78aee4;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.control-round {
+		position: absolute;
+		top: 21%;
+		left: 21%;
+		width: 58%;
+		height: 58%;
+		background: #fff;
+		border-radius: 100%;
+	}
+
+	.control-round-inner {
+		position: absolute;
+		left: 15%;
+		top: 15%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 70%;
+		height: 70%;
+		font-size: 40px;
+		color: #78aee4;
+		border: 1px solid #78aee4;
+		border-radius: 100%;
+		transition: all 0.3s linear;
+	}
+
+	.control-inner-btn {
+		position: absolute;
+		width: 60%;
+		height: 60%;
+		background: #fafafa;
+	}
+
+	.control-top {
+		top: -8%;
+		left: 27%;
+		transform: rotate(-45deg);
+		border-radius: 5px 100% 5px 0;
+	}
+
+	.control-top i {
+		transform: rotate(45deg);
+		border-radius: 5px 100% 5px 0;
+	}
+
+	.control-top .control-inner {
+		left: -1px;
+		bottom: 0;
+		border-top: 1px solid #78aee4;
+		border-right: 1px solid #78aee4;
+		border-radius: 0 100% 0 0;
+	}
+
+	.control-top .fa {
+		transform: rotate(45deg) translateY(-7px);
+	}
+
+	.control-left {
+		top: 27%;
+		left: -8%;
+		transform: rotate(45deg);
+		border-radius: 5px 0 5px 100%;
+	}
+
+	.control-left i {
+		transform: rotate(-45deg);
+	}
+
+	.control-left .control-inner {
+		right: -1px;
+		top: -1px;
+		border-bottom: 1px solid #78aee4;
+		border-left: 1px solid #78aee4;
+		border-radius: 0 0 0 100%;
+	}
+
+	.control-left .fa {
+		transform: rotate(-45deg) translateX(-7px);
+	}
+
+	.control-right {
+		top: 27%;
+		right: -8%;
+		transform: rotate(45deg);
+		border-radius: 5px 100% 5px 0;
+	}
+
+	.control-right i {
+		transform: rotate(-45deg);
+	}
+
+	.control-right .control-inner {
+		left: -1px;
+		bottom: -1px;
+		border-top: 1px solid #78aee4;
+		border-right: 1px solid #78aee4;
+		border-radius: 0 100% 0 0;
+	}
+
+	.control-right .fa {
+		transform: rotate(-45deg) translateX(7px);
+	}
+
+	.control-bottom {
+		left: 27%;
+		bottom: -8%;
+		transform: rotate(45deg);
+		border-radius: 0 5px 100% 5px;
+	}
+
+	.control-bottom i {
+		transform: rotate(-45deg);
+	}
+
+	.control-bottom .control-inner {
+		top: -1px;
+		left: -1px;
+		border-bottom: 1px solid #78aee4;
+		border-right: 1px solid #78aee4;
+		border-radius: 0 0 100% 0;
+	}
+
+	.control-bottom .fa {
+		transform: rotate(-45deg) translateY(7px);
+	}
+</style>
diff --git a/web_src/src/components/videoList.vue b/web_src/src/components/videoList.vue
new file mode 100644
index 00000000..234ddc88
--- /dev/null
+++ b/web_src/src/components/videoList.vue
@@ -0,0 +1,241 @@
+<template>
+	<div id="app">
+		<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 style="position: absolute; right: 1rem; top: 0.3rem;">
+						<el-button icon="el-icon-refresh-right" circle size="mini" @click="getDeviceList()"></el-button>
+					</div>
+				</div>
+				<devicePlayer ref="devicePlayer"></devicePlayer>
+				<!--设备列表-->
+				<el-table :data="deviceList" border style="width: 100%" :height="winHeight">
+					<el-table-column prop="name" label="名称" width="180" align="center">
+					</el-table-column>
+					<el-table-column prop="deviceId" label="设备编号" width="240" align="center">
+					</el-table-column>
+					<el-table-column label="地址" width="180" align="center">
+						<template slot-scope="scope">
+							<div slot="reference" class="name-wrapper">
+								<el-tag size="medium">{{ scope.row.host.address }}</el-tag>
+							</div>
+						</template>
+					</el-table-column>
+					<el-table-column prop="manufacturer" label="厂家" align="center">
+					</el-table-column>
+					<el-table-column prop="model" label="固件版本" align="center">
+					</el-table-column>
+					<el-table-column prop="transport" label="通讯方式" align="center">
+					</el-table-column>
+					<el-table-column prop="channelCount" label="通道数" align="center">
+					</el-table-column>
+					<el-table-column label="状态" width="180" align="center">
+						<template slot-scope="scope">
+							<div slot="reference" class="name-wrapper">
+								<el-tag size="medium">{{ scope.row.online==1?'在线' :'离线'}}</el-tag>
+							</div>
+						</template>
+					</el-table-column>
+
+					<el-table-column label="操作" width="240" align="center" fixed="right">
+						<template slot-scope="scope">
+							<el-button size="mini" icon="el-icon-refresh"  @click="refDevice(scope.row)">刷新</el-button>
+							<el-button size="mini" icon="el-icon-s-open"  type="primary" @click="showChannelList(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>
+
+			</el-main>
+		</el-container>
+	</div>
+</template>
+
+<script>
+	 import devicePlayer from './gb28181/devicePlayer.vue'
+	 import uiHeader from './UiHeader.vue'
+	export default {
+		name: 'app',
+		components: {
+			devicePlayer,
+			uiHeader
+		},
+		data() {
+			return {
+				deviceList: [], //设备列表
+				currentDevice: {}, //当前操作设备对象
+
+				videoComponentList: [],
+				updateLooper: 0, //数据刷新轮训标志
+				currentDeviceChannelsLenth:0,
+				winHeight: window.innerHeight - 200,
+				currentPage:1,
+				count:15,
+				total:0
+			};
+		},
+		computed: {
+			getcurrentDeviceChannels: function() {
+				let data = this.currentDevice['channelMap'];
+				let channels = null;
+				if (data) {
+					channels = Object.keys(data).map(key => {
+						return data[key];
+					});
+					this.currentDeviceChannelsLenth = channels.length;
+				}
+
+				console.log("数据：" + JSON.stringify(channels));
+				return channels;
+			}
+		},
+		mounted() {
+			this.initData();
+			this.updateLooper = setInterval(this.initData, 10000);
+		},
+		destroyed() {
+			this.$destroy('videojs');
+			clearTimeout(this.updateLooper);
+		},
+		methods: {
+			initData: function() {
+				this.getDeviceList();
+			},
+			currentChange: function(val){
+				this.currentPage = val;
+				this.getDeviceList();
+			},
+			handleSizeChange: function(val){
+				this.count = val;
+				this.getDeviceList();
+			},
+			getDeviceList: function() {
+				let that = this;
+
+				this.$axios.get(`/api/devices`,{
+					params: {
+						page: that.currentPage - 1,
+						count: that.count
+					}
+				} )
+				.then(function (res) {
+					console.log(res);
+					that.total = res.data.total;
+					that.deviceList = res.data.data;
+				})
+				.catch(function (error) {
+					console.log(error);
+				});
+
+			},
+			showChannelList: function(row) {
+				console.log(JSON.stringify(row))
+				this.$router.push(`/channelList/${row.deviceId}/0/15/1`);
+			},
+
+
+			//gb28181平台对接
+			//刷新设备信息
+			refDevice: function(itemData) {
+				///api/devices/{deviceId}/sync
+				console.log("刷新对应设备:" + itemData.deviceId);
+				this.$axios({
+					method: 'post',
+					url: '/api/devices/' + itemData.deviceId + '/sync'
+				}).then(function(res) {
+					// console.log("刷新设备结果："+JSON.stringify(res));
+				}).catch(function(e) {
+					that.$message({
+						showClose: true,
+						message: '请求成功',
+						type: 'success'
+					});
+				});;
+			},
+			//通知设备上传媒体流
+			sendDevicePush: function(itemData) {
+				let deviceId = this.currentDevice.deviceId;
+				let channelId = itemData.channelId;
+				console.log("通知设备推流1：" + deviceId + " : " + channelId);
+				let that = this;
+				this.$axios({
+					method: 'get',
+					url: '/api/play/' + deviceId + '/' + channelId
+				}).then(function(res) {
+					let ssrc = res.data.ssrc;
+					that.$refs.devicePlayer.play(ssrc,deviceId,channelId);
+				}).catch(function(e) {
+				});
+			}
+
+		}
+	};
+</script>
+
+<style>
+	.videoList {
+		display: flex;
+		flex-wrap: wrap;
+		align-content: flex-start;
+	}
+
+	.video-item {
+		position: relative;
+		width: 15rem;
+		height: 10rem;
+		margin-right: 1rem;
+		background-color: #000000;
+	}
+
+	.video-item-img {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		margin: auto;
+		width: 100%;
+		height: 100%;
+	}
+
+	.video-item-img:after {
+		content: "";
+		display: inline-block;
+		position: absolute;
+		z-index: 2;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		margin: auto;
+		width: 3rem;
+		height: 3rem;
+		background-image: url("../assets/loading.png");
+		background-size: cover;
+		background-color: #000000;
+	}
+
+	.video-item-title {
+		position: absolute;
+		bottom: 0;
+		color: #000000;
+		background-color: #ffffff;
+		line-height: 1.5rem;
+		padding: 0.3rem;
+		width: 14.4rem;
+	}
+</style>
diff --git a/web_src/src/main.js b/web_src/src/main.js
new file mode 100644
index 00000000..1b31f7b6
--- /dev/null
+++ b/web_src/src/main.js
@@ -0,0 +1,25 @@
+import Vue from 'vue';
+import App from './App.vue';
+Vue.config.productionTip = false;
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+import router from './router/index.js';
+import axios from 'axios';
+import VueCookies from 'vue-cookies';
+
+import echarts from 'echarts';
+import VueClipboard from 'vue-clipboard2'
+Vue.use(VueClipboard)
+Vue.use(ElementUI);
+Vue.use(VueCookies);
+Vue.prototype.$axios = axios;
+
+axios.defaults.baseURL = (process.env.NODE_ENV === 'development') ? process.env.BASE_API : "";
+
+Vue.prototype.$cookies.config(60*30);
+
+
+new Vue({
+	router: router,
+	render: h => h(App),
+}).$mount('#app')