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

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

调整报警管理-厂界在线页面，解决选择部门后页面无数据的问题，修改页面后端接口。
This commit is contained in:
LokerL 2024-10-11 21:16:39 +08:00
parent 627e8fd07e
commit 72b2ace017
7 changed files with 440 additions and 289 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
RuoYi-Vue-Oracle/src/main/java/com/ruoyi/project/oil/controller/OilAnalysisController.java Normal file
View File

@ -0,0 +1,31 @@
package com.ruoyi.project.oil.controller;
import com.ruoyi.framework.web.controller.BaseController;
import com.ruoyi.framework.web.domain.AjaxResult;
import com.ruoyi.project.oil.service.IOilThDeviceReportService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@RestController
@RequestMapping("/analysis")
public class OilAnalysisController extends BaseController {
@Autowired
private IOilThDeviceReportService oilThDeviceReportService;
@GetMapping("/factoryBoundaryOnline")
public AjaxResult getDeviceReport(Long deptId, String beginDate, String endDate) {
List<Map<String, Object>> alarmCount = oilThDeviceReportService.selectAlarmCountByDeptIdAndDateRange(deptId, beginDate, endDate);
List<Map<String, Object>> alarmCountDesc = oilThDeviceReportService.selectAlarmCountByDeptIdAndDateRangeDesc(deptId, beginDate, endDate);
Map<String, Object> resultMap = new HashMap<>();
resultMap.put("alarmCount", alarmCount);
resultMap.put("alarmCountDesc", alarmCountDesc);
return AjaxResult.success(resultMap);
}
}

7
RuoYi-Vue-Oracle/src/main/java/com/ruoyi/project/oil/mapper/ThDeviceReportMapper.java
View File

@ -71,4 +71,11 @@ public interface ThDeviceReportMapper {
*/ */
@MapKey("day") @MapKey("day")
List<Map<String, Object>> dailyReportDataOverview(@Param("day") String day); List<Map<String, Object>> dailyReportDataOverview(@Param("day") String day);
@MapKey("day")
List<Map<String, Object>> selectAlarmCountByDeptIdAndDateRange(@Param("deptId") Long deptId, @Param("beginDate") String beginDate, @Param("endDate") String endDate);
@MapKey("sn")
List<Map<String, Object>> selectAlarmCountByDeptIdAndDateRangeDesc(@Param("deptId") Long deptId, @Param("beginDate") String beginDate, @Param("endDate") String endDate);
} }

4
RuoYi-Vue-Oracle/src/main/java/com/ruoyi/project/oil/service/IOilThDeviceReportService.java
View File

@ -9,4 +9,8 @@ public interface IOilThDeviceReportService {
List<Map<String, Object>> monthReportDataOverviewDeviceDs(Long deptId, String month); List<Map<String, Object>> monthReportDataOverviewDeviceDs(Long deptId, String month);
List<Map<String, Object>> dailyReportDataOverview(String day); List<Map<String, Object>> dailyReportDataOverview(String day);
List<Map<String, Object>> selectAlarmCountByDeptIdAndDateRange(Long deptId, String beginDate, String endDate);
List<Map<String, Object>> selectAlarmCountByDeptIdAndDateRangeDesc(Long deptId, String beginDate, String endDate);
} }

10
RuoYi-Vue-Oracle/src/main/java/com/ruoyi/project/oil/service/impl/OilThDeviceReportService.java
View File

@ -31,4 +31,14 @@ public class OilThDeviceReportService implements IOilThDeviceReportService {
return camelCaseMapListKey(thDeviceReportMapper.dailyReportDataOverview(day)); return camelCaseMapListKey(thDeviceReportMapper.dailyReportDataOverview(day));
} }
@Override
public List<Map<String, Object>> selectAlarmCountByDeptIdAndDateRange(Long deptId, String beginDate, String endDate) {
return camelCaseMapListKey(thDeviceReportMapper.selectAlarmCountByDeptIdAndDateRange(deptId, beginDate, endDate));
}
@Override
public List<Map<String, Object>> selectAlarmCountByDeptIdAndDateRangeDesc(Long deptId, String beginDate, String endDate) {
return camelCaseMapListKey(thDeviceReportMapper.selectAlarmCountByDeptIdAndDateRangeDesc(deptId, beginDate, endDate));
}
} }

