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 SELECT
th_device_report.id AS reportId, th_device_report.id AS reportId,
th_device_report.sn, 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.latitude,
th_device_report.longitude, th_device_report.longitude,
cgq, th_device_report.cgq,
th_device_report.ds AS ds, th_device_report.ds AS ds,
th_device_report.dw AS dw, 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.zt AS zt,
th_device_report.dbz AS dbz, th_device_report.dbz AS dbz,
th_device_report.gbz AS gbz, th_device_report.gbz AS gbz,
t.NAME, t.NAME,
t.dept_id, t.dept_id,
dept.dept_name, 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 sys_dept dept on t.dept_id=dept.dept_id
LEFT JOIN th_device_deal d ON th_device_report.id = d.report_id LEFT JOIN th_device_deal d ON th_device_report.id = d.report_id
<where> <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> <choose>
<when test="isDeal=='1'.toString()"> <when test="isDeal=='1'.toString()">
and d.is_deal='1' and d.is_deal='1'
</when> </when>
<when test="isDeal=='0'.toString()"> <when test="isDeal=='0'.toString()">
and (d.is_deal is null or d.is_deal='0') and (d.is_deal is null or d.is_deal='0')
</when> </when>
</choose> </choose>
</where> </where>
${params.dataScope} ${params.dataScope}

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

