From 74095dc979ed88039238e048d7419f2b70cdce99 Mon Sep 17 00:00:00 2001
From: Free-sss <630042479@qq.com>
Date: Tue, 26 Aug 2025 16:09:27 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E5=A2=9E=E5=8A=A0=E5=AE=9E?=
 =?UTF-8?q?=E6=97=B6=E6=8A=A5=E8=AD=A6=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ConfinedSpace/AlarmNowList/config.ts      |  19 ++
 .../ConfinedSpace/AlarmNowList/config.vue     |  41 +++
 .../ConfinedSpace/AlarmNowList/data.json      |  32 ++
 .../ConfinedSpace/AlarmNowList/index.ts       |  13 +
 .../ConfinedSpace/AlarmNowList/index.vue      | 317 ++++++++++++++++++
 .../components/Charts/ConfinedSpace/index.ts  |   4 +-
 6 files changed, 424 insertions(+), 2 deletions(-)
 create mode 100644 src/packages/components/Charts/ConfinedSpace/AlarmNowList/config.ts
 create mode 100644 src/packages/components/Charts/ConfinedSpace/AlarmNowList/config.vue
 create mode 100644 src/packages/components/Charts/ConfinedSpace/AlarmNowList/data.json
 create mode 100644 src/packages/components/Charts/ConfinedSpace/AlarmNowList/index.ts
 create mode 100644 src/packages/components/Charts/ConfinedSpace/AlarmNowList/index.vue