48
RuoYi-Vue-Oracle/src/main/resources/mybatis/oil/ThDeviceReportMapper.xml
View File

@ -177,4 +177,52 @@
GROUP BY TO_CHAR(d.report_time, 'YYYY-MM-DD'), ppp.dept_name, pp.dept_name, p.dept_name, d.sn GROUP BY TO_CHAR(d.report_time, 'YYYY-MM-DD'), ppp.dept_name, pp.dept_name, p.dept_name, d.sn
ORDER BY ppp.dept_name, pp.dept_name, p.dept_name ORDER BY ppp.dept_name, pp.dept_name, p.dept_name
</select> </select>
<!-- 选择日期范围内 某个部门id下的所有子部门的所有设备的报警每日数量；统计(d.zt = '一级报警' OR d.zt = '二级报警')的alarm_count， 统计当天全部的数量count -->
<select id="selectAlarmCountByDeptIdAndDateRange" parameterType="map" resultType="map">
SELECT TO_CHAR(d.report_time, 'YYYY-MM-DD') AS day,
COUNT(CASE WHEN d.zt = '一级报警' OR d.zt = '二级报警' THEN 1 END) AS alarm_count,
COUNT(1) AS count
FROM th_device_report d
LEFT JOIN th_device td ON d.sn = td.sn
LEFT JOIN sys_dept p ON td.dept_id = p.dept_id
WHERE d.sn IN (SELECT d.sn
FROM th_device d
LEFT JOIN sys_dept p ON d.dept_id = p.dept_id
WHERE d.dept_id IN (SELECT dept_id
FROM sys_dept START WITH dept_id = #{deptId}
CONNECT BY PRIOR dept_id = parent_id))
AND d.report_time &gt;= TO_DATE(#{beginDate}, 'YYYY-MM-DD')
AND d.report_time &lt;= TO_DATE(#{endDate}, 'YYYY-MM-DD')
GROUP BY TO_CHAR(d.report_time, 'YYYY-MM-DD')
ORDER BY day
</select>
<!-- 选择日期范围内 某个部门id下的所有子部门的所有设备的报警数量 降序排列 -->
<select id="selectAlarmCountByDeptIdAndDateRangeDesc" parameterType="map" resultType="map">
SELECT d.sn,
COUNT(d.id) AS count,
p.dept_name as "p",
pp.dept_name as "pp",
ppp.dept_name as "ppp",
td.address,
td.name,
d.zt
FROM th_device_report d
LEFT JOIN th_device td ON d.sn = td.sn
LEFT JOIN sys_dept p ON td.dept_id = p.dept_id
LEFT JOIN sys_dept pp ON p.parent_id = pp.dept_id
LEFT JOIN sys_dept ppp ON pp.parent_id = ppp.dept_id
WHERE d.sn IN (SELECT d.sn
FROM th_device d
LEFT JOIN sys_dept p ON d.dept_id = p.dept_id
WHERE d.dept_id IN (SELECT dept_id
FROM sys_dept START WITH dept_id = #{deptId}
CONNECT BY PRIOR dept_id = parent_id))
AND d.report_time &gt;= TO_DATE(#{beginDate}, 'YYYY-MM-DD')
AND d.report_time &lt;= TO_DATE(#{endDate}, 'YYYY-MM-DD')
AND (d.zt = '一级报警' OR d.zt = '二级报警')
GROUP BY d.sn, p.dept_name, pp.dept_name, ppp.dept_name, td.address, td.name, d.zt
ORDER BY count DESC
</select>
</mapper> </mapper>

9
ruoyi-ui/src/api/analysis/index.js Normal file
View File

@ -0,0 +1,9 @@
import request from '@/utils/request'
export function factoryBoundaryOnline(params) {
return request({
url: '/analysis/factoryBoundaryOnline',
params: params,
method: 'get',
})
}

342
ruoyi-ui/src/views/dataAnalysis/bound/index.vue
View File

@ -1,74 +1,92 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<el-form :inline="true" :model="queryParams" ref="form"> <el-row :gutter="10">
<el-col :span="6">
<el-form-item> <dept-tree @deptChange="handleDeptChange" :showQuickGroup="true" />
<span style="margin-right: 10px;">日期</span> </el-col>
<el-date-picker v-model="dateList" type="daterange" range-separator="至" start-placeholder="开始日期" <el-col :span="6">
end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" :picker-options="pickerOptions"> <el-date-picker
v-model="dateList"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
:picker-options="pickerOptions"
@change="dateChange"
>
</el-date-picker> </el-date-picker>
</el-form-item> </el-col>
<el-form-item> </el-row>
<el-button type="primary" icon="el-icon-search" size="mini" @click="queryChart">搜索</el-button>
</el-form-item>
</el-form>
<div style="display: flex;height: 780px;">
<div style="width: 50%;background: #e0e1e2;padding:10px">
<div class="title">厂界在线监测设备报警情况分析</div>
<div style="width:100%;height:700px;" ref="qdCityMap1"></div>
<div style="display: flex; height: 700px; margin-top: 10px;">
<div style="width: 50%; background: #e0e1e2; padding: 10px">
<div class="title">厂界在线监测设备报警情况分析</div>
<div style="width: 100%; height: 650px" ref="qdCityMap1"></div>
</div> </div>
<div style="width: 50%;background: #e0e1e2;padding:10px"> <div style="width: 50%; background: #e0e1e2; padding: 10px">
结合最近14天的数据分析，报警最多的监测设备列表如下，请在未来加强管控！ 结合{{days}}天的数据分析，报警最多的监测设备列表如下，请在未来加强管控！
<el-table v-loading="loading" :data="monitorList" style="height: 800px;"> <el-table v-loading="loading" :data="alarmCountDesc" max-height="650">
<el-table-column label="企业名称" align="center" prop="a" /> <el-table-column label="企业名称" align="center" prop="p" />
<el-table-column label="设备编号" align="center" prop="d" /> <el-table-column label="设备编号" align="center" prop="sn" />
<el-table-column label="放置区域" align="center" prop="b" /> <el-table-column label="放置区域" align="center" prop="address" />
<el-table-column label="报警次数" align="center" prop="e" > <el-table-column label="报警次数" align="center" prop="count">
<template slot-scope="scope"> <template slot-scope="scope">
<span :style="{ color: 'red' }">{{ scope.row.e }}</span> <span :style="{ color: 'red' }">{{ scope.row.count }}</span>
</template> </template>
</el-table-column> </el-table-column>
<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"> <template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">下发通知</el-button> <el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
>下发通知</el-button
>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div>
</div> </div>
<!--发送通知--> <!--发送通知-->
<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>
</div> </div>
</template> </template>
<script> <script>
import { queryAlarmChart} from "@/api/demostrate/monitor"; import { queryAlarmChart } from "@/api/demostrate/monitor";
import { queryMonitorPrediction} from "@/api/demostrate/monitor"; import { queryMonitorPrediction } from "@/api/demostrate/monitor";
import sendMsg from "@/views/demostrate/alarm/sendMsg.vue"; import sendMsg from "@/views/demostrate/alarm/sendMsg.vue";
const echarts = require("echarts"); const echarts = require("echarts");
export default { import { factoryBoundaryOnline } from "@/api/analysis"
import to from '@/utils/await-to.js';
import moment from 'moment';
import { debounce } from '@/utils';
export default {
name: "alarm", name: "alarm",
components: {sendMsg}, components: { sendMsg },
dicts: [], dicts: [],
data() { data() {
return { return {
monitorList:[{'a':'***有限公司',b:'泄压装置',c:'阀门',d:'000SSD-001-001-0002',e:2},{'a':'***有限公司',b:'泄压装置',c:'阀门',d:'000SSD-001-001-0002',e:3},{'a':'***有限公司',b:'泄压装置',c:'阀门',d:'000SSD-001-001-0002',e:3}, dept: null,
{'a':'***有限公司',b:'泄压装置',c:'阀门',d:'000SSD-001-001-0002',e:4}, queryDebounce: null,
{'a':'***有限公司',b:'泄压装置',c:'阀门',d:'000SSD-001-001-0002',e:3} alarmCount: [],
,{'a':'***有限公司',b:'泄压装置',c:'阀门',d:'000SSD-001-001-0002',e:3}, alarmCountDesc: [],
{'a':'***有限公司',b:'泄压装置',c:'阀门',d:'000SSD-001-001-0002',e:6},{'a':'***有限公司',b:'泄压装置',c:'阀门',d:'000SSD-001-001-0002',e:3}, days: 0,
{'a':'***有限公司',b:'泄压装置',c:'阀门',d:'000SSD-001-001-0002',e:3},
{'a':'***有限公司',b:'泄压装置',c:'阀门',d:'000SSD-001-001-0002',e:3},{'a':'***有限公司',b:'泄压装置',c:'阀门',d:'000SSD-001-001-0002',e:3},
], loading: false,
loading:false,
pickerOptions: { pickerOptions: {
// disabledDate(time) { // disabledDate(time) {
// // 计算选择的时间跨度 // // 计算选择的时间跨度
@ -79,135 +97,162 @@
// }, // },
shortcuts: [ shortcuts: [
{ {
text: '最近30天', text: "最近30天",
onClick(picker) { onClick(picker) {
const end = new Date(); const end = new Date();
const start = new Date(); const start = new Date();
start.setDate(start.getDate() - 29); // 30天前 start.setDate(start.getDate() - 29); // 30天前
picker.$emit('pick', [start, end]); picker.$emit("pick", [start, end]);
} },
}]}, },
dateList: [],//日期 ],
total:0, },
isOpenMsg:false, dateList: [], //日期
total: 0,
isOpenMsg: false,
deviceInfo: {}, deviceInfo: {},
// 查询参数 // 查询参数
queryParams: { queryParams: {
startTime: null, deptId: null,
endTime: null, beginDate: null,
endDate: null,
}, },
}; };
},
created() {
}, },
mounted() { mounted() {
this.queryDebounce = debounce(this.query, 100);
setTimeout(() => { setTimeout(() => {
let dsiab_com = this.$refs.qdCityMap1 let dsiab_com = this.$refs.qdCityMap1;
dsiab_com.removeAttribute('_echarts_instance_') dsiab_com.removeAttribute("_echarts_instance_");
this.getDefaultDateRange() this.getDefaultDateRange();
// this.getList(); });
}) },
watch: {
dateList: {
handler: function () {
// 计算选择的时间天数
const diff = Math.abs(
new Date(this.dateList[1]).getTime() -
new Date(this.dateList[0]).getTime()
);
this.days = diff / (1000 * 60 * 60 * 24);
},
deep: true,
},
}, },
methods: { methods: {
dateChange() {
this.queryDebounce();
},
handleDeptChange(dept) {
this.dept = dept;
this.queryDebounce();
},
async query() {
if (this.dept && this.dateList.length > 0) {
this.queryParams.deptId = this.dept.deptId;
this.queryParams.beginDate = this.dateList[0];
this.queryParams.endDate = this.dateList[1];
console.log(this.queryParams);
const [err, res] = await to(factoryBoundaryOnline(this.queryParams));
if (err) {
console.error(err);
this.$message.error("查询失败");
return;
}
if (res.code !== 200) {
this.$message.error(res.msg);
return;
}
console.log(res);
this.alarmCount = res.data.alarmCount;
this.alarmCountDesc = res.data.alarmCountDesc;
this.queryChart();
}
},
//发送通知 //发送通知
handleUpdate(row) { handleUpdate(row) {
this.deviceInfo = row this.deviceInfo = row;
this.isOpenMsg = true this.isOpenMsg = true;
}, },
queryChart() { queryChart() {
if (this.dateList && this.dateList.length > 0) { const xData = [];
this.queryParams.startTime = this.dateList[0] const yData1 = [];
this.queryParams.endTime = this.dateList[1] const yData2 = [];
} else { const yData3 = [];
this.queryParams.startTime = null this.alarmCount.forEach((item) => {
this.queryParams.endTime = null xData.push(item.day);
} yData1.push(item.alarmCount);
// queryAlarmChart(this.queryParams).then(response => { yData3.push(((item.alarmCount / item.count) * 100).toFixed(2));
// if(response.data && response.data.length>0){ });
// let xData=[]//日期 this.init(xData, yData1, yData2, yData3);
// let yData1=[]// 一级报警
// let yData2=[]// 二级报警
// let yData3=[]//报警率
// response.data.forEach(map=>{
// xData.push(map.reportTime)
// yData1.push(map.level1)
// yData2.push(map.level2)
// yData3.push(map.progress)
// })
// this.init(xData,yData1,yData2,yData3)
// }
// });
let xData = ['2024-05-03','2024-05-06','2024-05-08','2024-05-11','2024-05-15','2024-05-20']//日期
let yData1 = [10,12,32,12,5,6,9]// 一级报警
let yData2 = [5,1,3,5,9,2,1]// 二级报警
let yData3 = [15,23,3,12,20,3,2]//报警率
this.init(xData, yData1, yData2, yData3)
}, },
getDefaultDateRange() { getDefaultDateRange() {
const endDate = new Date(); // 当前时间 const endDate = new Date(); // 当前时间
const startDate = new Date(); const startDate = new Date();
startDate.setDate(startDate.getDate() - 7); // 当前时间之前的7天 startDate.setDate(startDate.getDate() - 7); // 当前时间之前的7天
this.dateList = [startDate, endDate] // 格式化为YYYY-MM-DD
this.queryChart()
this.dateList = [
moment(startDate).format("YYYY-MM-DD"),
moment(endDate).format("YYYY-MM-DD"),
];
this.queryChart();
}, },
init(xData,yData1,yData2,yData3) { init(xData, yData1, yData2, yData3) {
const yData2GradientColor = [ const yData2GradientColor = [
{ {
offset: 0, offset: 0,
color: '#0058e1' color: "#0058e1",
}, },
{ {
offset: 1, offset: 1,
color: '#3BA1E3' color: "#3BA1E3",
} },
] ];
const yData3GradientColor = [ const yData3GradientColor = [
{ {
offset: 0, offset: 0,
color: '#32E8D4' color: "#32E8D4",
}, },
{ {
offset: 1, offset: 1,
color: '#4BA1E3' color: "#4BA1E3",
} },
] ];
const option = { const option = {
tooltip: { tooltip: {
trigger: 'axis', // x轴触发 trigger: "axis", // x轴触发
formatter: function (params) { formatter: function (params) {
let list = [] let list = [];
let listItem = '' let listItem = "";
params.forEach((item) => { params.forEach((item) => {
// 柱状图加单位 局，折线图加单位 % // 柱状图加单位 局，折线图加单位 %
let unitValue = item.seriesType == 'bar' ? item.value + '个' : item.value + '%' let unitValue =
list.push(item.marker + '' + item.seriesName + ': ' + unitValue) item.seriesType == "bar" ? item.value + "个" : item.value + "%";
}) list.push(item.marker + "" + item.seriesName + ": " + unitValue);
listItem = list.join('<br/>') });
return '<div>' + listItem + '</div>' listItem = list.join("<br/>");
} return "<div>" + listItem + "</div>";
},
}, },
legend: { legend: {
orient: 'horizontal', // 水平排列 orient: "horizontal", // 水平排列
x: 'center', //可设定图例在左、右、居中 x: "center", //可设定图例在左、右、居中
y: 'top', //可设定图例在上、下、居中 y: "top", //可设定图例在上、下、居中
padding: 6, //位置也可为数组 [距上方距离，距右方距离，距下方距离，距左方距离] padding: 6, //位置也可为数组 [距上方距离，距右方距离，距下方距离，距左方距离]
}, },
xAxis: { xAxis: {
type: 'category', type: "category",
data: xData data: xData,
}, },
yAxis: [ yAxis: [
{ {
type: 'value', type: "value",
name: '报警数', name: "报警数",
yAxisIndex: 0, yAxisIndex: 0,
axisLabel: { axisLabel: {
//y轴每个刻度都加单位 //y轴每个刻度都加单位
@ -215,7 +260,7 @@
}, },
}, },
{ {
type: 'value', type: "value",
name: "报警率(%)", name: "报警率(%)",
min: 0, // 最小为0 min: 0, // 最小为0
max: 100, // 最大为100 max: 100, // 最大为100
@ -228,20 +273,20 @@
], ],
series: [ series: [
{ {
type: 'bar', type: "bar",
stack: 'x', stack: "x",
name: "报警数", name: "报警数",
data: yData1, data: yData1,
label: { label: {
show: true, show: true,
color: '#eee' color: "#eee",
}, },
barGap: "-100%", // 平移自身一个身位，使之与前一个柱状图重叠 barGap: "-100%", // 平移自身一个身位，使之与前一个柱状图重叠
// stack:'重叠', // stack:'重叠',
itemStyle: { itemStyle: {
// borderRadius: [20, 20, 6, 6], // borderRadius: [20, 20, 6, 6],
color: '#15C1AF', color: "#15C1AF",
} },
}, },
// { // {
// type: 'bar', // type: 'bar',
@ -260,8 +305,8 @@
// } // }
// }, // },
{ {
type: 'line', type: "line",
name: '报警率(%)', name: "报警率(%)",
data: yData3, data: yData3,
yAxisIndex: 1, // 1表示以右侧Y轴为基准 0表示以左侧Y轴为基准 yAxisIndex: 1, // 1表示以右侧Y轴为基准 0表示以左侧Y轴为基准
symbolSize: 10, // 圆点大小 symbolSize: 10, // 圆点大小
@ -269,27 +314,25 @@
// color: '#74DER1', // 折线图小圆点颜色 // color: '#74DER1', // 折线图小圆点颜色
// }, // },
lineStyle: { lineStyle: {
color: '#DE390F', color: "#DE390F",
}, },
label: { label: {
show: true, show: true,
color: '#ddd', color: "#ddd",
formatter: '{c}%' // {c}数据值 formatter: "{c}%", // {c}数据值
}, },
} },
] ],
}; };
this.myChart = echarts.init(this.$refs.qdCityMap1) this.myChart = echarts.init(this.$refs.qdCityMap1);
this.myChart.setOption(option); this.myChart.setOption(option);
}, },
},
};
} </script>
}; <style>
</script> .title {
<style>
.title {
padding-left: 10px; padding-left: 10px;
color: #212121; color: #212121;
font-size: 20px; font-size: 20px;
@ -297,6 +340,5 @@
margin-top: 10px; margin-top: 10px;
background-position-y: 7px; background-position-y: 7px;
} }
</style> </style>