@ -1,162 +1,304 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<el-form :inline="true" :model="queryParams" ref="form"> <el-form :inline="true" :model="queryParams" ref="form">
<el-form-item label="选择部门" prop="deptId"> <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>
<el-form-item label="设备名称" prop="equipmentName"> <el-form-item label="设备名称" prop="equipmentName">
<el-input v-model="queryParams.name"></el-input> <el-input v-model="queryParams.name"></el-input>
</el-form-item> </el-form-item>
<!-- <el-form-item label="设备编号" prop="sn"> <!-- <el-form-item label="设备编号" prop="sn">
<el-input v-model="queryParams.sn"></el-input> <el-input v-model="queryParams.sn"></el-input>
</el-form-item> --> </el-form-item> -->
<el-form-item label="是否处理"> <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"
</el-option> clearable
</el-select> filterable
</el-form-item> placeholder="请选择"
<el-form-item label="处理人用户名" prop="dealUser"> >
<el-input v-model="queryParams.dealUser"></el-input> <el-option
</el-form-item> v-for="item in isExamSelect"
<el-form-item> :key="item.value"
<span>日期</span> :label="item.label"
<el-date-picker v-model="dateList" type="daterange" range-separator="至" start-placeholder="开始日期" :value="item.value"
end-placeholder="结束日期" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"> >
</el-date-picker> </el-option>
</el-form-item> </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-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"
</el-form-item> icon="el-icon-search"
</el-form> 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 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"
<!-- <el-table-column prop="wd" label="设备温度" header-align="center" 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="yl" label="设备压力" header-align="center" align="center"/> -->
<!-- <el-table-column prop="zl" 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="lc" label="量程" header-align="center" align="center" /> -->
<el-table-column prop="ds" label="传感器读数" header-align="center" align="center"> <el-table-column
<template slot-scope="scope"> prop="ds"
<span style="color: red;"> label="传感器读数"
{{ scope.row.ds }} header-align="center"
</span> align="center"
<span style="color: #000;"> >
{{ scope.row.dw }} <template slot-scope="scope">
</span> <span style="color: red">
</template> {{ scope.row.ds }}
</el-table-column> </span>
<el-table-column prop="zt" label="报警状态" header-align="center" align="center"> <span style="color: #000">
<template slot-scope="scope"> {{ scope.row.dw }}
<span v-if="scope.row.zt == '一级报警'" style="color: #c00808;"> </span>
{{ scope.row.zt }} </template>
</span> </el-table-column>
<span v-if="scope.row.zt == '二级报警'" style="color: #e23434;"> <el-table-column
{{ scope.row.zt }} prop="zt"
</span> label="报警状态"
</template> header-align="center"
</el-table-column> align="center"
<el-table-column prop="dbz" label="低报值" header-align="center" align="center" /> >
<el-table-column prop="gbz" label="高报值" header-align="center" align="center" /> <template slot-scope="scope">
<el-table-column prop="isDeal" label="是否处理" header-align="center" align="center"> <span v-if="scope.row.zt == '一级报警'" style="color: #c00808">
<template slot-scope="scope"> {{ scope.row.zt }}
<span v-if="scope.row.isDeal == '1'" style="color: green;"> </span>
是 <span v-if="scope.row.zt == '二级报警'" style="color: #e23434">
</span> {{ scope.row.zt }}
<span v-else style="color: red;"> </span>
否 </template>
</span> </el-table-column>
</template> <el-table-column
</el-table-column> prop="dbz"
<el-table-column prop="reason" label="报警原因" header-align="center" align="center"> label="低报值"
</el-table-column> header-align="center"
<el-table-column prop="dealUser" label="处理人" header-align="center" align="center"> align="center"
</el-table-column> />
<el-table-column prop="dealWay" label="处理方式" header-align="center" align="center"> <el-table-column
</el-table-column> prop="gbz"
<el-table-column label="处理时间" align="center" prop="dealTime" /> label="高报值"
<el-table-column label="操作" align="center" class-name="small-padding fixed-width"> header-align="center"
<template slot-scope="scope"> align="center"
<el-button size="mini" type="text" icon="el-icon-thumb" @click="handleUpdate(scope.row)">下发通知</el-button> />
<!--v-if="userName == scope.row.dealUser" --> <el-table-column
<el-button size="mini" type="text" icon="el-icon-dish-1" prop="isDeal"
@click="handleAlarm(scope.row)">处理报警</el-button> label="是否处理"
</template> header-align="center"
</el-table-column> align="center"
</el-table> >
<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 v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
@pagination="handleQuery" /> @pagination="handleQuery" /> -->
<!--发送通知--> <el-pagination
<send-msg :deviceInfo="deviceInfo" v-if="isOpenMsg" :isOpenMsg="isOpenMsg" @closeMsg="closeMsg"></send-msg> @size-change="handleSizeChange"
<!--处理报警--> @current-change="handleCurrentChange"
<deal-alarm :deviceInfo="deviceInfo" v-if="isOpenAlarm" :isOpenAlarm="isOpenAlarm" @closeAlarm="closeAlarm"></deal-alarm> :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>
</div> <script>
</template> import store from "@/store";
import { listAlarm } from "@/api/demostrate/monitor";
<script> import sendMsg from "@/views/demostrate/alarm/sendMsg";
import store from "@/store"; import dealAlarm from "@/views/demostrate/alarm/dealAlarm";
import { listAlarm } from "@/api/demostrate/monitor"; import DeptTree from "@/components/DeptTree/index.vue";
import sendMsg from "@/views/demostrate/alarm/sendMsg"; import { BmlHeatmap } from "vue-baidu-map"; //引人
import dealAlarm from "@/views/demostrate/alarm/dealAlarm"; export default {
import DeptTree from "@/components/DeptTree/index.vue"; name: "alarm",
export default { components: { sendMsg, dealAlarm, DeptTree, BmlHeatmap },
name: "alarm", dicts: [],
components: { sendMsg,dealAlarm,DeptTree }, data() {
dicts: [], return {
data() { loading: false,
return { deviceInfo: {},
loading: false, isOpenMsg: false,
deviceInfo: {}, isOpenAlarm: false,
isOpenMsg: false, isExamSelect: [
isOpenAlarm:false, {
isExamSelect: [ value: "1",
{ label: "是",
value: '1', disabled: true,
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,
}, },
userName: '', {
value: "0",
}; label: "否",
}, },
created() { ],
this.userName = store.getters.user.userName dateList: [],
}, dataList: [],
mounted() { total: 0,
this.init(); // 查询参数
}, queryParams: {
methods: { pageNum: 1,
async init() { 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.emitChange();
this.getList() this.getList();
}, },
/**获取企业下拉框 */ /**获取企业下拉框 */
handleDeptChange(value) { handleDeptChange(value) {
@ -167,60 +309,83 @@
this.$nextTick(() => { this.$nextTick(() => {
this.$emit("queryChange", { this.$emit("queryChange", {
deptId: this.queryParams.deptId, deptId: this.queryParams.deptId,
}); });
}); });
}, },
getList() { getList() {
if (this.dateList && this.dateList.length > 0) { 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 { } else {
this.queryParams.startTime = null this.queryParams.startTime = null;
this.queryParams.endTime = null this.queryParams.endTime = null;
} }
this.loading = true; this.loading = true;
listAlarm(this.queryParams).then(response => { listAlarm(this.queryParams).then((response) => {
this.dataList = response.rows; this.dataList = response.rows;
this.total = response.total; this.total = response.total;
this.loading = false; 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();
//发送通知 },
handleUpdate(row) { handleSizeChange(val) {
this.deviceInfo = row this.queryParams.pageSize = val;
this.isOpenMsg = true this.getList();
}, },
//处理报警 handleCurrentChange(val) {
handleAlarm(row) { this.queryParams.pageNum = val;
this.deviceInfo = row this.getList();
this.isOpenAlarm = true },
}, handleShowMap(row) {
closeMsg() { this.position = {
this.isOpenMsg = false lng: parseFloat(row.longitude),
this.handleQuery() lat: parseFloat(row.latitude),
}, };
closeAlarm() { this.mapDialogTitle = `读数:${row.ds}|低报值:${row.dbz}|高报值:${row.gbz}`;
this.isOpenAlarm = false this.mapDialogVisible = true;
this.handleQuery() },
}, },
resetQuery() { };
this.queryParams.pageNum = 1 </script>
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() <style lang="scss" scoped>
}, .app-container {
::v-deep .el-dialog {
.el-dialog__body {
padding: 0;
} }
}
}
}; </style>
</script>