From a1548e4d5bf839418eb03077a6af117094369397 Mon Sep 17 00:00:00 2001
From: kami <605128600@qq.com>
Date: Thu, 21 Nov 2024 17:31:51 +0800
Subject: [PATCH] =?UTF-8?q?=E9=97=AE=E9=A2=98=E7=BA=BF=E7=B4=A2=E5=85=B3?=
 =?UTF-8?q?=E8=81=94=E9=97=AE=E9=A2=98=E9=A2=84=E8=AD=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/work/alarm.ts                       |  12 +
 src/views/sensitivePerception/ModelClue.vue | 528 ++++++++++++--------
 src/views/work/Alarm.vue                    | 220 ++++----
 3 files changed, 432 insertions(+), 328 deletions(-)

diff --git a/src/api/work/alarm.ts b/src/api/work/alarm.ts
index 090587d..374410a 100644
--- a/src/api/work/alarm.ts
+++ b/src/api/work/alarm.ts
@@ -21,3 +21,15 @@ export function alarmNotificationCommit(data) {
     });
 }
 
+export function alarmFiles(id) {
+    return request.get({
+        url: `/alarm/notification/files?alarmId=${id}`
+    });
+}
+
+export function alarmDetails(id) {
+    return request.get({
+        url: `/alarm/notification/details?alarmId=${id}`
+    });
+}
+
diff --git a/src/views/sensitivePerception/ModelClue.vue b/src/views/sensitivePerception/ModelClue.vue
index 048b921..7c414d0 100644
--- a/src/views/sensitivePerception/ModelClue.vue
+++ b/src/views/sensitivePerception/ModelClue.vue
@@ -1,270 +1,368 @@
 <template>
