fix: 报警问题管理详情弹窗v-model修改为true

src/views/datamanager/alertformdata/components/common/DetailDialog.vue

@@ -1,7 +1,13 @@
 <template>
   <div>
-    <el-dialog v-model="visible" title="问题详情" width="80%" align-center :close-on-click-modal="false"
-      @close="handleClose">
+    <el-dialog
+      v-model="visible"
+      title="问题详情"
+      width="80%"
+      align-center
+      :close-on-click-modal="false"
+      @close="handleClose"
+    >
       <div class="description-box">
         <div class="title">问题描述</div>
         <p>{{ description }}</p>
@@ -10,14 +16,27 @@
         <div class="title">问题图片/视频</div>
         <div class="media-box">
           <div class="video-box" v-if="videoPaths && videoPaths.length != 0">
-            <img src="@/assets/images/alert/video-play.png" @click="videoDialogVisible = true"
-              style="object-fit:contain; width:200px; height:200px; border: solid 1px #CCC; cursor: pointer;" />
+            <img
+              src="@/assets/images/alert/video-play.png"
+              @click="videoDialogVisible = true"
+              style="
+                object-fit: contain;
+                width: 200px;
+                height: 200px;
+                border: solid 1px #ccc;
+                cursor: pointer;
+              "
+            />
           </div>
           <div class="img-box" v-for="(imagePath, index) in imagePaths" :key="index">
-            <img :src="imagePath" alt="" style="object-fit:contain; width:200px; height:200px; border: solid 1px #CCC"
-              @mouseenter="handleOpenPre(imagePath, index)">
+            <img
+              :src="imagePath"
+              alt=""
+              style="object-fit: contain; width: 200px; height: 200px; border: solid 1px #ccc"
+              @mouseenter="handleOpenPre(imagePath, index)"
+            />
             <div class="cover-box" v-if="isCoverVisible(index)" @mouseleave="handleClosePre(index)">
-              <el-icon :size="40" color="#e6e6e6" style="cursor: pointer;" @click="handlePreview">
+              <el-icon :size="40" color="#e6e6e6" style="cursor: pointer" @click="handlePreview">
                 <ZoomIn />
               </el-icon>
             </div>
@@ -30,8 +49,14 @@
     </el-dialog>
 
     <el-dialog v-model="videoDialogVisible" class="video-dialog">
-      <video type="video/mp4" muted="true" preload="auto" :controls="true" autoplay
-        style="height: 464px;object-fit: contain;">
+      <video
+        type="video/mp4"
+        muted="true"
+        preload="auto"
+        :controls="true"
+        autoplay
+        style="height: 464px; object-fit: contain"
+      >
         <source :src="videoPaths![0]" />
       </video>
     </el-dialog>
@@ -39,131 +64,132 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import { ZoomIn } from '@element-plus/icons-vue';
-
-const props = defineProps({
-  description: String,
-  imagePaths: Array<string>,
-  videoPaths: Array<string>,
-});
-
-const emits = defineEmits(['close']);
-const visible = ref(true);
-
-const showPreview = ref<boolean[]>(new Array(props.imagePaths?.values.length).fill(false));
-const dialogVisible = ref(false);
-const dialogImageUrl = ref('');
-const videoDialogVisible = ref(false);
-
-const handleOpenPre = (val, index) => {
-  dialogImageUrl.value = val;
-  showPreview.value[index] = true;
-};
-
-const handleClosePre = (index) => {
-  showPreview.value[index] = false;
-};
-
-const isCoverVisible = (index) => {
-  return showPreview.value[index];
-};
-
-const handlePreview = () => {
-  dialogVisible.value = true;
-};
-
-const handleClose = () => {
-  emits('close');
-}
+  import { ref } from 'vue';
+  import { ZoomIn } from '@element-plus/icons-vue';
+
+  const props = defineProps({
+    description: String,
+    imagePaths: Array<string>,
+    videoPaths: Array<string>,
+  });
+
+  const emits = defineEmits(['close']);
+  const visible = ref(true);
+
+  const showPreview = ref<boolean[]>(new Array(props.imagePaths?.values.length).fill(false));
+  const dialogVisible = ref(false);
+  const dialogImageUrl = ref('');
+  const videoDialogVisible = ref(false);
+
+  const handleOpenPre = (val, index) => {
+    dialogImageUrl.value = val;
+    showPreview.value[index] = true;
+  };
+
+  const handleClosePre = (index) => {
+    showPreview.value[index] = false;
+  };
+
+  const isCoverVisible = (index) => {
+    return showPreview.value[index];
+  };
+
+  const handlePreview = () => {
+    dialogVisible.value = true;
+  };
+
+  const handleClose = () => {
+    emits('close');
+  };
 </script>
 
 <style scoped>
