From fa8c0c9e543f7ca4912599ae26a2293d2d34d8f6 Mon Sep 17 00:00:00 2001
From: TiaStars <L18864257234@163.com>
Date: Tue, 15 Oct 2024 13:26:53 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=8E=82=E4=B8=AD=E5=8E=82?=
 =?UTF-8?q?=E5=9B=AD=E4=B8=AD=E5=9B=AD=E5=9B=BE=E5=B1=82=E3=80=81=E7=9B=91?=
 =?UTF-8?q?=E6=8E=A7=E8=A7=86=E9=A2=91=E5=9B=BE=E5=B1=82=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E5=88=86=E7=B1=BB=E7=AD=9B=E9=80=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                  |   2 +-
 src/api/bigScreenApi/index.js     |  42 ++-
 src/assets/images/icon7.png       | Bin 0 -> 4957 bytes
 src/assets/styles/amap.scss       |  26 ++
 src/utils/request.js              |   4 +-
 src/views/bigScreen/map/index.vue | 478 ++++++++++++++++++++++--------
 6 files changed, 426 insertions(+), 126 deletions(-)
 create mode 100644 src/assets/images/icon7.png

diff --git a/.env.development b/.env.development
index 2c3a063..494dcd2 100644
--- a/.env.development
+++ b/.env.development
@@ -2,7 +2,7 @@
  # @Author: 张涛
  # @Date: 2023-11-09 18:29:41
  # @LastEditors: JC9527
- # @LastEditTime: 2024-09-22 05:39:52
+ # @LastEditTime: 2024-10-15 10:27:32
  # @FilePath: \JiangningUrbanManagePc\.env.development
 ### 
 # 页面标题
diff --git a/src/api/bigScreenApi/index.js b/src/api/bigScreenApi/index.js
index 860bf7f..91f7613 100644
--- a/src/api/bigScreenApi/index.js
+++ b/src/api/bigScreenApi/index.js
@@ -22,15 +22,33 @@ export function getVideoPageEq(params) {
     params
   })
 }