-    <div class="container h100">
-        <el-row :gutter="20" class="h100">
-            <el-col :span="6" class="h100">
-                <model-tree v-model="query.modelIds" />
-            </el-col>
-            <el-col :span="18">
-                <header>
-                    <el-form :label-width="140">
-                        <el-row>
-                            <el-col :span="8">
-                                <el-form-item label="预警时间">
-                                    <date-time-range-picker-ext
-                                        v-model="query.createTime"
-                                    />
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="8">
-                                <el-form-item label="涉及单位">
-                                    <depart-tree-select
-                                        v-model="query.involveDepartId"
-                                        :check-strictly="false"
-                                    />
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="8">
-                                <el-form-item label="预警内容">
-                                    <el-input
-                                        placeholder="请输入"
-                                        v-model="query.thingDesc"
-                                        clearable
-                                    />
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="8">
-                                <el-form-item label="分发状态">
-                                    <el-select
-                                        v-model="query.distributionState"
-                                        clearable
-                                    >
-                                        <el-option
-                                            v-for="item in dict.distributionState"
-                                            :label="item.dictLabel"
-                                            :value="item.dictValue"
-                                        />
-                                    </el-select>
-                                </el-form-item>
-                            </el-col>
-                        </el-row>
-                    </el-form>
-                    <div class="flex end mb-20">
-                        <div>
-                            <el-button type="primary" @click="getList">
-                                <template #icon>
-                                    <icon name="el-icon-Search" />
-                                </template>
-                                查询</el-button
-                            >
-                            <el-button @click="reset">重置</el-button>
-                        </div>
-                    </div>
-                </header>
-                <div class="table-container">
-                    <el-table :data="list">
-                        <el-table-column
-                            label="预警时间"
-                            prop="createTime"
-                            width="150"
-                        />
-<!--                        <el-table-column-->
-<!--                            label="预警模型"-->
-<!--                            prop="modelName"-->
-<!--                            width="160"-->
-<!--                            show-overflow-tooltip-->
-<!--                        />-->
-                      <el-table-column
-                          label="涉及单位"
-                          show-overflow-tooltip
-                          width="200"
-                      >
-                        <template #default="{ row }">
-                          <span>{{ row.involveParentDepartName }}</span><span v-if="row.involveDepartName"><br>{{ row.involveDepartName }}</span>
-                        </template>
-                      </el-table-column>
-                      <el-table-column
-                          label="涉及人员"
-                          prop="involvePoliceName"
-                          width="100"
-                      >
-                        <template #default="{ row }">
-                          <div v-if="row.involvePoliceName">
-                            <div v-for="item in row.involvePoliceName.split(' ')" class="text-nowrap">{{
-                                item }}</div>
-                          </div>
-                          <div v-else>略</div>
-                        </template>
-                      </el-table-column>
-                        <el-table-column
-                            label="预警内容"
-                            prop="thingDesc"
-                            show-overflow-tooltip
-                        />
-                        <el-table-column
-                            label="分发状态"
-                            align="center"
-                            width="120"
-                        >
-                            <template #default="{ row }">
+  <div class="container h100">
+    <el-row :gutter="20" class="h100">
+      <el-col :span="6" class="h100">
+        <model-tree v-model="query.modelIds"/>
+      </el-col>
+      <el-col :span="18">
+        <header>
+          <el-form :label-width="140">
+            <el-row>
+              <el-col :span="8">
+                <el-form-item label="预警时间">
+                  <date-time-range-picker-ext
+                      v-model="query.createTime"
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="涉及单位">
+                  <depart-tree-select
+                      v-model="query.involveDepartId"
+                      :check-strictly="false"
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="预警内容">
+                  <el-input
+                      placeholder="请输入"
+                      v-model="query.thingDesc"
+                      clearable
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                <el-form-item label="分发状态">
+                  <el-select
+                      v-model="query.distributionState"
+                      clearable
+                  >
+                    <el-option
+                        v-for="item in dict.distributionState"
+                        :label="item.dictLabel"
+                        :value="item.dictValue"
+                    />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+          <div class="flex end mb-20">
+            <div>
+              <el-button type="primary" @click="getList">
+                <template #icon>
+                  <icon name="el-icon-Search"/>
+                </template>
+                查询
+              </el-button
+              >
+              <el-button @click="reset">重置</el-button>
+            </div>
+          </div>
+        </header>
+        <div class="table-container">
+          <el-table :data="list">
+            <el-table-column
+                label="预警时间"
+                prop="createTime"
+                width="150"
+            />
+            <!--                        <el-table-column-->
+            <!--                            label="预警模型"-->
+            <!--                            prop="modelName"-->
+            <!--                            width="160"-->
+            <!--                            show-overflow-tooltip-->
+            <!--                        />-->
+            <el-table-column
+                label="涉及单位"
+                show-overflow-tooltip
+                width="200"
+            >
+              <template #default="{ row }">
+                <span>{{ row.involveParentDepartName }}</span><span
+                  v-if="row.involveDepartName"><br>{{ row.involveDepartName }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+                label="涉及人员"
+                prop="involvePoliceName"
+                width="100"
+            >
+              <template #default="{ row }">
+                <div v-if="row.involvePoliceName">
+                  <div v-for="item in row.involvePoliceName.split(' ')" class="text-nowrap">{{
+                      item
+                    }}
+                  </div>
+                </div>
+                <div v-else>略</div>
+              </template>
+            </el-table-column>
+            <el-table-column
+                label="预警内容"
+                prop="thingDesc"
+                show-overflow-tooltip
+            />
+            <el-table-column
+                label="分发状态"
+                align="center"
+                width="120"
+            >
+              <template #default="{ row }">
                                 <span>{{
                                     getDictLable(
                                         dict.distributionState,
                                         row.distributionState
                                     )
-                                }}</span>
-                            </template>
-                        </el-table-column>
-                        <el-table-column label="操作" width="180">
-                            <template #default="{ row }">
-                                <el-button
-                                    type="primary"
-                                    link
-                                    @click="handleShowDetail(row)"
-                                    >查看详情</el-button
-                                >
-                                <el-button
-                                    v-if="row.negativeId"
-                                    type="primary"
-                                    link
-                                    @click="handleAction(row)"
-                                    >处理详情</el-button
-                                >
-                            </template>
-                        </el-table-column>
-                    </el-table>
-                </div>
-                <div class="flex end mt-8">
-                    <el-pagination
-                        @size-change="getList"
-                        @current-change="getList"
-                        :current-page="query.current"
-                        :page-sizes="[9, 18, 36]"
-                        v-model:page-size="query.size"
-                        v-model:current-page="query.current"
-                        layout="total, sizes, prev, pager, next"
-                        :total="total"
-                        v-if="list.length"
-                    >
-                    </el-pagination>
-                </div>
-            </el-col>
-        </el-row>
-    </div>
+                                  }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" width="180">
+              <template #default="{ row }">
+                <el-button
+                    type="primary"
+                    link
+                    @click="handleShowDetail(row)"
+                >查看详情
+                </el-button
+                >
+                <el-button
+                    v-if="row.negativeId"
+                    type="primary"
+                    link
+                    @click="handleAction(row)"
+                >处理详情
+                </el-button
+                >
+                <el-button
+                    type="primary"
+                    link
+                    :disabled="row.distributionState!='1'"
+                    @click="handleClue(row)"
+                >查看提醒
+                </el-button
+                >
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+        <div class="flex end mt-8">
+          <el-pagination
+              @size-change="getList"
+              @current-change="getList"
+              :current-page="query.current"
+              :page-sizes="[9, 18, 36]"
+              v-model:page-size="query.size"
+              v-model:current-page="query.current"
+              layout="total, sizes, prev, pager, next"
+              :total="total"
+              v-if="list.length"
+          >
+          </el-pagination>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
 