-:deep(.el-dialog) {
-  padding: 0;
-  background: #FFFFFF;
-  box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05), 0px 6px 16px 0px rgba(0, 0, 0, 0.08), 0px 3px 6px -4px rgba(0, 0, 0, 0.12);
-
-  .el-dialog__header {
-    display: flex;
-    align-items: center;
-    height: 56px;
-    padding-left: 24px;
-    padding-bottom: 0;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+  :deep(.el-dialog) {
+    padding: 0;
+    background: #ffffff;
+    box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05), 0px 6px 16px 0px rgba(0, 0, 0, 0.08),
+      0px 3px 6px -4px rgba(0, 0, 0, 0.12);
+
+    .el-dialog__header {
+      display: flex;
+      align-items: center;
+      height: 56px;
+      padding-left: 24px;
+      padding-bottom: 0;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+    }
+
+    .el-dialog__title {
+      color: rgba(0, 0, 0, 0.88);
+      font-size: 16px;
+      font-weight: 500;
+    }
+
+    .el-dialog__headerbtn .el-dialog__close {
+      color: #000;
+    }
+
+    .el-dialog__body {
+      height: 564px;
+      padding: 40px;
+      overflow: scroll;
+    }
   }
 
-  .el-dialog__title {
-    color: rgba(0, 0, 0, 0.88);
+  .title {
+    margin-bottom: 20px;
+    color: #303133;
     font-size: 16px;
     font-weight: 500;
   }
 
-  .el-dialog__headerbtn .el-dialog__close {
-    color: #000;
-  }
-
-  .el-dialog__body {
-    height: 564px;
-    padding: 40px;
-    overflow: scroll;
-  }
-}
-
-.title {
-  margin-bottom: 20px;
-  color: #303133;
-  font-size: 16px;
-  font-weight: 500;
-}
-
-.title:before {
-  margin-right: 8px;
-  content: '';
-  border-left: 3px solid #1777FF;
-}
-
-.description-box {
-  margin-bottom: 20px;
-
-  p {
-    color: #606266;
+  .title:before {
+    margin-right: 8px;
+    content: '';
+    border-left: 3px solid #1777ff;
   }
-}
 
-.media-box {
-  display: flex;
+  .description-box {
+    margin-bottom: 20px;
 
-  .video-box {
-    width: 200px;
-    height: 200px;
-    margin-right: 10px;
+    p {
+      color: #606266;
+    }
   }
 
-  .img-box {
-    position: relative;
-    width: 200px;
-    height: 200px;
-    margin-right: 10px;
-  }
-
-  .cover-box {
+  .media-box {
     display: flex;
-    align-items: center;
-    justify-content: center;
-    position: absolute;
-    top: 0;
-    width: 200px;
-    height: 200px;
-    background-color: rgba(0, 0, 0, 0.5);
+
+    .video-box {
+      width: 200px;
+      height: 200px;
+      margin-right: 10px;
+    }
+
+    .img-box {
+      position: relative;
+      width: 200px;
+      height: 200px;
+      margin-right: 10px;
+    }
+
+    .cover-box {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: absolute;
+      top: 0;
+      width: 200px;
+      height: 200px;
+      background-color: rgba(0, 0, 0, 0.5);
+    }
   }
-}
 
-:deep(.video-dialog) {
-  .el-dialog__body {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  :deep(.video-dialog) {
+    .el-dialog__body {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
   }
-}
-</style>
+</style>