🎈 perf: 报警管理-厂界在线页面调整

（1）选择部门，点击后页面无数据，需调整 <br>（2）安装企业为空，应该取deptName <br> （3）操作中添加按钮“查看位置”。点击可在弹窗中以地图的形式展示设备的位置以及报警值

RuoYi-Vue-Oracle/src/main/resources/mybatis/oil/OilMonitorMapper.xml

@@ -204,14 +204,14 @@ select t.id,t. name,t.sn,t.file_url,t.note,t.create_by,t.create_time,t.address,t
         SELECT
         th_device_report.id AS reportId,
         th_device_report.sn,
-        report_time,
+        th_device_report.report_time,
-        power,
+        th_device_report.power,
-        qb,
+        th_device_report.qb,
-        wd,
+        th_device_report.wd,
-        yl,
+        th_device_report.yl,
         th_device_report.latitude,
         th_device_report.longitude,
-        cgq,
+        th_device_report.cgq,
         th_device_report.ds AS ds,
         th_device_report.dw AS dw,
         th_device_report.zl AS zl,
@@ -233,14 +233,25 @@ select t.id,t. name,t.sn,t.file_url,t.note,t.create_by,t.create_time,t.address,t
         LEFT JOIN sys_dept dept on t.dept_id=dept.dept_id
         LEFT JOIN th_device_deal d ON th_device_report.id = d.report_id
         <where>