-    <el-dialog title="预警线索数据详情" v-model="show" width="80vw">
-        <div class="dialog-container">
-            <div class="row mt-10">
-                <div class="col col-6">
-                    <label>预警时间</label>
-                    <span>{{ activeModelClue.createTime }}</span>
-                </div>
-                <div class="col col-6">
-                    <label>预警模型</label>
-                    <span>{{ activeModelClue.modelName }}</span>
-                </div>
-                <div class="col col-6">
-                    <label>涉及单位</label>
-                    <span>
-                        <span>{{ activeModelClue.involveParentDepartName }}</span><span>{{ activeModelClue.involveDepartName ? '/' + activeModelClue.involveDepartName : '' }}</span>
+  <el-dialog title="预警线索数据详情" v-model="show" width="80vw">
+    <div class="dialog-container">
+      <div class="row mt-10">
+        <div class="col col-6">
+          <label>预警时间</label>
+          <span>{{ activeModelClue.createTime }}</span>
+        </div>
+        <div class="col col-6">
+          <label>预警模型</label>
+          <span>{{ activeModelClue.modelName }}</span>
+        </div>
+        <div class="col col-6">
+          <label>涉及单位</label>
+          <span>
+                        <span>{{
+                            activeModelClue.involveParentDepartName
+                          }}</span><span>{{
+              activeModelClue.involveDepartName ? '/' + activeModelClue.involveDepartName : ''
+            }}</span>
                     </span>
-                </div>
-                <div class="col col-6">
-                    <label>涉及人员</label>
-                    <span>{{ activeModelClue.involvePoliceName }}</span>
-                </div>
-            </div>
-            <div class="row mt-10">
-                <div class="col col-24">
-                    <label>预警内容</label>
-                    <span>{{ activeModelClue.thingDesc }}</span>
-                </div>
-            </div>
-            <div class="row mt-10">
-                <div class="col col-6">
-                    <label>分发状态</label>
-                    <span>{{
-                        getDictLable(
-                            dict.distributionState,
-                            activeModelClue.distributionState
-                        )
-                    }}</span>
-                </div>
-            </div>
-            <h3>详细信息</h3>
-            <div style="min-height: 200px">
-                <el-empty description="无数据" />
-            </div>
         </div>