-// 获取流URL
-export function getPreviewURLs(params) {
+// 厂中厂园中园监控
+export function DeviceListNewRequest(params) {
+  return request({
+    url: "/jn/vcp/DeviceListNewRequest",
+    method:'get',
+    params
+  })
+}
+
+// 获取视频流
+export function getDeviceMediaUrlHls(params){
   return request({
-    url: "/jn/video/previewURLs",
+    url: "/jn/vcp/getDeviceMediaUrlHls",
     method:'get',
     params
   })
 }
 
+// 获取流URL
+// export function getPreviewURLs(params) {
+//   return request({
+//     url: "/jn/video/previewURLs",
+//     method:'get',
+//     params
+//   })
+// }
+
 // 终端设备坐标采集、在线状态接口
 export function getDeviceList(params) {
   return request({
@@ -140,6 +158,24 @@ export function getUserinfo(params){
     // }
   })
 }
+// 视频监控获取
+export function getVideoDevice(params) {
+  return request({
+    baseURL: process.env.VUE_APP_BASE_API2,
+    url: "/biz/VideoDevice/page",
+    method:'get',
+    params,
+  })
+}
+// 视频url获取
+export function getPreviewURLs(params) {
+  return request({
+    baseURL: process.env.VUE_APP_BASE_API2,
+    url: "/videoSpnl/previewURLs",
+    method:'get',
+    params,
+  })
+}
 
 // 事件列表查询
 export function getQueryViewListPage(params,data) {
diff --git a/src/assets/images/icon7.png b/src/assets/images/icon7.png
new file mode 100644
index 0000000000000000000000000000000000000000..7b7e596c189b11b468deaf2d857a19d376bbde22
GIT binary patch
literal 4957
zcmd^D`8U*W*dC01jeM2RU{FmcONK;a$xIB{x3QEhJ7dcrW2BO7A0hjzMAosC-B7Yj
zUrSk&>|+`G8pig{_s@9G`@{3x=Q;QFT<1R5xu0|H=Zbw`sK?DA%mD&{xKT(Q6MF3a
zZ?Un^_j0R>TzX&#FwxTjRrHBaK_CGkln%n|iT#=#`wuzYpgVf9Z|db^IiSMv{2|<I
zYz(@_{O7^vjo(8qycZP2{BR@OL%-%k7%QcDg7!sqbo{Pfen;S_Fpjo0VDxwwYbBgg
zU0}E{t-jKKcIr~-wn3^}F4Ys9s5{CXU(Cx`C++i#N8N=~$}w_zF-F~Wi~tiLRcee;
z+<a_=Z`*ADomd#7l)$s>z;oN(Yv3pdQapi2agd%anE9uL0|8+(dHKG*M~RMfuh%7N
z(G%xqmu@I>(~-hHKTG-Oi5R$AkAXIX?f(vi)IJdC392JT-e#!Rz^@FS(OP9S%Of>Q
z&rZbfz6W~SP2_03t`Rmc!bW?fIl90O^oO%83iKCL3B!wKdRo=Y%Y!g1(>1B<JFp3%
z<mTr0eM=-BMnqC>`tt&&l8!Jwe2WKmSN&_|vK*tIzwXxn)YHJ%4Eh%(*#@GEq$Zf#
z@<C!;j&)*Y!N&eq@%v2hIErQCl~<&@d<E^-k^<p)Cy@Hb=uGjZT&8IyVB-=tDLaT2
z!QTv{e$2eEk6O~uO)pnAo>c0X))!M`8~7Rqh_O!>gMxj3dK;qU8T>fNb-nH;0lE5o
z1yLc;HTG#Rh}Zi^I6HdM)LS;sU|UiD?dqEVE`k@HR3OTrUMJn9TogD2a&mA1Ku<Kt
zXBY2A{&OuFvQlq6V8_tR*k(dfG!ZIjHA;{<oHt`u-RC5f%}n4zmd!x77gvu3YwZ}O
z>wm5No*YLcnZHHir19zJwO$Xq`iO^`<ku42gZZ49uLJh%)2JBvB+KM*?97GZ-^UOn
zcMNo6RUP_I=P+Ayy0hHv;2exFxVW|$8qthT+^Xetfss$fgTI$YY=M(0Vfrs93%_z#
zRkI2<(gk6<0tIS|n_cyq-?c~drVEy{o%M@Bg8F=@{!(5B{k@1wO%ZP&H@`}eVCSbG
zZ5DNb0yqJw#&s8SW;n~nBNOUsGwSm9+A9d)WBa0*HkI_3Eqr{Y9eUz>&O{h-OxYBG
zLPet#OT%n=&cn1`i6g^9b{li!4#ln#AVKO~GPv$511r~TD;3-<#)!|J048i$i<}1!
zzj$JUO(Qi?G9}$M)iN&&x|p7zN9?ov>SdC`*8<ylHL)Y$<Umdk59}moCjUD2StN6%
z4EZv}BVrwV7`NOs7t^5TD;<0yMHcFHmTNJRv?U<1q;YxBLCd5uXAJDzfko=abunm;
z9{e^r1Hwb||K-)a$p*)aesLW`^??tY&#GM(t3ri$nSsa~{l!69=4o{8F0lBnJ%9b8
zEgvdso03YopEL+kmxdYjPQ4vOsTuiO0HO%!gh<<HX|{z*-*?j;m4z<Q`rYlRMa|&_
z#hzqHBnxDvy>ww+v}Jw{Me^A-W)-=iM+mQ!b5w+Q<>N%bn6||z)%+AeIt?3s<xsWA
zr~7~n-nC%}C5l8YJ-pWw4<V`74ZT#6FY#tpvs)T;c6cXpPa#Y6+aES82fpaKqxlIx
z-huh#C_A=_M)WyRQZin*{=DTG7ddK!_m-ET3SYBE`hd5Ffu{anikCkI<0h@`Hjnto
zXC8`1D3xM4`&0kV+96PU^!To5!<ta(PLdbT;~Mdo1yi8SDM|U~h3y#^h?3OIs2p9u
zQvz4#Q=!u!N6rhm70AMYm3Wya@|4hnYDOkVQ=3~`;-HKDcbM>J@E%ln=vG`n=7VJn
zR-(Ioc{JVZI&FQCsYViM|Eq2`l?GkooSp!M-&GS*1t?7m3K?=c-La5<mQ5AAwxy~K
z7ieUwUPM+2uxkVgp7=Ba=g!sMW}f3xUcI7vj?xPfQ@)Og{}h=^@rk$j`v*Dj0kq&(
z`d8L`y-aW4YZAIludF8RAjs){Lo+E+3AOn^6uJ=hxXFN>5zmQQSJ@K5UDS{v7_@Y(
zn8A-yjsxX$QDzeEzMzVbYVCKgG#XuMhO-0^A~aQ(`#;B;L-aFgVXNcN8n&RmSjeO@
ztz6^uSZe9OHD{vTk|ZO9A}w!t$<<{&Ryado4Vyg3Hz+!Mm-!8Y#5T_Z6~!8tk^{qo
z@>b>r&`XO@;_aWmT6pN};jPrnmUn{&8BSCCkWllQh4DHd@L#p3PZO7qW+sR0dYFe(
zPx@)oDU^NF-TMmvjNI&~7%?BdwZXq0@6F+D2;TDkb;-xW|BT!ILGqkxu}A4`i@xS+
z<FR=P|6@T^xEy68xoTbpnvT14c=j+=0MXphxbq9f&}M%Xl`VDXzLkGXIayxZM;gVN
z7&NdRr(&wncGgOu4B7U!yrshn;iyww(1+QCtGN%%6Z2hK<B&Mcx>O`Bv)|PwXn7JI
z`(xt8nuE3>*dNoeexm&;zq3H?A`s3!_w89j?%nMV-ZZqC&^$ko;AGwWpCAbnZqAA7
zpK+r;pG~3Ew&l;O%{)8dAabJ8nmn1onFo5wv=;ai*~9Qc7$!r2r^GrzJKs2=)L1Q@
zs5A1k6cnk1iU+bwmoI15ZWQM@IbebxZ2<y^T%Ku4@||ryp#0jx{q4baqhzyC7s2=^
zn87{(W3<_V9^W6T*ei83n)_QJO(*`|mmKEwodK#j;(8aQ$>0}#E5hP)Q2jareWc%b
z8J~E|d&;ya`sh{es=Ef+gWkVu44AanIyPM+oCuTA-e)Sn@nGR#d3!+DX?qon?5mVB
zmp$&H%@>_r8T5NtC9y(ozU4zaKT4jZ@&h{0+&j;3+l5Yzef`?W<(>dAR#xi8Rm?uH
zcS2f|@Ywr;>Hq0Z;YmiPYM0>4I*q_6BgPx9YY983Q{xi<fR*%1i0s7TEr(ID?Bu`>
zy8#)7)s!2jtSFjoX_bNB-ibT3Ytq8!wchyihI15qP$!qweVXT0st@S5>&d2zLD8VU
zqlFXo;b_^GRZx2i%6_PJ5Hs$kn?w^_n7YTK+TuPA_1ja=vy8ZPr>^7c<Ce{3=YX@Z
zN3Sc;@-m0xcBwtZkqKbciH48&z=y`rsZ51jXnN6Ky(7t6OJ^*g3WlX`Kgx9m^2~G%
zY`rBu2|FHjx+V3L_!%dF{cFF}+*WHu@7DpVZ_v5}=Rn7}ddm}{gK;?LsL=To%_XS}
z5oxm3fCtmVGE~q-ncIXRqWsg={jgK3S!ZtBF5xmV90-^1-5=}(<jt)o7PEy^*<WDT
zXF-LnhFZ|_!7->EJn)tTnOT|lqQ6$8E><q~2&Z`4k^sLqSK5+4WMI6a-R|l!UY9xR
zSE)AMAb{%1b(XT`FL>IE6TsiBIg02|R!8E5ycLoucF<ALhJRnCJW(XSzbE4RDIY7{
z%~ZlWxud7OZON2l88g-Ryvx}nW=!pM$ZE<eQ|aR_UL)6CJd>M#67A|E!rLoO-;1F+
zShv99?T4y+59UfY@1Qr^hrc+cuN>V$J6%w25co#4dO9p@YomLzcT*L$&w8W7Ve36I
z0e7*Qw>fjUI}@^J>ReJVQr_;LrRE*f6#LcVPP`XjMtl*$4&GAv(oh^nbkfYLJkpxe
z3>m6%4MDZqj_O?8x#2gD;gO*F=6Xqm5r&MCdx08ms^j7c&U#7(Q`)UFg?akBd%w?O
zcIet}2onEd$c_WyGcy{sY(MbkVpl{2<&B)Bo=5eO%`5Uu=~dHMMe2tBHmfPxvCKaX
zf^4ZQq&YgQ>C4my^!+hXwP;q;Jm|aEmlk*l#5%Mk+1Cm8aIXtmNZWgHct0yn9Ek>6
znf$(5MMelG%w>O_vfB!%vn3w%%66@hp?N=l)OM)AUO|*mh44$($6CeQ-LxJjS(#L1
zQq#yHv-SBW7n4Kf9#D32<P+fw6m3C0y128T4|V8-(`xBWB;e~X@}{Z37D*U_W=IG)
zg(RZii)R_cde6Yp=%l|pW9m9oUi?K}Tn)JK=hk_25`<j%Z~bE|7_q!3PPGF0{t0Y&
zGdx`d?ds#uy!|XLlHj$2%z@9?)$IIG62MuF3Y@tYPMm#2BniG{K~=Cwc2_+@gAo=d
zKZ^$lG@CAc>1%m^&hpw8gzfrpoa8EfDW$v_uxvEM6E8<C4AQFWbYYR+w9C_0Q=O<m
zCS=4^^&j#U!q}=AJ^`oAzo}sw_$=;)D0jiLZmJQAg!}E@6S52GmL?@rzN(X^59$va
zZ@Rk@L&%L7jtQvvkN+{{D_}tSNRTtM49=%3*;dy(XUG2hFt84+`6};2kg)m+>F)v{
z^>b}Gw!t}#hnkEBVE{1$C!sIgN*~;QzbJ@K1#|}zlu^g=v-O**adR^#@ei?|`uJK0
zDm5yz6d!o@mg^AUZfoWh#fAfyi^&pH70-9@`Myc=tLM}uEiFT)T@OHWRpD8|%JAnA
z;+;B?Z+5F519eyE6PALTz_(f1UZ>wfN8@Y{Pzj3ufLe;ns&mkIp{rK-w{J@@pZ9(I
z8_kwYL(%GQDR1YcGRx+^{C;zfZ?VkI&gl=cS1x+MDAitPpd7SndA80y9o%wd(w?ls
zfC05Nv}z!>9cUtYfVQWR&4(Qfz`Gidt-5mUIRxNg+9U;K&y1eSlW3}U-H;&PTxc>!
z*i0(?^&O=-Tt?nHr@4j+`4cpKLX1qe7|s^?cd`lDD2o>|zqp-)aFJEbrew76s%ytc
zohv|HrzxV;s@ktexU+&r9kzCwNb_!>r;Tf)wSI2tWPRKd^Xo$wyuv=%=-b__qU!SL
zm}LE?EP~+i6r53(+=_2)gj8tC%momdI4XkJzEh+8u_!iGi_f9WGpub9@R0s~o=gnG
zZY+2}L$$wr+e~>MA6|x&+Uw{m`|r6Dx$FRL%%gWh&eXt!8%3#5>SpEz-sKxay`*rx
z7pFBFHjD^N_W-kO(<{v+(T9sg_lp8zDg>wl4gd^s82gh|+7`7w<)RU=k)@1aDG_+8
zn<G0}v?av#Ib~?{YjR+;2j>APXxSv?(LO0~6bGz)+gDFS49y!R-SmhKulSy`vi2}?
z@kz*Hdi0Z$7!#DC*P3sfW?Ae^=}m3ah_Y6-6!PSnf9HeJN1`pQA8We9^v4Re1{Ypw
z@QPa|!l-GWV8&_TdAXQ{qG!am*H`rx8#9s>5yu=#=|{$f<DtsdBL^8~mty<x8{l(R
zB2T7Zk)sz<*jHZfxdTT%j$$oF;`#*Sw%+5dtDZOq*-J3>w1SYMY5>EIy@|h5vpsYi
ze`p~1?DObx(U{Nkv2!|r5kb^YSV4m^QIZPg8$%|5w<=7gY%|8-;f~sJ;-URfT^GzF
zEWpJ9HmYJ0&T8QGJX4?YKWwwV5@ZL<<1dV%_K_MeAt+Yz<px@H{Xc|A5zq_sxkdkB
z<SbK@dtJU#M?&N!H>~dHp4JJW1z_Y@NJyE)G)e7d?#*K&U%ddCI1jo<AHY7Z@lvMW
zaCyP&alP2-u~{h@f(YxhVB9`Zj77v~dq~89e$`mYLj$IewQQz(?ptUvNhwd+WY=JQ
z#L~W^*tq98gvA7qJi*GE-`KNpS36BaCPYk-sDEtg{*8y6A~*P*CWPCTDn%I=lholt
z7_1~RYgeP;z|SYxIhE%MjNU%hLL>Qw0k&|dp2ZaCelPil2s{7iM3HU2|3rk^YF6TP
za;Oup_oSrFUwoT2H0KNsBd@bp_udAca!uc}4)r8;Vo=+iJ302W9;`GnJFb8jS9_;M
zb>GVSNiDco^H+}Sg!upH)$Tp{<om4ccFt;MLCsIMtJVU}9V=;^zPa_N`)Aih)su|V
znGVMJISBtCl4$O;0)M+ea9ot22dm9u`Ea92Maovr<Y$u8O0vxI11^MxI=X_nO}XFK
z)beA{UeUo@hcE_v>l0&tL73(D6CV7|LXu68LB)B!q?=#jtI`th@;M)BaB;HeK-d%@
z_4&9%y2X&T(O&6zm+qr55iXUa|Nn%voiQZ*o5t+N)!|C_%RneyL!AmON5cOCG=o$-

literal 0
HcmV?d00001

diff --git a/src/assets/styles/amap.scss b/src/assets/styles/amap.scss
index c69a0c6..0929d07 100644
--- a/src/assets/styles/amap.scss
+++ b/src/assets/styles/amap.scss
@@ -20,6 +20,32 @@
     background-image: url('../images/personInfo.png');
     background-size: 100% 100%;
     margin-bottom: 5px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  .tag {
+    display: flex;
+    // grid-template-columns: 1fr,1fr;
+    // column-gap: 5px;
+    background-image: url('../images/personInfo.png');
+    background-size: 100% 100%;
+    span {
+      color: #ffb300;
+      // background-color: rgba(255,179,0,0.3);
+      font-size: 12px;
+      line-height: 20px;
+      // padding: 5px;
+      display: flex;
+      justify-content: center;
+      width: 40px;
+      &:nth-of-type(2) {
+        margin-left: 5px;
+      }
+      &:nth-of-type(2) {
+        margin-left: 5px;
+      }
+    }
   }
   img {
     // width: 54px;
diff --git a/src/utils/request.js b/src/utils/request.js
index a2d1248..3a3a182 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -132,11 +132,11 @@ service.interceptors.response.use(res => {
     }
   },
   error => {
-    console.log('err' + error)
+    // console.log('err' + error)
     let { message } = error;
     const originalRequest = error.config;
     // console.log(originalRequest,'originalRequest');
-    console.log(error.response.status,'error.response.status');
+    // console.log(error.response.status,'error.response.status');
     if (message == "Network Error") {
       message = "后端接口连接异常";
     } else if (message.includes("timeout")) {
diff --git a/src/views/bigScreen/map/index.vue b/src/views/bigScreen/map/index.vue
index 9517584..b88efe3 100644
--- a/src/views/bigScreen/map/index.vue
+++ b/src/views/bigScreen/map/index.vue
@@ -4,7 +4,7 @@
  * @Author: JC9527
  * @Date: 2024-01-09 23:08:15
  * @LastEditors: JC9527
- * @LastEditTime: 2024-09-24 11:11:17
+ * @LastEditTime: 2024-10-15 11:16:00
 -->
 <template>
   <div class="map-main">
@@ -39,12 +39,15 @@
       <!-- <el-amap-geojson @init="initLocation" :geo="jiangninggeo" ref="geojson" :polygon-options="polygonOptions" :visible="true" :draggable="draggable"></el-amap-geojson> -->
 
       <!-- marker标记点 -->
-      <el-amap-marker v-for="(marker, index) in markers" :key="index + 'marker'" :visible="componentMarker.visible" :offset='markerOffset' :position="marker.position" :draggable="false" @click="(e)=> clickMarker(marker,e)">
+      <!-- <el-amap-marker v-for="(marker, index) in markers" :key="index + 'marker'" :visible="componentMarker.visible" :offset='markerOffset' :position="marker.position" :draggable="false" @click="(e)=> clickMarker(marker,e)">
         <div class="markerStyles">
           <div v-if="marker.text" class="marker-Text">{{marker.text}}</div>
+          <div class="tag">
+            <span></span>
+          </div>
           <img :src="marker.imgSrc" alt="">
         </div>
-      </el-amap-marker>
+      </el-amap-marker> -->
 
       <!-- 人员信息弹框 -->
       <el-amap-info-window
@@ -216,15 +219,15 @@
                   <div class="dot"></div>
                   <div class="name">点位名称：</div>
                 </div>
-                <div class="position">{{ monitoringInfo.info.name }}</div>
+                <div class="position">{{ monitoringInfo.info.name || monitoringInfo.info.deviceName }}</div>
               </div>
-              <div class="person-info">
+              <!-- <div class="person-info">
                 <div class="info-left">
                   <div class="dot"></div>
                   <div class="name">在线状态：</div>
                 </div>
                 <div class="position">{{ monitoringInfo.info.status == 1 ? "在线":"离线" }}</div>
-              </div>
+              </div> -->
               <div class="person-info">
                 <div class="info-left">
                   <div class="dot"></div>
@@ -336,6 +339,15 @@
         <img src="@/assets/images/createdTask.png" alt="" />
       </div>
     </div>
+    <div class="monitoring-switch" v-if="!MyInput && actionMap == 4">
+      <div class="switchItems" v-for="(item,index) in switches" :key="index">
+        <el-switch
+          v-model="item.active"
+          @change="handleSwitchChange(index,item.id)">
+        </el-switch>
+        <div class="monitoring-type">{{ item.title }}</div>
+      </div>
+    </div>
     <div
       class="middle-bottom-left"
       :class="!leftAnimationData ? 'middle-bottom-left2' : 'middle-bottom-left'"
@@ -380,6 +392,14 @@
           <span>监控视频</span>
         </div>
       </div>
+      <div class="list" @click="changeMap(6)">
+        <div class="leftbg" :class="actionMap == 6 ? 'action-map' : ''">
+          <img class="images" src="@/assets/images/icon7.png" alt="" />
+        </div>
+        <div class="rightbg rightbgTwo" v-show="actionMap == 6">
+          <span>厂中厂园中园监控</span>
+        </div>
+      </div>
       <div class="list" @click="changeMap(5)">
         <div class="leftbg" :class="actionMap == 5 ? 'action-map' : ''">
           <img src="@/assets/images/icon6.png" alt="" />
@@ -521,7 +541,10 @@ import {
   listZhzz,
   getUserByImei,
   dwgjList,
-  onlinePeople
+  onlinePeople,
+  DeviceListNewRequest,
+  getDeviceMediaUrlHls,
+  getVideoDevice
 } from "@/api/bigScreenApi";
 import {
   previewURLs,
@@ -558,6 +581,11 @@ export default {
       componentMarker: {
         visible: true,
       },
+      switches: [
+        { active: true, title: "视频监控", id: 1 },
+        { active: false, title: "算法监控", id: 2 },
+        { active: false, title: "自建监控", id: 3 },
+      ],
       // 所有点位信息
       markers:[],
       // 人员弹框信息
@@ -875,7 +903,10 @@ export default {
     },
     // 视频非聚合自定义样式及点击事件
     _renderMarker (context) {
-      var content = `<div class="markerStyles"><img src="${context.data[0].info.status == 1 ? require("../../../assets/images/icon/icon5.png") : require("../../../assets/images/icon/offLine4.png")}" alt=""></div>`;
+      // ${<span v-for="(item,index) in context.data[0].info.videoTagsList">item.name</span>}
+      // ${context.data[0].info.videoTagsList?.map(item => `<span>${item.name}</span>`).join('')}
+      // var content = `<div class="markerStyles"><img src="${context.data[0].info.status == 1 ? require("../../../assets/images/icon/icon5.png") : require("../../../assets/images/icon/offLine4.png")}" alt=""></div>`;
+      var content = `<div class="markerStyles"><div class="tag">${context.data[0].info.videoTagsList?.map(item => `<span>${item.name}</span>`).join('')}</div><img src="${require("../../../assets/images/icon/icon5.png")}" alt=""></div>`;
       var offset = new AMap.Pixel(-13.5, -15);
       context.marker.setContent(content)
       context.marker.setOffset(offset)
@@ -885,6 +916,27 @@ export default {
         this.monitoringInfo.visible = true;
       })
     },
+    // 厂中厂园中园视频非聚合自定义样式及点击事件
+    _renderMarkerTwo (context) {
+      // ${context.data[0].info.deviceName.length * 17}
+      var content = `<div class="markerStyles"><div class="marker-Text" style="width:85px">${context.data[0].info.deviceName}</div><img src="${require("../../../assets/images/icon/icon5.png")}" alt=""></div>`;
+      var offset = new AMap.Pixel(-32.5, -48.5);
+      context.marker.setContent(content)
+      context.marker.setOffset(offset)
+      context.marker.on('click',(ev)=>{
+        // this.monitoringInfo.position = context.data[0].position;
+        // this.monitoringInfo.info = context.data[0].info;
+        // this.monitoringInfo.visible = true;
+        getDeviceMediaUrlHls({deviceCode:this.monitoringInfo.info.deviceCode}).then(res=>{
+          if(res.url) {
+            this.$refs.aloneVideo.open(res.url);
+          }
+          //  else {
+          //   this.$modal.msgError(res.msg);
+          // }
+        })
+      })
+    },
     // 店铺非聚合自定义样式及点击事件
     _DrenderMarker(context) {
       // <div class="marker-Text" style="width:${context.data[0].info.shopName.length * 15}px">${context.data[0].info.shopName}</div>
@@ -935,7 +987,6 @@ export default {
         textColor:"#FFFFFF",
         textSize:14
       }];
-      this.markers = [];
       this.mapLoading = status ? false : true;
       if(id == 1) {
         this.personLine = [];
@@ -957,7 +1008,6 @@ export default {
                 obj.imgSrc = element.status;
                 obj.userId = element.userId;
                 obj.info = element;
-                // this.markers.push(obj)
                 this.videoPoint.push(obj)
               }
             })
@@ -978,16 +1028,6 @@ export default {
           this.mapLoading = false;
         })
       } else if(id == 2) {
-        // point.features.forEach((element)=>{
-        //   if (element.properties.name == "普通事件") {
-        //     let obj = {position:[]};
-        //     obj.position[0] = element.geometry.coordinates[0];
-        //     obj.position[1] = element.geometry.coordinates[1];
-        //     obj.imgSrc = element.properties.status == "0"? offIcon2 : ico2;
-        //     this.markers.push(obj)
-        //     this.mapLoading = false;
-        //   }
-        // })
         listpatrol({current:1,size:1000}).then(res=>{
           this.mapLoading = false;
           if(res.code == 200) {
@@ -1013,7 +1053,6 @@ export default {
 
               obj.imgSrc = ico2;
               obj.info = element
-              // this.markers.push(obj)
               this.videoPoint.push(obj)
             })
             this.count = this.videoPoint.length;
@@ -1028,60 +1067,7 @@ export default {
             })
           }
         })
-        // let data = {'queryValue' : [], "myInstanceClassify" : "all", "parameterValue":[], fks: []}
-        // ViewListPage({viewCode:'event-all-list', pageNo: 1, pageSize:500}, data).then(res=>{
-        //   this.mapLoading = false;
-        //   if(res.code == 200) {
-        //     this.videoPoint = [];
-        //     res.result.records.forEach((element)=>{
-        //       let obj = {position:[]};
-        //       let location = element.location?.split(',');
-
-        //       // obj.imgSrc = element.status == "0" ? offIcon4 : ico5;
-              
-        //       if(location) {
-        //         obj.position[0] = location[0];
-        //         obj.position[1] = location[1];
-        //         // let lonLat = this.wgs84togcj02(location[0],location[1]);
-        //         // obj.position[0] = lonLat ? lonLat[0] : 0;
-        //         // obj.position[1] = lonLat ? lonLat[1] : 0;
-                
-        //         obj.lnglat = new AMap.LngLat(location.length > 0 ? location[0] : 0 ,location.length > 0 ? location[1] : 0)
-        //         // obj.lnglat = new AMap.LngLat(lonLat ? lonLat[0] : 0 ,lonLat ? lonLat[1] : 0)
-        //       } else {
-        //         obj.position[0] = 0;
-        //         obj.position[1] = 0;
-        //       }
-
-        //       obj.imgSrc = ico2;
-        //       obj.info = element
-        //       // this.markers.push(obj)
-        //       this.videoPoint.push(obj)
-        //     })
-        //     this.count = this.videoPoint.length;
-        //     AMap.plugin(['AMap.MarkerCluster'],()=>{
-        //       this.cluster = new AMap.MarkerCluster(this.map,this.videoPoint,{
-        //         gridSize: 60, // 设置网格像素大小
-        //         maxZoom: 17,
-        //         styles: sts,
-        //         // renderClusterMarker: this._renderClusterMarker, // 自定义聚合点样式
-        //         renderMarker: this._eventMarker, // 自定义非聚合点样式
-        //       })
-        //     })
-        //   }
-        // })
       } else if(id == 3){
-        // point.features.forEach((element)=>{
-        //   if (element.properties.name == "执法车辆") {
-        //     let obj = {position:[]};
-        //     obj.position[0] = element.geometry.coordinates[0];
-        //     obj.position[1] = element.geometry.coordinates[1];
-        //     obj.imgSrc = element.properties.status == "0"? offIcon3 : ico4;
-        //     obj.text = element.properties.name;
-        //     this.markers.push(obj)
-        //     this.mapLoading = false;
-        //   }
-        // })
         getCarManageList({pageNum: 1,pageSize: 1000}).then(res=>{
           // console.log('车辆',res);
           this.carLine = res.rows
@@ -1111,40 +1097,66 @@ export default {
               renderMarker: this._carMarker, // 自定义非聚合点样式
             })
           })
-            // res.rows.forEach(element => {
-            //   let obj = {position:[]};
-            //   obj.position[0] = element.longitude;
-            //   obj.position[1] = element.latitude;
-            //   obj.imgSrc = ico6;
-            //   obj.info = element;
-            //   this.markers.push(obj)
-            //   this.mapLoading = false;
-            // })
           }).catch(err=>{
             this.mapLoading = false;
           })
       } else if(id == 4){
-        getVideoPageEq({pageNo:1,pageSize:1000}).then(res=>{
+        // getVideoPageEq({pageNo:1,pageSize:1000}).then(res=>{
+        //   this.mapLoading = false;
+        //   // console.log(res,"res");
+        //   this.videoPoint = [];
+        //   res.data.forEach((element)=>{
+        //     let obj = {position:[]};
+        //     let lonLat;
+        //     if(element.longitude && element.latitude) {
+        //       lonLat = this.wgs84togcj02(element.longitude,element.latitude);
+        //     }
+        //     // obj.position[0] = element.longitude;
+        //     obj.position[0] = lonLat ? lonLat[0] : 0;
+        //     // obj.position[1] = element.latitude;
+        //     obj.position[1] = lonLat ? lonLat[1] : 0;
+        //     // obj.imgSrc = element.status == "0" ? offIcon4 : ico5;
+        //     // obj.lnglat = new AMap.LngLat(element.longitude ? element.longitude : 0 ,element.latitude ? element.latitude : 0)
+        //     obj.lnglat = new AMap.LngLat(lonLat ? lonLat[0] : 0 ,lonLat ? lonLat[1] : 0);
+        //     obj.imgSrc = ico5;
+        //     obj.info = element
+        //     // this.markers.push(obj)
+        //     this.videoPoint.push(obj)
+        //   })
+        //   this.count = this.videoPoint.length;
+        //   AMap.plugin(['AMap.MarkerCluster'],()=>{
+        //     this.cluster = new AMap.MarkerCluster(this.map,this.videoPoint,{
+        //       gridSize: 60, // 设置网格像素大小
+        //       maxZoom: 15,
+        //       styles: sts,
+        //       // renderClusterMarker: this._renderClusterMarker, // 自定义聚合点样式
+        //       renderMarker: this._renderMarker, // 自定义非聚合点样式
+        //     })
+        //   })
+        // }).catch(err=>{
+        //   this.$modal.msgError(err);
+        //   this.mapLoading = false;
+        // })
+        getVideoDevice({current:1,size:-1}).then(res=>{
           this.mapLoading = false;
-          // console.log(res,"res");
           this.videoPoint = [];
-          res.data.forEach((element)=>{
+          res.data.records.forEach((element)=>{
             let obj = {position:[]};
             let lonLat;
             if(element.longitude && element.latitude) {
               lonLat = this.wgs84togcj02(element.longitude,element.latitude);
+              // obj.position[0] = element.longitude;
+              obj.position[0] = lonLat ? lonLat[0] : 0;
+              // obj.position[1] = element.latitude;
+              obj.position[1] = lonLat ? lonLat[1] : 0;
+              // obj.imgSrc = element.status == "0" ? offIcon4 : ico5;
+              // obj.lnglat = new AMap.LngLat(element.longitude ? element.longitude : 0 ,element.latitude ? element.latitude : 0)
+              obj.lnglat = new AMap.LngLat(lonLat ? lonLat[0] : 0 ,lonLat ? lonLat[1] : 0);
+              obj.imgSrc = ico5;
+              obj.info = element
+              // this.markers.push(obj)
+              this.videoPoint.push(obj)
             }
-            // obj.position[0] = element.longitude;
-            obj.position[0] = lonLat ? lonLat[0] : 0;
-            // obj.position[1] = element.latitude;
-            obj.position[1] = lonLat ? lonLat[1] : 0;
-            // obj.imgSrc = element.status == "0" ? offIcon4 : ico5;
-            // obj.lnglat = new AMap.LngLat(element.longitude ? element.longitude : 0 ,element.latitude ? element.latitude : 0)
-            obj.lnglat = new AMap.LngLat(lonLat ? lonLat[0] : 0 ,lonLat ? lonLat[1] : 0);
-            obj.imgSrc = ico5;
-            obj.info = element
-            // this.markers.push(obj)
-            this.videoPoint.push(obj)
           })
           this.count = this.videoPoint.length;
           AMap.plugin(['AMap.MarkerCluster'],()=>{
@@ -1161,16 +1173,6 @@ export default {
           this.mapLoading = false;
         })
       } else if(id == 5){
-        // point.features.forEach((element)=>{
-        //   if (element.properties.name == "沿街商铺分布") {
-        //     let obj = {position:[]};
-        //     obj.position[0] = element.geometry.coordinates[0];
-        //     obj.position[1] = element.geometry.coordinates[1];
-        //     obj.imgSrc = ico6;
-        //     this.markers.push(obj)
-        //     this.mapLoading = false;
-        //   }
-        // })
         getStreetShopList({pageSize:500,pageNum:1}).then(res=>{
           this.videoPoint = [];
           this.mapLoading = false;
@@ -1200,6 +1202,40 @@ export default {
         }).catch(err=>{
           this.mapLoading = false;
         })
+      } else if(id == 6) {
+        DeviceListNewRequest({pageSize:200}).then(res=>{
+          this.mapLoading = false;
+          // console.log(res,"res");
+          this.videoPoint = [];
+          res.forEach((element)=>{
+            let obj = {position:[]};
+            let lonLat;
+            if(element.longitude && element.latitude) {
+              lonLat = this.wgs84togcj02(element.longitude,element.latitude);
+              // obj.position[0] = element.longitude;
+              obj.position[0] = lonLat ? lonLat[0] : 0;
+              // obj.position[1] = element.latitude;
+              obj.position[1] = lonLat ? lonLat[1] : 0;
+              // obj.imgSrc = element.status == "0" ? offIcon4 : ico5;
+              // obj.lnglat = new AMap.LngLat(element.longitude ? element.longitude : 0 ,element.latitude ? element.latitude : 0)
+              obj.lnglat = new AMap.LngLat(lonLat ? lonLat[0] : 0 ,lonLat ? lonLat[1] : 0);
+              obj.imgSrc = ico5;
+              obj.info = element
+              // this.markers.push(obj)
+              this.videoPoint.push(obj)
+            }
+          })
+          this.count = this.videoPoint.length;
+          AMap.plugin(['AMap.MarkerCluster'],()=>{
+            this.cluster = new AMap.MarkerCluster(this.map,this.videoPoint,{
+              gridSize: 60, // 设置网格像素大小
+              maxZoom: 15,
+              styles: sts,
+              // renderClusterMarker: this._renderClusterMarker, // 自定义聚合点样式
+              renderMarker: this._renderMarkerTwo, // 自定义非聚合点样式
+            })
+          })
+        })
       }
     },
     // 点位点击事件
@@ -1394,20 +1430,38 @@ export default {
     },
     // 监控视频上墙
     monitorVideos(status){
+      // this.$refs.aloneVideo.open(`http://liveplay.vaas.cn-yangzhou-1.ctyunxs.cn/vaas/live/3210000110004_32011502021322002389_live_1/hls.m3u8?auth_key=1728613840-588c71701551402588dcac5d76d4f910-30003-cef7053299ba90ef96453528cba0fc7f`);
       // this.$refs.videoWall.open();
-      if(status == 1) {    // expand:"transcode=1"
-        getPreviewURLs({protocol:'hls',cameraIndexCode:this.monitoringInfo.info.cameraIndexCode,streamType:"1",transmode:"1"}).then(res=>{
-          if(res.code == 200) {
-            // console.log(res,'视频地址获取');
-            // this.$refs.aloneVideo.open(res.msg);
-            let videoUrl = res.msg;
-            var code1 = videoUrl.match(/\/openUrl\/(.*)/)[1]
-            this.$refs.aloneVideo.open(`http://10.236.2.28:54567/bjh-admin-server/jn/videosLive/${code1}`);
-          }
-        })
-      } else {
-        this.$modal.msgError("该设备已离线");
-      }
+      // if(status == 1) {    // expand:"transcode=1"
+        // getPreviewURLs({protocol:'hls',cameraIndexCode:this.monitoringInfo.info.nationalStandardCode,streamType:"1",transmode:"1"}).then(res=>{
+        //   if(res.code == 200) {
+        //     // console.log(res,'视频地址获取');
+        //     // this.$refs.aloneVideo.open(res.msg);
+        //     let videoUrl = res.msg;
+        //     var code1 = videoUrl.match(/\/openUrl\/(.*)/)[1]
+        //     this.$refs.aloneVideo.open(`http://10.236.2.28:54567/bjh-admin-server/jn/videosLive/${code1}`);
+        //   }
+        // })
+        if(this.actionMap == 4) {
+          getPreviewURLs({protocol:'hls',cameraIndexCode:this.monitoringInfo.info.nationalStandardCode,streamType:"1",transmode:"1"}).then(res=>{
+            // console.log(res,"res");
+            let url = JSON.parse(res.data)
+            // console.log(url,"url");
+            let videoUrl = url.data.url;
+            // var code1 = videoUrl.match(/\/openUrl\/(.*)/)[1]
+            // console.log(code1,"code1");
+            // this.$refs.aloneVideo.open(`http://10.236.2.28:54567/bjh-admin-server/jn/videosLive/${code1}`);
+            this.$refs.aloneVideo.open(videoUrl);
+          })
+        }
+        // if(this.actionMap == 6) {
+        //   getDeviceMediaUrlHls({deviceCode:this.monitoringInfo.info.deviceCode}).then(res=>{
+        //     this.$refs.aloneVideo.open(res.url)
+        //   })
+        // } else 
+      // } else {
+      //   this.$modal.msgError("该设备已离线");
+      // }
     },
     // 转发，复制视频地址
     copyUrl(){
@@ -2547,9 +2601,165 @@ export default {
         this.markerOffset = new AMap.Pixel(-27, -94);
       } else if (id == 5) {
         this.markerOffset = new AMap.Pixel(-27, -94);
+      } else if (id == 6) {
+        this.MyInput = false;
+        this.markerOffset = new AMap.Pixel(-27, -94);
       }
       this.getMarkers(id);
     },
+    // 视频切换
+    handleSwitchChange(index,id){
+      // 判断是否全部都未选，allInactive为true则判断active全部都为false
+      const allInactive = this.switches.every(switchItem => !switchItem.active);
+      if(allInactive) {
+        this.switches[index].active = true;
+        return;
+      }
+      this.switches.forEach((sw, i) => {
+        // 关闭其他开关
+        if (i !== index) {
+          sw.active = false;
+        }
+      });
+      // id    1:视频监控   2:算法监控   3:自建监控
+      // console.log(id);
+      this.getVideosType(id)
+    },
+    getVideosType(id){
+      this.mapLoading = true;
+      // 点聚合重置
+      if (this.cluster) {
+        this.cluster.setMap(null);
+      }
+      this.videoPoint = [];
+      let imgUrl =  require("../../../assets/images/icon/green.png")
+      var sts = [{
+        url: imgUrl,
+        size: new AMap.Size(32, 32),
+        offset: new AMap.Pixel(-16, -16),
+        textColor:"#FFFFFF",
+        textSize:14
+      }, {
+        url: imgUrl,
+        size: new AMap.Size(32, 32),
+        offset: new AMap.Pixel(-16, -16),
+        textColor:"#FFFFFF",
+        textSize:14
+      }, {
+        url: imgUrl,
+        size: new AMap.Size(32, 32),
+        offset: new AMap.Pixel(-18, -18),
+        textColor:"#FFFFFF",
+        textSize:14
+      }];
+      let ico5 = require("../../../assets/images/icon/icon5.png");
+      if(id == 1) {
+        getVideoDevice({current:1,size:-1}).then(res=>{
+          this.mapLoading = false;
+          res.data.records.forEach((element)=>{
+            let obj = {position:[]};
+            let lonLat;
+            if(element.longitude && element.latitude) {
+              lonLat = this.wgs84togcj02(element.longitude,element.latitude);
+              // obj.position[0] = element.longitude;
+              obj.position[0] = lonLat ? lonLat[0] : 0;
+              // obj.position[1] = element.latitude;
+              obj.position[1] = lonLat ? lonLat[1] : 0;
+              // obj.imgSrc = element.status == "0" ? offIcon4 : ico5;
+              // obj.lnglat = new AMap.LngLat(element.longitude ? element.longitude : 0 ,element.latitude ? element.latitude : 0)
+              obj.lnglat = new AMap.LngLat(lonLat ? lonLat[0] : 0 ,lonLat ? lonLat[1] : 0);
+              obj.imgSrc = ico5;
+              obj.info = element
+              // this.markers.push(obj)
+              this.videoPoint.push(obj)
+            }
+          })
+          this.count = this.videoPoint.length;
+          AMap.plugin(['AMap.MarkerCluster'],()=>{
+            this.cluster = new AMap.MarkerCluster(this.map,this.videoPoint,{
+              gridSize: 60, // 设置网格像素大小
+              maxZoom: 15,
+              styles: sts,
+              // renderClusterMarker: this._renderClusterMarker, // 自定义聚合点样式
+              renderMarker: this._renderMarker, // 自定义非聚合点样式
+            })
+          })
+        }).catch(err=>{
+          this.$modal.msgError(err);
+          this.mapLoading = false;
+        })
+      } else if(id == 2) {
+        getVideoDevice({current:1,size:-1,videoTagId:"1836948995594969090"}).then(res=>{
+          this.mapLoading = false;
+          res.data.records.forEach((element)=>{
+            let obj = {position:[]};
+            let lonLat;
+            if(element.longitude && element.latitude) {
+              lonLat = this.wgs84togcj02(element.longitude,element.latitude);
+              // obj.position[0] = element.longitude;
+              obj.position[0] = lonLat ? lonLat[0] : 0;
+              // obj.position[1] = element.latitude;
+              obj.position[1] = lonLat ? lonLat[1] : 0;
+              // obj.imgSrc = element.status == "0" ? offIcon4 : ico5;
+              // obj.lnglat = new AMap.LngLat(element.longitude ? element.longitude : 0 ,element.latitude ? element.latitude : 0)
+              obj.lnglat = new AMap.LngLat(lonLat ? lonLat[0] : 0 ,lonLat ? lonLat[1] : 0);
+              obj.imgSrc = ico5;
+              obj.info = element
+              // this.markers.push(obj)
+              this.videoPoint.push(obj)
+            }
+          })
+          this.count = this.videoPoint.length;
+          AMap.plugin(['AMap.MarkerCluster'],()=>{
+            this.cluster = new AMap.MarkerCluster(this.map,this.videoPoint,{
+              gridSize: 60, // 设置网格像素大小
+              maxZoom: 15,
+              styles: sts,
+              // renderClusterMarker: this._renderClusterMarker, // 自定义聚合点样式
+              renderMarker: this._renderMarker, // 自定义非聚合点样式
+            })
+          })
+        }).catch(err=>{
+          this.$modal.msgError(err);
+          this.mapLoading = false;
+        })
+      } else if(id == 3) {
+        getVideoDevice({current:1,size:-1,videoTagId:"1836949034303692802"}).then(res=>{
+          this.mapLoading = false;
+          res.data.records.forEach((element)=>{
+            let obj = {position:[]};
+            let lonLat;
+            if(element.longitude && element.latitude) {
+              lonLat = this.wgs84togcj02(element.longitude,element.latitude);
+              // obj.position[0] = element.longitude;
+              obj.position[0] = lonLat ? lonLat[0] : 0;
+              // obj.position[1] = element.latitude;
+              obj.position[1] = lonLat ? lonLat[1] : 0;
+              // obj.imgSrc = element.status == "0" ? offIcon4 : ico5;
+              // obj.lnglat = new AMap.LngLat(element.longitude ? element.longitude : 0 ,element.latitude ? element.latitude : 0)
+              obj.lnglat = new AMap.LngLat(lonLat ? lonLat[0] : 0 ,lonLat ? lonLat[1] : 0);
+              obj.imgSrc = ico5;
+              obj.info = element
+              // this.markers.push(obj)
+              this.videoPoint.push(obj)
+            }
+          })
+          this.count = this.videoPoint.length;
+          AMap.plugin(['AMap.MarkerCluster'],()=>{
+            this.cluster = new AMap.MarkerCluster(this.map,this.videoPoint,{
+              gridSize: 60, // 设置网格像素大小
+              maxZoom: 15,
+              styles: sts,
+              // renderClusterMarker: this._renderClusterMarker, // 自定义聚合点样式
+              renderMarker: this._renderMarker, // 自定义非聚合点样式
+            })
+          })
+        }).catch(err=>{
+          this.$modal.msgError(err);
+          this.mapLoading = false;
+        })
+      }
+    },
     // 隐藏地图左侧
     leftAnimation() {
       setTimeout(() => {
@@ -2880,6 +3090,27 @@ export default {
       }
     }
   }
+  .monitoring-switch {
+    z-index: 600;
+    position: absolute;
+    left: 537px;
+    top: 10px;
+    // display: flex;
+    // flex-direction: column;
+    display: grid;
+    grid-template-columns: 1fr;
+    row-gap: 10px;
+    .switchItems {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      // margin-bottom: 10px;
+      .monitoring-type {
+        color: #fff;
+        font-size: 12px;
+      }
+    }
+  }
   .middle-top-left2 {
     left: 67px;
   }
@@ -2909,6 +3140,9 @@ export default {
         img {
           width: 20px;
         }
+        .images {
+          width: 30px;
+        }
       }
       .action-map {
         background-image: url("../../../assets/images/iconbg1.png");
@@ -2917,6 +3151,7 @@ export default {
         padding-left: 6px;
         margin-left: 2px;
         background-image: url("../../../assets/images/right-icon.png");
+        background-repeat: no-repeat; /* 不平铺 */
         width: 115px;
         height: 36px;
         display: flex;
@@ -2930,6 +3165,9 @@ export default {
           text-shadow: 0px 0px 5px #0077ff;
         }
       }
+      .rightbgTwo {
+        width: 145px;
+      }
     }
   }
   .middle-bottom-left2 {