From d1f35ba05d8966fde1d09f46ea7d06fc64d0dd77 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E9=91=AB?= <zhangxin@zhehekeji.com>
Date: Mon, 21 Dec 2020 23:41:49 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=9E=E6=97=B6=E7=9B=91=E6=8E=A7=E6=93=8D?=
 =?UTF-8?q?=E4=BD=9C=E9=A1=B5=E9=9D=A2=E6=9E=84=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                            |   2 +-
 src/api/http/http-api.js               |   5 +
 src/assets/add-icon.png                | Bin 0 -> 1723 bytes
 src/assets/bottom-icon.png             | Bin 0 -> 2538 bytes
 src/assets/left-bottom-icon.png        | Bin 0 -> 2586 bytes
 src/assets/left-icon.png               | Bin 0 -> 2533 bytes
 src/assets/left-top-icon.png           | Bin 0 -> 2493 bytes
 src/assets/right-bottom-icon.png       | Bin 0 -> 2570 bytes
 src/assets/right-icon.png              | Bin 0 -> 2576 bytes
 src/assets/right-top-icon.png          | Bin 0 -> 2519 bytes
 src/assets/sub-icon.png                | Bin 0 -> 1620 bytes
 src/assets/top-icon.png                | Bin 0 -> 2578 bytes
 src/layouts/AsideMenu.vue              |   4 +-
 src/plugins/axios/axios.js             |   4 +-
 src/router/index.js                    |  11 +-
 src/views/realTimeMonitoring/index.vue | 145 +++++++++++++++---
 src/views/realTimeMonitoring/model.vue | 198 +++++++++++++++++++++++++
 17 files changed, 345 insertions(+), 24 deletions(-)
 create mode 100644 src/assets/add-icon.png
 create mode 100644 src/assets/bottom-icon.png
 create mode 100644 src/assets/left-bottom-icon.png
 create mode 100644 src/assets/left-icon.png
 create mode 100644 src/assets/left-top-icon.png
 create mode 100644 src/assets/right-bottom-icon.png
 create mode 100644 src/assets/right-icon.png
 create mode 100644 src/assets/right-top-icon.png
 create mode 100644 src/assets/sub-icon.png
 create mode 100644 src/assets/top-icon.png
 create mode 100644 src/views/realTimeMonitoring/model.vue

diff --git a/src/App.vue b/src/App.vue
index f396465..c46d16c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -37,7 +37,7 @@ export default {
     }
 };
 </script>
-
+<script type="text/javascript" src="./utils/jsmpeg.min.js"></script>
 <style lang="scss">
 @import "style/common/reset.css";
 @import "style/common/layout";
diff --git a/src/api/http/http-api.js b/src/api/http/http-api.js
index 91b059a..2a99324 100644
--- a/src/api/http/http-api.js
+++ b/src/api/http/http-api.js
@@ -44,6 +44,11 @@ export default  {
         url: "/camera",
         name: "编辑球机"
     },