-    </el-dialog>
+        <div class="col col-6">
+          <label>涉及人员</label>
+          <span>{{ activeModelClue.involvePoliceName }}</span>
+        </div>
+      </div>
+      <div class="row mt-10">
+        <div class="col col-24">
+          <label>预警内容</label>
+          <span>{{ activeModelClue.thingDesc }}</span>
+        </div>
+      </div>
+      <div class="row mt-10">
+        <div class="col col-6">
+          <label>分发状态</label>
+          <span>{{
+              getDictLable(
+                  dict.distributionState,
+                  activeModelClue.distributionState
+              )
+            }}</span>
+        </div>
+      </div>
+      <h3>详细信息</h3>
+      <div style="min-height: 200px">
+        <el-empty description="无数据"/>
+      </div>
+    </div>
+  </el-dialog>
+
+  <el-dialog
+      title="查看详情"
+      v-model="dialogShow"
+      width="800"
+  >
+    <el-form :model="showData" :label-width="120" ref="fomrRef">
+      <el-row>
+        <el-col :span="12">
+          <el-form-item
+              label="提醒类型"
+          >
+            <div>{{ showData.alarmType }}</div>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item
+              label="提醒时间"
+          >
+            <el-text>{{ showData.alarmTime }}</el-text>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row style="margin-top: 5px;">
+        <el-col :span="12">
+          <el-form-item
+              label="被通知单位"
+          >
+            <el-text>{{ showData.notificationDepartName }}</el-text>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" v-if="showData.policeName != undefined">
+          <el-form-item
+              label="被通知民警"
+          >
+            <el-text>{{ showData.policeName }}</el-text>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row style="margin-top: 5px;">
+        <el-form-item
+            label="提醒内容"
+        >
+          <el-text style="width: 588px;">{{ showData.alarmContent }}</el-text>
+        </el-form-item>
+      </el-row>
+      <el-row style="margin-top: 5px;" v-if="showData.replyState == 1">
+        <el-form-item
 
-    <negative-dialog
-        v-model="negativeShow"
-        :id="activeNegativeId"
-        @close="negativeShow = false"
-    />
+            label="回复内容"
+        >
+          <el-text style="width: 588px;">{{ showData.replyResultContent }}</el-text>
+        </el-form-item>
+      </el-row>
+      <el-row style="margin-top: 10px;" v-if="showData.files != undefined && showData.files.length > 0">
+        <el-form-item
+            label="问题附件"
+        >
+          <div v-for="(item, index) in showData.files" :key="index" style="margin-top: 10px;">
+            <el-image style="width: 100px; height: 100px;margin-right: 8px" :src="item.path" fit="cover"
+                      :hide-on-click-modal="true" :lazy="true" :z-index="index"/>
+          </div>
+        </el-form-item>
+      </el-row>
+    </el-form>
+    <footer class="flex end">
+      <el-button @click="dialogShow = false">关闭</el-button>
+    </footer>
+  </el-dialog>
+
+  <negative-dialog
+      v-model="negativeShow"
+      :id="activeNegativeId"
+      @close="negativeShow = false"
+  />
 </template>
 <script lang="ts" setup>
-import { listModelClue } from "@/api/sensitivePerception/modelClue";
+import {listModelClue} from "@/api/sensitivePerception/modelClue";
+import {alarmDetails} from "@/api/work/alarm"
 import useCatchStore from "@/stores/modules/catch";
-import { getDictLable } from "@/utils/util";
+import {getDictLable} from "@/utils/util";
 
 const catchStore = useCatchStore();
-const dict = catchStore.getDicts(["distributionState","handleState"]);
+const dict = catchStore.getDicts(["distributionState", "handleState"]);
 
 const query = ref({});
 
 const list = ref([]);
 const total = ref(0);
 
