✨ feat: 报警分析-厂界在线 功能3 点击报警次数，弹窗报警管理页面

ruoyi-ui/src/views/alarmMonitor/bound/index.vue

@@ -94,7 +94,7 @@
     <!--处理报警-->
     <deal-alarm :deviceInfo="deviceInfo" v-if="isOpenAlarm" :isOpenAlarm="isOpenAlarm"
       @closeAlarm="closeAlarm"></deal-alarm>
-    <el-dialog :title="mapDialogTitle" :visible.sync="mapDialogVisible" width="30%">
+    <el-dialog :title="mapDialogTitle" :visible.sync="mapDialogVisible" width="30%" append-to-body>
       <div>
         <baidu-map :center="position" :zoom="16" :scroll-wheel-zoom="true" style="width: auto; height: 40vh"
           :map-type="currentMapType">
@@ -104,7 +104,7 @@
       </div>
     </el-dialog>
     <!--处理详情-->
-    <el-dialog title="处理详情" :visible.sync="isOpenDetail" width="50%">
+    <el-dialog title="处理详情" :visible.sync="isOpenDetail" width="50%" append-to-body>
       <div>
             <el-form :model="detailParams" label-width="130px">
                 <!-- 处理状态 -->
@@ -112,7 +112,7 @@
                     <h3>处理状态</h3>
                     <p>{{ detailParams.status === '1' ? '正在处理' : '处理完成' }}</p>
                 </el-form-item>
-                
+
                 <!-- 报警信息 -->
                 <el-form-item>
                     <h3>报警信息</h3>
@@ -137,7 +137,7 @@
                     <h3>相关图片</h3>
                     <image-preview :src="detailParams.fileUrl" :width="50" :height="50" />
                 </el-form-item>
-               
+
                 <!-- 如果状态为 2 (处理完成) 展示报警原因、处理人、处理方式 -->
                 <el-form-item v-if="detailParams.status === '2'">
                     <h3>处理结果</h3>
@@ -146,8 +146,8 @@
                     <p>处理方式: <strong>{{ detailParams.dealWay }}</strong></p>
                 </el-form-item>
             </el-form>
-            
-           
+
+
         </div>
     </el-dialog>
   </div>
@@ -204,6 +204,7 @@ export default {
       currentMapType: "BMAP_HYBRID_MAP",
       mapDialogVisible: false,
       position: { lng: 116.404, lat: 39.915 }, // 默认值，例如北京的中心点
+      mapDialogTitle: "",
     };
   },
   created() {

ruoyi-ui/src/views/dataAnalysis/bound/index.vue

@@ -41,7 +41,7 @@
           <el-table-column label="放置区域" align="center" prop="address" />
           <el-table-column label="报警次数" align="center" prop="count">
             <template slot-scope="scope">
-              <span :style="{ color: 'red' }">{{ scope.row.count }}</span>
+              <el-tag type="danger" class="count-tag" @click="clickAlarmTag">{{ scope.row.count }}</el-tag>
             </template>
           </el-table-column>
           <el-table-column
@@ -64,6 +64,10 @@
       </div>
     </div>
 
+    <el-dialog title="报警管理" :visible.sync="dialogAlarmVisible">
+      <alarm-monitor />
+    </el-dialog>
+
     <!--发送通知-->
     <send-msg
       :deviceInfo="deviceInfo"
@@ -85,9 +89,10 @@ import to from '@/utils/await-to.js';
 import moment from 'moment';
 import { debounce } from '@/utils';
 import { checkRole } from "@/utils/permission";
+import AlarmMonitor from '@/views/alarmMonitor/bound/index.vue';
 export default {
   name: "alarm",
-  components: { sendMsg, DeviceSelect },
+  components: { sendMsg, DeviceSelect, AlarmMonitor },
   dicts: [],
   data() {
     return {
@@ -131,6 +136,7 @@ export default {
         endDate: null,
         deviceSn: null,
       },
+      dialogAlarmVisible: false,
     };
   },
   mounted() {
@@ -156,6 +162,9 @@ export default {
   },
   methods: {
     checkRole,
+    clickAlarmTag() {
+      this.dialogAlarmVisible = true;
+    },
     dateChange() {
       this.queryDebounce();
     },
@@ -358,4 +367,7 @@ export default {
 
   background-position-y: 7px;
 }
+.count-tag {
+  cursor: pointer;
+}
 </style>

ruoyi-ui/src/views/demostrate/alarm/dealAlarm.vue

@@ -1,6 +1,6 @@
 
 <template>
- <el-dialog title="处理报警" :visible.sync="openConfig1" :before-close="handleClose">
+ <el-dialog title="处理报警" :visible.sync="openConfig1" :before-close="handleClose" append-to-body>
     <el-form :model="queryParams" ref="addform" label-width="130px" :rules="dealRule">
         <el-form-item label="处理状态" prop="status">
             <el-select v-model="queryParams.status" placeholder="请选择处理状态" style="width: 500px;">
@@ -18,11 +18,11 @@
         <el-form-item v-if="queryParams.status === '2'" label="报警原因">
             <el-input v-model="queryParams.reason" placeholder="请输入报警原因" style="width: 500px;" ></el-input>
         </el-form-item>
-        
+
         <el-form-item v-if="queryParams.status === '2'" label="处理方式" prop="dealWay">
             <el-input v-model="queryParams.dealWay" placeholder="请输入处理方式" style="width: 500px;" ></el-input>
         </el-form-item>
-        
+
         <el-form-item label="图片">
             <image-upload @input="getImage" v-model="queryParams.fileUrl" :limit="1" />
         </el-form-item>
@@ -41,7 +41,7 @@
 
 
 </template>
-  
+
 <script>
 import { dealAlarm } from "@/api/demostrate/monitor";
 
@@ -79,7 +79,7 @@ export default {
     },
     data() {
         return {
-          
+
             dealRule: {
                 dealTime: [
                     { required: true, message: '请选择处理时间', trigger: 'blur' },
@@ -114,7 +114,7 @@ export default {
             this.queryParams.fileUrl = data
         },
         sendMsg() {
-        
+
             this.$refs["addform"].validate(valid => {
         if (valid) {
           dealAlarm(this.queryParams).then(response => {
@@ -131,7 +131,7 @@ export default {
       });
 
         },
-    
+
 
         //关闭弹出
         handleClose() {
@@ -185,4 +185,3 @@ export default {
     color: #FFF;
 }
 </style>
-  

ruoyi-ui/src/views/demostrate/alarm/sendMsg.vue

@@ -3,6 +3,7 @@
     title="下发通知"
     :visible.sync="openConfig1"
     :before-close="handleClose"
+    append-to-body
   >
     <div style="display: inline-flex; height: 30px; line-height: 30px">
       <el-button class="agreeButton" style="width: 120px" @click="chooseUser1()"
@@ -116,7 +117,7 @@ export default {
             dealUser: this.userList[0].userName,
           };
 
-    
+
         }
       });
     },