+    getChannel: {
+        method: "POST",
+        url: "/lychee/stream/push",
+        name: "获取channel字符集"
+    },
     queryList: {
         url: '/order/list',
         name: '查询',
diff --git a/src/assets/add-icon.png b/src/assets/add-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..83f3c9c48a458fb4a66cf6e7fa034cb1ec5235cb
GIT binary patch
literal 1723
zcmV;s21NOZP)<h;3K|Lk000e1NJLTq002M$002M;1^@s6s%dfF000JpNkl<ZcwX(B
zd2AF_9LK-Ex7%XvPD`b`vlTQVG$;W}XE6|>fj@{x5V3|dK?pHOG%22VB*YleKMe5#
z1M-Jp)F=ia79@=r4IUUlpu3A&Ow<w&j&`>Z=*|`l?at3k4=H7jc{6)pVUqo8e%JT2
z@4b2N%^Sice$geaAD00Xq6M_Hpt$06iCXL~R(ptPM3E~}QF<~;WARVE>&bZw=xDyO
zDnVkdAX)%GWxx-hB8AWxfT;N+@J<)dI7*BEoJ%M<0T5{}9|w`RjX-xYFxQCy2KEcW
zC&c1&uh!Y@BvvxttOEEu<eAvRVi|}VvR!CzJi>NBtXFG0zsOentN>^WkGxJG(Ex@i
zyfj<IrHaGg4~ghawN~HbG?!xlZ9&gUL1YT|IxR-ppRu7>xSpw~J#|Xjx8K1LfJjK$
z3Shq7<XQ0}3KJ4be6?K%?ZmSM;CQoA=@!_{z>Rj2=D?>L2I|$R`gYma(g2Q!%BQ+u
z9FR?v4|`^M!XJpOk;x?m;OO@yV~UF1M`RM@-Ii#PS{vJBHLqm=En84rIbLZa;3})Z
z3uPw^5%5m!3|Yx<89*fH`2a)<tpqK!4Fe~7&i2%dnSSPIrdlikhy;~aKzJ%su#4>e
zXC1Bjyh-&qo35^m0NR3{dO`G2j>PR`aH~0G1~5L`IS5$g)ASX#0c_a<*UW0=J20kY
zyEp)QRZX8^#*K!Q2N>9xgB;xgVn(_(MA{Y*2`f*7@p29dgTeelRUp1{Aa*3Aa4zyN
zc(Y%Nn=8?zS4sfw`^&E<w_(n;)m#*oF93bD^L$l{f1FH5N&wMt**a!kmJ9J_%=`j4
z*WHHdNeaN+vGJZ&%n6Tgm;eC7nC;iPc3A?@5iXl!FgN8&d;wYji1Csypg(H~Ks4xC
z!$gk_CjiXY=MU)9Edgi`DnAin(r^OMtEI^BtCPDTgLPdn1{~X8a*f;V{wtT_3(*Do
z^w45ei@l!~KqRc(1ID)D2!NR1@CD+Jrw0&HmIHWgI068$L)G+oX#uo{JZlN`@Nfjc
zj23@DpPUvzG^{i+W6p2{0H90NbWf%(a0tLe8vuSJ;DlAb1oJn8*8<Uy@|9Iz(~f~z
zGWG+u>|)hl6F1*J^$m+dgR}>gGeo#TCb$r^+&d+<TE@qzZQB9QEa4(4Xl72Ai>6oB
z#P+2G5D6*A09-9opsMK^_Z4K~S+zA=jciNk?#6^M)AV1{0oV=TR;xwyHb>@%{DJse
zGCodi?Y014tL~<HBvJy1hLv}ialdqdjKf5*yklITG2jnX)5m5Q1U=6I^rAEXNryZy
zhX;ndU8)wFofbfQxa>Y+w!E({srx_kLI7aK27f?*FntRMmfi#sKiCy!)vpi$2=u5=
zi>*xyz`Pj=Ddv9qXscrE*cAeRaN!1Tjs8nU0PP`V0|86z2(#)_006D3rdJQGFX{6;
z5-eK?;t#Bfv16BS01RH|*W!;@0?>QngA>2o5oXmV-v9)7fme%fwgkX5Y7Z)ViEzOd
zl2w73?D7r3UDR{!sL5w8n5U$i!bZYn3&FYT2KfYF0IyeR`jg52luU1i8o{W`^l#d^
zpDzFm{OLkshF3d%TpB>MS-FJ;zO^GTqYv{YH4tB9+I0lW0|pscKLcpSPWJ52_!t~)
z5Dj})Gt+tdXc@&>FfiZY6Vql0;}Do`2XMCqH(8V2s;19O=ag|7+rLX}uDi#{W-qio
z1M~cvzQYj!(>Zcbse^&WLJN|~KXi;q<(shu3^?{5h<skAh=SQNwy6RAUMu-612BU{
zL&|#$EVdH3fHsF!O}Bj7L<&G}cL*sv0o+kQf$378R5e}d6q_`FehB8I;?;`@0yDPy
z1A4t|O|}5^LI^5#po?Q*WMG9~(^tug@0%w$xOyi_gpD9fa1h3kD+5dYn*O%kAdUc-
zNssI)8C^8O-9Xg)t-wgTg~<95;ave*Us)S-bZ*%(fPuoJ;j(JLXkaGuTv3s%AglIf
zUuT2YSKS={+Nw`FyQ~2?2cmQen3gcnU0|HI1#P!r0%A<uL=c;NwXsj_#!2RvbpV5t
zm}iZcxvu}iDX9Zj1SA+}G8o&7%ZeIDRi7}wD9ielQvidjHQ(frfGS9+AXdRp4TfI`
zz%W0RWAjrvL<LdA07ZSjb$&Vc4NlgT_Xo@yfLsZ18uu~)rv(4+{+E0U_!ki`sbACX
R#mWEx002ovPDHLkV1isX5(oeQ

literal 0
HcmV?d00001

diff --git a/src/assets/bottom-icon.png b/src/assets/bottom-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..c74e53ca77e9d9922e6383799deadce40a177dd1
GIT binary patch
literal 2538
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
A9smFU

literal 0
HcmV?d00001

diff --git a/src/assets/left-bottom-icon.png b/src/assets/left-bottom-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..e630423bffc6aab32242b6bb74ad4132ddf8f948
GIT binary patch
literal 2586
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

literal 0
HcmV?d00001

diff --git a/src/assets/left-icon.png b/src/assets/left-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..8af493099202d5f96449d8b8e0025cd7ac2851db
GIT binary patch
literal 2533
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

literal 0
HcmV?d00001

diff --git a/src/assets/left-top-icon.png b/src/assets/left-top-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..976d5aec8a7c9c1c83fbdd5dc59dffe0690aff48
GIT binary patch
literal 2493
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
Hu0mjfj^nBr

literal 0
HcmV?d00001

diff --git a/src/assets/right-bottom-icon.png b/src/assets/right-bottom-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..5589622b66ac0e67ac0c5cf9dbee9456858740fe
GIT binary patch
literal 2570
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

literal 0
HcmV?d00001

diff --git a/src/assets/right-icon.png b/src/assets/right-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..82d5a21def31816a2f19e7e1a6a66813610022aa
GIT binary patch
literal 2576
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

literal 0
HcmV?d00001

diff --git a/src/assets/right-top-icon.png b/src/assets/right-top-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..d8ad846e116c51adccd2a1a1ec0555c7fb0e2d79
GIT binary patch
literal 2519
zcmV;|2`Ki7P)<h;3K|Lk000e1NJLTq002M$002M;1^@s6s%dfF000S|Nkl<ZcwX&V
z3yf4(8UFq|vuuGmv#@374&Am8ZJ}1&$DIXAO;JR&K_OCGjM_>Xja5LZ39XN+t+77Z
z_$r9DC26#gM2jy(rEN-!S}d=*vs;n0ZY7bjuy>XMGk3~EX6|q9ow@7m?9SeE@66IP
zaFY$Y-0y#V=Rf~F=Rb#Vfj@MC$B&ByT+DzAoPmo|-~vy8H?|1==f$SUjb{t36e7`J
zh5IHaPV^C>a6Sj+yiI|DZZX5Mu!MjQGSCWeD?k%Q2-X0zO~g(xZH^_(zl|j!V@kk4
zPm`9<7nUjt-3Z3qK!Fer0@y+dJsoS$J{d^IC_-aGK;K?5vmwMQ8MF#Os9sJJu$2@%
z+R|bEv5q?Hr3!epdwgpnhgUMg4!miYX2L;YJWoU^i>yP66*_cDsBq}m@m#i1i0NUX
z=}gviW|~2S>j2Cf$-8<IQMU|8C&dj=u#p)v%bh0R&lcnN4a7Sy)p7^?(EZx3=4iel
zKhJ_SPa!9prj*Mwczs;Ut?{F?5?dDn3_bE;fPOthxjoY0AIB28U)AEEE8D-P=`9qt
zR)MezjK(sZ+f>b59Mne51Q@Bvy<ob}b$}VC0o)l+m>YvSHJY5EPi$va?jgc0Ww=*V
z&Ad8@y_yIxbg>=4d&&$SR-i0v(K7pjIO9jAKPjH5AOWgo`i{r9fa_#BB{nnT<}#;y
zlnISDv|Mw{^b<%e*bzv0LDkIb{pbutfRPjrfN*zN+V74hOuK5I_vdIba-TwU@1QT>
zb#X0sr>rBs2^dI;Pg#ue`Q4{#=H;>m#{ySL0ujC)>oo6?vE_?^fddn!@|n;+1}<}y
zGt7oCU*FuG+b?5mEHOq>JP5*Ft_?-O5}5^)F9Ir=2ID3*Vg7C`1M{QXNJTb*>0`Ex
zy;zEA=29<tX#$3iK5bAF+0|YK&gc97p6FaE@Gd`DAWguK(Px;U2F#h#X1?S%Kzmon
z79L^7NdPCI-~^aYGL(~w#Tf=NN{CM~g)^4Infz%h(|gLyELecNj4i)eAVt9OeUqE=
zO8$U5_X+q;Of$bC<4`5W&_x<Ri%;3C#r(smiQM3VtD3x#YFY%go_608XmL!-ZmWiu
zA|RcLE@tLG73&_3hn0NWl#bJVK7(-Jh8|4;+~HT2fFnCzF|S;{+`D07=)w;8#-a`S
zsj6jH)<}T(7Bh+?&b&!Y<ZksFfQ!%Uk2aq=Ypqd;1PFqeq6%0rBWnNc{J6glUGqbk
z&={3jXc<XyHwX_Diy^%l)3R6AM1YZs>R|3H5=ytKo!L!636PN+X_@Po&RbJsb6)TF
z((#%exi$~_=O9i|-mi9K2B$^2yyq0K_xR(i@L^Zzl5uot)2!@qFDHV&9~L~L04g<A
zEafV-EAwv|-G(lD0JN2+!NaPS{p?6`o&*de#S)9~hhjQmM@%yp$T$!LQyDxnHWSeY
z0CswZY*}sbuGjw|qkHIAi*+@TO9Udo&?BF*3rR_Mi>jF)l5xN<W~AWb33IujixU7Q
z70VCJizl*!-}%vOq`SrKY~isI#!xjg9*BUn9{nbRzgiN0T-D4KeuMMER}0>jGg6`-
z4AuTU6yk+b+H=o(>9gM->zTN)P*9$6v9V4wJW|Wua|-k)#bZRcy*LGUeXPb7RHgHy
z1#e^f_2?l2Us22eER843tuh3pQ_-uL`Cl%!!3s}n?mBU(Qr43IBN=%LMDHsSK=;SA
z?AK%*kimEbZ|g|wqL+cI90I@}jcd7I%IM}^G^R~)rVM+%s+lkNCqNgQfl}jx@jW$R
z4(_;Q9I1wp3Er6ky0AZI*A@o=pNwgyJFiDIZ}voDrwU}aATIDb;<JbET0Ju$or?U3
znVbd#Gd9K(=BH~3+)3+-c9vc3?SeOw-tv_rf!4&d?0Omd1A0@J1#7R1Jrh=%r?qA5
zf;!~!B)~|CyTEv`NB}(%Ph>wL<3Oz=@5&px_`7>Pz`&Q|n)zKB`$l)<CRp^FB9>37
zT5jS<a^3_aqaO$HFN%8jDK(KRt+8d?7>e;T@`D5<qZ>f%uI1ONn)!Vh%LA$C=j{zt
z3EQh`=8QlD9Nimvw-Tb~O2S7}&1{u%pb`@#cxSrkVky912h%|mlrP2SWbCs-&!^np
zXbU*c46rR3x>HS^!w9zMx_DQ1x2FeXfS|$qu~CUNk|OJDtcp+7%#kHv3jn9RWHEn3
zW?$|)l-8r4WAHln@6ifgEdiIyrc;qy?0V(?pQ2!9ONTkQCMd^B5irml{eorj4;(?l
zZnaas1ztY-=Og%H#zubvaB=hF;ja_{hA!+=TDuw-AD_)oBPAXorv0*?uv#+Vs2*tv
z5$ViuTJ>HTD@A~<s9zU*2$)@Tj<%~>_Pw<@I##mfpKSmIC8W%0Y0v1@>`4=lPKg!F
z_}Tvz(F#?|K0a1~1ku~ui$-CJ6ajB5W<Rfsd7KhS6X0Y)Qanq9Vn2YeN9{C&U3&=<
zorH|h9k~M*JzRoj@&(Looo&86ny4=VhTQ`oJgRn@cS!g)<`8@7TVU(2L>TXkkL2-~
zF9Mtjn-sqVVVN6|SCJX>$N>zzG(}ja&f2$6oWe(hm(Nmu;S~~{Yu^OeCq&knkbQOS
zt!{8(@Z0@ff2k)ihAz4Rw7WWqF<<t2oo@o1EJ%rWg7JKL5FsUhdC;?hTFB^6id{tI
zSMc~|Rm+t&LEf4J5#W%}9lZ?}5B&=GTpxJ5R~>P@Co=0?f$V#OgL{)8(=jjswrj&q
zi;GQ*z{h5?gcwO-*Px%5t@Ulo&!}2<k*tov>Ec(Q5}!^@>|j>@0w6m0j<5$z8|uAI
zIQF8rrf`l{gV??@SN4p4{8hKlU^PYdeZIoDbL$!SM1^D9!Mvf?I|RqN$G2Kmcoj2N
zmyf!0BaP^bamg;xNdDI}1u7LfSLQ%#!H5ib$DFc=o<o7RPMw|GA(M4S^hwhcDlCFU
zi-_1x?a38#Pl9m2+G*~T(N_&qR|1^kn4H)KQq}^vZA7C40~U8PlnlTb0y0Eo_ZucL
z@g%bUW!Q(ArDLs1Evy5|L-m?obtk}e*XS0@V8JHB*R{2(BSkpOz(WJQ=DJzS@!wiT
zeMt4Fm!fKV(t2b*fcX}bcL6+~fN|0`iBbgK2GGuMA+)o(>qJIcRuVX78Boo>(_>VW
zRw#TKfm@lW70giv^(jPs469FJ>N^w4>oQAO$vCUR&N~6MI$Ur0iv-l0(KnmEiy81{
h8?k!(d%<VG{{U<F=x&gvw(S4_002ovPDHLkV1l1twoU*5

literal 0
HcmV?d00001

diff --git a/src/assets/sub-icon.png b/src/assets/sub-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..7f4ed115995234e1bbf8b8ea4146f58f598acd6e
GIT binary patch
literal 1620
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
SGnBRf0000<MNUMnLSTYzL*~^0

literal 0
HcmV?d00001

diff --git a/src/assets/top-icon.png b/src/assets/top-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..8e5a42a9edb0f6593ce4a57404ffa8ac5792fbae
GIT binary patch
literal 2578
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

literal 0
HcmV?d00001

diff --git a/src/layouts/AsideMenu.vue b/src/layouts/AsideMenu.vue
index d7c1d5d..99d16f0 100644
--- a/src/layouts/AsideMenu.vue
+++ b/src/layouts/AsideMenu.vue
@@ -62,7 +62,7 @@ export default {
                 parents = this.$router.options.routes[0].children.filter(ele => {
                     if (
                         this.userInfo.permissionList.some(item => {
-                            return item.rights === ele.name && ele.name.indexOf("center") < 0;
+                            return item.rights === ele.name && ele.name.indexOf("center") < 0 && item.rights === ele.name && ele.name.indexOf("camodel") < 0;
                         })
                     ) {
                         return ele;
@@ -83,7 +83,7 @@ export default {
                 recursionRoute(parents);
             } else {
                 parents = this.$router.options.routes[0].children.filter(item => {
-                    return !item.name.startsWith("center");
+                    return !item.name.startsWith("center") && !item.name.startsWith("camodel");
                 });
             }
             this.routes = parents;
diff --git a/src/plugins/axios/axios.js b/src/plugins/axios/axios.js
index 28d434b..0cea315 100644
--- a/src/plugins/axios/axios.js
+++ b/src/plugins/axios/axios.js
@@ -27,9 +27,9 @@ instance.interceptors.request.use((config) => {
 instance.interceptors.response.use((response) => {
     const res = response.data;
     // 对响应数据做点什么
-    if (res.code !== 200) {
+    if (res.code !== 200 && res.code!==0) {
         console.log(res);
-        Vue.prototype.$message.error(res.message);
+        Vue.prototype.$message.error(res.msg);
         // 未认证
         if (res.code === 401) {
             // 未登录
diff --git a/src/router/index.js b/src/router/index.js
index 49fd8a6..98835ea 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -36,8 +36,17 @@ const routes = [{
                 icon: 'desktop',
                 name: '实时监控'
             },
-            component: () => import('@/views/realTimeMonitoring/index')
+            component: () => import('@/views/realTimeMonitoring/index'),
+
         },
+        // {
+        //     path: 'realTimeMonitoring/model',
+        //     name: 'camodel',
+        //     meta: {
+        //         name: '球机操作'
+        //     },
+        //     component: () => import('@/views/realTimeMonitoring/model')
+        // },
         {
             path: 'historyMonitoring',
             name: 'historyMonitoring',
diff --git a/src/views/realTimeMonitoring/index.vue b/src/views/realTimeMonitoring/index.vue
index 4f2a244..c6476db 100644
--- a/src/views/realTimeMonitoring/index.vue
+++ b/src/views/realTimeMonitoring/index.vue
@@ -10,12 +10,50 @@
 <!--                </div>-->
 <!--            </div>-->
 <!--        </div>-->
-        <div>实时画面：</div>
-        <canvas id="video-cav" width="400" height="400"></canvas>
+        <a-tabs default-active-key="1" slot="headerContent" v-model="tabKey">
+            <a-tab-pane key="0" tab="全部" >
+            </a-tab-pane>
+            <a-tab-pane :key="index+1" :tab="item.streetName" v-for="(item,index) in realTimeListData">
+            </a-tab-pane>
+        </a-tabs>
+        <div class="flex-layouts">
+            <div class="video-list" v-for="(item,index) in realTimeListData" :key="index+1">
+                <!-- 对应全部的-->
+                <div v-if="tabKey == 0" class="video-item">
+                    <div class="video-box" width="400" height="300" v-for="i in item.cameras" :key="i.id" @click="showModel(i)">
+                        <canvas :class="['video',i.id?'video'+i.id:'']">
+
+                        </canvas>
+                        <div class="video-name">
+                            {{item.streetName}} {{i.name}}
+                        </div>
+                    </div>
+                </div>
+                <!--对应各个巷道的-->
+                <div v-if="tabKey == index+1" class="video-item">
+                    <div class="video-box" width="400" height="300" v-for="i in item.cameras" :key="i.id">
+                        <canvas :class="['video',i.id?'video'+i.id:'']">
+
+                        </canvas>
+                        <div class="video-name">
+                            {{item.streetName}} {{i.name}}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+<!--        <canvas class="video-cav" width="400" height="400"></canvas>-->
+        <Model
+            :visible.sync="visible"
+            :modelData.sync="modelData"
+            @sure="submit"
+            @close="closeModel"
+        />
     </div>
 </template>
 
 <script>
+import Model from "./model.vue"
 export default {
     name: "realTimeMonitoring",
     data() {
@@ -23,15 +61,22 @@ export default {
             // 收起true  展开false
             controlLabel: true,
             realTimeListData:[],
-            url:'722e6f04-bb3c-34b1-bcc7-ae9f6cd72e68',
-            path:[]
+            url:"722e6f04-bb3c-34b1-bcc7-ae9f6cd72e68",
+            tabKey: "0",
+            path:[],
+            player:'',
+            visible:false,
+            modelData:[]
         };
     },
     mounted() {
         this.getRealTimeList()
-        // this.realTimeLychee()
         this.getVideos()
     },
+    destroyed(){
+        console.log('2222222')
+        this.player.destroy()
+    },
     methods: {
         // 展开收起
         handleUpDown() {
@@ -45,34 +90,68 @@ export default {
                 console.log(res.data)
                 if(res.code == 200){
                     this.realTimeListData = res.data
-                    res.data.map(function(item){
+                    res.data.forEach(function(item){
                         // console.log(item.cameras)
                         var $that = that
-                        item.cameras.map(function(item){
-                            console.log(item.rtsp)
-                            $that.$axios.post('/lychee/stream/push', {
-                                "sourceUrl":item.rtsp,
-                                "paramBefore": "-i",
-                                "paramBehind": "-f mpegts -codec:v mpeg1video -s 1080*780 -b:v 1500k -r 30 -bf 0 -codec:a mp2 -ar 44100 -ac 1 -b:a 128k"
+                        item.cameras.forEach(function(item){
+                            // console.log(item.rtsp)
+                            $that.$api.httpApi.getChannel({
+                                data:{
+                                    "sourceUrl":item.rtsp,
+                                    "paramBefore": "-y -i",
+                                    "paramBehind": "-f mpegts -codec:v mpeg1video -an -s 720*480 -b:v 500k -r 20 -bf 0 -codec:a mp2 -ar 44100 -ac 1 -b:a 128k"
+                                }
                             }).then(res => {
                                 console.log(res.data)
-                                console.log(this.path)
+                                var url = 'ws://192.168.66.56:9007/api/lychee/stream/live/'+res.data.channel
+                                var player = new JSMpeg.Player(url, {
+                                    canvas: document.querySelector('.video'+item.id),
+                                    audio: false,
+                                    pauseWhenHidden: false,
+                                    videoBufferSize: 8 * 1024 * 1024,
+                                    loop:false,
+                                })
+                                player.play()
+                                return $that.player=player
                             }).catch(err => {
 
                             })
                         })
                     })
                 }
-                console.log(this.path)
+                console.log(this.realTimeListData)
             }).catch(err => {
 
             });
         },
         getVideos(){
-            var canvas = document.getElementById('video-cav')
-            var url = 'ws://192.168.66.56:9007/api/lychee/stream/live/'+this.url
-            var player = new JSMpeg.Player(url, {canvas: canvas}) // eslint-disable-line no-unused-vars
-        }
+            // var canvas = document.querySelector('.video-cav')
+            // var url = 'ws://192.168.66.56:9007/api/lychee/stream/live/'+this.url
+            // var player = new JSMpeg.Player(url, {
+            //     canvas: canvas,
+            //     audio: false,
+            //     pauseWhenHidden: false,
+            //     videoBufferSize: 8 * 1024 * 1024,
+            //     loop:false
+            // })
+        },
+        showModel(item){
+            console.log(11111)
+            // this.player.destroy()
+            console.log(item)
+            this.visible = true
+            // this.$router.push({path: '/realTimeMonitoring/model', query: {id: "2"}});
+        },
+        submit(visible){
+            this.visible = visible
+        },
+        closeModel(visible,data){
+            this.visible = visible
+            this.modelData=data
+        },
+    },
+    components:{
+        Model
     }
 };
 </script>
@@ -115,5 +194,35 @@ export default {
         width: 400px;
         height: 400px;
     }
+    .flex-layouts{
+        display: flex;
+        width: 1650px;
+        flex-wrap: wrap;
+    }
+    .video-list{
+        display: flex;
+        .video-item{
+            display: flex;
+            width: 100%;
+            .video-box{
+                position: relative;
+                margin: 3px;
+                .video-name{
+                    position: absolute;
+                    top: 10px;
+                    left: 10px;
+                    color: #ffda62;
+                    font-weight: 600;
+                    font-size: 17px;
+                }
+                .video{
+                    border: solid 1px #000000;
+                    background: #001529;
+                    width: 400px;
+                    height: 300px;
+                }
+            }
+        }
+    }
 }
 </style>
diff --git a/src/views/realTimeMonitoring/model.vue b/src/views/realTimeMonitoring/model.vue
new file mode 100644
index 0000000..7f8512f
--- /dev/null
+++ b/src/views/realTimeMonitoring/model.vue
@@ -0,0 +1,198 @@
+<template>
+    <div v-if="isShow">
+<!--        <a-modal-->
+<!--            v-model="isShow"-->
+<!--            :title="title"-->
+<!--            @ok="handleOk"-->
+<!--            @cancel="handleCancel"-->
+<!--            ok-text="确认"-->
+<!--            cancel-text="取消"-->
+<!--            class="p-model"-->
+<!--        >-->
+
+<!--        </a-modal>-->
+        <div class="video-mask">
+            <div class="video-close" @click="handleCancel">
+                x
+            </div>
+            <div class="operation-list">
+                <div class="operation-item">
+                    <img src="@/assets/sub-icon.png" alt="">
+                    <span>变倍</span>
+                    <img src="@/assets/add-icon.png" alt="">
+                </div>
+                <div class="operation-item">
+                    <img src="@/assets/sub-icon.png" alt="">
+                    <span>变焦</span>
+                    <img src="@/assets/add-icon.png" alt="">
+                </div>
+                <div class="operation-item">
+                    <img src="@/assets/sub-icon.png" alt="">
+                    <span>光圈</span>
+                    <img src="@/assets/add-icon.png" alt="">
+                </div>
+            </div>
+            <div class="direction-list">
+                <div class="direction-item">
+                    <img src="@/assets/left-top-icon.png" alt="">
+                    <img src="@/assets/top-icon.png" alt="">
+                    <img src="@/assets/right-top-icon.png" alt="">
+                </div>
+                <div class="direction-item">
+                    <img src="@/assets/left-icon.png" alt="">
+                    <img src="@/assets/right-icon.png" alt="">
+                </div>
+                <div class="direction-item">
+                    <img src="@/assets/left-bottom-icon.png" alt="">
+                    <img src="@/assets/bottom-icon.png" alt="">
+                    <img src="@/assets/right-bottom-icon.png" alt="">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+var formItemAcrossLayout = {  //formItemAcrossLayout当表单内item横向排列时用
+    labelCol: { span: 8 },    //lable长度
+    wrapperCol: { span: 14 },  //input长度
+};
+var formItemVerticalLayout = { //formItemVerticalLayout当表单内item纵向排列时用
+    labelCol: { span: 4 },
+    wrapperCol: { span: 8, offset: 4 },
+};
+export default {
+    props:[ 'visible', 'modelData'],
+    watch: {
+        //监听并接收父组件的visible并赋值给isShow（子组件接收父组件props传过来的值时不能起一样的类名，会报重复定义的错）
+        visible: function(newVal){
+            this.isShow = newVal;  //newVal即是visible
+            // newVal && this.showConfirm(); //newVal存在的话执行showConfirm函数
+        },
+        modelData: function(newVal){
+            // console.log(newVal)
+            if(newVal.id){
+                this.mdata=newVal
+                this.id = newVal.id
+                // console.log('触发了watch，重新赋值')
+                this.$nextTick(()=>{   //this.$nextTick解决不能在表单渲染之前赋值的报错问题
+                    this.form.setFieldsValue({  //setFieldsValue 表示对form表单重新设置值
+                        ip:newVal.ip,
+                        rtsp:newVal.rtsp
+                    })
+                })
+            }
+
+        },
+    },
+    data() {
+        return {
+            isShow:false,
+            title:'',
+            closable:false,//取消model模态框右上角的X号
+            formItemAcrossLayout,
+            formItemVerticalLayout,
+            confirmLoading: false,
+            form: this.$form.createForm(this, { name: 'dynamic_rule' }),
+            id:'',
+            mdata:[]
+        };
+    },
+    mounted() {
+        console.log('mounted执行了')
+    },
+    methods: {
+        handleOk() {
+            this.confirmLoading = true;
+            setTimeout(() => {
+                this.form.validateFields((err, values) => {
+                    console.log(values)
+                    if (!err) {
+                        console.log(this.title)
+                        if(this.title=='新增球机'){
+                            this.$api.httpApi.addCamera({
+                                data:values
+                            }).then(res => {
+                                if(res.code==200){
+                                    this.$emit('sure',false)
+                                    this.$message.success('新增球机成功');
+                                }
+                            }).catch(err => {
+
+                            });
+                        }else if(this.title=='编辑球机'){
+                            values.id = this.id
+                            this.$api.httpApi.editCamera({
+                                data:values
+                            }).then(res => {
+                                if(res.code==200){
+                                    this.$emit('sure',false)
+                                    this.$message.success('编辑球机成功');
+                                }
+                            }).catch(err => {
+
+                            });
+                        }
+                    }
+                });
+                this.confirmLoading = false;
+            }, 500);
+        },
+        handleCancel() {
+            console.log('Clicked cancel button');
+            console.log(this.title);
+            this.$emit('close',false,{})
+        },
+    },
+};
+</script>
+<style lang="scss" scoped>
+    .video-mask{
+        position: fixed;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background-color: #001529;
+        z-index: 9999;
+        .video-close{
+            position: absolute;
+            right: 20px;
+            top: 20px;
+            color: #ffffff;
+            font-size: 24px;
+        }
+        .operation-list{
+            position: absolute;
+            right: 200px;
+            bottom: 20px;
+            /*width: 150px;*/
+            /*border: solid 1px blue;*/
+            .operation-item{
+                img{
+                    width: 42px;
+                }
+                span{
+                    padding: 5px 10px;
+                    background: rgba(0,0,0,0.5);
+                    font-size: 18px;
+                    color: #ffffff;
+                }
+            }
+        }
+        .direction-list{
+            position: absolute;
+            right: 30px;
+            bottom: 20px;
+            width: 150px;
+            /*border: solid 1px blue;*/
+            .direction-item{
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                img{
+                    width: 42px;
+                }
+            }
+        }
+    }
+</style>