+let showData = ref({})
+let dialogShow = ref(false)
+
+const handleClue = (row) => {
+  alarmDetails(row.notificationId).then(res => {
+    showData.value = res
+    dialogShow.value = true
+  })
+}
+
 onMounted(() => {
-    getList();
+  getList();
 });
 
 const route = useRoute();
 watch(
     () => route.query.modelId,
     (val) => {
-        query.value.modelIds = [val];
+      query.value.modelIds = [val];
     }
 );
 watch(
     () => query.value.modelIds,
     (newVal, oldVal) => {
-        if (newVal !== oldVal) {
-            query.value.current = 1;
-            getList();
-        }
+      if (newVal !== oldVal) {
+        query.value.current = 1;
+        getList();
+      }
     }
 );
 
 function getList() {
-    listModelClue(query.value).then((data) => {
-        list.value = data.records;
-        total.value = data.total;
-    });
+  listModelClue(query.value).then((data) => {
+    list.value = data.records;
+    total.value = data.total;
+  });
 }
 
 function reset() {
-    query.value = {};
-    getList();
+  query.value = {};
+  getList();
 }
 
 const show = ref(false);
 const activeModelClue = ref({});
 
 function handleShowDetail(row) {
-    activeModelClue.value = row;
-    show.value = true;
+  activeModelClue.value = row;
+  show.value = true;
 }
 
 const activeNegativeId = ref('')
 const negativeShow = ref(false)
 
 function handleAction(row) {
-    
-    negativeShow.value = true;
-    activeNegativeId.value = row.negativeId;
+
+  negativeShow.value = true;
+  activeNegativeId.value = row.negativeId;
 }
 </script>
 <style lang="scss" scoped>
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/work/Alarm.vue b/src/views/work/Alarm.vue
index 6658a62..e4e9edf 100644
--- a/src/views/work/Alarm.vue
+++ b/src/views/work/Alarm.vue
@@ -125,7 +125,7 @@
               <el-button
                   type="primary"
                   link
-                  @click="showDetail(row)"
+                  @click="showFiles(row)"
               >查看详情
               </el-button>
               <el-button
@@ -155,53 +155,45 @@
     </main>
     <el-dialog v-model="editShow" title="回复问题" width="900px">
       <el-form label-width="148" :model="formData" ref="formRef">
-        <el-form-item
-            label="提醒类型"
-        >
-          <el-input
-              v-model="formData.alarmType"
-              style="width: 280px"
-              disabled
-          />
-        </el-form-item>
-        <el-form-item
-            label="提醒时间"
-        >
-          <el-input
-              v-model="formData.alarmTime"
-              disabled
-              style="width: 280px"
-          />
-        </el-form-item>
-        <el-form-item
-            label="被通知单位"
-        >
-          <el-input
-              v-model="formData.notificationDepartName"
-              disabled
-              style="width: 280px"
-          />
-        </el-form-item>
-        <el-form-item
-            label="被通知单位"
-        >
-          <el-input
-              v-model="formData.policeName"
-              disabled
-              style="width: 280px"
-          />
-        </el-form-item>
-        <el-form-item
-            label="提醒内容"
-        >
-          <el-input
-              type="textarea"
-              v-model="formData.alarmContent"
-              :autosize="{ minRows: 6 }"
-              disabled
-              style="width: 280px"
-          />
-        </el-form-item>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item
+                label="提醒类型"
+            >
+              <div >{{formData.alarmType}}</div>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item
+                label="提醒时间"
+            >
+              <el-text>{{formData.alarmTime}}</el-text>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row style="margin-top: 5px;">
+          <el-col :span="12">
+            <el-form-item
+                label="被通知单位"
+            >
+              <el-text>{{formData.notificationDepartName}}</el-text>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12" v-if="formData.policeName != undefined">
+            <el-form-item
+                label="被通知民警"
+            >
+              <el-text>{{formData.policeName}}</el-text>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row style="margin-top: 5px;">
+          <el-form-item
+              label="提醒内容"
+          >
+            <el-text style="width: 588px;">{{formData.alarmContent}}</el-text>
+          </el-form-item>
+        </el-row>
         <el-form-item
             label="回复问题"
             :rules="{
@@ -230,69 +222,65 @@
     <el-dialog
         title="查看详情"
         v-model="dialogShow"
