wenjy
/
jrm-intelligent-iot
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

change - 首页样式修改

Browse Source
main
wenjy 3 years ago
parent b6afb730e7
commit a86c03c7f0
6 changed files with 427 additions and 436 deletions
Show Stats Download Patch File Download Diff File

8
ruoyi-admin/DockerFile.DockerFile
Unescape Escape View File

@ -1,12 +1,12 @@
#使用jdk8作为基础镜像 #使用jdk8作为基础镜像
FROM java:8 FROM java:8
#指定作者 #指定作者
MAINTAINER gaox MAINTAINER WenJY
#暴露容器的8088端口 #暴露容器的8088端口
EXPOSE 8089 EXPOSE 8089
#将复制指定的xxl-job-admin-2.1.0.jar为容器中的job.jar，相当于拷贝到容器中取了个别名 #将复制指定的xxl-job-admin-2.1.0.jar为容器中的job.jar，相当于拷贝到容器中取了个别名
ADD target/ruoyi-admin.jar /job.jar ADD target/ruoyi-admin.jar /jrm-intelligent-iot.jar
#创建一个新的容器并在新的容器中运行命令 #创建一个新的容器并在新的容器中运行命令
RUN bash -c 'touch /job.jar' RUN bash -c 'touch /jrm-intelligent-iot.jar'
#相当于在容器中用cmd命令执行jar包 指定外部配置文件 #相当于在容器中用cmd命令执行jar包 指定外部配置文件
ENTRYPOINT ["java","-jar","/job.jar"] ENTRYPOINT ["java","-jar","/jrm-intelligent-iot.jar"]

105
ruoyi-admin/src/main/java/com/ruoyi/web/controller/iot/IndexController.java
Unescape Escape View File

