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}

577
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> <el-form-item label="处理人用户名" prop="dealUser">
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> <el-input v-model="queryParams.dealUser"></el-input>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> </el-form-item>
</el-form-item> <el-form-item>
</el-form> <span>日期</span>
<el-date-picker
<el-table v-loading="loading" :data="dataList" height="700px"> v-model="dateList"
<el-table-column prop="factoryName" label="安装企业" header-align="center" align="center" /> type="daterange"
<el-table-column prop="name" label="设备名称" header-align="center" align="center" /> range-separator="至"
<el-table-column prop="sn" label="设备编号" header-align="center" align="center" /> start-placeholder="开始日期"
<el-table-column prop="reportTime" label="上报时间" header-align="center" align="center" /> end-placeholder="结束日期"
<!-- <el-table-column prop="wd" label="设备温度" header-align="center" align="center"/> 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="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">
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" <span v-if="scope.row.isDeal == '1'" style="color: green"> 是 </span>
@pagination="handleQuery" /> <span v-else style="color: red"> 否 </span>
<!--发送通知--> </template>
<send-msg :deviceInfo="deviceInfo" v-if="isOpenMsg" :isOpenMsg="isOpenMsg" @closeMsg="closeMsg"></send-msg> </el-table-column>
<!--处理报警--> <el-table-column
<deal-alarm :deviceInfo="deviceInfo" v-if="isOpenAlarm" :isOpenAlarm="isOpenAlarm" @closeAlarm="closeAlarm"></deal-alarm> prop="reason"
label="报警原因"
</div> header-align="center"
</template> align="center"
>
<script> </el-table-column>
import store from "@/store"; <el-table-column
import { listAlarm } from "@/api/demostrate/monitor"; prop="dealUser"
import sendMsg from "@/views/demostrate/alarm/sendMsg"; label="处理人"
import dealAlarm from "@/views/demostrate/alarm/dealAlarm"; header-align="center"
import DeptTree from "@/components/DeptTree/index.vue"; align="center"
export default { >
name: "alarm", </el-table-column>
components: { sendMsg,dealAlarm,DeptTree }, <el-table-column
dicts: [], prop="dealWay"
data() { label="处理方式"
return { header-align="center"
loading: false, align="center"
deviceInfo: {}, >
isOpenMsg: false, </el-table-column>
isOpenAlarm:false, <el-table-column label="处理时间" align="center" prop="dealTime" />
isExamSelect: [ <el-table-column
{ label="操作"
value: '1', align="center"
label: '是', class-name="small-padding fixed-width"
disabled: true >
}, <template slot-scope="scope">
{ <el-button
value: '0', size="mini"
label: '否' type="text"
} icon="el-icon-thumb"
], @click="handleUpdate(scope.row)"
dateList: [], >下发通知</el-button
dataList: [], >
total: 0, <!--v-if="userName == scope.row.dealUser" -->
// 查询参数 <el-button
queryParams: { size="mini"
pageNum: 1, type="text"
pageSize: 10, icon="el-icon-dish-1"
sn: null, @click="handleAlarm(scope.row)"
name: null, >处理报警</el-button
dealUser:null, >
isDeal:null, <el-button
startTime: null, size="mini"
endTime: null, type="text"
factoryId:null, icon="el-icon-location-information"
deptId: null, @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: '', {
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) {
handleUpdate(row) { this.deviceInfo = row;
this.deviceInfo = row this.isOpenMsg = true;
this.isOpenMsg = true },
}, //处理报警
//处理报警 handleAlarm(row) {
handleAlarm(row) { this.deviceInfo = row;
this.deviceInfo = row this.isOpenAlarm = true;
this.isOpenAlarm = true },
}, closeMsg() {
closeMsg() { this.isOpenMsg = false;
this.isOpenMsg = false this.handleQuery();
this.handleQuery() },
}, closeAlarm() {
closeAlarm() { this.isOpenAlarm = false;
this.isOpenAlarm = false this.handleQuery();
this.handleQuery() },
}, resetQuery() {
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() {
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),
};
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>