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作为基础镜像
FROM java:8
#指定作者
MAINTAINER gaox
MAINTAINER WenJY
#暴露容器的8088端口
EXPOSE 8089
#将复制指定的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包 指定外部配置文件
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 {
@GetMapping()
public String index()
{
public String index() {
return "iot-ui/index";
}
@GetMapping("/getUnitInfo")
/**
* 监控单元统计
* @author WenJY
* @date 2022/2/23 14:26
* @return java.lang.String
*/
@GetMapping("/getMonitorUnitCharts")
@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"
+ " \"header\": [\"名称\", \"监控数量\", \"告警数量\"],\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
public String getMonitorStateInfo(){
public String getSensorStateInfo() {
return "{\n"
+ " \"header\": [\"名称\", \"安装数量\", \"离线数量\"],\n"
+ " \"data\": [\n"
@ -54,5 +117,35 @@ public class IndexController {
+ " ]\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%;
}
/*关键设置 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;
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 = [];
let pieDatas = [
{
"value": 30,
"name": "隔离开关"
},
{
"value": 14,
"name": "电流互感器"
},
{
"value": 26,
"name": "电压互感器"
},
{
"value": 20,
"name": "变压器"
},
{
"value": 10,
"name": "电容电抗器"
},
{
"value": 10,
"name": "避雷器"
$.ajax({
url: '/iot/index/getMonitorUnitCharts',
type: 'GET',
dataType: 'JSON',
success: function (datas) {
pieChart(datas, document.getElementById("monitorUnitCharts"));
},
error: function (e) {
console.log("异常：" + e)
}
];
let maxRadius = 80,
barWidth = 5,
barGap = 5;
let sumValue = 0;
let showValue = true,showPercent = true;
pieDatas.map(item => {
sumValue += item.value;
})
let barColor = [
{
"color1": "rgba(222, 125, 255, 1)",
"color2": ""
},
{
"color1": "rgba(250, 118, 121, 1)",
"color2": ""
},
{
"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": ""
$.ajax({
url: '/iot/index/getMonitorUnitInfo',
type: 'GET',
dataType: 'JSON',
success: function (datas) {
listTable(datas, "#monitorUnitTable");
},
error: function (e) {
console.log("异常：" + e)
}
];
pieDatas.map((item, i) => {
series.push({
type: 'pie',
clockWise: false, //顺时加载
hoverAnimation: false, //鼠标移入变大
radius: [(maxRadius - i * (barGap + barWidth)) + '%', (maxRadius - (i + 1) * barWidth - i * barGap) + '%'],
center: [ "30%", "50%"],
label: {
show: false
},
itemStyle: {
label: {
show: false,
},
labelLine: {
show: false
},
borderWidth: 5,
},
data: [{
value: item.value,
name: item.name,
itemStyle: {
color: barColor[i]&&barColor[i].color1 || 'rgba(68,165,255,1)'
})
})
//传感器状态统计
$(() => {
$.ajax({
url: '/iot/index/getSensorStateCharts',
type: 'GET',
dataType: 'JSON',
success: function (datas) {
barChats(datas, document.getElementById('monitorStateCharts'));
},
error: function (e) {
console.log("异常：" + e)
}
}, {
value: sumValue - item.value,
name: '',
itemStyle: {
color: "transparent",
},
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
},
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
}]
});
$.ajax({
url: '/iot/index/getSensorStateInfo',
type: 'GET',
dataType: 'JSON',
success: function (datas) {
listTable(datas, "#monitorStateTable");
},
error: function (e) {
console.log("异常：" + e)
}
})
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)
}
})
})
/*传感器状态统计*/
var monitorStateCharts = echarts.init(document.getElementById('monitorStateCharts'));
var colorArray = [
//自定义table
function listTable(datas, id) {
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', //黄
bottom: 'rgba(30,172,244)'
@ -189,7 +124,7 @@ $(()=>{
bottom: 'rgba(32,97,245)'
}
];
var monitorStateOptions = {
let options = {
tooltip: {
show: true,
formatter: "{b}:{c}"
@ -245,7 +180,7 @@ $(()=>{
color: '#fff',
}
},
data: ['异常', '测试', '故障', '正常']
data: datas.yAxis
}
],
@ -315,171 +250,168 @@ $(()=>{
},
barGap: '0%',
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 = [];
/*告警数量统计*/
var alarmStatisticsCharts = echarts.init(document.getElementById('alarmStatistics'));
var alarmColorArray = [
let maxRadius = 80,
barWidth = 5,
barGap = 5;
let sumValue = 0;
let showValue = true, showPercent = true;
pieDatas.map(item => {
sumValue += item.value;
})
let barColor = [
{
top: '#00F7FE', //黄
bottom: 'rgba(30,172,244)'
}, {
top: '#87FFD2', //绿
bottom: 'rgba(1,248,255)'
"color1": "rgba(222, 125, 255, 1)",
"color2": ""
},
{
top: '#FE8A03', //蓝
bottom: 'rgba(247,67,30)'
}, {
top: '#01B9FF', //深蓝
bottom: 'rgba(32,97,245)'
"color1": "rgba(250, 118, 121, 1)",
"color2": ""
},
{
"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 = {
tooltip: {
show: true,
formatter: "{b}:{c}"
pieDatas.map((item, i) => {
series.push({
type: 'pie',
clockWise: false, //顺时加载
hoverAnimation: false, //鼠标移入变大
radius: [(maxRadius - i * (barGap + barWidth)) + '%', (maxRadius - (i + 1) * barWidth - i * barGap) + '%'],
center: ["30%", "50%"],
label: {
show: false
},
grid: {
left: '3%',
top: '5%',
right: '5%',
bottom: '5%',
containLabel: true
itemStyle: {
label: {
show: false,
},
xAxis: {
type: 'value',
show:true,
position: 'bottom',
axisTick: {
labelLine: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#fff',
}
borderWidth: 5,
},
splitLine: {
lineStyle: {
type:'dashed',
color: ['#315070'],
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",
},
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: [{
type: 'category',
axisTick: {
itemStyle: {
label: {
show: false,
alignWithLabel: false,
length: 5,
},
"splitLine": { //网格线
lineStyle: {
type:'dashed',
color: ['#315070'],
labelLine: {
show: false
},
"show": true
borderWidth: 5,
},
inverse: 'true', //排序
axisLine: {
data: [{
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,
lineStyle: {
color: '#fff',
}
trigger: "item",
},
data: ['设备高温', '设备振动', '烟雾火情', '环境大风']
}
],
series: [{
name: '数量',
type: 'bar',
label: {
normal: {
legend: {
show: true,
position: 'right',
formatter: '{c}',
left: '60%',
top: 'middle',
icon: "circle",
itemWidth: 10,
itemHeight: 10,
itemGap: 2,
textStyle: {
color: 'white' //color of value
}
}
fontSize: 12,
color: '#fff',
},
itemStyle: {
normal: {
show: true,
color: function(params) {
let num = colorArray.length;
return {
type: 'linear',
colorStops: [{
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
}
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 + (option.legendValueUnit || '') + ' ' : '');
},
borderWidth: 0,
borderColor: '#333',
}
},
barGap: '0%',
barCategoryGap: '50%',
data: [60, 132, 89, 100]
}
]
series: series,
};
alarmStatisticsCharts.setOption(alarmStatisticsOptions);
$(window).resize(alarmStatisticsCharts.resize);
charts.setOption(option);
$(window).resize(charts.resize);
}
/*告警趋势*/
var alarmTrendCharts = echarts.init(document.getElementById("alarmTrend"));
var alarmTrendOptions = {
//折线图
function lineCharts(datas, id) {
let charts = echarts.init(id);
let options = {
tooltip: {
trigger: 'axis',
axisPointer: {
@ -505,20 +437,11 @@ $(()=>{
},
},
},
// legend: {
// data: ['系统设备','报警装置'],
// textStyle: {
// fontSize: 12,
// color: 'rgb(0,253,255,0.6)'
// },
// right: '4%'
// },
grid: {
top: '10%',
left: '14%',
right: '10%',
bottom: '15%',
// containLabel: true
},
xAxis: [{
type: 'category',
@ -535,7 +458,7 @@ $(()=>{
show: 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),
}
},
data: [3,5,4,2,1,7,6]//data.values
data: datas.data//data.values
},
]
};
alarmTrendCharts.setOption(alarmTrendOptions);
$(window).resize(alarmTrendCharts.resize);
})
charts.setOption(options);
$(window).resize(charts.resize);
}

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

@ -302,7 +302,7 @@
</div>
<div th:if="${footer}" class="footer">
<div class="pull-right">© [[${copyrightYear}]] RuoYi Copyright </div>
<div class="pull-right">© [[${copyrightYear}]] Mesnac Copyright </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">
<span>124</span>
</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>
@ -58,58 +50,5 @@
<script th:src="@{/js/Iot-ui/iotIndex.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>
</html>
Write Preview
Loading…
Cancel
Save