revert：逻辑

src/packages/components/Charts/ConfinedSpace/AlarmNowList/index.vue

@@ -5,6 +5,9 @@
       <div v-for="(item, index) in option.dataset" class="detail flex_column" :key="index">
         <div class="flex_v cursor" :style="!showRankNum ? { paddingLeft: 0 } : { paddingLeft: '24px' }"
           @click="handleOpenDialog(item)">
+          <div v-if="index === 0 && showRankNum" class="levelOneIcon flex_c">{{ index + 1 }}</div>
+          <div v-else-if="index === 1 && showRankNum" class="levelTwoIcon flex_c">{{ index + 1 }}</div>
+          <div v-else-if="showRankNum" class="levelOtherIcon flex_c">{{ index + 1 }}</div>
           <div class="item_content">
             <div class="item_header flex">
               <div class="item_level_text">{{ item.level }}</div>
@@ -35,32 +38,81 @@
         <n-spin size="large" />
       </div>
       <n-grid v-else cols="24" x-gap="12" style="overflow-y: auto; padding-bottom: 12px">
+        <!-- <div class="enterBtn" @click="handleMeetingBtnClick">会商</div> -->
+        <!-- 左侧详情 -->
         <n-gi :span="14">
           <!-- 基础信息 -->
           <div class="detail-item">
             <label>报警时间：</label>
-            <span>
+            <span>{{ convertTimestampToDateTime((status.selectedRow as any)?.alarmRecord.alarmTime) }}</span>
-              {{ status.selectedRow?.time }}
+          </div>
-            </span>
+          <div class="detail-item">
+            <label>处置状态：</label>
+            <span style="color: #ff9100">{{ (status.selectedRow as any)?.handleStatus }}</span>
+          </div>
+          <div class="detail-item">
+            <label>风险等级：</label>
+            <span :style="{ color: '' }">{{ (status.selectedRow as any)?.alarmRecord.riskIdentName }}</span>
           </div>
           <div class="detail-item">
             <label>报警等级：</label>
-            <span class="highlight" style="color: #ff5454">
+            <span class="highlight" style="color: #ff5454">{{
-              {{ status.selectedRow?.level }}
+              (status.selectedRow as any)?.alarmRecord.alarmLevel
-            </span>
+            }}</span>
           </div>
           <div class="detail-item">
             <label>风险描述：</label>
-            <span class="highlight">
+            <span class="highlight">{{ (status.selectedRow as any)?.alarmRecord.alarmDesc }}</span>
-              {{ status.selectedRow?.title }}
-            </span>
           </div>
           <div class="detail-item">
             <label>报警区域：</label>
-            <span>
+            <span>{{
-              {{ status.selectedRow?.dept }}
+              (status.selectedRow as any)?.pathName
-            </span>
+                .substring(1, (status.selectedRow as any)?.pathName.length)
+                .replaceAll('/', '-') + (((status.selectedRow as any)?.subareaName && (status.selectedRow as
+                  any)?.subareaName !== '') ? (status.selectedRow as any)?.subareaName : '')
+              }}</span>
           </div>
+          <div class="detail-item" style="display: flex; flex-direction: column"
+            v-if="(status.selectedRow as any)?.camerainfos.length > 0">
+            <label>警情关联设备：</label>
+            <div class="screenshot-placeholder">
+              <n-tabs type="line" animated>
+                <n-tab-pane v-for="(item, index) in (status.selectedRow as any)?.camerainfos" :name="item.deviceCode"
+                  :tab="item.deviceName">
+                  <div class="detail-item" style="display: flex; flex-direction: column">
+                    <label>报警截图：</label>
+                    <div style="display: flex">
+                      <img :src="'/awimg/' + removeProtocolIpPort((status.selectedRow as any)?.alarmRecord.originImg)"
+                        style="width: 180px; margin-right: 16px" />
+                      <img :src="'/awimg/' + removeProtocolIpPort((status.selectedRow as any)?.alarmRecord.alarmImg)"
+                        style="width: 180px" />
+                    </div>
+                  </div>
+                  <div class="detail-item" style="display: flex; flex-direction: column">
+                    <label>警情录像回放：</label>
+                    <div class="screenshot-placeholder playback-placeholder" style="width: 350px; height: 200px">
+                      <play-back :device-id="item.deviceCode" :start="new Date((status.selectedRow as any)?.startTime)"
+                        :end="new Date((status.selectedRow as any)?.endTime)"></play-back>
+                    </div>
+                  </div>
+                  <div class="detail-item" style="display: flex; flex-direction: column">
+                    <label>视频实时画面：</label>
+                    <div class="screenshot-placeholder playback-placeholder" style="width: 350px; height: 200px">
+                      <play-live :device-id="item.deviceCode"></play-live>
+                    </div>
+                  </div>
+                </n-tab-pane>
+              </n-tabs>
+              <br />
+            </div>
+          </div>
+        </n-gi>
+        <n-gi :span="10" style="height: 100%; display: flex; align-items: center">
+          <n-timeline size="medium">
+            <n-timeline-item class="timeLineClass" v-for="(item, index) in (status.selectedRow as any)?.taskLogs"
+              :key="index" type="info" :title="item.task_name" :content="item.task_detail" :time="item.task_begin" />
+          </n-timeline>
         </n-gi>
       </n-grid>
     </n-modal>