@ -18,14 +18,56 @@ import java.util.List;
public class IndexController { public class IndexController {
@GetMapping() @GetMapping()
public String index() public String index() {
{
return "iot-ui/index"; return "iot-ui/index";
} }
@GetMapping("/getUnitInfo") /**
* 监控单元统计
* @author WenJY
* @date 2022/2/23 14:26
* @return java.lang.String
*/
@GetMapping("/getMonitorUnitCharts")
@ResponseBody @ResponseBody
public String getUnitInfo(){ public String getMonitorUnitCharts(){
return "[\n" +
" {\n" +
" \"value\": 32,\n" +
" \"name\": \"隔离开关\"\n" +
" },\n" +
" {\n" +
" \"value\": 14,\n" +
" \"name\": \"电流互感器\"\n" +
" },\n" +
" {\n" +
" \"value\": 26,\n" +
" \"name\": \"电压互感器\"\n" +
" },\n" +
" {\n" +
" \"value\": 20,\n" +
" \"name\": \"变压器\"\n" +
" },\n" +
" {\n" +
" \"value\": 10,\n" +
" \"name\": \"电容电抗器\"\n" +
" },\n" +
" {\n" +
" \"value\": 10,\n" +
" \"name\": \"避雷器\"\n" +
" }\n" +
" ]";
}
/**
* 监控单元统计
* @author WenJY
* @date 2022/2/23 13:55
* @return java.lang.String
*/
@GetMapping("/getMonitorUnitInfo")
@ResponseBody
public String getMonitorUnitInfo() {
return "{\n" return "{\n"
+ " \"header\": [\"名称\", \"监控数量\", \"告警数量\"],\n" + " \"header\": [\"名称\", \"监控数量\", \"告警数量\"],\n"
+ " \"data\": [\n" + " \"data\": [\n"
@ -39,9 +81,30 @@ public class IndexController {
+ "}"; + "}";
} }
@GetMapping("/getMonitorStateInfo") /**
* 传感器状态统计
* @author WenJY
* @date 2022/2/23 13:54
* @return java.lang.String
*/
@GetMapping("/getSensorStateCharts")
@ResponseBody
public String getSensorStateCharts(){
return "{\n" +
" \"yAxis\": [\"在线\", \"离线\", \"告警\"],\n" +
" \"data\": [60, 132, 89]\n" +
"}";
}
/**
* 传感器状态统计
* @author WenJY
* @date 2022/2/23 13:55
* @return java.lang.String
*/
@GetMapping("/getSensorStateInfo")
@ResponseBody @ResponseBody
public String getMonitorStateInfo(){ public String getSensorStateInfo() {
return "{\n" return "{\n"
+ " \"header\": [\"名称\", \"安装数量\", \"离线数量\"],\n" + " \"header\": [\"名称\", \"安装数量\", \"离线数量\"],\n"
+ " \"data\": [\n" + " \"data\": [\n"
@ -54,5 +117,35 @@ public class IndexController {
+ " ]\n" + " ]\n"
+ "}"; + "}";
} }
/**
* 告警数量统计
* @author WenJY
* @date 2022/2/23 13:54
* @return java.lang.String
*/
@GetMapping("/getAlarmAmount")
@ResponseBody
public String getAlarmAmount(){
return "{\n" +
" \"yAxis\": [\"设备高温\", \"设备振动\", \"烟雾火情\", \"环境大风\"],\n" +
" \"data\": [60, 132, 89, 100]\n" +
"}";
} }
/**
* 告警趋势
* @author WenJY
* @date 2022/2/23 14:23
* @return java.lang.String
*/
@GetMapping("/getAlarmTrend")
@ResponseBody
public String getAlarmTrend(){
return "{\n" +
" \"xAxis\": [\"06-21\", \"06-22\", \"06-23\", \"06-24\", \"06-25\", \"06-26\", \"06-27\"],\n" +
" \"data\": [18, 5, 4, 2, 1, 7, 6]\n" +
"}";
}
}

36
ruoyi-admin/src/main/resources/static/css/lot-ui/lot-indexStyle.css
Unescape Escape View File

@ -7,6 +7,42 @@ body {
background-size: 100% 100%; background-size: 100% 100%;
} }
/*关键设置 tbody出现滚动条*/
tbody {
display: block;
height: 72%;
overflow-y: scroll;
overflow-x: hidden;
}
table thead,tbody tr {
display: table;
width: 100%;
table-layout: fixed;
}
tbody::-webkit-scrollbar {
/*滚动条整体样式*/
width: 5px;
/*高宽分别对应横竖滚动条的尺寸*/
height: 1px;
}
tbody::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: #004EA1;
}
tbody::-webkit-scrollbar-track {
/*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 10px;
background: white;
}
*{ *{
margin: 0; margin: 0;
padding: 0; padding: 0;

553
ruoyi-admin/src/main/resources/static/js/Iot-ui/iotIndex.js
Unescape Escape View File

@ -1,179 +1,114 @@
//监控单元列表
$(() => { $(() => {
var monitorUnitCharts = echarts.init(document.getElementById("monitorUnitCharts"));
let series = []; $.ajax({
let pieDatas = [ url: '/iot/index/getMonitorUnitCharts',
{ type: 'GET',
"value": 30, dataType: 'JSON',
"name": "隔离开关" success: function (datas) {
}, pieChart(datas, document.getElementById("monitorUnitCharts"));
{ },
"value": 14, error: function (e) {
"name": "电流互感器" console.log("异常：" + e)
},
{
"value": 26,
"name": "电压互感器"
},
{
"value": 20,
"name": "变压器"
},
{
"value": 10,
"name": "电容电抗器"
},
{
"value": 10,
"name": "避雷器"
} }
];
let maxRadius = 80,
barWidth = 5,
barGap = 5;
let sumValue = 0;
let showValue = true,showPercent = true;
pieDatas.map(item => {
sumValue += item.value;
}) })
let barColor = [
{ $.ajax({
"color1": "rgba(222, 125, 255, 1)", url: '/iot/index/getMonitorUnitInfo',
"color2": "" type: 'GET',
}, dataType: 'JSON',
{ success: function (datas) {
"color1": "rgba(250, 118, 121, 1)", listTable(datas, "#monitorUnitTable");
"color2": "" },
}, error: function (e) {
{ console.log("异常：" + e)
"color1": "rgba(53, 198, 215, 1)",
"color2": ""
},
{
"color1": "rgba(101, 223, 138, 1)",
"color2": ""
},
{
"color1": "rgba(253, 161, 79, 1)",
"color2": ""
},
{
"color1": "rgba(68,165,255,1)",
"color2": ""
} }
]; })
pieDatas.map((item, i) => { })
series.push({
type: 'pie', //传感器状态统计
clockWise: false, //顺时加载 $(() => {
hoverAnimation: false, //鼠标移入变大
radius: [(maxRadius - i * (barGap + barWidth)) + '%', (maxRadius - (i + 1) * barWidth - i * barGap) + '%'], $.ajax({
center: [ "30%", "50%"], url: '/iot/index/getSensorStateCharts',
label: { type: 'GET',
show: false dataType: 'JSON',
}, success: function (datas) {
itemStyle: { barChats(datas, document.getElementById('monitorStateCharts'));
label: { },
show: false, error: function (e) {
}, console.log("异常：" + e)
labelLine: {
show: false
},
borderWidth: 5,
},
data: [{
value: item.value,
name: item.name,
itemStyle: {
color: barColor[i]&&barColor[i].color1 || 'rgba(68,165,255,1)'
} }
}, {
value: sumValue - item.value,
name: '',
itemStyle: {
color: "transparent",
},
tooltip: {
show: false
},
hoverAnimation: false
}]
}) })
series.push({
name: 'blank', $.ajax({
type: 'pie', url: '/iot/index/getSensorStateInfo',
silent: true, type: 'GET',
z: 0, dataType: 'JSON',
clockWise: false, //顺时加载 success: function (datas) {
hoverAnimation: false, //鼠标移入变大 listTable(datas, "#monitorStateTable");
radius: [(maxRadius - i * (barGap + barWidth)) + '%', (maxRadius - (i + 1) * barWidth - i * barGap) + '%'], },
center: [ "30%", "50%"], error: function (e) {
label: { console.log("异常：" + e)
show: false }
},
itemStyle: {
label: {
show: false,
},
labelLine: {
show: false
},
borderWidth: 5,
},
data: [{
value: 1,
itemStyle: {
color: "rgba(255, 255, 255,.13)",
borderWidth: 0
},
tooltip: {
show: false
},
hoverAnimation: false
}]
});
}) })
var monitorUnitOption = {
grid: {
left: 0,
right: 0,
top: 0,
bottom: 0,
},
tooltip: {
show: true,
trigger: "item",
},
legend: {
show: true,
left: '60%',
top: 'middle',
icon: "circle",
itemWidth: 10,
itemHeight: 10,
itemGap: 2,
textStyle: {
fontSize: 12,
color: '#fff',
},
formatter: (name) => {
var datas = pieDatas;
let total = 0;
datas.map(item => {
total += (item.value - 0)
}) })
let valueIndex = datas.map(item => item.name).indexOf(name);
return name + " " + (showValue ? datas[valueIndex].value + (monitorUnitOption.legendValueUnit || '') + ' ' : '') ;
} ,
},
series: series,
};
monitorUnitCharts.setOption(monitorUnitOption); //告警统计
$(window).resize(monitorUnitCharts.resize); $(() => {
//告警数量
$.ajax({
url: '/iot/index/getAlarmAmount',
type: 'GET',
dataType: 'JSON',
success: function (datas) {
barChats(datas, document.getElementById('alarmStatistics'));
},
error: function (e) {
console.log("异常：" + e)
}
})
//告警趋势
$.ajax({
url: '/iot/index/getAlarmTrend',
type: 'GET',
dataType: 'JSON',
success: function (datas) {
lineCharts(datas, document.getElementById("alarmTrend"));
},
error: function (e) {
console.log("异常：" + e)
}
})
})
/*传感器状态统计*/ //自定义table
var monitorStateCharts = echarts.init(document.getElementById('monitorStateCharts')); function listTable(datas, id) {
var colorArray = [ let info = '<table style="width: 100%;height: 100%;">';
info += '<thead><tr style="height: 20%;width: 100%;">';
datas.header.map(x => {
info += '<th style="text-align:center;color:#01F2F8;font-weight:bold">' + x + '</th>';
});
info += '</tr></thead>';
info += '<tbody>';
datas.data.map(x => {
info += '<tr style="height: 20%;width: 100%;">';
x.forEach(y => {
info += '<td style="text-align:center;color:#01F2F8;">' + y + '</td>';
});
info += '</tr>';
});
info += '</tbody>';
info += "</table>";
$(id).html(info);
}
//柱状图表
function barChats(datas, id) {
let charts = echarts.init(id);
let colorArray = [
{ {
top: '#00F7FE', //黄 top: '#00F7FE', //黄
bottom: 'rgba(30,172,244)' bottom: 'rgba(30,172,244)'
@ -189,7 +124,7 @@ $(()=>{
bottom: 'rgba(32,97,245)' bottom: 'rgba(32,97,245)'
} }
]; ];
var monitorStateOptions = { let options = {
tooltip: { tooltip: {
show: true, show: true,
formatter: "{b}:{c}" formatter: "{b}:{c}"
@ -245,7 +180,7 @@ $(()=>{
color: '#fff', color: '#fff',
} }
}, },
data: ['异常', '测试', '故障', '正常'] data: datas.yAxis
} }
], ],
@ -315,171 +250,168 @@ $(()=>{
}, },
barGap: '0%', barGap: '0%',
barCategoryGap: '50%', barCategoryGap: '50%',
data: [60, 132, 89, 100] data: datas.data
} }
] ]
}; };
charts.setOption(options);
$(window).resize(charts.resize);
}
monitorStateCharts.setOption(monitorStateOptions); //饼状图
$(window).resize(monitorStateCharts.resize); function pieChart(pieDatas, id) {
let charts = echarts.init(id);
let series = [];
/*告警数量统计*/ let maxRadius = 80,
var alarmStatisticsCharts = echarts.init(document.getElementById('alarmStatistics')); barWidth = 5,
var alarmColorArray = [ barGap = 5;
let sumValue = 0;
let showValue = true, showPercent = true;
pieDatas.map(item => {
sumValue += item.value;
})
let barColor = [
{ {
top: '#00F7FE', //黄 "color1": "rgba(222, 125, 255, 1)",
bottom: 'rgba(30,172,244)' "color2": ""
}, {
top: '#87FFD2', //绿
bottom: 'rgba(1,248,255)'
}, },
{ {
top: '#FE8A03', //蓝 "color1": "rgba(250, 118, 121, 1)",
bottom: 'rgba(247,67,30)' "color2": ""
}, { },
top: '#01B9FF', //深蓝 {
bottom: 'rgba(32,97,245)' "color1": "rgba(53, 198, 215, 1)",
"color2": ""
},
{
"color1": "rgba(101, 223, 138, 1)",
"color2": ""
},
{
"color1": "rgba(253, 161, 79, 1)",
"color2": ""
},
{
"color1": "rgba(68,165,255,1)",
"color2": ""
} }
]; ];
var alarmStatisticsOptions = { pieDatas.map((item, i) => {
tooltip: { series.push({
show: true, type: 'pie',
formatter: "{b}:{c}" clockWise: false, //顺时加载
hoverAnimation: false, //鼠标移入变大
radius: [(maxRadius - i * (barGap + barWidth)) + '%', (maxRadius - (i + 1) * barWidth - i * barGap) + '%'],
center: ["30%", "50%"],
label: {
show: false
}, },
grid: { itemStyle: {
left: '3%', label: {
top: '5%', show: false,
right: '5%',
bottom: '5%',
containLabel: true
}, },
labelLine: {
xAxis: {
type: 'value',
show:true,
position: 'bottom',
axisTick: {
show: false show: false
}, },
axisLine: { borderWidth: 5,
show: true,
lineStyle: {
color: '#fff',
}
}, },
splitLine: { data: [{
lineStyle: { value: item.value,
type:'dashed', name: item.name,
color: ['#315070'], itemStyle: {
color: barColor[i] && barColor[i].color1 || 'rgba(68,165,255,1)'
}
}, {
value: sumValue - item.value,
name: '',
itemStyle: {
color: "transparent",
}, },
show: true, tooltip: {
show: false
}, },
hoverAnimation: false
}]
})
series.push({
name: 'blank',
type: 'pie',
silent: true,
z: 0,
clockWise: false, //顺时加载
hoverAnimation: false, //鼠标移入变大
radius: [(maxRadius - i * (barGap + barWidth)) + '%', (maxRadius - (i + 1) * barWidth - i * barGap) + '%'],
center: ["30%", "50%"],
label: {
show: false
}, },
yAxis: [{ itemStyle: {
type: 'category', label: {
axisTick: {
show: false, show: false,
alignWithLabel: false,
length: 5,
}, },
"splitLine": { //网格线 labelLine: {
lineStyle: { show: false
type:'dashed',
color: ['#315070'],
}, },
"show": true borderWidth: 5,
}, },
inverse: 'true', //排序 data: [{
axisLine: { value: 1,
itemStyle: {
color: "rgba(255, 255, 255,.13)",
borderWidth: 0
},
tooltip: {
show: false
},
hoverAnimation: false
}]
});
})
let option = {
grid: {
left: 0,
right: 0,
top: 0,
bottom: 0,
},
tooltip: {
show: true, show: true,
lineStyle: { trigger: "item",
color: '#fff',
}
}, },
data: ['设备高温', '设备振动', '烟雾火情', '环境大风'] legend: {
}
],
series: [{
name: '数量',
type: 'bar',
label: {
normal: {
show: true, show: true,
position: 'right', left: '60%',
formatter: '{c}', top: 'middle',
icon: "circle",
itemWidth: 10,
itemHeight: 10,
itemGap: 2,
textStyle: { textStyle: {
color: 'white' //color of value fontSize: 12,
} color: '#fff',
}
}, },
itemStyle: { formatter: (name) => {
normal: { var datas = pieDatas;
show: true, let total = 0;
color: function(params) { datas.map(item => {
let num = colorArray.length; total += (item.value - 0)
return { })
type: 'linear', let valueIndex = datas.map(item => item.name).indexOf(name);
colorStops: [{ return name + " " + (showValue ? datas[valueIndex].value + (option.legendValueUnit || '') + ' ' : '');
offset: 0,
color: alarmColorArray[params.dataIndex % num].bottom
}, {
offset: 1,
color: alarmColorArray[params.dataIndex % num].top
}, {
offset: 0,
color: alarmColorArray[params.dataIndex % num].bottom
}, {
offset: 1,
color: alarmColorArray[params.dataIndex % num].top
}, {
offset: 0,
color: alarmColorArray[params.dataIndex % num].bottom
}, {
offset: 1,
color: alarmColorArray[params.dataIndex % num].top
}, {
offset: 0,
color: alarmColorArray[params.dataIndex % num].bottom
}, {
offset: 1,
color: alarmColorArray[params.dataIndex % num].top
}, {
offset: 0,
color: alarmColorArray[params.dataIndex % num].bottom
}, {
offset: 1,
color: alarmColorArray[params.dataIndex % num].top
}, {
offset: 0,
color: alarmColorArray[params.dataIndex % num].bottom
}, {
offset: 1,
color: alarmColorArray[params.dataIndex % num].top
}],
//globalCoord: false
}
}, },
borderWidth: 0,
borderColor: '#333',
}
}, },
barGap: '0%', series: series,
barCategoryGap: '50%',
data: [60, 132, 89, 100]
}
]
}; };
alarmStatisticsCharts.setOption(alarmStatisticsOptions); charts.setOption(option);
$(window).resize(alarmStatisticsCharts.resize); $(window).resize(charts.resize);
}
/*告警趋势*/ //折线图
var alarmTrendCharts = echarts.init(document.getElementById("alarmTrend")); function lineCharts(datas, id) {
var alarmTrendOptions = { let charts = echarts.init(id);
let options = {
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
@ -505,20 +437,11 @@ $(()=>{
}, },
}, },
}, },
// legend: {
// data: ['系统设备','报警装置'],
// textStyle: {
// fontSize: 12,
// color: 'rgb(0,253,255,0.6)'
// },
// right: '4%'
// },
grid: { grid: {
top: '10%', top: '10%',
left: '14%', left: '14%',
right: '10%', right: '10%',
bottom: '15%', bottom: '15%',
// containLabel: true
}, },
xAxis: [{ xAxis: [{
type: 'category', type: 'category',
@ -535,7 +458,7 @@ $(()=>{
show: false show: false
}, },
boundaryGap: false, boundaryGap: false,
data: ["06-21","06-22","06-23","06-24","06-25","06-26","06-27"]//this.$moment(data.times).format("HH-mm") , data: datas.xAxis//this.$moment(data.times).format("HH-mm") ,
}], }],
@ -604,11 +527,11 @@ $(()=>{
], false), ], false),
} }
}, },
data: [3,5,4,2,1,7,6]//data.values data: datas.data//data.values
}, },
] ]
}; };
alarmTrendCharts.setOption(alarmTrendOptions); charts.setOption(options);
$(window).resize(alarmTrendCharts.resize); $(window).resize(charts.resize);
}) }

