Merge branch 'dahua' of http://git.xt.wenhq.top:8083/wimjiang/squi-HD into dahua

# Conflicts:
#	src/components/MarkerMap/index.tsx

index.d.ts

@@ -1,26 +1,31 @@
-declare module "*.svg" {
+declare module '*.svg' {
   export default SVGAElement;
 }
-declare module "*.png";
-declare module "*.jpg";
-declare module "*.jpeg";
-declare module "*.gif";
-declare module "*.bmp";
-declare module "*.tiff";
+declare module '*.png';
+declare module '*.jpg';
+declare module '*.jpeg';
+declare module '*.gif';
+declare module '*.bmp';
+declare module '*.tiff';
 
-declare module "@element-plus/icons/lib/*.js" {
-  import { VNode } from "vue";
+declare module '@element-plus/icons/lib/*.js' {
+  import { VNode } from 'vue';
   export default VNode;
 }
 
-declare module "*.vue" {
-  import type { DefineComponent } from "vue";
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
   const component: DefineComponent;
   export default component;
 }
 
 export declare global {
   interface Window {
+    vPlayArea: any;
+    theSocket: any;
+    VideoPlay: any;
+    slectOptionmini: any;
+    InitWebSocketClass: any;
     lib: any;
     rem: string | number | undefined | null;
     dpr: string | number | undefined | null;

index.html

@@ -107,8 +107,8 @@
 
         function refreshRem() {
           var width = docEl.getBoundingClientRect().width;
-          if (width / dpr > 540) {
-            width = 540 * dpr;
+          if (width / dpr > 5760) {
+            width = 5760 * dpr;
           }
           var rem = width / 10;
           docEl.style.fontSize = rem + 'px';

public/webClient/initWebSocket.js

@@ -334,3 +334,5 @@ class InitWebSocketClass {
         this.webSocketSend(params);
     }
 }
+
+window.InitWebSocketClass = InitWebSocketClass;

src/api/dahua.ts

@@ -16,16 +16,18 @@ export interface DAHUADeviceParams {
 }
 
 export interface DAHUAKeepParams {
- token: string;
+  token: string;
 }
 
-export interface DAHUAInfomationParams{
+export interface DAHUAInfomationParams {
   token: string;
+  [key: string]: any;
 }
 
-export interface DAHUADeviceParams{
+export interface DAHUADeviceParams {
   token: string;
-  id: string
+  id: string;
+  [key: string]: any;
 }
 
 export interface LoginResponse extends BaseResponse {
@@ -38,35 +40,33 @@ export interface MeetingResponse extends BaseResponse {
 }
 
 export interface DAHUAMeetParams extends BaseResponse {
-  token?: string;
-  name?: string , //会议名称
-  masterId?: string , //主持人用户ID
-  masterName?: string, //主持人名字
-  masterNumber?: string, //主持人号码
-  region: "", //号码对应的PAAS域ID
-  record: true, //是否录像录音true:录像录音 false:不录
-  type?: string, //会议类型“audio”: 音频会议 “video”: 音视频会议
-  mode: "group", //会议模式“p2p”:点对点“group”:群聊
+  token: string;
+  name?: string; //会议名称
+  masterId?: string; //主持人用户ID
+  masterName?: string; //主持人名字
+  masterNumber?: string; //主持人号码
+  region: ''; //号码对应的PAAS域ID
+  record: true; //是否录像录音true:录像录音 false:不录
+  type?: string; //会议类型“audio”: 音频会议 “video”: 音视频会议
+  mode: 'group'; //会议模式“p2p”:点对点“group”:群聊
 }
 
-export interface DAHUAMeetDeleteParams{
+export interface DAHUAMeetDeleteParams {
   token: string;
-  meetId: string
+  meetId: string;
 }
 
-export interface DAHUAMemberParams{
+export interface DAHUAMemberParams {
   token: string;
-  obj:{}
+  obj: {};
 }
 
-export interface KeepAliveResponse extends BaseResponse {
-}
+export interface KeepAliveResponse extends BaseResponse {}
 
 export interface KeepMeetResponse extends BaseResponse {
-    id?: string 
+  id?: string;
 }
 
-
 export const DAHUALogin = (params: DAHUALoginParams) =>
   request<LoginResponse>('POST', {
     url: `${DA_HUA_URL_PREFIX}/videoService/accounts/authorize`,
@@ -77,7 +77,7 @@ export const DAHUALogin = (params: DAHUALoginParams) =>
     },
   });
 
-  export const DAHUAKeepAlive = (params: DAHUAKeepParams) =>
+export const DAHUAKeepAlive = (params: DAHUAKeepParams) =>
   request<KeepAliveResponse>('PUT', {
     url: `${DA_HUA_URL_PREFIX}/videoService/accounts/token/keepalive`,
     data: params,
@@ -87,28 +87,27 @@ export const DAHUALogin = (params: DAHUALoginParams) =>
     },
   });
 
-  export const DAHUAUserInfo = (params: DAHUAKeepParams) =>
+export const DAHUAUserInfo = (params: DAHUAKeepParams) =>
   request<BaseResponse>('GET', {
     url: `${DA_HUA_URL_PREFIX}/ras/user/info`,
-    params:params,
+    params: params,
     headers: {
-      'Content-Type':'application/json;charset=UTF-8',
+      'Content-Type': 'application/json;charset=UTF-8',
       'X-Subject-Token': params.token,
     },
   });
 
-  export const DAHUAInfomation = (params: DAHUAInfomationParams) =>
+export const DAHUAInfomation = (params: DAHUAInfomationParams) =>
   request<BaseResponse>('POST', {
     url: `${DA_HUA_URL_PREFIX}/ras/acd/user/list`,
-    data:params,
+    data: params,
     headers: {
-      'Content-Type':'application/json;charset=UTF-8',
+      'Content-Type': 'application/json;charset=UTF-8',
       'X-Subject-Token': params.token,
     },
   });
 
-
-  export const DAHUACreateMeet = (params: DAHUAMeetParams) =>
+export const DAHUACreateMeet = (params: DAHUAMeetParams) =>
   request<KeepMeetResponse>('POST', {
     url: `${DA_HUA_URL_PREFIX}/mcu/meeting`,
     data: params,
@@ -118,67 +117,59 @@ export const DAHUALogin = (params: DAHUALoginParams) =>
     },
   });
 
-  export const DAHUADeleteMeet = (params: DAHUAMeetDeleteParams) =>
+export const DAHUADeleteMeet = (params: DAHUAMeetDeleteParams) =>
   request<KeepMeetResponse>('DELETE', {
-    url: `${DA_HUA_URL_PREFIX}/mcu/meeting/`+params.meetId,
+    url: `${DA_HUA_URL_PREFIX}/mcu/meeting/` + params.meetId,
     headers: {
       'Content-Type': 'application/json',
       'X-Subject-Token': params.token,
     },
   });
 
-  export const DAHUAMeetingUser = (params: DAHUAMeetDeleteParams) =>
+export const DAHUAMeetingUser = (params: DAHUAMeetDeleteParams) =>
   request<KeepMeetResponse>('GET', {
-    url: `${DA_HUA_URL_PREFIX}/mcu/meeting/`+params.meetId,
+    url: `${DA_HUA_URL_PREFIX}/mcu/meeting/` + params.meetId,
+    headers: {
+      'Content-Type': 'application/json',
+      'X-Subject-Token': params.token,
+    },
+  });
+
+export const DAHUADevice = (params: DAHUADeviceParams) =>
+  request<BaseResponse>('GET', {
+    url: `${DA_HUA_URL_PREFIX}/videoService/devicesManager/deviceTree`,
+    params: params,
+    headers: {
+      'Content-Type': 'application/json',
+      'X-Subject-Token': params.token,
+    },
+  });
+
+export const DAHUAMeetingMember = (params: DAHUAMemberParams) =>
+  request<BaseResponse>('POST', {
+    url: `${DA_HUA_URL_PREFIX}/mcu/meeting/member`,
+    data: params.obj,
     headers: {
       'Content-Type': 'application/json',
       'X-Subject-Token': params.token,
     },
   });
 
-  export const DAHUADevice =(params : DAHUADeviceParams) =>
-  request<BaseResponse>('GET',
-    {
-      url: `${DA_HUA_URL_PREFIX}/videoService/devicesManager/deviceTree`,
-      params:params,
-      headers: {
-        'Content-Type': 'application/json',
-        'X-Subject-Token': params.token,
-      },
-    }
-  )
-
-  export const DAHUAMeetingMember =(params : DAHUAMemberParams) =>
-  request<BaseResponse>('POST',
-    {
-      url: `${DA_HUA_URL_PREFIX}/mcu/meeting/member`,
-      data:params.obj,
-      headers: {
-        'Content-Type': 'application/json',
-        'X-Subject-Token': params.token,
-      },
-    }
-  )
-
-  export const DAHUADeviceObj =(params : DAHUADeviceParams) =>
-  request<BaseResponse>('GET',
-    {
-      url: `${DA_HUA_URL_PREFIX}/videoService/devicesManager/devices/`+params.id,
-      headers: {
-        'Content-Type': 'application/json',
-        'X-Subject-Token': params.token,
-      },
-    }
-  )
-
-  export const DAHUAUserObj =(params : DAHUADeviceParams) =>
-  request<BaseResponse>('GET',
-    {
-      url: `${DA_HUA_URL_PREFIX}/ras/user/`+params.id,
-      headers: {
-        'Content-Type': 'application/json',
-        'X-Subject-Token': params.token,
-      },
-    }
-  )
+export const DAHUADeviceObj = (params: DAHUADeviceParams) =>
+  request<BaseResponse>('GET', {
+    url:
+      `${DA_HUA_URL_PREFIX}/videoService/devicesManager/devices/` + params.id,
+    headers: {
+      'Content-Type': 'application/json',
+      'X-Subject-Token': params.token,
+    },
+  });
 
+export const DAHUAUserObj = (params: DAHUADeviceParams) =>
+  request<BaseResponse>('GET', {
+    url: `${DA_HUA_URL_PREFIX}/ras/user/` + params.id,
+    headers: {
+      'Content-Type': 'application/json',
+      'X-Subject-Token': params.token,
+    },
+  });

src/api/resource.ts

@@ -124,16 +124,21 @@ export interface AllResourcesResponse {
   };
 }
 
+export interface SingleDeviceResponse {
+  data: {
+    [key: string]: SingleDeviceItem;
+  };
+}
+
 /** 获取所有应急资源信息 */
 export const getAllResources = () => {
   return request<AllResourcesResponse>('GET', {
     url: `/zhdd/resource/location`,
   });
-}
-  
-export const getAllsingleDevice = () => { 
-   return request<AllResourcesResponse>('GET', {
-     url: `/zhdd/singleDevice/list`,
-   });
+};
 
-};
+export const getAllsingleDevice = () => {
+  return request<SingleDeviceResponse>('GET', {
+    url: `/zhdd/singleDevice/list`,
+  });
+};

src/assets/icons/home/icon_map_dbsb.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FF9F2E;}
+	.st1{fill:#FFFFFF;}
+</style>
+<path class="st0" d="M181.7,84.6c0,45.4-82.2,112.9-82.2,112.9S17.3,130,17.3,84.6S54.1,2.4,99.5,2.4S181.7,39.2,181.7,84.6z"/>
+<path class="st1" d="M83.2,14.7c2.8,0,5,2.2,5.1,5v0.3l1.6,10.8h4v9.7h34.4c7,0.2,12.6,5.9,12.5,12.9v83.4c0.1,7-5.3,12.8-12.3,13.2
+	H70.3c-6.3-0.4-11-5.8-10.6-12c0-0.3,0-0.6,0.1-0.9V53.6c-0.2-7,5.3-12.8,12.3-13.2h0.4v-9.7h4.1L78,19.9C78,17,80.3,14.7,83.2,14.7
+	z M83.4,104.2h-10c-1.2,0-2.1,1-2.1,2.2v8.4c0,1.2,0.9,2.1,2.1,2.2h10c0.5,0,1.1-0.2,1.4-0.6c0.4-0.4,0.6-1,0.6-1.5v-8.4
+	c0-0.6-0.3-1.1-0.6-1.5C84.4,104.5,83.9,104.3,83.4,104.2z M105.3,104.2h-10c-0.5,0-1.1,0.2-1.4,0.6c-0.4,0.4-0.6,1-0.6,1.5v8.4
+	c0,0.6,0.3,1.1,0.6,1.5c0.4,0.4,0.9,0.6,1.4,0.6h10c0.6,0,1.1-0.2,1.5-0.6c0.3-0.4,0.5-1,0.5-1.5v-8.4c0-0.6-0.2-1.1-0.5-1.5
+	C106.4,104.5,105.8,104.3,105.3,104.2L105.3,104.2z M127.2,104.2h-10c-0.6,0-1.1,0.3-1.5,0.6c-0.3,0.4-0.5,1-0.5,1.5v8.4
+	c0,0.6,0.2,1.1,0.5,1.5c0.4,0.4,1,0.6,1.5,0.6h10c0.5,0,1.1-0.2,1.4-0.6c0.4-0.4,0.6-1,0.6-1.5v-8.4c0-0.6-0.3-1.1-0.6-1.5
+	C128.3,104.5,127.8,104.3,127.2,104.2z M124.5,52.5H76.1c-1.3,0-2.5,0.6-3.3,1.5c-1,0.9-1.5,2.3-1.4,3.6v30.1c-0.1,2.7,2.1,5,4.8,5
+	h48.4c2.7,0,4.9-2.3,4.9-5c0,0,0,0,0,0V57.6C129.4,54.9,127.2,52.6,124.5,52.5z M123.2,58.5c0.5,0,0.9,0.4,0.9,0.9c0,0,0,0,0,0v27.3
+	c0,0.2-0.1,0.5-0.3,0.6c-0.2,0.2-0.4,0.3-0.6,0.3H77.6c-0.5,0-0.9-0.4-0.9-0.9l0,0V59.4c0-0.2,0.1-0.5,0.3-0.6
+	c0.2-0.2,0.4-0.3,0.6-0.3L123.2,58.5L123.2,58.5z"/>
+</svg>

src/assets/icons/home/icon_map_yjck_w.svg

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#577BFF;}
+	.st1{fill:#FFFFFF;}
+</style>
+<path class="st0" d="M181.1,84.6c0,45.4-82.2,112.9-82.2,112.9S16.7,130,16.7,84.6S53.5,2.4,98.9,2.4S181.1,39.2,181.1,84.6z"/>
+<g id="页面-1">
+	<g id="首页_应急仓库" transform="translate(-1064.000000, -552.000000)">
+		<g id="应急仓库_水上" transform="translate(1058.000000, 548.000000)">
+			<g id="应急队伍" transform="translate(6.000000, 4.000000)">
+				<path id="形状结合" class="st1" d="M145.6,126.9c1.8,0.8,3,2.6,3.1,4.6h0.1c0,1.2-0.5,2.4-1.4,3.2c-0.9,0.9-2,1.3-3.3,1.3
+					c-0.9,0-1.4,0-1.8-0.4c-3.4-2.3-7.4-3.6-11.5-3.7c-6.9,0-15.6,6.5-15.6,6.5s-4.6,4.6-15.6,4.6c-5.6,0.3-11.1-1.3-15.6-4.6
+					c0,0-9.7-6.9-15.6-6.5c-4.2-0.6-8.4,0.8-11.5,3.7c-0.5,0.3-1.2,0.5-1.8,0.4c-1.2,0-2.4-0.5-3.3-1.3c-0.9-0.9-1.4-2-1.4-3.2
+					c-0.1-1.8,0.8-3.6,2.3-4.6c0,0,13-14.8,33.1,0c0,0,6.5,4.6,11,4.6h4.6c4-0.6,7.8-2.1,11-4.6C118,123.2,131.9,114,145.6,126.9z
+					 M101.9,23.3l45.4,33c3,2.2,1.5,6.9-2.2,6.9h-7.4v44.5h8.6c0.5,0,0.9,0.4,0.9,0.9v6.2c0,0.5-0.4,1-1,1H53c-0.5,0-0.9-0.4-0.9-1
+					v-6.2c0-0.5,0.4-0.9,1-0.9h8.6V63.2h-7.4c-3.7,0-5.2-4.7-2.2-6.9l45.4-33C98.7,22.3,100.5,22.3,101.9,23.3z M98.6,84.4H80.4
+					c-0.3,0-0.5,0.1-0.7,0.3c-0.2,0.2-0.3,0.4-0.3,0.7v18.3c0,0.6,0.5,1,1,1h18.3c0.3,0,0.5-0.1,0.7-0.3c0.2-0.2,0.3-0.4,0.3-0.7
+					V85.4C99.6,84.8,99.2,84.4,98.6,84.4z M124,84.4h-18.3c-0.6,0-1,0.5-1,1v18.3c0,0.6,0.5,1,1,1H124c0.3,0,0.5-0.1,0.7-0.3
+					c0.2-0.2,0.3-0.4,0.3-0.7V85.4C125,84.8,124.5,84.4,124,84.4z M98.6,59H80.4c-0.3,0-0.5,0.1-0.7,0.3c-0.2,0.2-0.3,0.4-0.3,0.7
+					v18.3c0,0.6,0.5,1,1,1h18.3c0.6,0,1-0.5,1-1V60C99.6,59.4,99.2,59,98.6,59z"/>
+			</g>
+		</g>
+	</g>
+</g>
+</svg>

src/assets/icons/home/icon_map_yjdw_w.svg

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#577BFF;}
+	.st1{fill:#FFFFFF;}
+</style>
+<path class="st0" d="M181.1,84.6c0,45.4-82.2,112.9-82.2,112.9S16.7,130,16.7,84.6S53.5,2.4,98.9,2.4S181.1,39.2,181.1,84.6z"/>
+<g id="页面-1">
+	<g id="首页_应急队伍" transform="translate(-1064.000000, -551.000000)">
+		<g id="应急队伍_水上" transform="translate(1058.000000, 548.000000)">
+			<g id="应急队伍" transform="translate(6.000000, 3.775479)">
+				<path id="形状结合" class="st1" d="M144.7,129.3c1.8,0.8,3,2.6,3.1,4.6h0.1c0,1.2-0.5,2.4-1.3,3.2c-0.9,0.8-2,1.3-3.2,1.3
+					c-0.9,0-1.3,0-1.8-0.4c-3.4-2.3-7.3-3.6-11.4-3.7c-6.8,0-15.5,6.4-15.5,6.4s-4.6,4.6-15.4,4.6c-5.5,0.3-11-1.3-15.5-4.6
+					c0,0-9.6-6.8-15.5-6.4c-4.2-0.6-8.4,0.8-11.4,3.7c-0.5,0.3-1.2,0.5-1.8,0.4c-1.2,0-2.4-0.5-3.2-1.3s-1.3-2-1.3-3.2
+					c-0.1-1.8,0.7-3.6,2.3-4.6c0,0,12.8-14.7,32.7,0c0,0,6.4,4.6,10.9,4.6h4.6c4-0.6,7.7-2.1,10.9-4.6
+					C117.4,125.6,131.1,116.5,144.7,129.3z M117.9,49c0,11.8-3.6,17-8.9,22.3c-2.4,6.9,1.2,8.5,2,8.5c2.4,0.8,4.5,2,6.9,2.8l3.7,1.6
+					c8.5,4.1,15.4,9.7,15.4,15.4v2.8c0,5.4-12.7,9.9-15.3,10.8l-0.5,0.2l0,0l-6.5-0.8c0,0-10.6-1.2-17-1.2c-6.5,0-17,1.2-17,1.2
+					l-6.1,0.8c0,0-15.8-5.3-15.8-11v-2.8c0-5.7,7.3-11,15.8-15.4l3.9-1.6c0,0,1.1-0.4,2.5-1l1.7-0.6c0.8-0.3,1.6-0.6,2.1-0.8
+					c0.8-0.4,4.9-2.4,2.8-8.5c-5.3-5.7-8.9-11-8.9-22.7H117.9z M98,16.1c2,0,3.7,1.6,3.7,3.7v9.3c0,0.8-0.4,1.6-1.2,2.4h0.4
+					c0.8,0,1.2-0.4,1.2-0.8l0.8-11.4c8.5,2.4,15,10.1,16.6,20.3c6.1,2,9.7,4.9,8.1,6.1c-2.8,2-12.2,0.8-28.8,0.8c-1,0-2.1,0-3.1,0
+					l-3.1,0.1C78,47.1,64.4,48.4,68,44.5c0.8-0.8,3.2-2.4,7.7-4.5c1.6-10.1,8.5-18.7,17.4-20.7L94,30.7c0,0.4,0.8,0.8,1.2,0.8h0.4
+					c-0.8-0.4-1.2-1.6-1.2-2.4v-9.3C94.4,17.7,96,16.1,98,16.1z"/>
+			</g>
+		</g>
+	</g>
+</g>
+</svg>

src/components/MarkerMap/constants.ts

@@ -161,5 +161,5 @@ export const SINGLE_PAWN = [
   {
     name: '单兵4',
     locations: '118.269259,33.974288',
-  }
+  },
 ];

src/components/MarkerMap/dialog.ts

@@ -170,10 +170,9 @@ export const GET_TEAM_DIALOG_HTML = (item: ResourceItemDetail) => {
   return el;
 };
 
-
 export const GET_SINGLE_DEVICE_DIALOG_HTML = (
   item: SingleDeviceItem,
-  callback: Function,
+  callback = () => {},
 ) => {
   const el = document.createElement('div');
   el.innerHTML = `
@@ -214,7 +213,6 @@ export const GET_SINGLE_DEVICE_DIALOG_HTML = (
   return el;
 };
 
-
 export const renderElement = (image: any) => {
   const el = document.createElement('div');
   el.id = 'marker';
@@ -227,5 +225,3 @@ export const renderElement = (image: any) => {
 
   return el;
 };
-
-

src/components/MarkerMap/index.tsx

@@ -20,8 +20,12 @@ import icon_map_yjsj from '@/assets/icons/home/yjsj.svg';
 /** @ts-ignore */
 import icon_map_yjdw from '@/assets/icons/home/yjdw.svg';
 /** @ts-ignore */
+import icon_map_yjdw_w from '@/assets/icons/home/icon_map_yjdw_w.svg';
+/** @ts-ignore */
 import icon_map_yjck from '@/assets/icons/home/yjck.svg';
 /** @ts-ignore */
+import icon_map_yjck_w from '@/assets/icons/home/icon_map_yjck_w.svg';
+/** @ts-ignore */
 import icon_map_spjk from '@/assets/icons/home/spjk.svg';
 /** @ts-ignore */
 import icon_map_dcz from '@/assets/icons/home/dcz.svg';
@@ -30,7 +34,6 @@ import icon_map_dpf from '@/assets/icons/home/dpf.svg';
 /** @ts-ignore */
 import icon_map_dbsb from '@/assets/icons/home/dbsb.svg';
 
-
 import './index.scss';
 import {
   GET_INCIDENT_DIALOG_HTML,
@@ -58,7 +61,7 @@ const MARKER_MAP_TYPES = [
   '应急队伍',
   '应急仓库',
   '应急事件',
-  '单兵'
+  '单兵',
 ] as const;
 
 export type MarkerMapType = typeof MARKER_MAP_TYPES[number];
@@ -82,6 +85,21 @@ interface ActionType {
   remove: Function;
 }
 
+// locationType + resourceType
+const RESOURCE_ICON_MAP = {
+  '11': icon_map_yjck_w, // 水上 仓库
+  '21': icon_map_yjck, // 陆上 仓库
+  '12': icon_map_yjdw_w, // 水上 队伍
+  '22': icon_map_yjdw, // 陆上 队伍
+  '13': icon_map_yjcl, // 水上 车辆
+  '23': icon_map_yjcl, // 陆上 车辆
+};
+
+const getResourceIcon = (locationType: string, resourceType: string) => {
+  // @ts-ignore
+  return RESOURCE_ICON_MAP[locationType + resourceType] || '';
+};
+
 // 路况信息刷新间隔
 const REFRESH_TRAFFIC_TIME = 60000;
 
@@ -184,7 +202,7 @@ export default defineComponent({
         action: () =>
           handleAddMarkers('单兵', store.singleDevice, icon_map_dbsb),
         remove: () => handleRemoveMarkers('单兵', store.singleDevice),
-      }
+      },
     ]);
 
     const getMarkerPopupHTML = (type: MarkerMapType, marker: MarkerType) => {
@@ -199,177 +217,188 @@ export default defineComponent({
             handleSetDetailMarker(marker);
             store.currentIncident = marker;
           });
-        case '单兵': { 
+        case '单兵': {
           var callback = () => {
-            console.log(marker["deviceCode"])
-            console.log(marker["userId"])
+            console.log(marker['deviceCode']);
+            console.log(marker['userId']);
             const self = this;
-            
-            daHuaStore.DAHUAUserObj(marker["userId"]).then(deviceUser=>{
-                         console.log(deviceUser);
-                         let memberObj = {
-                                userName:deviceUser.userName,
-                                userId:deviceUser.userCode,
-                                region:deviceUser.paasId,
-                                type:'single',
-                                // speak:'true',
-                                number:deviceUser.userPhone,
-                                deviceId:marker["deviceCode"],
-                                channelId:marker["channelId"],
-                         }
-                         let meetObj = JSON.parse(localStorage.getItem('meeting'));
-                         let memberList = [];
-                         memberList.push(meetObj.member[0]);
-                         memberList.push(memberObj);
-                         meetObj.member = memberList
-                         console.log(meetObj);
-                         daHuaStore.DAHUAMeetingMember(meetObj).then(data=>{
-                                  //  console.log(11111111)
-                                   daHuaStore.DAHUAMeetingUser(meetObj.meetId);
-                                  daHuaStore.DAHUAUserInfo().then(u => {
-                                    console.log(u,'+++++++');    
-                                    // initSocket(u.userCode,memberObj);
-                                  })
-                         })
-                         
-                        //  console.log(memberObj);
-                        //  meetObj.mebmber.push(memberObj);
 
-            });
+            const DAHUA = document.getElementById('DAHUA') as HTMLIFrameElement;
+            DAHUA?.contentWindow?.postMessage(
+              {
+                key: 'danbing',
+                value: marker['userId'],
+                deviceId: marker['deviceCode'],
+                channelId: marker['channelId'],
+              },
+              '*',
+            );
+
+            return;
+
+            marker['userId'] &&
+              daHuaStore.DAHUAUserObj(marker['userId']).then((deviceUser) => {
+                console.log(deviceUser);
+                let memberObj = {
+                  userName: deviceUser.userName,
+                  userId: deviceUser.userCode,
+                  region: deviceUser.paasId,
+                  type: 'single',
+                  // speak:'true',
+                  number: deviceUser.userPhone,
+                  deviceId: marker['deviceCode'],
+                  channelId: marker['channelId'],
+                };
+                let meetObj = JSON.parse(
+                  localStorage.getItem('meeting') ?? '{}',
+                );
+                let memberList = [];
+                memberList.push(meetObj.member[0]);
+                memberList.push(memberObj);
+                meetObj.member = memberList;
+                console.log(meetObj);
+                daHuaStore.DAHUAMeetingMember(meetObj).then((data) => {
+                  // daHuaStore.DAHUAMeetingUser(meetObj.meetId);
+                  initSocket(meetObj.user.userCode, memberObj);
+                });
+
+                //  console.log(memberObj);
+                //  meetObj.mebmber.push(memberObj);
+              });
             // console.log(daHuaStore.deviceUser);
           };
-            return GET_SINGLE_DEVICE_DIALOG_HTML(marker as SingleDeviceItem,callback);
+          return GET_SINGLE_DEVICE_DIALOG_HTML(
+            marker as SingleDeviceItem,
+            callback,
+          );
         }
-        
+
         case '应急仓库':
-          return GET_WAREHOUSE_DIALOG_HTML({
-            name: '应急仓库 111',
-            address: 'suqian',
-            manageUnit: 'xxxx',
-            contactName: '张三',
-            contactPhone: '138 1234 1234',
-          });
+          return GET_WAREHOUSE_DIALOG_HTML(marker);
         case '应急车辆':
-          return GET_VEHICLES_DIALOG_HTML({
-            name: '苏A· 12345',
-            manageUnit: 'xxxx',
-          });
+          return GET_VEHICLES_DIALOG_HTML(marker);
         case '应急队伍':
-          return GET_TEAM_DIALOG_HTML({
-            name: 'Team 1',
-            manageUnit: 'xxxxx',
-            // carryGoods: '水, 饮料',
-            // num: '2',
-            contactName: '张三',
-            contactPhone: '138 1234 1234',
-          });
+          return GET_TEAM_DIALOG_HTML(marker);
 
         case '视频监控':
-          return GET_VIDEO_DIALOG_HTML(
-            {
-              name: '12312313',
-              addr: 'su qian',
-              link: '',
-            },
-            () => {
-              if (route.query.id) {
-                store.livevideovisible = true;
-                const idx = store.livevideos.findIndex(
-                  (item) => item.locations === marker.locations,
-                );
-                if (idx < 0) {
-                  store.livevideos.length === 6
-                    ? (store.livevideos = [
-                        marker,
-                        ...store.livevideos.slice(1, 6),
-                      ])
-                    : store.livevideos.push(marker);
-                } else {
-                  ElMessage.info({ message: '该点位已经打开~' });
-                }
+          return GET_VIDEO_DIALOG_HTML(marker, () => {
+            if (route.query.id) {
+              store.livevideovisible = true;
+              const idx = store.livevideos.findIndex(
+                (item) => item.locations === marker.locations,
+              );
+              if (idx < 0) {
+                store.livevideos.length === 6
+                  ? (store.livevideos = [
+                      marker,
+                      ...store.livevideos.slice(1, 6),
+                    ])
+                  : store.livevideos.push(marker);
+              } else {
+                ElMessage.info({ message: '该点位已经打开~' });
               }
-            },
-          );
+            }
+          });
       }
     };
 
-    const videoplay =(item)=>{
+    const videoplay = (item: { type: string; userId: any; channelId: any }) => {
       console.log('播放视频');
-      console.log(item);   
-      if (!theSocket.websocket) {
-        this.$Message.warning("请先打开视频插件");
+      console.log(item);
+      if (!window.theSocket.websocket) {
+        ElMessage.warning('请先打开视频插件');
         return;
       }
-      if (item.type == "client") {
-        this.slectOptionmini(item.userId).then((arr) => {
+      if (item.type == 'client') {
+        window.slectOptionmini(item.userId).then((arr: any) => {
           if (arr) {
-            // this.vPlayArea.openAppVideo(arr);
+            window.vPlayArea.openAppVideo(arr);
           }
         });
-      } else if (item.type == "single") { //播放单兵视频
+      } else if (item.type == 'single') {
+        //播放单兵视频
         pullFlow(item.channelId);
-      } else if (item.type == "vehicle") { //播放车载视频
+      } else if (item.type == 'vehicle') {
+        //播放车载视频
         pullFlow(item.channelId);
-      } else if (item.type == "uav_dev") { //播放无人机视频
+      } else if (item.type == 'uav_dev') {
+        //播放无人机视频
         pullFlow(item.channelId);
-      }         
-     };
-
-     const pullFlow = (chinnelId) => {
-      if (chinnelId) {
-        window.vPlayArea&&window.vPlayArea.realTimeVideo([{"channelId": chinnelId}]);
       }
     };
 
+    const pullFlow = (channelId: any) => {
+      channelId &&
+        window.vPlayArea &&
+        window.vPlayArea.realTimeVideo([{ channelId }]);
+    };
 
-    const initSocket =(userCode,memberObj) => {
+    const initSocket = (
+      userCode: string,
+      memberObj: {
+        userName?: any;
+        userId: any;
+        region?: any;
+        type: string;
+        number?: any;
+        deviceId?: any;
+        channelId: any;
+      },
+    ) => {
       const self = this;
       console.log(userCode);
-      localStorage.setItem("userId",userCode);
+      localStorage.setItem('userId', userCode);
       //初始websocket实例，保存在window中方便调用。一个浏览器tab页面只能初始化一次。所有的控件窗口，通过该websocket实例去生成不同的窗口实例，不同的控件窗口通过自己的窗口实例去调用初始化、关闭、隐藏等
-      window.theSocket = new InitWebSocketClass(
-        userCode,localStorage.getItem("DAHUA_token"), {
+      window.theSocket = new window.InitWebSocketClass(
+        userCode,
+        localStorage.getItem('DAHUA_token'),
+        {
           //客户端登陆成功通知;
-          loginSuccess: (v)=> {
+          loginSuccess: (v: any) => {
             console.log(2222222222222222);
-            console.log("loginSuccess-->", v);
+            console.log('loginSuccess-->', v);
             initWnd();
           },
           //客户端窗口被拉起通知
-          onCreateVideoSuccess: v => {
-            console.log("客户端onCreateVideoSuccess-----", v);
+          onCreateVideoSuccess: (v: any) => {
+            console.log('客户端onCreateVideoSuccess-----', v);
           },
           //重点:统一分发客户端ws消息;vue 可以统一用$bus分发.第三方消息分发自定
-          onSocketBackInfos: data => {
+          onSocketBackInfos: (data: {
+            method: string;
+            params: { result: number; handleName: string };
+          }) => {
             //视频窗口创建成功通知
-            if (data && data.method === "createVideoDialogReuslt" && data.params.result === 0) {
-              if (
-                data.params.handleName === "#vPlayArea") {
+            if (
+              data &&
+              data.method === 'createVideoDialogReuslt' &&
+              data.params.result === 0
+            ) {
+              if (data.params.handleName === '#vPlayArea') {
                 //客户端窗口创建好后,界面显示窗口;
                 window.vPlayArea.resize();
-                ElMessage.warning("视频窗口创建成功！");
+                ElMessage.warning('视频窗口创建成功！');
                 videoplay(memberObj);
               }
             }
-          }
-        }
+          },
+        },
       );
-      console.log(theSocket);
+      // console.log(theSocket);
       //socket实例初始化websocket回调方法;
       window.theSocket
         .initWebSocket()
-        .then(v => {
-          console.log();
+        .then((v: any) => {
           if (v) {
-            ElMessage.warning("视频插件登陆完成!");
+            ElMessage.warning('视频插件登陆完成!');
           }
         })
-        .catch(v => {
-          ElMessage.warning("若要观看实时视频，请先安装视频插件");
+        .catch(() => {
+          ElMessage.warning('若要观看实时视频，请先安装视频插件');
         });
-    }
+    };
 
-    const initWnd =() => {
+    const initWnd = () => {
       console.log(1111);
       //左边窗口类型参数 分割 2行2列
       const typeObj = {
@@ -380,18 +409,18 @@ export default defineComponent({
         playerCtrlBarEnable: false,
         displayMode: 0,
         playMode: 0,
-        playParams: {}
+        playParams: {},
       };
       //左边窗口实例
       window.vPlayArea = new window.VideoPlay(
-        "#vPlayArea",
-        window.theSocket.websocket,//一个浏览器tab页面公用一个
-        window.theSocket.socketCode,//一个浏览器tab页面公用一个
-        typeObj
+        '#vPlayArea',
+        window.theSocket.websocket, //一个浏览器tab页面公用一个
+        window.theSocket.socketCode, //一个浏览器tab页面公用一个
+        typeObj,
       );
       //左边窗口初始化
-       window.vPlayArea.init();
-    }
+      window.vPlayArea.init();
+    };
 
     const updateTrafficSource = () => {
       if (state.map.getSource('Traffic')) {
@@ -441,7 +470,14 @@ export default defineComponent({
       state.markers.push(
         ...markers.map((i) => {
           const nextImage =
-            type === '应急事件' ? getIncidentImage(i?.status) : image;
+            type === '应急事件'
+              ? getIncidentImage(i?.status)
+              : i.locationType && i.resourceType
+              ? getResourceIcon(
+                  i.locationType.toString(),
+                  i.resourceType.toString(),
+                )
+              : image;
           const popup = new window.minemap.Popup({
             anchor: 'left',
             closeOnClick: true,
@@ -643,9 +679,12 @@ export default defineComponent({
       // 如果存在id
       await incidentStore.getIncidentItem(route.query.id as string);
       handleSetDetailMarker(incidentStore.incidentDetail.baseInfo ?? {});
-      
-        document.getElementById("vPlayArea").style.height = (window.innerHeight - 20) + "px";
-        window.theSocket && window.theSocket.resize();
+
+      const vPlayAreaEl = document.getElementById('vPlayArea');
+
+      vPlayAreaEl &&
+        (vPlayAreaEl.style.height = window.innerHeight - 20 + 'px');
+      window.theSocket && window.theSocket.resize();
     });
 
     watch(
@@ -697,7 +736,7 @@ export default defineComponent({
     return () => (
       <div class="task-map-container">
         <MapView v-model:map={state.map} />
-        <div id='vPlayArea' />
+        <div id="vPlayArea" />
         <div
           class={clsx('address-type-card-container', {
             ['in-detail']: props.readonly,

src/layout/BaseLayout/index.scss

@@ -1,4 +1,4 @@
-@import '../../styles//utils.scss';
+@import '../../styles/utils.scss';
 
 .base-layout-container {
   height: 100vh;
@@ -7,6 +7,19 @@
   background-size: cover;
   background-position: top center;
 
+  .dahua-content {
+    position: fixed;
+    opacity: 1!important;
+    top: 0;
+    left: 0;
+    &.display {
+      opacity: 1!important;
+      width: 100%;
+      height: 100vh;
+      z-index: 10;
+    }
+  }
+
   header {
     width: 100%;
     height: 94px * 2;

src/layout/BaseLayout/index.tsx

@@ -1,9 +1,10 @@
-import { defineComponent, onMounted } from 'vue';
+import { defineComponent, onMounted, watchEffect } from "vue";
 import { RouterView, useRoute, useRouter } from 'vue-router';
 import MarkerMap from '@/components/MarkerMap';
 import './index.scss';
 import { useIncidentStore, useDaHuaStore } from '@/store';
 import { constants } from 'zlib';
+import clsx from "clsx";
 
 export default defineComponent({
   setup() {
@@ -20,43 +21,54 @@ export default defineComponent({
 
     // login da hua
     onMounted(() => {
-      if (!localStorage.getItem("DAHUA_token")) {
-        daHuaStore.DAHUALogin();
-      } else {
-        daHuaStore.KEEPAlive();  //保活 //获取当前用户信息
-        daHuaStore.DAHUAUserInfo().then(res => {
-          console.log(res);
-          daHuaStore.DAHUACreateMeet(res).then(data => {         //创建会议
-            console.log(data);
-            let obj = {
-              user: res,
-              meetId: data.id,
-              member: [{
-                userName: res.userName,
-                userId: res.userCode,
-                region: res.paasId,
-                type: 'client',
-                // speak:'true',
-                number: res.userPhone,
-                // department:'根组织'
-              }]
-            }
-            localStorage.setItem('meeting', JSON.stringify(obj));
-            // console.log(obj);
-            // daHuaStore.DAHUAMeetingMember(obj);
-            // daHuaStore.DAHUAMeetingUser(data.id);
-            // daHuaStore.DAHUADeleteMeet(data.id);
-          });
-        })
-        // console.log(dhUser);
-        daHuaStore.DAHUADeviceList('S4NbecfYB1DFLAIM9FFHQ8');   //测试执法记录仪
-        daHuaStore.DAHUADeviceList('S4NbecfYB1DGB68AN187Q8');   //执法人员设备列表
-        daHuaStore.DAHUADeviceList('S4NbecfYB1DGB68S6S0UFC');   //执法车辆列表
+      // if (!localStorage.getItem('DAHUA_token')) {
+      //   daHuaStore.DAHUALogin();
+      // } else {
+      //   daHuaStore.KEEPAlive(); //保活 //获取当前用户信息
+      //   daHuaStore.DAHUAUserInfo().then((res) => {
+      //     console.log(res);
+      //     daHuaStore.DAHUACreateMeet(res).then((data) => {
+      //       //创建会议
+      //       console.log(data);
+      //       let obj = {
+      //         user: res,
+      //         meetId: data.id,
+      //         member: [
+      //           {
+      //             userName: res.userName,
+      //             userId: res.userCode,
+      //             region: res.paasId,
+      //             type: 'client',
+      //             // speak:'true',
+      //             number: res.userPhone,
+      //             // department:'根组织'
+      //           },
+      //         ],
+      //       };
+      //       localStorage.setItem('meeting', JSON.stringify(obj));
+      //       // console.log(obj);
+      //       // daHuaStore.DAHUAMeetingMember(obj);
+      //       // daHuaStore.DAHUAMeetingUser(data.id);
+      //       // daHuaStore.DAHUADeleteMeet(data.id);
+      //     });
+      //   });
+      //   // console.log(dhUser);
+      //   daHuaStore.DAHUADeviceList('S4NbecfYB1DFLAIM9FFHQ8'); //测试执法记录仪
+      //   daHuaStore.DAHUADeviceList('S4NbecfYB1DGB68AN187Q8'); //执法人员设备列表
+      //   daHuaStore.DAHUADeviceList('S4NbecfYB1DGB68S6S0UFC'); //执法车辆列表
+      // }
+      const DAHUA = document.getElementById('DAHUA') as HTMLIFrameElement;
+      if (!DAHUA) return
+      DAHUA.onload = function(){
+        // @ts-ignore
+        DAHUA.contentWindow.postMessage('onload','*');
       }
     });
 
     return () => (
       <section class="base-layout-container">
+        <iframe style={{opacity: 0}} class={clsx('dahua-content',{['display']: daHuaStore.dahuaUserVisible})}
+                id="DAHUA" name="DAHUA" src="http://127.0.0.1:8080" frameborder="0" />
         <header class="base-layout-title-contatisner">
           <div class="back-to-home" onClick={() => router.push('/home')}></div>
         </header>
@@ -64,7 +76,7 @@ export default defineComponent({
           <RouterView />
           <MarkerMap
             readonly={route.path.includes('incidentDetail')}
-          // marker={store.incidentDetail}
+            // marker={store.incidentDetail}
           />
         </main>
       </section>

src/store/useDaHuaStore.ts

@@ -1,37 +1,61 @@
 import { defineStore } from 'pinia';
 
-import { DAHUALogin, DAHUALoginParams, LoginResponse,DAHUAKeepAlive,DAHUAUserInfo,DAHUAInfomation,DAHUACreateMeet,DAHUADeleteMeet,DAHUAMeetingUser,
-  DAHUADevice,DAHUAMeetingMember,MeetingResponse,DAHUAUserObj } from '@/api/dahua';
+import {
+  DAHUALogin,
+  DAHUALoginParams,
+  LoginResponse,
+  DAHUAKeepAlive,
+  DAHUAUserInfo,
+  DAHUAInfomation,
+  DAHUACreateMeet,
+  DAHUADeleteMeet,
+  DAHUAMeetingUser,
+  DAHUADevice,
+  DAHUAMeetingMember,
+  MeetingResponse,
+  DAHUAUserObj,
+} from '@/api/dahua';
 import isString from 'lodash/isString';
 import { parseStr } from '@/utils';
 import md5 from 'crypto-js/md5';
 import { DA_HUA, DA_HUA_URL_PREFIX } from '@/constants/constants';
-import hex from 'crypto-js/format-hex';
 import { ElMessage } from 'element-plus';
 
 export interface DaHuaStateType {
-  dhuser: object
+  dahuaUserVisible: boolean;
+  dhuser: object;
+  timer: NodeJS.Timer | null;
+  dhToken: string;
 }
 
 export interface DaHuaActionsType {
   DAHUALogin(): void;
   KEEPAlive(): void;
-  DAHUAUserInfo(): void;
+  DAHUAUserInfo(): Promise<any>;
   DAHUAInfomation(): void;
-  DAHUAUserObj(): void;
+  DAHUAUserObj(id: string): Promise<any>;
+  DAHUAMeetingMember(obj: any): Promise<any>;
+  DAHUADeviceList(id: string): Promise<any>;
+  DAHUADeleteMeet(id: string): Promise<any>;
+  DAHUAMeetingUser(id: string): void;
+  DAHUACreateMeet(user: any): Promise<any>;
 }
 
 export default defineStore<'daHua', DaHuaStateType, {}, DaHuaActionsType>(
   'daHua',
   {
     state: () => ({
-        dhuser:{},
-        deviceUser:{}
+      dahuaUserVisible: false,
+      dhuser: {},
+      deviceUser: {},
+      timer: null,
+      dhToken: localStorage.getItem('DAHUA_token') ?? '',
     }),
     actions: {
       async DAHUALogin() {
         try {
           const { password, username } = DA_HUA;
+
           const firstLoginRes = await fetch(
             `${DA_HUA_URL_PREFIX}/videoService/accounts/authorize`,
             {
@@ -70,137 +94,112 @@ export default defineStore<'daHua', DaHuaStateType, {}, DaHuaActionsType>(
           const next = isString(data)
             ? parseStr<LoginResponse>(data)
             : data ?? {};
-          localStorage.setItem('DAHUA_token', next.token);
+          this.dhToken = next.token ?? '';
+          localStorage.setItem('DAHUA_token', next.token ?? '');
           localStorage.setItem(
             'DAHUA_userId',
             JSON.stringify(next.userId || ''),
           );
+          this.timer && clearInterval(this.timer);
           this.KEEPAlive();
         } catch (err) {
-          console.log(err);
           ElMessage.error({
             message: '大华应急指挥调度实战平台鉴权失败, 请尝试刷新页面重试',
           });
         }
       },
-      async KEEPAlive(){
-        const dahuaToken = localStorage.getItem('DAHUA_token').replace('"','');
-        // const dahuaToken = '5269850340392960_c63314d9429094389d84166a6d888338647bf98afd0c10d6f23bf696a84d439cd50d2efd7260977a26023391617a50343cf5125fc523acc8a1bb1b12191bf188';
-        console.log(dahuaToken);
-        const res = await DAHUAKeepAlive({
-            token:dahuaToken
-        });
+      async KEEPAlive() {
         const that = this;
-        setTimeout(function() {
-          that.KEEPAlive();
-      }, 20000);
+        this.timer = setInterval(() => {
+          DAHUAKeepAlive({
+            token: that.dhToken,
+          });
+        }, 20000);
       },
-      async DAHUAUserInfo(){
-        const dahuaToken = localStorage.getItem('DAHUA_token').replace('"','');
+      async DAHUAUserInfo() {
+        const dahuaToken = localStorage.getItem('DAHUA_token') ?? '';
         const res = await DAHUAUserInfo({
-          token:dahuaToken
-        });   
-        return res
+          token: dahuaToken,
+        });
+        return res;
       },
-      async DAHUAInfomation(){
-        const dahuaToken = localStorage.getItem('DAHUA_token').replace('"','');
+      async DAHUAInfomation() {
         const res = await DAHUAInfomation({
-            page: 1,
-            pageSize: 1000,
-            condition: {},
-            keyCondition: {},
-            token:dahuaToken
-          });   
-          return res;
+          page: 1,
+          pageSize: 1000,
+          condition: {},
+          keyCondition: {},
+          token: this.dhToken,
+        });
+        return res;
       },
-      async DAHUACreateMeet(user){
-        const dahuaToken = localStorage.getItem('DAHUA_token').replace('"','');
-        // console.log(user.userName);
+      async DAHUACreateMeet(user) {
         const res = await DAHUACreateMeet({
-          masterName : user.userName,
-          masterId : user.userCode,
-          masterNumber : user.userPhone,
-          region : user.paasId,
-          mode : 'group',
-          name : '11111',
-          record : true,
-          type : 'video',
-          token : dahuaToken
-          });   
-          const next = isString(res)
-          ? parseStr<MeetingResponse>(res)
-          : res ?? {};
-          console.log(next);
-          return next
+          masterName: user.userName,
+          masterId: user.userCode,
+          masterNumber: user.userPhone,
+          region: user.paasId,
+          mode: 'group',
+          name: '11111',
+          record: true,
+          type: 'video',
+          token: this.dhToken,
+        });
+        return isString(res) ? parseStr<MeetingResponse>(res) : res ?? {};
       },
 
-      async DAHUAMeetingUser(id){
-        console.log(id);
-        const dahuaToken = localStorage.getItem('DAHUA_token').replace('"','');
-        // console.log(user.userName);
-        const res = await DAHUAMeetingUser({
-              token: dahuaToken,
-              meetId: id
-          });   
-
-       console.log(res);
+      async DAHUAMeetingUser(id) {
+        try {
+          await DAHUAMeetingUser({
+            token: this.dhToken,
+            meetId: id,
+          });
+        } catch (error) {}
       },
 
-      async DAHUADeleteMeet(id){
-        console.log(id);
-        const dahuaToken = localStorage.getItem('DAHUA_token').replace('"','');
-        // console.log(user.userName);
-        const res = await DAHUADeleteMeet({
-              token: dahuaToken,
-              meetId: id
-          });   
-       console.log(res);
+      async DAHUADeleteMeet(id) {
+        try {
+          await DAHUADeleteMeet({
+            token: this.dhToken,
+            meetId: id,
+          });
+        } catch (error) {}
       },
 
       //设备列表
-      async DAHUADeviceList(id){
-        const dahuaToken = localStorage.getItem('DAHUA_token').replace('"','');
-        // console.log(dahuaToken);
+      async DAHUADeviceList(id) {
         const res = await DAHUADevice({
-          token: dahuaToken,
+          token: this.dhToken,
           nodeType: 1,
-          typeCode : '01;1;ALL',
-          page : 1,
-          pageSize : 100,
-          id : id
-      });
-      console.log(res.results);
-      return res;
+          typeCode: '01;1;ALL',
+          page: 1,
+          pageSize: 100,
+          id: id,
+        });
+        return res;
       },
 
-      async DAHUAMeetingMember(obj){
-        const dahuaToken = localStorage.getItem('DAHUA_token').replace('"','');
-        console.log(dahuaToken);
-        const res = await DAHUAMeetingMember(
-          {
-            obj:{id:obj.meetId,
+      async DAHUAMeetingMember(obj) {
+        await DAHUAMeetingMember({
+          obj: {
+            id: obj.meetId,
             inviteId: obj.user.userCode,
             inviteName: obj.user.userName,
             inviteNumber: obj.user.userPhone,
-            member:obj.member
+            member: obj.member,
           },
-            token:dahuaToken
-          });
+          token: this.dhToken,
+        });
       },
 
-      async DAHUAUserObj(id){
-        console.log(id);
-        const dahuaToken = localStorage.getItem('DAHUA_token').replace('"','');
-        // console.log(user.userName);
+      async DAHUAUserObj(id) {
         const res = await DAHUAUserObj({
-              token: dahuaToken,
-              id: id
-          });   
-          // this.deviceUser = res;
-         return res;
+          token: this.dhToken,
+          id,
+        });
+        // this.deviceUser = res;
+        return res;
       },
-
-      
     },
   },
 );

src/store/useMarkerStore.ts

@@ -3,7 +3,11 @@ import {
   IncidentItem,
   IncidentItemDetail,
 } from '@/api/incident';
-import { getAllResources, getAllsingleDevice } from '@/api/resource';
+import {
+  getAllResources,
+  getAllsingleDevice,
+  SingleDeviceItem,
+} from '@/api/resource';
 import {
   PENDING_DISPOSAL_INCIDENT,
   PENDING_INCIDENT,
@@ -12,16 +16,20 @@ import {
   WARNING_INCIDENT,
   SINGLE_PAWN,
   // EMERGENCY_TEAM,
-  
 } from '@/components/MarkerMap/constants';
+import { type } from 'os';
 import { defineStore } from 'pinia';
 
-export interface MarkerType
-  extends NonNullable<IncidentItemDetail['baseInfo']> {
+type AllResources = NonNullable<IncidentItemDetail['baseInfo']> &
+  NonNullable<SingleDeviceItem>;
+
+type Simply<T> = { [K in keyof T]: T[K] };
+
+export interface MarkerType extends Simply<AllResources> {
   locations?: string;
   marker?: any;
   popup?: any;
-  [key: string]: any;
+  // [key: string]: any;
 }
 
 export interface MarkerStateType {
@@ -32,7 +40,7 @@ export interface MarkerStateType {
   emergencyVehicles: MarkerType[];
   emergencyTeam: MarkerType[];
   emergencyWarehouse: MarkerType[];
-  singleDevice: MarkerType[];
+  singleDevice: SingleDeviceItem[];
   /** 详情页面 点击监控点位 打开视频 */
   livevideovisible: boolean;
   livevideos: MarkerType[];
@@ -60,7 +68,7 @@ export default defineStore<'marker', MarkerStateType, {}, MainActionsType>(
       videoSurveillance: VIDEO_SURVEILLANCE,
       emergencyVehicles: [],
       emergencyTeam: [],
-      singleDevice: SINGLE_PAWN,
+      singleDevice: [],
       emergencyWarehouse: [],
       livevideos: [],
       livevideovisible: false,
@@ -79,19 +87,17 @@ export default defineStore<'marker', MarkerStateType, {}, MainActionsType>(
           this.toggleLoading();
         }
       },
-      async getAllsingleDevice() { 
+      async getAllsingleDevice() {
         try {
           this.toggleLoading();
           const { data } = await getAllsingleDevice();
-          
+
           this.singleDevice = [];
-         
-          Object.values(data).forEach(datap => {
-            datap["locations"] = `${datap.gpsX},${datap.gpsY}`,
-            this.singleDevice.push(datap);
-          });
-           console.log(this.singleDevice);
 
+          this.singleDevice = Object.values(data).map((item) => ({
+            ...item,
+            locations: `${item.gpsX},${item.gpsY}`,
+          }));
         } finally {
           this.toggleLoading();
         }

src/utils/request.ts

@@ -2,7 +2,8 @@ import axios, { AxiosRequestConfig } from 'axios';
 import qs from 'querystring';
 import { ElMessage } from 'element-plus';
 import useMainStore from '@/store/useMainStore';
-import { BaseLoginUrl } from '@/constants/constants';
+import { BaseLoginUrl, DA_HUA_URL_PREFIX } from '@/constants/constants';
+import { useDaHuaStore } from '@/store';
 
 const baseURL =
   process.env.NODE_ENV === 'production'
@@ -11,6 +12,7 @@ const baseURL =
 
 const CancelToken = axios.CancelToken;
 const source = CancelToken.source();
+let timer: NodeJS.Timeout;
 
 axios.interceptors.request.use((config) => {
   const main = useMainStore();
@@ -67,6 +69,19 @@ axios.interceptors.response.use(
   },
   (error) => {
     // ElMessage.error({ message: '系统异常, 请稍后重试!' });
+    const {
+      status,
+      config: { url },
+    } = error.response;
+    if (status === 401 && url?.includes(DA_HUA_URL_PREFIX)) {
+      clearTimeout(timer);
+      const dahuaStore = useDaHuaStore();
+      dahuaStore.timer && clearInterval(dahuaStore.timer);
+
+      timer = setTimeout(() => {
+        dahuaStore.DAHUALogin();
+      }, 1000);
+    }
     throw Error(error);
   },
 );
@@ -82,7 +97,8 @@ export default function request<T>(
     headers: {
       Accept: 'application/json',
       'Content-Type': 'application/json',
-      Authorization: 'Bearer ' + window.localStorage.getItem('Authorization'),
+      Authorization:
+        'Bearer ' + window.localStorage.getItem('Authorization') ?? '',
       ...confifg.headers,
     },
   });

src/views/IncidentDetail/EmergencyLinkageCard/index.tsx

@@ -8,12 +8,17 @@ import sjt_1 from '@/assets/icons/detail/sjt_1@2x.png';
 import rhtx from '@/assets/icons/detail/rhtx@2x.png';
 // @ts-ignore
 import dbpt from '@/assets/icons/detail/dbpt@2x.png';
-import { useIncidentStore } from '@/store';
+import { useDaHuaStore, useIncidentStore } from '@/store';
 
 export default defineComponent({
   name: 'EmergencyLinkage',
   setup() {
     const store = useIncidentStore();
+    const dahuaStore = useDaHuaStore();
+
+    const handleDaHuaSystem = () => {
+      dahuaStore.dahuaUserVisible = true;
+    };
 
     return () => (
       <Card cardType="emergency-linkage">
@@ -24,7 +29,11 @@ export default defineComponent({
             { label: '电话会议', src: sjt },
             { label: '单兵系统', src: dbpt },
           ].map((item) => (
-            <div class="linkage-item">
+            <div
+              class="linkage-item"
+              onClick={() => {
+                if (item.label === '融合通信平台') handleDaHuaSystem();
+              }}>
               <img src={item.src} alt="" />
               <span>{item.label}</span>
             </div>

src/views/IncidentDetail/LiveVideoCard/index.tsx

@@ -11,8 +11,8 @@ export default defineComponent({
 
     return () => (
       <>
-        {markerStore.livevideos.map((item) => (
-          <Popup key={item.location}>
+        {markerStore.livevideos.map((item, key) => (
+          <Popup key={item.locations || key}>
             <video
               controls
               src="https://www.w3school.com.cn/i/movie.ogg"></video>

src/views/IncidentDetail/index.scss

@@ -8,6 +8,15 @@
   width: px2rem(481px * 2) * 2 + px2rem(25px * 2);
 
   animation: fadeInLeft 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+
+  &.right {
+    right: 0;
+    animation: fadeInRight 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+    .live-video-container {
+      left: unset;
+      right: px2rem(30px * 2);
+    }
+  }
 }
 
 .live-video-container {
@@ -49,15 +58,18 @@
     &:nth-child(5) {
       margin-right: px2rem(35px);
     }
+
     &:nth-child(5),
     &:nth-child(6) {
       margin-bottom: unset;
     }
+
     width: px2rem(445px * 2);
     height: px2rem(233.5px * 2);
     display: flex;
     justify-content: center;
     align-items: center;
+
     video {
       max-height: 100%;
       max-width: 100%;
@@ -72,6 +84,7 @@
   position: absolute;
   width: 100%;
   height: 100vh;
+
   .detail-left,
   .detail-right {
     position: absolute;
@@ -88,11 +101,13 @@
     width: calc(px2rem(470px * 2) * 2 + px2rem(21px * 2));
     // height: calc(px2rem(472px) * 2 + px2rem(21px));
   }
+
   .detail-right {
     right: px2rem(30px * 2);
     width: px2rem(939px * 2);
     // height: calc(px2rem(554px) + px2rem(390px) + px2rem(21px));
   }
+
   .echarts {
     width: px2rem(642px * 2);
     height: px2rem(887px * 2);
@@ -101,6 +116,7 @@
     left: 50%;
     transform: translateX(-50%);
   }
+
   .card-container {
     // position: absolute;
     // top: px2rem(83px);
@@ -108,52 +124,64 @@
     &-bg-incident-info {
       // left: px2rem(30px);
       margin-right: px2rem(21px * 2);
+
       .info-container {
         display: flex;
         flex-direction: column;
         align-items: start;
         justify-content: center;
       }
+
       .info-item {
         display: flex;
         align-items: center;
         padding-bottom: px2rem(52px);
+
         &:last-child {
           padding-bottom: 0;
         }
+
         line-height: px2rem(50px * 2);
         height: px2rem(50px * 2);
         font-size: px2rem(18px * 2);
         flex: 1;
         width: 100%;
+
         .info-item-lebel {
           padding: 0 px2rem(20px * 2);
           border-top-left-radius: px2rem(50px * 2);
           border-bottom-left-radius: px2rem(50px * 2);
           display: flex;
           align-items: center;
+
           img {
             min-width: 13px;
             min-height: 13px;
             width: px2rem(18px * 2);
             height: px2rem(18px * 2);
           }
+
           span {
             padding-left: px2rem(13px * 2);
           }
+
           &[data-idx='0'] {
             background: linear-gradient(to right, #035fd8, #1acfff);
           }
+
           &[data-idx='1'] {
             background: linear-gradient(to right, #ff8b45, #f6b35c);
           }
+
           &[data-idx='2'] {
             background: linear-gradient(to right, #8d48e9, #d789ff);
           }
+
           &[data-idx='3'] {
             background: linear-gradient(to right, #05b382, #48e9c2);
           }
         }
+
         .info-item-value {
           flex: 1;
           padding: 0 px2rem(20px * 2);
@@ -166,10 +194,12 @@
         }
       }
     }
+
     &-bg-command-chain {
       // left: px2rem(521px);
       .command-chain-container {
         position: relative;
+
         .chain-item {
           position: absolute;
           left: 50%;
@@ -187,11 +217,13 @@
           flex-direction: column;
           align-items: center;
           justify-content: center;
+
           .title {
             font-size: px2rem(17px * 2);
             color: #feb459;
             padding-bottom: px2rem(13px * 2);
           }
+
           .desc {
             text-align: center;
             box-sizing: border-box;
@@ -202,6 +234,7 @@
             padding: 0 px2rem(6px * 2);
             font-size: px2rem(13px * 2);
           }
+
           .logo {
             position: absolute;
             width: px2rem(40px * 2);
@@ -214,6 +247,7 @@
             transform: translateX(-50%)
               translateY(px2rem(math.div(65px * 2, 2)) - px2rem(28px * 2));
           }
+
           &::after {
             content: '';
             position: absolute;
@@ -225,6 +259,7 @@
             border-left: px2rem(math.div(165px * 2, 2)) solid transparent;
             border-right: px2rem(math.div(165px * 2, 2)) solid transparent;
           }
+
           &:nth-child(3),
           &:nth-child(2) {
             bottom: px2rem((40px - 40px) * 2);
@@ -235,9 +270,11 @@
             border-top-right-radius: 0;
             border-color: #33d3a8;
             transform: unset;
+
             .title {
               color: #33d3a8;
             }
+
             .logo {
               bottom: unset;
               top: px2rem(-40px * 2);
@@ -245,8 +282,10 @@
               transform: translateX(-50%)
                 translateY(px2rem(math.div(-65px * 2, 2)) + px2rem(24px * 2));
             }
+
             border-bottom-left-radius: 10px;
             border-bottom-right-radius: 10px;
+
             &::after {
               position: absolute;
               left: -2px;
@@ -258,13 +297,16 @@
               border-right: px2rem(math.div(165px * 2, 2)) solid transparent;
             }
           }
+
           &:nth-child(3) {
             left: unset;
             right: px2rem(20px * 2);
             border-color: #1bbbf8;
+
             .title {
               color: #1bbbf8;
             }
+
             &::after {
               border-bottom-color: #1bbbf8;
             }
@@ -272,11 +314,13 @@
         }
       }
     }
+
     &-bg-incident-plan {
       // top: px2rem(482px + 83px);
       // left: px2rem(30px);
       margin-top: px2rem(21px * 2);
       margin-right: px2rem(21px * 2);
+
       .plan-container {
         .el-checkbox__inner {
           width: px2rem(16px * 2);
@@ -284,16 +328,19 @@
           height: px2rem(16px * 2);
           min-height: 14px;
           background-color: transparent;
+
           &::after {
             width: px2rem(10px);
             height: px2rem(20px);
             left: px2rem(8px);
           }
         }
+
         .el-checkbox__label {
           color: #fff;
           padding-left: px2rem(28px);
         }
+
         .plan-item {
           display: flex;
           align-items: center;
@@ -302,6 +349,7 @@
           text-overflow: ellipsis;
           white-space: nowrap;
           padding-bottom: px2rem(20px);
+
           & > span {
             font-size: px2rem(18px * 2);
             font-weight: 400;
@@ -309,6 +357,7 @@
         }
       }
     }
+
     &-bg-emergency-linkage {
       // top: px2rem(482px + 83px);
       // left: px2rem(521px);
@@ -318,16 +367,19 @@
         display: flex;
         flex-wrap: wrap;
         align-items: center;
+
         .linkage-item {
           width: 50%;
           display: flex;
           flex-direction: column;
           align-items: center;
           font-size: px2rem(18px * 2);
+
           img {
             width: px2rem(117px * 2);
             height: px2rem(102px * 2);
           }
+
           span {
             margin-top: px2rem(10px * 2);
             margin-bottom: px2rem(10px * 2);
@@ -336,9 +388,11 @@
         }
       }
     }
+
     &-bg-execution-log {
       // right: px2rem(22px);
       position: relative;
+
       &::before {
         content: '';
         position: absolute;
@@ -351,12 +405,15 @@
         transform: translateX(-50%);
         z-index: -1;
       }
+
       .execution-log-container {
         padding: px2rem(20px * 2) 0;
+
         .log-item {
           position: relative;
           margin-bottom: px2rem(40px * 2);
           min-height: px2rem(48px * 2);
+
           .log-label {
             font-size: px2rem(18px * 2);
             font-weight: 400;
@@ -368,6 +425,7 @@
             width: calc(50% - 42px);
             position: absolute;
             left: 0;
+
             & > span {
               justify-content: right;
               display: flex;
@@ -394,6 +452,7 @@
             border-bottom-left-radius: px2rem(48px * 2);
             padding-left: px2rem(58px * 2);
             padding-right: px2rem(10px * 2);
+
             .logo-icon {
               position: absolute;
               height: px2rem(44px * 2);
@@ -405,10 +464,12 @@
               display: flex;
               align-items: center;
               justify-content: center;
+
               .el-icon {
                 font-size: px2rem(40px);
               }
             }
+
             &::before,
             &::after {
               content: '';
@@ -417,24 +478,29 @@
               border-left: px2rem(18px * 2) solid transparent;
               border-right: px2rem(18px * 2) solid transparent;
             }
+
             &::before {
               border-top: px2rem(24px * 2) solid #3db3ea;
             }
+
             &::after {
               bottom: 0;
               border-bottom: px2rem(24px * 2) solid #3db3ea;
             }
           }
+
           &.log-item-3,
           &.log-item-1 {
             .log-label {
               left: unset;
               right: 0;
               text-align: left;
-              &>span{
+
+              & > span {
                 justify-content: left;
               }
             }
+
             .log-time {
               left: unset;
               right: 50%;
@@ -449,43 +515,53 @@
               padding-left: px2rem(10px * 2);
               padding-right: px2rem(58px * 2);
               background-color: #09b283;
+
               .logo-icon {
                 top: px2rem(2px * 2);
                 left: unset;
                 right: px2rem(2px * 2);
                 border-radius: px2rem(44px * 2);
               }
+
               &::before,
               &::after {
                 content: '';
                 right: unset;
                 left: px2rem(-18px * 2);
               }
+
               &::before {
                 border-top-color: #09b283;
               }
+
               &::after {
                 border-bottom-color: #09b283;
               }
             }
           }
+
           &.log-item-3 {
             .log-time {
               background-color: #eaa33f;
+
               &::before {
                 border-top-color: #eaa33f;
               }
+
               &::after {
                 border-bottom-color: #eaa33f;
               }
             }
           }
+
           &.log-item-2 {
             .log-time {
               background-color: #c172f9;
+
               &::before {
                 border-top-color: #c172f9;
               }
+
               &::after {
                 border-bottom-color: #c172f9;
               }
@@ -494,10 +570,12 @@
         }
       }
     }
+
     &-bg-live-monitoring {
       // top: px2rem(564px + 83px);
       // right: px2rem(22px);
       margin-top: px2rem(48px);
+
       .el-button {
         position: absolute;
         z-index: 1;
@@ -509,22 +587,27 @@
         height: px2rem(80px);
         width: px2rem(80px);
         font-size: px2rem(34px);
+
         &:hover {
           background-color: var(--el-carousel-arrow-hover-background);
         }
+
         &:first-child {
           left: 0;
         }
       }
+
       .live-container {
         overflow-x: hidden;
         overflow-y: hidden;
+
         > div {
           width: calc(px2rem(419px) + 10px);
           height: 100%;
           display: flex;
           transition: transform 0.5s;
         }
+
         .live-item {
           width: px2rem(419px);
           // height: px2rem(285px);
@@ -534,6 +617,7 @@
           align-items: center;
           justify-content: center;
           flex: 1;
+
           img,
           video {
             max-width: 100%;

src/views/IncidentDetail/index.tsx

@@ -2,6 +2,7 @@ import { onMounted, onUnmounted, defineComponent, ref, watchEffect } from 'vue';
 import { useRoute } from 'vue-router';
 import {
   useCommonStore,
+  useDaHuaStore,
   useIncidentStore,
   useMainStore,
   useMarkerStore,
@@ -18,7 +19,7 @@ import { watch } from 'fs';
 import { isEmpty } from 'lodash';
 import isString from 'lodash/isString';
 import { NeedsReadUser, NeedsReadUserName } from '@/api/common';
-import { BaseReg } from "@/constants/constants";
+import { BaseReg } from '@/constants/constants';
 
 export default defineComponent({
   name: 'IncidentDetail',
@@ -28,6 +29,7 @@ export default defineComponent({
     const commonStore = useCommonStore();
     const mainStore = useMainStore();
     const markerStore = useMarkerStore();
+    const daHuaStore = useDaHuaStore();
     const route = useRoute();
 
     const liveVideoRef = ref<HTMLElement>();
@@ -57,8 +59,10 @@ export default defineComponent({
                 // @ts-ignore
                 store.incidentDetail.process[idx].des =
                   // @ts-ignore
-                  (store.incidentDetail.process[idx].des.replace(/\+\+\+\+/g,'') ??
-                    '') +
+                  (store.incidentDetail.process[idx].des.replace(
+                    /\+\+\+\+/g,
+                    '',
+                  ) ?? '') +
                   '>>>>' +
                   NeedsReadUserName.map((user) => user).join(',');
                 // (m.messageReadInfoList
@@ -101,11 +105,26 @@ export default defineComponent({
               <EmergencyLinkageCard />
             </div>
           )}
-          <div class="detail-right">
-            <ExecutionLogCard />
-            <LiveMonitoringCard />
-          </div>
+
+          {!daHuaStore.dahuaUserVisible && (
+            <div class="detail-right">
+              <ExecutionLogCard />
+              <LiveMonitoringCard />
+            </div>
+          )}
         </div>
+        {/*大华 相关的通讯录可以放这里*/}
+        {/*{daHuaStore.dahuaUserVisible && (*/}
+        {/*  <div ref={liveVideoRef} class="live-video-container-left right">*/}
+        {/*    <div class="live-video-container">*/}
+        {/*      <LiveVideoCard />*/}
+        {/*      <div*/}
+        {/*        class="live-video-close"*/}
+        {/*        onClick={() => (daHuaStore.dahuaUserVisible = false)}*/}
+        {/*      />*/}
+        {/*    </div>*/}
+        {/*  </div>*/}
+        {/*)}*/}
 
         {markerStore.livevideovisible && (
           <div ref={liveVideoRef} class="live-video-container-left">