fix: update word amd live video

src/components/MarkerMap/index.tsx

@@ -199,12 +199,18 @@ export default defineComponent({
             () => {
               if (route.query.id) {
                 markerStore.livevideovisible = true;
-                if (
-                  markerStore.livevideos.findIndex(
-                    (item) => item.location === marker.location,
-                  ) < 0
-                ) {
-                  markerStore.livevideos.push(marker);
+                const idx = markerStore.livevideos.findIndex(
+                  (item) => item.location === marker.location,
+                );
+                if (idx < 0) {
+                  markerStore.livevideos.length === 6
+                    ? (markerStore.livevideos = [
+                        marker,
+                        ...markerStore.livevideos.slice(1, 6),
+                      ])
+                    : markerStore.livevideos.push(marker);
+                } else {
+                  ElMessage.info({ message: '该点位已经打开~' });
                 }
               }
             },
@@ -496,10 +502,10 @@ export default defineComponent({
       () => props.marker?.baseInfo?.locations,
       (next) => {
         if (next && !state.positions.includes(next)) {
-          handleSetDetailMarker({
-            location: '118.288721,33.951047',
-            name: '中心庄',
-          });
+          // handleSetDetailMarker({
+          //   location: '118.288721,33.951047',
+          //   name: '中心庄',
+          // });
         }
       },
     );

src/store/mock.ts

@@ -56,8 +56,8 @@ export const zhdd_incident_type = [
   { dictLabel: '社会安全事件', dictValue: '4' },
 ];
 export const zhdd_incident_level = [
-  { dictLabel: 'I', dictValue: '1' },
-  { dictLabel: 'II', dictValue: '2' },
-  { dictLabel: 'III', dictValue: '3' },
-  { dictLabel: 'IV', dictValue: '4' },
+  { dictLabel: 'I 级', dictValue: '1' },
+  { dictLabel: 'II 级', dictValue: '2' },
+  { dictLabel: 'III 级', dictValue: '3' },
+  { dictLabel: 'IV 级', dictValue: '4' },
 ];

src/views/HomePage/MessageCard/index.tsx

@@ -34,7 +34,7 @@ export default defineComponent({
                   </span>
                 </div>
                 <div class="desc">
-                  {item.source}
+                  来源：
                   {
                     commonStore.globalDict['zhdd_incident_source']?.find(
                       (i) => i.dictValue.toString() === `${item.source}`,

src/views/IncidentDetail/EmergencyLinkageCard/index.tsx

@@ -19,9 +19,9 @@ export default defineComponent({
       <Card cardType="emergency-linkage">
         <div class="linkage-chain-container">
           {[
-            { label: '省交通应急平台', src: sjt_1 },
+            { label: '视频会议', src: sjt_1 },
             { label: '融合通信平台', src: rhtx },
-            { label: '市交通应急平台', src: sjt },
+            { label: '电话会议', src: sjt },
             { label: '单兵系统', src: dbpt },
           ].map((item) => (
             <div class="linkage-item">

src/views/IncidentDetail/LiveMonitoringCard/index.tsx

@@ -1,16 +1,73 @@
 import Card from '@/components/Card';
 import { useIncidentStore } from '@/store';
-import { computed, defineComponent, ref } from 'vue-demi';
+import { time } from 'console';
+import {
+  computed,
+  defineComponent,
+  onMounted,
+  onUnmounted,
+  ref,
+} from 'vue-demi';
 
 export default defineComponent({
   name: 'LiveMonitoringCard',
   setup() {
     const store = useIncidentStore();
 
+    const liveRef = ref<HTMLElement>();
+    const timer = ref();
+    const current = ref(0);
+
+    const length = computed(
+      () =>
+        (store.incidentDetail?.baseInfo?.pic?.split(',') ?? []).length +
+        (store.incidentDetail?.baseInfo?.video?.split(',') ?? []).length,
+    );
+
+    onMounted(() => {
+      let itemWidth = 0;
+      let liveWidth = 0;
+      let contentWidth = 0;
+      timer.value = setInterval(() => {
+        if (liveRef.value) {
+          itemWidth =
+            itemWidth ||
+            (liveRef.value?.querySelector('.live-item')?.scrollWidth ?? 0);
+          contentWidth =
+            contentWidth || (liveRef.value.parentElement?.clientWidth ?? 0);
+          liveWidth = liveWidth || (liveRef.value?.scrollWidth ?? 0);
+          const count = Math.floor(liveWidth / (contentWidth || 1));
+
+          const transformCount = length.value / count || 1;
+
+          current.value += 1;
+
+          if (current.value < transformCount) {
+            liveRef.value.style.transform = `translateX(-${
+              itemWidth * count * current.value
+            }px)`;
+          } else {
+            current.value = 0;
+            liveRef.value.style.transform = `translateX(0px)`;
+          }
+        }
+      }, 2000);
+    });
+
+    onUnmounted(() => {
+      clearInterval(timer.value);
+    });
+
     return () => (
       <Card cardType="live-monitoring">
+        {/* <el-button icon="el-icon-arrow-left" type="info" circle /> */}
+        {/* <el-button icon="el-icon-arrow-right" type="info" circle /> */}
         <div class="live-container">
-          <div style={{ width: 'calc((1.0911458333rem + 10px) * 6) ' }}>
+          <div
+            style={{
+              width: `calc((1.0911458333rem + 10px) * ${length.value}) `,
+            }}
+            ref={liveRef}>
             {(store.incidentDetail?.baseInfo?.pic?.split(',') ?? []).map(
               (item) => (
                 <div class="live-item">

src/views/IncidentDetail/LiveVideoCard/index.tsx

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

src/views/IncidentDetail/index.scss

@@ -6,6 +6,7 @@
   z-index: 1;
   height: 100%;
   width: px2rem(481px) * 2 + px2rem(25px);
+
   animation: fadeInLeft 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
 }
 
@@ -432,13 +433,28 @@
       // top: px2rem(564px + 83px);
       // right: px2rem(22px);
       margin-top: px2rem(21px);
+      .el-button {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        right: 0;
+        transition: var(--el-transition-duration);
+        background-color: var(--el-carousel-arrow-background);
+        &:hover {
+          background-color: var(--el-carousel-arrow-hover-background);
+        }
+        &:first-child {
+          left: 0;
+        }
+      }
       .live-container {
-        overflow-x: auto;
+        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);

src/views/IncidentDetail/index.tsx

@@ -9,6 +9,7 @@ import LiveMonitoringCard from './LiveMonitoringCard';
 import ExecutionLogCard from './ExecutionLogCard';
 import LiveVideoCard from './LiveVideoCard';
 import './index.scss';
+import { watch } from 'fs';
 
 export default defineComponent({
   name: 'IncidentDetail',
@@ -19,7 +20,7 @@ export default defineComponent({
     const markerStore = useMarkerStore();
     const route = useRoute();
 
-    const livevisible = ref(false);
+    const liveVideoRef = ref<HTMLElement>();
 
     onMounted(() => {
       commonStore.getGlobalDict('zhdd_incident_type');
@@ -27,12 +28,18 @@ export default defineComponent({
       commonStore.getGlobalDict('zhdd_org_upload');
       commonStore.getGlobalDict('zhdd_incident_level');
       store.getIncidentItem(route.query.id as string);
+      liveVideoRef.value?.addEventListener('click', (el: MouseEvent) => {
+        if (el.target && liveVideoRef.value?.contains(el.target as Node)) {
+          console.log('q1111');
+        }
+      });
     });
     onUnmounted(() => {
       store.incidentDetail = {};
       markerStore.livevideovisible = false;
       markerStore.livevideos = [];
     });
+
     return () => (
       <>
         <div class="incident-detail-page-container">
@@ -51,7 +58,7 @@ export default defineComponent({
         </div>
 
         {markerStore.livevideovisible && (
-          <div class="live-video-container-left">
+          <div ref={liveVideoRef} class="live-video-container-left">
             <div class="live-video-container">
               <LiveVideoCard />
             </div>