fix: dahua user system

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/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';
@@ -81,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;
 
@@ -242,54 +261,31 @@ export default defineComponent({
         }
 
         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: '该点位已经打开~' });
               }
-            },
-          );
+            }
+          });
       }
     };
 
@@ -461,7 +457,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,

src/store/useDaHuaStore.ts

@@ -22,6 +22,7 @@ import { DA_HUA, DA_HUA_URL_PREFIX } from '@/constants/constants';
 import { ElMessage } from 'element-plus';
 
 export interface DaHuaStateType {
+  dahuaUserVisible: boolean;
   dhuser: object;
   timer: NodeJS.Timer | null;
   dhToken: string;
@@ -44,6 +45,7 @@ export default defineStore<'daHua', DaHuaStateType, {}, DaHuaActionsType>(
   'daHua',
   {
     state: () => ({
+      dahuaUserVisible: false,
       dhuser: {},
       deviceUser: {},
       timer: null,

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">