-        width="600"
+        width="800"
     >
       <el-form :model="showData" :label-width="120" ref="fomrRef">
-        <el-form-item
-            label="提醒类型"
-        >
-          <el-input
-              v-model="showData.alarmType"
-              style="width: 280px"
-              disabled
-          />
-        </el-form-item>
-        <el-form-item
-            label="提醒时间"
-        >
-          <el-input
-              v-model="showData.alarmTime"
-              disabled
-              style="width: 280px"
-          />
-        </el-form-item>
-        <el-form-item
-            label="被通知单位"
-        >
-          <el-input
-              v-model="showData.notificationDepartName"
-              disabled
-              style="width: 280px"
-          />
-        </el-form-item>
-        <el-form-item
-            label="被通知单位"
-        >
-          <el-input
-              v-model="showData.policeName"
-              disabled
-              style="width: 280px"
-          />
-        </el-form-item>
-        <el-form-item
-            label="提醒内容"
-        >
-          <el-input
-              type="textarea"
-              v-model="showData.alarmContent"
-              :autosize="{ minRows: 6 }"
-              disabled
-              style="width: 280px"
-          />
-        </el-form-item>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item
+                label="提醒类型"
+            >
+              <div >{{showData.alarmType}}</div>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item
+                label="提醒时间"
+            >
+              <el-text>{{showData.alarmTime}}</el-text>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row style="margin-top: 5px;">
+          <el-col :span="12">
+            <el-form-item
+                label="被通知单位"
+            >
+              <el-text>{{showData.notificationDepartName}}</el-text>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12" v-if="showData.policeName != undefined">
+            <el-form-item
+                label="被通知民警"
+            >
+              <el-text>{{showData.policeName}}</el-text>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row style="margin-top: 5px;">
+          <el-form-item
+              label="提醒内容"
+          >
+            <el-text style="width: 588px;">{{showData.alarmContent}}</el-text>
+          </el-form-item>
+        </el-row>
+        <el-row style="margin-top: 5px;" v-if="showData.replyState == 1">
+          <el-form-item
 
-        <el-form-item
-            v-if="showData.replyState == 1"
-            label="回复内容"
-        >
-          <el-input
-              type="textarea"
-              v-model="showData.replyResultContent"
-              disabled
-              :autosize="{ minRows: 4 }"
-              style="width: 280px"
-          />
-        </el-form-item>
+              label="回复内容"
+          >
+            <el-text style="width: 588px;">{{showData.replyResultContent}}</el-text>
+          </el-form-item>
+        </el-row>
+        <el-row style="margin-top: 10px;" v-if="showData.files != undefined && showData.files.length > 0">
+          <el-form-item
+              label="问题附件"
+          >
+            <div v-for="(item, index) in showData.files" :key="index" style="margin-top: 10px;">
+              <el-image style="width: 100px; height: 100px;margin-right: 8px" :src="item.path" fit="cover" :hide-on-click-modal="true" :lazy="true" :z-index="index"/>
+            </div>
+          </el-form-item>
+        </el-row>
       </el-form>
       <footer class="flex end">
         <el-button @click="dialogShow = false">关闭</el-button>
@@ -303,10 +291,12 @@
 </template>
 <script setup>
 import moment from "moment";
-import {ElLoading} from "element-plus";
+import { Clock } from '@element-plus/icons-vue'
+
 import {
   alarmNotificationPages,
-  alarmNotificationReply
+  alarmNotificationReply,
+  alarmFiles
 } from "@/api/work/alarm";
 import feedback from "@/utils/feedback";
 
@@ -329,9 +319,13 @@ let dialogShow = ref(false)
 
 const loading = ref(true);
 
-const showDetail = (data) => {
-  showData.value = data;
-  dialogShow.value = true;
+const showFiles = (data) => {
+  alarmFiles(data.id).then(res => {
+    showData.value = data;
+    showData.value['files'] = res;
+    console.log(showData.value)
+    dialogShow.value = true;
+  })
 }
 
 function getList() {