2
ruoyi-admin/src/main/resources/templates/index-topnav.html
Unescape Escape View File

@ -302,7 +302,7 @@
</div> </div>
<div th:if="${footer}" class="footer"> <div th:if="${footer}" class="footer">
<div class="pull-right">© [[${copyrightYear}]] RuoYi Copyright </div> <div class="pull-right">© [[${copyrightYear}]] Mesnac Copyright </div>
</div> </div>
</div> </div>
<!--右侧部分结束--> <!--右侧部分结束-->

61
ruoyi-admin/src/main/resources/templates/iot-ui/index.html
Unescape Escape View File

@ -39,14 +39,6 @@
<div class="right right-top" style="right: 2.6%;color: #02F8FE"> <div class="right right-top" style="right: 2.6%;color: #02F8FE">
<span>124</span> <span>124</span>
</div> </div>
<!--监控单元告警&#45;&#45;历史未确认数
<div class="right right-bottom" style="right: 10.8%;color: #1795FF">
<span>123</span>
</div>
&lt;!&ndash;监控单元告警&#45;&#45;历史总告警数&ndash;&gt;
<div class="right right-bottom" style="right: 2.6%;color: #02F8FE">
<span>123</span>
</div>-->
<!--告警数量统计--> <!--告警数量统计-->
<div class="rightEcharts alarmStatistics" id="alarmStatistics"></div> <div class="rightEcharts alarmStatistics" id="alarmStatistics"></div>
@ -58,58 +50,5 @@
<script th:src="@{/js/Iot-ui/iotIndex.js}"></script> <script th:src="@{/js/Iot-ui/iotIndex.js}"></script>
<script th:src="@{/js/Iot-ui/scrollTable.js}"></script> <script th:src="@{/js/Iot-ui/scrollTable.js}"></script>
<script>
/*监控单元列表*/
$.ajax({
url: '/iot/index/getUnitInfo',
type: 'GET',
dataType: 'JSON',
success: function(datas) {
dynamicTable({
el: '#monitorUnitTable',
rowNum: 2,
timeout: 1,
header: datas.header,
data: datas.data,
index: false,
fontColor: '#01F2F8 ',
indexBGC: '#86F3FF',
headerBGC: '#032F57',
oddRowBGC: '#032F57',
evenRowBGC: '#042B54',
colWidth: ['80', '70', '70']
});
},
error: function(e) {
console.log("异常："+e)
}
})
/*传感器列表*/
$.ajax({
url: '/iot/index/getMonitorStateInfo',
type: 'GET',
dataType: 'JSON',
success: function(datas) {
dynamicTable({
el: '#monitorStateTable',
rowNum: 2,
timeout: 1,
header: datas.header,
data: datas.data,
index: false,
fontColor: '#01F2F8 ',
indexBGC: '#86F3FF',
headerBGC: '#032F57',
oddRowBGC: '#032F57',
evenRowBGC: '#042B54',
colWidth: ['80', '70', '70']
});
},
error: function(e) {
console.log("异常："+e)
}
})
</script>
</body> </body>
</html> </html>
Write Preview
Loading…
Cancel
Save