@@ -100,17 +152,44 @@ const option = shallowReactive({
   dataset: configOption.dataset
 })
 
-
+const handleChangeDevice = (value: string | number) => {
-
+  status.selectedRow.cameraId = value
-const handleOpenDialog = (row: any) => {
+  // if (status.selectedRow.alarmGroup.find(item => item.cameraId === value)) {
-  status.selectedRow = {
+  //   status.selectedRow.startTime = status.alarmGroup.find(item => item.cameraId === value).startTime
-    ...row, // 基础数据从item获取
+  //   status.selectedRow.endTime = status.alarmGroup.find(item => item.cameraId === value).endTime
-  };
+  // }
-
-  status.showDialog = true;
-  isLoading.value = false;
 }
 
+const handleOpenDialog = async (row: any) => {
+  const alarmUUID = row.alarmUUID
+
+  status.showDialog = true
+  isLoading.value = true
+  //@ts-ignore
+  axiosInstance({
+    method: 'GET',
+    url: `${window.htconfig.API_IP}aw/bigScreen/qisuo/alarmRecordDetail/${alarmUUID}`,
+
+    responseType: 'json'
+  }).then((res: any) => {
+    //@ts-ignore
+    isLoading.value = false
+
+    const result = res.value
+
+    if (result) {
+      //@ts-ignore
+      status.selectedRow = {
+        ...result,
+        cameraId: result.camerainfos[0]?.deviceCode,
+        startTime: (result.alarmRecord.alarmTime - 15 * 1000),
+        endTime: (result.alarmRecord.alarmTime + 15 * 1000)
+      }
+    }
+  })
+
+  //@ts-ignore
+}
 
 // 手动更新
 watch(
@@ -129,6 +208,32 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
   option.dataset = newData
 })
 
+const removeProtocolIpPort = (url) => {
+  // 使用正则表达式匹配并移除协议、IP地址和端口
+  return url.replace(/^(?:https?:\/\/)?(?:[\d.]+|\[[\da-fA-F:.]+\])(?::\d+)?\/?/, '');
+}
+
+const convertTimestampToTime = timestamp => {
+  const date = new Date(timestamp)
+  const hours = date.getHours().toString().padStart(2, '0')
+  const minutes = date.getMinutes().toString().padStart(2, '0')
+  const seconds = date.getSeconds().toString().padStart(2, '0')
+
+  return `${hours}:${minutes}:${seconds}`
+}
+
+const convertTimestampToDateTime = timestamp => {
+  const date = new Date(timestamp)
+  const year = date.getFullYear()
+  const month = String(date.getMonth() + 1).padStart(2, '0')
+  const day = String(date.getDate()).padStart(2, '0')
+  const hours = date.getHours().toString().padStart(2, '0')
+  const minutes = date.getMinutes().toString().padStart(2, '0')
+  const seconds = date.getSeconds().toString().padStart(2, '0')
+
+  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
+}
+
 const handleCloseDialog = () => {
   status.showDialog = false
   status.selectedRow = null
@@ -200,6 +305,23 @@ const handleCloseDialog = () => {
   align-items: center;
 }
 
+.levelOneIcon {
+  width: 18px;
+  height: 18px;
+  background: url(/src/assets/images/chart/tables/list_scroll_1_icon.png) 50% 50% / contain no-repeat;
+}
+
+.levelTwoIcon {
+  width: 18px;
+  height: 18px;
+  background: url(/src/assets/images/chart/tables/list_scroll_2_icon.png) 50% 50% / contain no-repeat;
+}
+
+.levelOtherIcon {
+  width: 18px;
+  height: 18px;
+  background: url(/src/assets/images/chart/tables/list_scroll_3_icon.png) 50% 50% / contain no-repeat;
+}
 
 .item_content {
   width: 100%;
@@ -268,6 +390,7 @@ const handleCloseDialog = () => {
 
 .info .sub-title {
   padding: 0 0 0 24px;
+  background: url(./second_level.png) 0 50%/425px 31px no-repeat;
   margin-right: 8px;
 }
 
@@ -313,5 +436,7 @@ const handleCloseDialog = () => {
 
 .custom-tab-modal .timeLineClass>div:last-child {
   padding-left: 8px;
+  background: url(./text_bg.png) 0 50%/100% 100% no-repeat;
 }
+
 </style>