✨ 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">
                 <!-- 处理状态 -->
@@ -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;">
@@ -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()"