gongjiale
/
gangkou
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

（1）选择部门，点击后页面无数据，需调整 <br>（2）安装企业为空，应该取deptName <br> （3）操作中添加按钮“查看位置”。点击可在弹窗中以地图的形式展示设备的位置以及报警值
This commit is contained in:
LokerL 2024-10-09 11:07:10 +08:00
parent 426a1311e3
commit 627e8fd07e
2 changed files with 404 additions and 228 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -204,20 +204,20 @@ 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,
power,
qb,
wd,
yl,
th_device_report.report_time,
th_device_report.power,
th_device_report.qb,
th_device_report.wd,
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,
th_device_report.zl AS zl,
th_device_report.zt AS zt,
th_device_report.dbz AS dbz,
th_device_report.gbz AS gbz,
th_device_report.gbz AS gbz,
t.NAME,
t.dept_id,
dept.dept_name,
@ -233,21 +233,32 @@ 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='二级报警')
<if test="startTime != null">and report_time > #{startTime,jdbcType=TIMESTAMP}</if>
<if test="endTime != null">and report_time &lt; #{endTime,jdbcType=TIMESTAMP}</if>
<if test="endTime != null">and th_device_report.sn= #{sn}</if>
<if test="endTime != null">and t.name like concat('%', #{name}, '%')</if>
<if test="dealUser != null">and d.dealUser like concat('%', #{dealUser}, '%')</if>
<if test="deptId != null">and t.dept_id=#{deptId}</if>
(th_device_report.zt='一级报警' or th_device_report.zt='二级报警')
<if test="deptId != null">
and th_device_report.sn IN (
SELECT td.sn
FROM th_device td
LEFT JOIN sys_dept p ON td.dept_id = p.dept_id
WHERE td.dept_id IN (
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'
</when>
<when test="isDeal=='0'.toString()">
and (d.is_deal is null or d.is_deal='0')
</when>
<when test="isDeal=='1'.toString()">
and d.is_deal='1'
</when>
<when test="isDeal=='0'.toString()">
and (d.is_deal is null or d.is_deal='0')
</when>
</choose>
</where>
${params.dataScope}

577
ruoyi-ui/src/views/alarmMonitor/bound/index.vue
View File

@ -1,162 +1,304 @@
<template>
<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;" />
</el-form-item>
<el-form-item label="设备名称" prop="equipmentName">
<el-input v-model="queryParams.name"></el-input>
</el-form-item>
<!-- <el-form-item label="设备编号" prop="sn">
<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" />
</el-form-item>
<el-form-item label="设备名称" prop="equipmentName">
<el-input v-model="queryParams.name"></el-input>
</el-form-item>
<!-- <el-form-item label="设备编号" prop="sn">
<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-option v-for="item in isExamSelect" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="处理人用户名" prop="dealUser">
<el-input v-model="queryParams.dealUser"></el-input>
</el-form-item>
<el-form-item>
<span>日期</span>
<el-date-picker 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 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 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-form-item label="是否处理">
<el-select
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>
<el-form-item label="处理人用户名" prop="dealUser">
<el-input v-model="queryParams.dealUser"></el-input>
</el-form-item>
<el-form-item>
<span>日期</span>
<el-date-picker
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 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="deptName"
label="安装企业"
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">
<template slot-scope="scope">
<span style="color: red;">
{{ scope.row.ds }}
</span>
<span style="color: #000;">
{{ scope.row.dw }}
</span>
</template>
</el-table-column>
<el-table-column prop="zt" label="报警状态" header-align="center" align="center">
<template slot-scope="scope">
<span v-if="scope.row.zt == '一级报警'" style="color: #c00808;">
{{ scope.row.zt }}
</span>
<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 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>
<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>
<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>
<el-table-column label="处理时间" align="center" prop="dealTime" />
<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>
<!--v-if="userName == scope.row.dealUser" -->
<el-button size="mini" type="text" icon="el-icon-dish-1"
@click="handleAlarm(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="handleQuery" />
<!--发送通知-->
<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>
</div>
</template>
<script>
import store from "@/store";
import { listAlarm } from "@/api/demostrate/monitor";
import sendMsg from "@/views/demostrate/alarm/sendMsg";
import dealAlarm from "@/views/demostrate/alarm/dealAlarm";
import DeptTree from "@/components/DeptTree/index.vue";
export default {
name: "alarm",
components: { sendMsg,dealAlarm,DeptTree },
dicts: [],
data() {
return {
loading: false,
deviceInfo: {},
isOpenMsg: false,
isOpenAlarm:false,
isExamSelect: [
{
value: '1',
label: '是',
disabled: true
},
{
value: '0',
label: '否'
}
],
dateList: [],
dataList: [],
total: 0,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
sn: null,
name: null,
dealUser:null,
isDeal:null,
startTime: null,
endTime: null,
factoryId:null,
deptId: null,
<!-- <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"
>
<template slot-scope="scope">
<span style="color: red">
{{ scope.row.ds }}
</span>
<span style="color: #000">
{{ scope.row.dw }}
</span>
</template>
</el-table-column>
<el-table-column
prop="zt"
label="报警状态"
header-align="center"
align="center"
>
<template slot-scope="scope">
<span v-if="scope.row.zt == '一级报警'" style="color: #c00808">
{{ scope.row.zt }}
</span>
<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
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>
<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>
<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>
<el-table-column label="处理时间" align="center" prop="dealTime" />
<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
>
<!--v-if="userName == scope.row.dealUser" -->
<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="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>
<!--处理报警-->
<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>
</el-dialog>
</div>
</template>
<script>
import store from "@/store";
import { listAlarm } from "@/api/demostrate/monitor";
import sendMsg from "@/views/demostrate/alarm/sendMsg";
import dealAlarm from "@/views/demostrate/alarm/dealAlarm";
import DeptTree from "@/components/DeptTree/index.vue";
import { BmlHeatmap } from "vue-baidu-map"; //引人
export default {
name: "alarm",
components: { sendMsg, dealAlarm, DeptTree, BmlHeatmap },
dicts: [],
data() {
return {
loading: false,
deviceInfo: {},
isOpenMsg: false,
isOpenAlarm: false,
isExamSelect: [
{
value: "1",
label: "是",
disabled: true,
},
userName: '',
};
},
created() {
this.userName = store.getters.user.userName
},
mounted() {
this.init();
},
methods: {
async init() {
{
value: "0",
label: "否",
},
],
dateList: [],
dataList: [],
total: 0,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
sn: null,
name: null,
dealUser: null,
isDeal: null,
startTime: null,
endTime: null,
factoryId: null,
deptId: null,
},
userName: "",
currentMapType: "BMAP_HYBRID_MAP",
mapDialogVisible: false,
position: { lng: 116.404, lat: 39.915 }, // 默认值，例如北京的中心点
};
},
created() {
// this.userName = store.getters.user.userName;
},
mounted() {
this.init();
},
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.endTime = this.dateList[1]
} else {
this.queryParams.startTime = null
this.queryParams.endTime = null
}
this.loading = true;
listAlarm(this.queryParams).then(response => {
this.dataList = response.rows;
this.total = response.total;
this.loading = false;
});
},
//发送通知
handleUpdate(row) {
this.deviceInfo = row
this.isOpenMsg = true
},
//处理报警
handleAlarm(row) {
this.deviceInfo = row
this.isOpenAlarm = true
},
closeMsg() {
this.isOpenMsg = false
this.handleQuery()
},
closeAlarm() {
this.isOpenAlarm = false
this.handleQuery()
},
resetQuery() {
this.queryParams.pageNum = 1
this.queryParams.sn = null
this.queryParams.name = null
this.queryParams.isDeal = null
this.queryParams.dealUser = null
this.queryParams.startTime = null
this.queryParams.endTime = null
},
handleQuery() {
this.queryParams.pageNum = 1
this.getList()
},
getList() {
if (this.dateList && this.dateList.length > 0) {
this.queryParams.startTime = this.dateList[0];
this.queryParams.endTime = this.dateList[1];
} else {
this.queryParams.startTime = null;
this.queryParams.endTime = null;
}
this.loading = true;
listAlarm(this.queryParams).then((response) => {
this.dataList = response.rows;
this.total = response.total;
this.loading = false;
});
},
//发送通知
handleUpdate(row) {
this.deviceInfo = row;
this.isOpenMsg = true;
},
//处理报警
handleAlarm(row) {
this.deviceInfo = row;
this.isOpenAlarm = true;
},
closeMsg() {
this.isOpenMsg = false;
this.handleQuery();
},
closeAlarm() {
this.isOpenAlarm = false;
this.handleQuery();
},
resetQuery() {
this.queryParams.pageNum = 1;
this.queryParams.sn = null;
this.queryParams.name = null;
this.queryParams.isDeal = null;
this.queryParams.dealUser = null;
this.queryParams.startTime = null;
this.queryParams.endTime = null;
},
handleQuery() {
this.queryParams.pageNum = 1;
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),
};
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;
}
};
</script>
}
}
</style>