diff --git a/src/packages/components/Charts/ConfinedSpace/AlarmNowList/config.ts b/src/packages/components/Charts/ConfinedSpace/AlarmNowList/config.ts
new file mode 100644
index 0000000..8d1bb2a
--- /dev/null
+++ b/src/packages/components/Charts/ConfinedSpace/AlarmNowList/config.ts
@@ -0,0 +1,19 @@
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { AlarmNowListConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+import dataJson from './data.json'
+
+
+export const option = {
+  dataset: dataJson,
+  rowNum: 4,
+  waitTime: 0.5,
+  showRankNum: false
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = AlarmNowListConfig.key
+  public chartConfig = cloneDeep(AlarmNowListConfig)
+  public option = cloneDeep(option)
+}
diff --git a/src/packages/components/Charts/ConfinedSpace/AlarmNowList/config.vue b/src/packages/components/Charts/ConfinedSpace/AlarmNowList/config.vue
new file mode 100644
index 0000000..c7a6e41
--- /dev/null
+++ b/src/packages/components/Charts/ConfinedSpace/AlarmNowList/config.vue
@@ -0,0 +1,41 @@
+<template>
+  <collapse-item name="滚动列表三" :expanded="true">
+    <SettingItem name="表行数">
+        <n-input-number
+          v-model:value="optionData.rowNum"
+          :min="1"
+          size="small"
+          placeholder="请输入自动计算"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="轮播时间(s)">
+        <n-input-number
+          v-model:value="optionData.waitTime"
+          :min="0"
+          size="small"
+          placeholder="请输入轮播时间"
+        ></n-input-number>
+      </SettingItem>
+      <setting-item >
+        <n-space>
+          <n-switch v-model:value="optionData.showRankNum" size="small" />
+          <n-text>显示排行数字</n-text>
+        </n-space>
+      </setting-item>
+
+  </collapse-item>
+
+
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { option } from './config'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+</script>
diff --git a/src/packages/components/Charts/ConfinedSpace/AlarmNowList/data.json b/src/packages/components/Charts/ConfinedSpace/AlarmNowList/data.json
new file mode 100644
index 0000000..57b7ce4
--- /dev/null
+++ b/src/packages/components/Charts/ConfinedSpace/AlarmNowList/data.json
@@ -0,0 +1,32 @@
+[
+  {
+    "title": "报警信息报警信息",
+    "level": "重大",
+    "time": "12:23:23",
+    "dept": "公司简称公司简称"
+  },
+  {
+    "title": "报警信息报警信息",
+    "level": "重大",
+    "time": "12:23:23",
+    "dept": "公司简称公司简称"
+  },
+  {
+    "title": "报警信息报警信息",
+    "level": "重大",
+    "time": "12:23:23",
+    "dept": "公司简称公司简称"
+  },
+  {
+    "title": "报警信息报警信息",
+    "level": "重大",
+    "time": "12:23:23",
+    "dept": "公司简称公司简称"
+  },
+  {
+    "title": "报警信息报警信息",
+    "level": "重大",
+    "time": "12:23:23",
+    "dept": "公司简称公司简称"
+  }
+]
diff --git a/src/packages/components/Charts/ConfinedSpace/AlarmNowList/index.ts b/src/packages/components/Charts/ConfinedSpace/AlarmNowList/index.ts
new file mode 100644
index 0000000..10f1ded
--- /dev/null
+++ b/src/packages/components/Charts/ConfinedSpace/AlarmNowList/index.ts
@@ -0,0 +1,13 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+
+export const AlarmNowListConfig: ConfigType = {
+  key: 'AlarmNowList',
+  chartKey: 'VAlarmNowList',
+  conKey: 'VCAlarmNowList',
+  title: '实时报警列表',
+  category: 'ConfinedSpace',
+  categoryName: '有限空间',
+  package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.COMMON,
+  image: 'AlarmNowList.png'
+}
diff --git a/src/packages/components/Charts/ConfinedSpace/AlarmNowList/index.vue b/src/packages/components/Charts/ConfinedSpace/AlarmNowList/index.vue
new file mode 100644
index 0000000..ceb4c43
--- /dev/null
+++ b/src/packages/components/Charts/ConfinedSpace/AlarmNowList/index.vue
@@ -0,0 +1,317 @@
+<template>
+  <div class="content_box">
+    <vue3-seamless-scroll v-if="option.dataset && option.dataset.length > 0" class="seamless" :list="option.dataset"
+      :limitScrollNum="rowNum" :hover="true" :step="waitTime" :wheel="true" :isWatch="true">
+      <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 class="item_content">
+            <div class="item_header flex">
+              <div class="item_level_text">{{ item.level }}</div>
+              <div class="item_title_text">{{ item.title }}</div>
+            </div>
+            <div class="item_footer">
+              <div class="item_dept">{{ item.dept }}</div>
+              <div class="item_time">{{ item.time }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </vue3-seamless-scroll>
+    <div v-else style="
+        color: #fff;
+        font-size: 14px;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      ">
+      暂无数据
+    </div>
+    <n-modal v-model:show="status.showDialog" :class="['custom-tab-modal']" title="报警详情" preset="card"
+      @on-after-leave="handleCloseDialog" :draggable="{ bounds: 'none' }" :style="{ width: '800px', height: '516px' }">
+      <div v-if="isLoading" style="display: flex; width: 100%; justify-content: center; margin-top: 16px">
+        <n-spin size="large" />
+      </div>
+      <n-grid v-else cols="24" x-gap="12" style="overflow-y: auto; padding-bottom: 12px">
+        <n-gi :span="14">
+          <!-- 基础信息 -->
+          <div class="detail-item">
+            <label>报警时间：</label>
+            <span>
+              {{ status.selectedRow?.time }}
+            </span>
+          </div>
+          <div class="detail-item">
+            <label>报警等级：</label>
+            <span class="highlight" style="color: #ff5454">
+              {{ status.selectedRow?.level }}
+            </span>
+          </div>
+          <div class="detail-item">
+            <label>风险描述：</label>
+            <span class="highlight">
+              {{ status.selectedRow?.title }}
+            </span>
+          </div>
+          <div class="detail-item">
+            <label>报警区域：</label>
+            <span>
+              {{ status.selectedRow?.dept }}
+            </span>
+          </div>
+        </n-gi>
+      </n-grid>
+    </n-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+// @ts-nocheck
+
+import { PropType, toRefs, shallowReactive, watch, ref, reactive } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartDataFetch } from '@/hooks'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { option as configOption } from './config'
+import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
+import PlayBack from '@/components/Pages/yushiVideo/playback.vue'
+import PlayLive from '@/components/Pages/yushiVideo/playLive.vue'
+import axiosInstance from '@/api/axios'
+import VChart from 'vue-echarts'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType & typeof option>,
+    required: true
+  }
+})
+const isLoading = ref(false)
+const pointChartOption = ref(null)
+const status = reactive({
+  showDialog: false,
+  selectedRow: null
+})
+const { rowNum, waitTime, showRankNum } = toRefs(props.chartConfig.option)
+const { w, h } = toRefs(props.chartConfig.attr)
+
+const option = shallowReactive({
+  dataset: configOption.dataset
+})
+
+
+
+const handleOpenDialog = (row: any) => {
+  status.selectedRow = {
+    ...row, // 基础数据从item获取
+  };
+
+  status.showDialog = true;
+  isLoading.value = false;
+}
+
+
+// 手动更新
+watch(
+  () => props.chartConfig.option.dataset,
+  (newData: any) => {
+    option.dataset = newData
+  },
+  {
+    immediate: true,
+    deep: false
+  }
+)
+
+// 预览更新
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
+  option.dataset = newData
+})
+
+const handleCloseDialog = () => {
+  status.showDialog = false
+  status.selectedRow = null
+}
+</script>
+
+<style lang="scss" scoped>
+.content_box {
+  width: v-bind('w') + 'px';
+  height: v-bind('h') + 'px';
+  overflow: hidden;
+}
+
+.seamless {
+  // padding: 0 30px 14px 30px;
+}
+
+.detail {
+  color: #fff;
+  position: relative;
+  font-size: 12px;
+  width: 100%;
+}
+
+.flex_column {
+  display: flex;
+  flex-direction: column;
+}
+
+.flex {
+  display: flex;
+}
+
+.flex_wrap {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.flex_v {
+  display: flex;
+  align-items: center;
+  background-color: #072230;
+  border-bottom: 1.5px solid #123E54;
+
+}
+
+.item_level_text {
+  width: fit-content;
+  height: 18px;
+  color: #ff9191;
+  border-radius: 12px;
+  background: #B10000;
+  font-size: 14px;
+  text-align: center;
+
+  line-height: 18px;
+  padding: 2px 12px;
+  margin-right: 20px;
+}
+
+.item_title_text {
+  color: #b10000;
+  font-size: 18px;
+}
+
+.flex_c {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+
+.item_content {
+  width: 100%;
+}
+
+.item_header {
+  margin-left: 20px;
+  flex: 1;
+  max-width: 350px;
+  // height: 30px;
+  align-items: end;
+  white-space: nowrap;
+  /* 禁止换行 */
+  overflow: hidden;
+  /* 隐藏超出部分 */
+  text-overflow: ellipsis;
+  /* 显示省略号 */
+  margin-top: 2px;
+}
+
+.item_footer {
+  margin-left: 20px;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.item_time {
+  margin-right: 40px;
+  font-size: 18px;
+  color: #7E8990;
+}
+
+.item_dept {
+  color: #7E8990;
+  font-size: 12px;
+}
+
+.detail-item {
+  padding: 8px 0;
+  display: flex;
+}
+
+.cursor {
+  cursor: pointer;
+}
+
+.detail-item label {
+  min-width: 90px;
+  color: rgb(145 187 242);
+}
+
+.detail-item span {
+  font-weight: bold;
+}
+
+.info {
+  font-size: 1.25rem;
+  font-weight: 700;
+  width: fit-content;
+  margin: 0 16px 0 0;
+  display: flex;
+  align-items: center;
+}
+
+.info .sub-title {
+  padding: 0 0 0 24px;
+  margin-right: 8px;
+}
+
+.info .info-num {
+  color: rgb(34 211 238);
+  font-size: 1.875rem;
+}
+
+.info .info-body {
+  padding-bottom: 6px;
+}
+
+.enterBtn {
+  color: rgb(62 200 244);
+  text-decoration: underline;
+  cursor: pointer;
+  font-size: 1.25rem;
+  position: absolute;
+  left: 87%;
+  top: -45px;
+}
+</style>
+<style lang="scss">
+.custom-tab-modal>.n-card-header {
+  background-color: rgba(26, 56, 113, 1) !important;
+  background-image: linear-gradient(to right, rgba(8, 100, 177, 0.7), transparent) !important;
+  padding: 16px !important;
+  border: 2px solid rgba(62, 200, 244, 1);
+  border-bottom-width: 0px !important;
+}
+
+.custom-tab-modal>.n-card__content {
+  background-color: rgba(26, 56, 113, 1) !important;
+  border: 2px solid rgba(62, 200, 244, 1);
+  padding-right: 0;
+  padding-bottom: 0;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #2461db;
+  border-radius: 6px;
+}
+
+.custom-tab-modal .timeLineClass>div:last-child {
+  padding-left: 8px;
+}
+</style>
diff --git a/src/packages/components/Charts/ConfinedSpace/index.ts b/src/packages/components/Charts/ConfinedSpace/index.ts
index c5eccf6..582dae3 100644
--- a/src/packages/components/Charts/ConfinedSpace/index.ts
+++ b/src/packages/components/Charts/ConfinedSpace/index.ts
@@ -1,4 +1,4 @@
 import {MapConfig} from './Map'
 import {PieCircleCommenConfig} from './PieCircleCommen'
-
-export default [MapConfig,PieCircleCommenConfig]
\ No newline at end of file
+import {AlarmNowListConfig} from './AlarmNowList'
+export default [MapConfig,PieCircleCommenConfig,AlarmNowListConfig]
\ No newline at end of file