-           ( th_device_report.zt='一级报警' or  th_device_report.zt='二级报警')
+            (th_device_report.zt='一级报警' or th_device_report.zt='二级报警')
-
+            <if test="deptId != null">
-            <if test="startTime != null">and report_time > #{startTime,jdbcType=TIMESTAMP}</if>
+                and th_device_report.sn IN (
-            <if test="endTime != null">and report_time &lt; #{endTime,jdbcType=TIMESTAMP}</if>
+                    SELECT td.sn
-            <if test="endTime != null">and th_device_report.sn=  #{sn}</if>
+                    FROM th_device td
-            <if test="endTime != null">and t.name like concat('%', #{name}, '%')</if>
+                    LEFT JOIN sys_dept p ON td.dept_id = p.dept_id
-            <if test="dealUser != null">and d.dealUser like concat('%', #{dealUser}, '%')</if>
+                    WHERE td.dept_id IN (
-            <if test="deptId != null">and t.dept_id=#{deptId}</if>
+                    SELECT dept_id
+                    FROM sys_dept
+                    START WITH dept_id = #{deptId}
+                    CONNECT BY PRIOR dept_id = parent_id
+                    )
+                )
+            </if>
+            <if test="startTime != null">and th_device_report.report_time > #{startTime,jdbcType=TIMESTAMP}</if>
+            <if test="endTime != null">and th_device_report.report_time &lt; #{endTime,jdbcType=TIMESTAMP}</if>
+            <if test="sn != null">and th_device_report.sn= #{sn}</if>
+            <if test="name != null">and t.name like concat(concat('%',#{name, jdbcType=VARCHAR}),'%')</if>
+            <if test="dealUser != null">and d.deal_user like concat(concat('%',#{dealUser, jdbcType=VARCHAR}),'%')</if>
             <choose>
                 <when test="isDeal=='1'.toString()">
                     and d.is_deal='1'

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

@@ -2,7 +2,7 @@
   <div class="app-container">
     <el-form :inline="true" :model="queryParams" ref="form">
       <el-form-item label="选择部门" prop="deptId">
-          <dept-tree @deptChange="handleDeptChange" style="width: 150px;" />
+        <dept-tree @deptChange="handleDeptChange" style="width: 150px" />
       </el-form-item>
       <el-form-item label="设备名称" prop="equipmentName">
         <el-input v-model="queryParams.name"></el-input>
@@ -11,8 +11,18 @@
           <el-input v-model="queryParams.sn"></el-input>
         </el-form-item> -->
       <el-form-item label="是否处理">
-          <el-select v-model="queryParams.isDeal" clearable filterable placeholder="请选择">
+        <el-select
-            <el-option v-for="item in isExamSelect" :key="item.value" :label="item.label" :value="item.value">
+          v-model="queryParams.isDeal"
+          clearable
+          filterable
+          placeholder="请选择"
+        >
+          <el-option
+            v-for="item in isExamSelect"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
           </el-option>
         </el-select>
       </el-form-item>
@@ -21,111 +31,241 @@
       </el-form-item>
       <el-form-item>
         <span>日期</span>
-          <el-date-picker v-model="dateList" type="daterange" range-separator="至" start-placeholder="开始日期"
+        <el-date-picker
-            end-placeholder="结束日期" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss">
+          v-model="dateList"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          format="yyyy-MM-dd HH:mm:ss"
+          value-format="yyyy-MM-dd HH:mm:ss"
+        >
         </el-date-picker>
       </el-form-item>
 
       <el-form-item>
-          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button
-          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
+          @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+          >重置</el-button
+        >
       </el-form-item>
     </el-form>
 
     <el-table v-loading="loading" :data="dataList" height="700px">
-        <el-table-column prop="factoryName" label="安装企业" header-align="center" align="center" />
+      <el-table-column
-        <el-table-column prop="name" label="设备名称" header-align="center" align="center" />
+        prop="deptName"
-        <el-table-column prop="sn" label="设备编号" header-align="center" align="center" />
+        label="安装企业"
-        <el-table-column prop="reportTime" label="上报时间" header-align="center" align="center" />
+        header-align="center"
+        align="center"
+      />
+      <el-table-column
+        prop="name"
+        label="设备名称"
+        header-align="center"
+        align="center"
+      />
+      <el-table-column
+        prop="sn"
+        label="设备编号"
+        header-align="center"
+        align="center"
+      />
+      <el-table-column
+        prop="reportTime"
+        label="上报时间"
+        header-align="center"
+        align="center"
+      />
       <!-- <el-table-column prop="wd" label="设备温度" header-align="center" align="center"/>
         <el-table-column prop="yl" label="设备压力" header-align="center" align="center"/> -->
       <!-- <el-table-column prop="zl" label="传感器类型" header-align="center" align="center" /> -->
       <!-- <el-table-column prop="lc" label="量程" header-align="center" align="center" /> -->
-        <el-table-column prop="ds" label="传感器读数" header-align="center" align="center">
+      <el-table-column
+        prop="ds"
+        label="传感器读数"
+        header-align="center"
+        align="center"
+      >
         <template slot-scope="scope">
-            <span style="color: red;">
+          <span style="color: red">
             {{ scope.row.ds }}
           </span>
-            <span style="color: #000;">
+          <span style="color: #000">
             {{ scope.row.dw }}
           </span>
         </template>
       </el-table-column>
-        <el-table-column prop="zt" label="报警状态" header-align="center" align="center">
+      <el-table-column
+        prop="zt"
+        label="报警状态"
+        header-align="center"
+        align="center"
+      >
         <template slot-scope="scope">
-            <span v-if="scope.row.zt == '一级报警'" style="color: #c00808;">
+          <span v-if="scope.row.zt == '一级报警'" style="color: #c00808">
             {{ scope.row.zt }}
           </span>
-            <span v-if="scope.row.zt == '二级报警'" style="color: #e23434;">
+          <span v-if="scope.row.zt == '二级报警'" style="color: #e23434">
             {{ scope.row.zt }}
           </span>
         </template>
       </el-table-column>
-        <el-table-column prop="dbz" label="低报值" header-align="center" align="center" />
+      <el-table-column
-        <el-table-column prop="gbz" label="高报值" header-align="center" align="center" />
+        prop="dbz"
-        <el-table-column prop="isDeal" label="是否处理" header-align="center" align="center">
+        label="低报值"
+        header-align="center"
+        align="center"
+      />
+      <el-table-column
+        prop="gbz"
+        label="高报值"
+        header-align="center"
+        align="center"
+      />
+      <el-table-column
+        prop="isDeal"
+        label="是否处理"
+        header-align="center"
+        align="center"
+      >
         <template slot-scope="scope">
-            <span v-if="scope.row.isDeal == '1'" style="color: green;">
+          <span v-if="scope.row.isDeal == '1'" style="color: green"> 是 </span>
-              是
+          <span v-else style="color: red"> 否 </span>
-            </span>
-            <span v-else style="color: red;">
-              否
-            </span>
         </template>
       </el-table-column>
-        <el-table-column prop="reason" label="报警原因" header-align="center" align="center">
+      <el-table-column
+        prop="reason"
+        label="报警原因"
+        header-align="center"
+        align="center"
+      >
       </el-table-column>
-        <el-table-column prop="dealUser" label="处理人" header-align="center" align="center">
+      <el-table-column
+        prop="dealUser"
+        label="处理人"
+        header-align="center"
+        align="center"
+      >
       </el-table-column>
-        <el-table-column prop="dealWay" label="处理方式" header-align="center" align="center">
+      <el-table-column
+        prop="dealWay"
+        label="处理方式"
+        header-align="center"
+        align="center"
+      >
       </el-table-column>
       <el-table-column label="处理时间" align="center" prop="dealTime" />
-        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
         <template slot-scope="scope">
-            <el-button size="mini" type="text" icon="el-icon-thumb" @click="handleUpdate(scope.row)">下发通知</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-thumb"
+            @click="handleUpdate(scope.row)"
+            >下发通知</el-button
+          >
           <!--v-if="userName == scope.row.dealUser" -->
-            <el-button size="mini" type="text" icon="el-icon-dish-1"
+          <el-button
-              @click="handleAlarm(scope.row)">处理报警</el-button>
+            size="mini"
+            type="text"
+            icon="el-icon-dish-1"
+            @click="handleAlarm(scope.row)"
+            >处理报警</el-button
+          >
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-location-information"
+            @click="handleShowMap(scope.row)"
+            >查看位置</el-button
+          >
         </template>
       </el-table-column>
     </el-table>
 
-      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+    <!-- <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
-        @pagination="handleQuery" />
+        @pagination="handleQuery" /> -->
+    <el-pagination
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="queryParams.pageNum"
+      :page-sizes="[10, 20, 30, 50]"
+      :page-size="queryParams.pageSize"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="total"
+    >
+    </el-pagination>
     <!--发送通知-->
-      <send-msg :deviceInfo="deviceInfo" v-if="isOpenMsg" :isOpenMsg="isOpenMsg" @closeMsg="closeMsg"></send-msg>
+    <send-msg
+      :deviceInfo="deviceInfo"
+      v-if="isOpenMsg"
+      :isOpenMsg="isOpenMsg"
+      @closeMsg="closeMsg"
+    ></send-msg>
     <!--处理报警-->
-      <deal-alarm :deviceInfo="deviceInfo" v-if="isOpenAlarm" :isOpenAlarm="isOpenAlarm" @closeAlarm="closeAlarm"></deal-alarm>
+    <deal-alarm
-  
+      :deviceInfo="deviceInfo"
+      v-if="isOpenAlarm"
+      :isOpenAlarm="isOpenAlarm"
+      @closeAlarm="closeAlarm"
+    ></deal-alarm>
+    <el-dialog :title="mapDialogTitle" :visible.sync="mapDialogVisible" width="30%">
+      <div>
+        <baidu-map
+          :center="position"
+          :zoom="16"
+          :scroll-wheel-zoom="true"
+          style="width: auto; height: 40vh"
+          :map-type="currentMapType"
+        >
+          <bm-map-type
+            :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"
+            anchor="BMAP_ANCHOR_TOP_LEFT"
+          ></bm-map-type>
+          <bm-marker :position="position"></bm-marker>
+        </baidu-map>
       </div>
-  </template>
+    </el-dialog>
+  </div>
+</template>
 
-  <script>
+<script>
-  import store from "@/store";
+import store from "@/store";
-  import { listAlarm } from "@/api/demostrate/monitor";
+import { listAlarm } from "@/api/demostrate/monitor";
-  import sendMsg from "@/views/demostrate/alarm/sendMsg";
+import sendMsg from "@/views/demostrate/alarm/sendMsg";
-  import dealAlarm from "@/views/demostrate/alarm/dealAlarm";
+import dealAlarm from "@/views/demostrate/alarm/dealAlarm";
-  import DeptTree from "@/components/DeptTree/index.vue";
+import DeptTree from "@/components/DeptTree/index.vue";
-  export default {
+import { BmlHeatmap } from "vue-baidu-map"; //引人
+export default {
   name: "alarm",
-    components: { sendMsg,dealAlarm,DeptTree },
+  components: { sendMsg, dealAlarm, DeptTree, BmlHeatmap },
   dicts: [],
   data() {
     return {
       loading: false,
       deviceInfo: {},
       isOpenMsg: false,
-        isOpenAlarm:false,
+      isOpenAlarm: false,
       isExamSelect: [
         {
-            value: '1',
+          value: "1",
-            label: '是',
+          label: "是",
-            disabled: true
+          disabled: true,
         },
         {
-            value: '0',
+          value: "0",
-            label: '否'
+          label: "否",
-          }
+        },
       ],
       dateList: [],
       dataList: [],
@@ -136,19 +276,21 @@
         pageSize: 10,
         sn: null,
         name: null,
-          dealUser:null,
+        dealUser: null,
-          isDeal:null,
+        isDeal: null,
         startTime: null,
         endTime: null,
-          factoryId:null,
+        factoryId: null,
         deptId: null,
       },
-        userName: '',
+      userName: "",
-  
+      currentMapType: "BMAP_HYBRID_MAP",
+      mapDialogVisible: false,
+      position: { lng: 116.404, lat: 39.915 }, // 默认值，例如北京的中心点
     };
   },
   created() {
-      this.userName = store.getters.user.userName
+    // this.userName = store.getters.user.userName;
   },
   mounted() {
     this.init();
@@ -156,7 +298,7 @@
   methods: {
     async init() {
       this.emitChange();
-      this.getList()
+      this.getList();
     },
     /**获取企业下拉框 */
     handleDeptChange(value) {
@@ -167,60 +309,83 @@
       this.$nextTick(() => {
         this.$emit("queryChange", {
           deptId: this.queryParams.deptId,
-
         });
       });
     },
     getList() {
       if (this.dateList && this.dateList.length > 0) {
-          this.queryParams.startTime = this.dateList[0]
+        this.queryParams.startTime = this.dateList[0];
-          this.queryParams.endTime = this.dateList[1]
+        this.queryParams.endTime = this.dateList[1];
       } else {
-          this.queryParams.startTime = null
+        this.queryParams.startTime = null;
-          this.queryParams.endTime = null
+        this.queryParams.endTime = null;
       }
       this.loading = true;
-        listAlarm(this.queryParams).then(response => {
+      listAlarm(this.queryParams).then((response) => {
         this.dataList = response.rows;
         this.total = response.total;
         this.loading = false;
       });
-  
     },
     //发送通知
     handleUpdate(row) {
-        this.deviceInfo = row
+      this.deviceInfo = row;
-        this.isOpenMsg = true
+      this.isOpenMsg = true;
     },
     //处理报警
     handleAlarm(row) {
-        this.deviceInfo = row
+      this.deviceInfo = row;
-        this.isOpenAlarm = true
+      this.isOpenAlarm = true;
     },
     closeMsg() {
-        this.isOpenMsg = false
+      this.isOpenMsg = false;
-        this.handleQuery()
+      this.handleQuery();
     },
     closeAlarm() {
-        this.isOpenAlarm = false
+      this.isOpenAlarm = false;
-        this.handleQuery()
+      this.handleQuery();
     },
     resetQuery() {
-        this.queryParams.pageNum = 1
+      this.queryParams.pageNum = 1;
-        this.queryParams.sn = null
+      this.queryParams.sn = null;
-        this.queryParams.name = null
+      this.queryParams.name = null;
-        this.queryParams.isDeal = null
+      this.queryParams.isDeal = null;
-        this.queryParams.dealUser = null
+      this.queryParams.dealUser = null;
-        this.queryParams.startTime = null
+      this.queryParams.startTime = null;
-        this.queryParams.endTime = null
+      this.queryParams.endTime = null;
     },
     handleQuery() {
-        this.queryParams.pageNum = 1
+      this.queryParams.pageNum = 1;
 
-        this.getList()
+      this.getList();
     },
-    }
+    handleSizeChange(val) {
-  
+      this.queryParams.pageSize = val;
+      this.getList();
+    },
+    handleCurrentChange(val) {
+      this.queryParams.pageNum = val;
+      this.getList();
+    },
+    handleShowMap(row) {
+      this.position = {
+        lng: parseFloat(row.longitude),
+        lat: parseFloat(row.latitude),
       };
-  </script>
+      this.mapDialogTitle = `读数:${row.ds}|低报值:${row.dbz}|高报值:${row.gbz}`;
+      this.mapDialogVisible = true;
+    },
+  },
+};
+</script>
 
+<style lang="scss" scoped>
+.app-container {
+  ::v-deep .el-dialog {
+    .el-dialog__body {
+      padding: 0;
+    }
+  }
+}
+
+</style>