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

change - 监控单元模块图片动态配置

Browse Source
main
wenjy 3 years ago
parent 8fcab9dccc
commit 6db5feb919
14 changed files with 624 additions and 465 deletions
Show Stats Download Patch File Download Diff File

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

@ -0,0 +1,104 @@
package com.ruoyi.web.controller.iot;
import com.alibaba.fastjson.JSONArray;
import com.ruoyi.system.domain.BaseMonitorunitInfo;
import com.ruoyi.system.domain.BaseSensorInfo;
import com.ruoyi.system.domain.dto.BaseMonitorunitInfoDto;
import com.ruoyi.system.domain.dto.BaseSensorInfoDto;
import com.ruoyi.system.service.IBaseMonitorunitInfoService;
import com.ruoyi.system.service.IBaseSensorInfoService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.ArrayList;
import java.util.List;
import java.util.stream.Collectors;
/**
* 智慧场景Controller
*
* @author WenJY
* @date 2022年03月14日 11:18
*/
@Controller
@RequestMapping("/iot/wisdomScenario")
public class WisdomScenarioContorller {
@Autowired private IBaseMonitorunitInfoService baseMonitorunitInfoService;
@Autowired private IBaseSensorInfoService baseSensorInfoService;
/**
* 数量统计:传感器数量、监控单元数量
*
* @author WenJY
* @date 2022/3/14 16:45
* @param monitorUnitType
* @return java.lang.String
*/
@GetMapping("/quantityStatistics")
@ResponseBody
public String quantityStatistics(String monitorUnitType) {
List<BaseMonitorunitInfo> baseMonitorunitInfos =
baseMonitorunitInfoService.selectBaseMonitorunitInfoList(new BaseMonitorunitInfo());
List<BaseMonitorunitInfo> collect =
baseMonitorunitInfos.stream()
.filter(
x ->
!x.getParentId().isEmpty()
&& x.getEnableFlag() == 0L
&& x.getMonitorunitType().equals(monitorUnitType))
.collect(Collectors.toList());
int sensorAmount = 0;
for (BaseMonitorunitInfo x : collect) {
List<BaseSensorInfoDto> baseSensorInfoDtos =
baseSensorInfoService.selectBaseSensorInfoList(
new BaseSensorInfo(null, null, null, x.getMonitorunitId()));
sensorAmount = sensorAmount + baseSensorInfoDtos.size();
}
int finalSensorAmount = sensorAmount;
List<Integer> result =
new ArrayList<Integer>() {
{
this.add(finalSensorAmount);
this.add(collect.size());
}
};
return JSONArray.toJSONString(result);
}
/**
* 获取监控单元模块
*
* @author WenJY
* @date 2022/3/14 16:46
* @param monitorUnitType
* @return java.lang.String
*/
@GetMapping("/getMonitorUnitModule")
@ResponseBody
public String getMonitorUnitModule(String monitorUnitType) {
List<BaseMonitorunitInfoDto> baseMonitorunitInfoDtos =
baseMonitorunitInfoService.selectBaseMonitorunitInfoDtoList(new BaseMonitorunitInfo());
List<BaseMonitorunitInfoDto> collect =
baseMonitorunitInfoDtos.stream()
.filter(
x ->
!x.getParentId().isEmpty()
&& x.getEnableFlag() == 0L
&& x.getMonitorunitType().equals(monitorUnitType))
.collect(Collectors.toList());
collect.forEach(x->{
x.setUnitUrl("/sections/transformer-detail?id="+x.getMonitorunitId());
});
return JSONArray.toJSONString(collect);
}
}

4
ruoyi-admin/src/main/resources/static/styleCss/bootstrap.min.css vendored
Unescape Escape View File

@ -268,9 +268,9 @@ td, th {
} }
@font-face { @font-face {
/*font-family: 'Glyphicons Halflings'; font-family: 'Glyphicons Halflings';
src: url(../fonts/glyphicons-halflings-regular.eot); src: url(../fonts/glyphicons-halflings-regular.eot);
src: url(../fonts/glyphicons-halflings-regular.eot?#iefix) format('embedded-opentype'), url(../fonts/glyphicons-halflings-regular.woff2) format('woff2'), url(../fonts/glyphicons-halflings-regular.woff) format('woff'), url(../fonts/glyphicons-halflings-regular.ttf) format('truetype'), url(../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format('svg')*/ src: url(../fonts/glyphicons-halflings-regular.eot?#iefix) format('embedded-opentype'), url(../fonts/glyphicons-halflings-regular.woff2) format('woff2'), url(../fonts/glyphicons-halflings-regular.woff) format('woff'), url(../fonts/glyphicons-halflings-regular.ttf) format('truetype'), url(../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format('svg')
} }
.glyphicon { .glyphicon {

28
ruoyi-admin/src/main/resources/templates/base/monitorUnitInfo/add.html
Unescape Escape View File

@ -2,10 +2,12 @@
<html lang="zh" xmlns:th="http://www.thymeleaf.org" > <html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head> <head>
<th:block th:include="include :: header('新增监控单元信息')" /> <th:block th:include="include :: header('新增监控单元信息')" />
<th:block th:include="include :: bootstrap-fileinput-css" />
</head> </head>
<body class="white-bg"> <body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content"> <div class="wrapper wrapper-content animated fadeInRight ibox-content">
<form class="form-horizontal m" id="form-monitorUnitInfo-add"> <form class="form-horizontal m" id="form-monitorUnitInfo-add">
<input id="monitorunitImage" name="monitorunitImage" type="hidden">
<div class="form-group"> <div class="form-group">
<label class="col-sm-3 control-label">监控单元编号：</label> <label class="col-sm-3 control-label">监控单元编号：</label>
<div class="col-sm-8"> <div class="col-sm-8">
@ -63,9 +65,35 @@
</select> </select>
</div> </div>
</div> </div>
<h4 class="form-header h4">上传模型</h4>
<div class="form-group">
<div class="file-loading">
<input id="singleFile" name="file" type="file">
</div>
</div>
</form> </form>
</div> </div>
<th:block th:include="include :: footer" /> <th:block th:include="include :: footer" />
<th:block th:include="include :: bootstrap-fileinput-js" />
<script th:inline="javascript">
$(document).ready(function () {
// 单图上传
$("#singleFile").fileinput({
uploadUrl: ctx + 'common/upload',
maxFileCount: 1,
autoReplace: true
}).on('fileuploaded', function (event, data, previewId, index) {
var rsp = data.response;
log.info("return url：" + rsp.url)
log.info("reutrn fileName：" + rsp.fileName)
document.getElementById("monitorunitImage").value = rsp.fileName;
}).on('fileremoved', function (event, id, index) {
$("input[name='" + event.currentTarget.id + "']").val('')
})
});
</script>
<script th:inline="javascript"> <script th:inline="javascript">
var prefix = ctx + "base/monitorUnitInfo" var prefix = ctx + "base/monitorUnitInfo"
$("#form-monitorUnitInfo-add").validate({ $("#form-monitorUnitInfo-add").validate({

27
ruoyi-admin/src/main/resources/templates/base/monitorUnitInfo/edit.html
Unescape Escape View File

@ -2,11 +2,13 @@
<html lang="zh" xmlns:th="http://www.thymeleaf.org" > <html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head> <head>
<th:block th:include="include :: header('修改监控单元信息')" /> <th:block th:include="include :: header('修改监控单元信息')" />
<th:block th:include="include :: bootstrap-fileinput-css" />
</head> </head>
<body class="white-bg"> <body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content"> <div class="wrapper wrapper-content animated fadeInRight ibox-content">
<form class="form-horizontal m" id="form-monitorUnitInfo-edit" th:object="${baseMonitorunitInfo}"> <form class="form-horizontal m" id="form-monitorUnitInfo-edit" th:object="${baseMonitorunitInfo}">
<input name="ObjId" th:field="*{objId}" type="hidden"> <input name="ObjId" th:field="*{objId}" type="hidden">
<input id="monitorunitImage" name="monitorunitImage" type="hidden">
<div class="form-group"> <div class="form-group">
<label class="col-sm-3 control-label">监控单元编号：</label> <label class="col-sm-3 control-label">监控单元编号：</label>
<div class="col-sm-8"> <div class="col-sm-8">
@ -64,9 +66,34 @@
</select> </select>
</div> </div>
</div> </div>
<h4 class="form-header h4">上传模型</h4>
<div class="form-group">
<div class="file-loading">
<input id="singleFile" name="file" type="file">
</div>
</div>
</form> </form>
</div> </div>
<th:block th:include="include :: footer" /> <th:block th:include="include :: footer" />
<th:block th:include="include :: bootstrap-fileinput-js" />
<script th:inline="javascript">
$(document).ready(function () {
// 单图上传
$("#singleFile").fileinput({
uploadUrl: ctx + 'common/upload',
maxFileCount: 1,
autoReplace: true
}).on('fileuploaded', function (event, data, previewId, index) {
var rsp = data.response;
log.info("return url：" + rsp.url)
log.info("reutrn fileName：" + rsp.fileName)
document.getElementById("monitorunitImage").value = rsp.fileName;
}).on('fileremoved', function (event, id, index) {
$("input[name='" + event.currentTarget.id + "']").val('')
})
});
</script>
<script th:inline="javascript"> <script th:inline="javascript">
var prefix = ctx + "base/monitorUnitInfo"; var prefix = ctx + "base/monitorUnitInfo";
$("#form-monitorUnitInfo-edit").validate({ $("#form-monitorUnitInfo-edit").validate({

16
ruoyi-admin/src/main/resources/templates/base/monitorUnitInfo/monitorUnitInfo.html
Unescape Escape View File

@ -138,7 +138,21 @@
field: 'substationName', field: 'substationName',
title: '所属变电站', title: '所属变电站',
align: 'left' align: 'left'
},{ },
{
field: 'monitorunitImage',
title: '设备模型',
formatter: function(value, row, index) {
// 图片预览（注意：如存储在本地直接获取数据库路径，如有配置context-path需要使用ctx+路径）
// 如：/profile/upload/2019/08/08/3b7a839aced67397bac694d77611ce72.png
if(index % 2 == 0){
return $.table.imageView('/img/profile.jpg');
}else {
return $.table.imageView(value);
}
}
},
{
field: 'monitorunitStatus', field: 'monitorunitStatus',
title: '是否启用', title: '是否启用',
align: 'left', align: 'left',

13
ruoyi-admin/src/main/resources/templates/base/monitorUnitInfo/uploadImage.html
Unescape Escape View File

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
<th:block th:include="include :: header('监控单元模型上传')" />
</head>
<body class="white-bg">
<th:block th:include="include :: footer" />
<script th:inline="javascript">
</script>
</body>
</html>

1
ruoyi-admin/src/main/resources/templates/base/sensorInfo/sensorInfo.html
Unescape Escape View File

@ -265,6 +265,7 @@
$("#monitorunitId").val(treeNode.id); $("#monitorunitId").val(treeNode.id);
$.table.search(); $.table.search();
initTable(treeNode.id); initTable(treeNode.id);
var num = new Object; var num = new Object;
num.cp_keynum = "key_num"; num.cp_keynum = "key_num";
num.cp_num_value = treeNode.id + "/" + treeNode.name; num.cp_num_value = treeNode.id + "/" + treeNode.name;

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

@ -33,9 +33,9 @@
<body class="body-bg-1"> <body class="body-bg-1">
<header> <header>
<div class="btn-group section-button-area" id="section-buttons"> <div class="btn-group section-button-area" id="section-buttons">
<button class="btn section-button">监控主页</button> <!--<button class="btn section-button">监控主页</button>
<button class="btn section-button">智慧线路</button> <button class="btn section-button">智慧线路</button>
<button class="btn section-button">分类监测</button> <button class="btn section-button">分类监测</button>-->
</div> </div>
<div class="main-title">智慧物联监控平台</div> <div class="main-title">智慧物联监控平台</div>
<div style="position: absolute; <div style="position: absolute;
@ -166,6 +166,23 @@
</script> </script>
<script type="text/javascript"> <script type="text/javascript">
/*function myClick(hre) {
let num = new Object;
num.cp_keynum = "wisdmoScenario_Key";
num.cp_num_value = hre;
var str = JSON.stringify(num); // 将对象转换为字符串
localStorage.setItem(num.cp_keynum, str);
}
function buttonClick(href) {
let num = new Object;
num.cp_keynum = "wisdmoScenario_Key";
num.cp_num_value = href.innerText;
var str = JSON.stringify(num); // 将对象转换为字符串
localStorage.setItem(num.cp_keynum, str);
}*/
function userInfoOnclick() { function userInfoOnclick() {
location.href = '/indexInfo/index'; location.href = '/indexInfo/index';
} }

389
ruoyi-admin/src/main/resources/templates/section/substation.html
Unescape Escape View File

@ -4,7 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit"> <meta name="renderer" content="webkit">
<title>监控主页</title> <title>智慧场景</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link th:href="@{favicon.ico}" rel="shortcut icon"/> <link th:href="@{favicon.ico}" rel="shortcut icon"/>
@ -213,7 +213,8 @@
<script th:inline="javascript"></script> <script th:inline="javascript"></script>
</head> </head>
<body class="body-substation-1"> <body class="body-substation-1">
<div class="display-text-1" id="transformer"><span id="unitAmount">78</span></br><span>变压器</span></div> <div class="display-text-1" id="transformer"><span id="unitAmount">78</span></br><span
id="wisdmoScenarioTitle">监控单元</span></div>
<div class="display-text-1" id="sensor"><span id="sensorAmount">78</span></br><span>传感器</span></div> <div class="display-text-1" id="sensor"><span id="sensorAmount">78</span></br><span>传感器</span></div>
<div class="float-ball" id="access"><span>设备高温</span></br><span>3</span></div> <div class="float-ball" id="access"><span>设备高温</span></br><span>3</span></div>
@ -223,26 +224,8 @@
<div class="float-ball" id="repairing"><span>室内渗水</span></br><span>3</span></div> <div class="float-ball" id="repairing"><span>室内渗水</span></br><span>3</span></div>
<div class="float-ball" id="communication-failure"><span>安消视觉</span></br><span>3</span></div> <div class="float-ball" id="communication-failure"><span>安消视觉</span></br><span>3</span></div>
<!--<div class="alert-message" id="device-overheat">3</div>
<div class="alert-message" id="device-vibration">3</div>
<div class="alert-message" id="smoke-fire">0</div>
<div class="alert-message" id="windy-environment">3</div>
<div class="alert-message" id="water-leakage">3</div>
<div class="alert-message" id="security-vision">3</div>-->
<div id="alert-list"></div> <div id="alert-list"></div>
<!--<div id="monitor-tabs" class="btn-group">
<button class="btn transformer-btn active" id="btn_all-transformers">全部</button>
<button class="btn transformer-btn" id="btn_transformer1">变压器1</button>
<button class="btn transformer-btn" id="btn_transformer2">变压器2</button>
<button class="btn transformer-btn" id="btn_transformer3">变压器3</button>
<button class="btn transformer-btn" id="btn_transformer4">变压器4</button>
<button class="btn transformer-btn" id="btn_transformer5">变压器5</button>
</div>
<div id="transformer-card-group"></div>-->
<div class="piclist" style="border: red 0px solid"> <div class="piclist" style="border: red 0px solid">
<ul class="listul"></ul> <ul class="listul"></ul>
<div class="fydiv"> <div class="fydiv">
@ -252,6 +235,35 @@
<script> <script>
function getParams(key) {
var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) {
return unescape(r[2]);
}
return null;
};
//获取监控单元、传感器数量
$(() => {
$.ajax({
url: '/iot/wisdomScenario/quantityStatistics?monitorUnitType=' + getParams("id"),
type: 'GET',
dataType: 'JSON',
success: function (datas) {
$("#sensorAmount").text(datas[0]);
$("#unitAmount").text(datas[1]);
},
error: function (e) {
console.log("异常：" + e)
}
})
});
//获取监控单元模块
console.log("参数param1:" + getParams("id"));
const alertListColumns = ['序号', '告警编号', '告警单元', '告警位置', '告警信息', '类型', '告警时间', '处理情况'] const alertListColumns = ['序号', '告警编号', '告警单元', '告警位置', '告警信息', '类型', '告警时间', '处理情况']
const alertList = new AutoScrollTable(document.getElementById("alert-list"), alertListColumns, { const alertList = new AutoScrollTable(document.getElementById("alert-list"), alertListColumns, {
width: ['10%', '10%', '10%', '10%', '30%', '10%', '10%', '10%'], width: ['10%', '10%', '10%', '10%', '30%', '10%', '10%', '10%'],
@ -266,80 +278,6 @@
['06', 'A1', '设备高温', '1#厂区', '无线检测 相对检测值为10°-20°，其值为21°-25°', '越限', '10:00:00', '<span class="text-success">已处理</span>'], ['06', 'A1', '设备高温', '1#厂区', '无线检测 相对检测值为10°-20°，其值为21°-25°', '越限', '10:00:00', '<span class="text-success">已处理</span>'],
], Object.keys(alertListColumns)) ], Object.keys(alertListColumns))
/* const transformerCardGroup = document.getElementById("transformer-card-group")
function loadTransformerList(data) {
for (let entry of Object.entries(data)) {
let html = ''
html += `
<div class="card" id="transformer-card${entry[0]}" style="cursor: pointer;" onclick="window.location = '${entry[1].url}'">
<div class="card-header">
<span class="card-title">${entry[1].name}</span>`
switch (entry[1].status) {
case '正常':
html += `<span class="badge bg-success status-badge">正常</span>`
break
case '异常':
html += `<span class="badge bg-danger status-badge">异常</span>`
break
default:
html += `<span class="badge bg-light status-badge">未知</span>`
break
}
html += `
<span class="badge bg-danger status-badge">异常</span>
</div>
<div class="card-body">
<img src="/img/transformer.png" alt="变压器" />
</div>
</div>`
transformerCardGroup.innerHTML += html
}
}
$(() => {
loadTransformerList([
{
name: '变压器1',
status: '正常',
url: '/sections/transformer-detail?id=1',
},
{
name: '变压器2',
status: '异常',
url: '/sections/transformer-detail?id=2',
},
{
name: '变压器3',
status: '正常',
url: '/sections/transformer-detail?id=3',
},
{
name: '变压器4',
status: '正常',
url: '/sections/transformer-detail?id=4',
},
{
name: '变压器5',
status: '正常',
url: '/sections/transformer-detail?id=4',
}, {
name: '变压器6',
status: '正常',
url: '/sections/transformer-detail?id=4',
}, {
name: '变压器7',
status: '正常',
url: '/sections/transformer-detail?id=4',
}, {
name: '变压器8',
status: '正常',
url: '/sections/transformer-detail?id=4',
},
])
})*/
function resize() { function resize() {
fontAdjust() fontAdjust()
alertList.resize() alertList.resize()
@ -353,92 +291,77 @@
<script type="text/javascript"> <script type="text/javascript">
getPage(1); getPage(1);
//翻页 //翻页
function getPage(pn){ function getPage(pn) {
let datas = [{ let datas = [];
"unitName": "测试一",
"unitState": 0, $.ajax({
"imgUrl": "/img/transformer.png", url: '/iot/wisdomScenario/getMonitorUnitModule?monitorUnitType=' + getParams("id"),
"url": '/sections/transformer-detail?id=1', type: 'GET',
}, { dataType: 'JSON',
"unitName": "测试二", success: function (result) {
"unitState": 1,
"imgUrl": "/img/transformer.png", console.log(result);
"url": '/sections/transformer-detail?id=2',
}, { datas = result;
"unitName": "测试三",
"unitState": 0, let dataCount = datas.length;//总数据条数
"imgUrl": "/img/transformer.png", let pageSize = 4;//每页显示条数
"url": "/sections/transformer-detail?id=4", let pageCount = Math.ceil(dataCount / pageSize);//总页数
}, { if (pn == 0 || pn > pageCount) {
"unitName": "测试四", return;
"unitState": 1,
"imgUrl": "/img/transformer.png",
"url": "/sections/transformer-detail?id=4",
}, {
"unitName": "测试五",
"unitState": 0,
"imgUrl": "/img/transformer.png",
"url": "/sections/transformer-detail?id=4",
}, {
"unitName": "测试六",
"unitState": 1,
"imgUrl": "/img/transformer.png",
"url": "/sections/transformer-detail?id=4",
}, {
"unitName": "测试七",
"unitState": 0,
"imgUrl": "/img/transformer.png",
"url": "/sections/transformer-detail?id=4",
}];
let dataCount=datas.length;//总数据条数
let pageSize=4;//每页显示条数
let pageCount= Math.ceil(dataCount / pageSize);//总页数
if(pn==0||pn>pageCount){
return;
}
let ul=$(".listul");
ul.empty();
paintPage(pageCount,pn,dataCount); //绘制页码
let startPage = pageSize * (pn - 1);
if (pageCount == 1) { // 当只有一页时
for (let j = 0; j < dataCount; j++) {
let e='<li><div style="width:100%;height:15%;background-color:#063B5B;text-align:center;color:white;padding-top:2%;">'+datas[j].unitName;
switch (datas[j].unitState) {
case 0:
e += '<span style="border:1px solid green;background-color:#1A9B34;border-radius:5px;margin-left: 5%">&nbsp;&nbsp;正常&nbsp;&nbsp;</span>';
break
case 1:
e += '<span style="border:1px solid red;background-color:#2E2F44;border-radius:5px;margin-left: 5%">&nbsp;&nbsp;异常&nbsp;&nbsp;</span>';
break
default:
e += '<span style="border:1px solid red;background-color:#2E2F44;border-radius:5px;margin-left: 5%">&nbsp;&nbsp;异常&nbsp;&nbsp;</span>';
break
} }
e+='</div><div style="text-align:center;" onclick="window.location = '+'\''+datas[j].url+'\'"><img src="'+datas[j].imgUrl+'" display="inline-block" vertical-align="middle" width="90%" ></div></li>'; let ul = $(".listul");
ul.append(e); ul.empty();
} paintPage(pageCount, pn, dataCount); //绘制页码
}else { // 当超过一页时 let startPage = pageSize * (pn - 1);
let e="";
let endPage = pn<pageCount?pageSize * pn:dataCount; if (pageCount == 1) { // 当只有一页时
for (let j = startPage; j < endPage; j++) { for (let j = 0; j < dataCount; j++) {
let e='<li><div style="width:100%;height:15%;background-color:#063B5B;text-align:center;color:white;padding-top:2%;">'+datas[j].unitName; let e = '<li><div style="width:100%;height:15%;background-color:#063B5B;text-align:center;color:white;padding-top:2%;">' + datas[j].monitorunitName;
switch (datas[j].unitState) { switch (datas[j].monitorunitStatus) {
case 0: case 0:
e += '<span style="border:1px solid green;background-color:#1A9B34;border-radius:5px;margin-left: 5%">&nbsp;&nbsp;正常&nbsp;&nbsp;</span>'; e += '<span style="border:1px solid green;background-color:#1A9B34;border-radius:5px;margin-left: 5%">&nbsp;&nbsp;正常&nbsp;&nbsp;</span>';
break break
case 1: case 1:
e += '<span style="border:1px solid red;background-color:#2E2F44;border-radius:5px;margin-left: 5%">&nbsp;&nbsp;异常&nbsp;&nbsp;</span>'; e += '<span style="border:1px solid red;background-color:#2E2F44;border-radius:5px;margin-left: 5%">&nbsp;&nbsp;异常&nbsp;&nbsp;</span>';
break break
default: default:
e += '<span style="border:1px solid red;background-color:#2E2F44;border-radius:5px;margin-left: 5%">&nbsp;&nbsp;异常&nbsp;&nbsp;</span>'; e += '<span style="border:1px solid red;background-color:#2E2F44;border-radius:5px;margin-left: 5%">&nbsp;&nbsp;异常&nbsp;&nbsp;</span>';
break break
}
e += '</div><div style="text-align:center;" onclick="window.location = ' + '\'' + datas[j].unitUrl + '\'"><img src="' + datas[j].monitorunitImage + '" display="inline-block" vertical-align="middle" width="70%" ></div></li>';
ul.append(e);
}
} else { // 当超过一页时
let e = "";
let endPage = pn < pageCount ? pageSize * pn : dataCount;
for (let j = startPage; j < endPage; j++) {
let e = '<li><div style="width:100%;height:15%;background-color:#063B5B;text-align:center;color:white;padding-top:2%;">' + datas[j].monitorunitName;
switch (datas[j].monitorunitStatus) {
case 0:
e += '<span style="border:1px solid green;background-color:#1A9B34;border-radius:5px;margin-left: 5%">&nbsp;&nbsp;正常&nbsp;&nbsp;</span>';
break
case 1:
e += '<span style="border:1px solid red;background-color:#2E2F44;border-radius:5px;margin-left: 5%">&nbsp;&nbsp;异常&nbsp;&nbsp;</span>';
break
default:
e += '<span style="border:1px solid red;background-color:#2E2F44;border-radius:5px;margin-left: 5%">&nbsp;&nbsp;异常&nbsp;&nbsp;</span>';
break
}
e += '</div><div style="text-align:center; " onclick="window.location = ' + '\'' + datas[j].unitUrl + '\'"><img src="' + datas[j].monitorunitImage + '" display="inline-block" vertical-align="middle" width="70%" ></div></li>';
ul.append(e);
}
} }
e+='</div><div style="text-align:center; " onclick="window.location = '+'\''+datas[j].url+'\'"><img src="'+datas[j].imgUrl+'" display="inline-block" vertical-align="middle" width="90%" ></div></li>';
ul.append(e); },
error: function (e) {
console.log("异常：" + e)
} }
} })
} }
function unitOnclick(e) { function unitOnclick(e) {
@ -446,72 +369,72 @@
} }
//绘制页码 //绘制页码
function paintPage(number,currNum,dataCount) //number 总页数,currNum 当前页 function paintPage(number, currNum, dataCount) //number 总页数,currNum 当前页
{ {
var pageUl=$(".fenye"); var pageUl = $(".fenye");
pageUl.empty(); pageUl.empty();
let ulDetail=""; let ulDetail = "";
if(number==1){ if (number == 1) {
ulDetail= "<li class='fytitle'><span >共" + dataCount + "条记录 共" + number + "页 当前第" + currNum + "页</span></li>"+ ulDetail = "<li class='fytitle'><span >共" + dataCount + "条记录 共" + number + "页 当前第" + currNum + "页</span></li>" +
"<li class='prev'><a href=\"javascript:getPage(1)\">＜＜</a></li>"+ "<li class='prev'><a href=\"javascript:getPage(1)\">＜＜</a></li>" +
"<li class=\"prev\"><a href=\"javascript:void(0)\">＜</a></li>"+ "<li class=\"prev\"><a href=\"javascript:void(0)\">＜</a></li>" +
"<li class=\"numb choose\"><a href=\"javascript:getPage(1)\">1</a></li>"+ "<li class=\"numb choose\"><a href=\"javascript:getPage(1)\">1</a></li>" +
"<li class=\"next\"><a href=\"javascript:void(0)\">＞</a></li>"+ "<li class=\"next\"><a href=\"javascript:void(0)\">＞</a></li>" +
"<li class=\"prev\"><a href=\"javascript:getPage("+parseInt(number)+")\">＞＞</a></li>"; "<li class=\"prev\"><a href=\"javascript:getPage(" + parseInt(number) + ")\">＞＞</a></li>";
}else if(number==2){ } else if (number == 2) {
ulDetail= "<li class='fytitle'><span >共" + dataCount + "条记录 共" + number + "页 当前第" + currNum + "页</span></li>"+ ulDetail = "<li class='fytitle'><span >共" + dataCount + "条记录 共" + number + "页 当前第" + currNum + "页</span></li>" +
"<li class='prev'><a href=\"javascript:getPage(1)\">＜＜</a></li>"+ "<li class='prev'><a href=\"javascript:getPage(1)\">＜＜</a></li>" +
"<li class=\"prev\"><a href=\"javascript:getPage(1)\">＜</a></li>"+ "<li class=\"prev\"><a href=\"javascript:getPage(1)\">＜</a></li>" +
"<li class=\"numb"+choosele(currNum,1)+"\"><a href=\"javascript:getPage(1)\">1</a></li>"+ "<li class=\"numb" + choosele(currNum, 1) + "\"><a href=\"javascript:getPage(1)\">1</a></li>" +
"<li class=\"numb"+choosele(currNum,2)+"\"><a href=\"javascript:getPage(2)\">2</a></li>"+ "<li class=\"numb" + choosele(currNum, 2) + "\"><a href=\"javascript:getPage(2)\">2</a></li>" +
"<li class=\"next\"><a href=\"javascript:getPage(2)\">＞</a></li>"+ "<li class=\"next\"><a href=\"javascript:getPage(2)\">＞</a></li>" +
"<li class=\"prev\"><a href=\"javascript:getPage("+parseInt(number)+")\">＞＞</a></li>"; "<li class=\"prev\"><a href=\"javascript:getPage(" + parseInt(number) + ")\">＞＞</a></li>";
}else if(number==3){ } else if (number == 3) {
ulDetail= "<li class='fytitle'><span >共" + dataCount + "条记录 共" + number + "页 当前第" + currNum + "页</span></li>"+ ulDetail = "<li class='fytitle'><span >共" + dataCount + "条记录 共" + number + "页 当前第" + currNum + "页</span></li>" +
"<li class='prev'><a href=\"javascript:getPage(1)\">＜＜</a></li>"+ "<li class='prev'><a href=\"javascript:getPage(1)\">＜＜</a></li>" +
"<li class=\"prev\"><a href=\"javascript:getPage("+parseInt(currNum-1)+")\">＜</a></li>"+ "<li class=\"prev\"><a href=\"javascript:getPage(" + parseInt(currNum - 1) + ")\">＜</a></li>" +
"<li class=\"numb"+choosele(currNum,1)+"\"><a href=\"javascript:getPage(1)\">1</a></li>"+ "<li class=\"numb" + choosele(currNum, 1) + "\"><a href=\"javascript:getPage(1)\">1</a></li>" +
"<li class=\"numb"+choosele(currNum,2)+"\"><a href=\"javascript:getPage(2)\">2</a></li>"+ "<li class=\"numb" + choosele(currNum, 2) + "\"><a href=\"javascript:getPage(2)\">2</a></li>" +
"<li class=\"numb"+choosele(currNum,3)+"\"><a href=\"javascript:getPage(3)\">3</a></li>"+ "<li class=\"numb" + choosele(currNum, 3) + "\"><a href=\"javascript:getPage(3)\">3</a></li>" +
"<li class=\"next\"><a href=\"javascript:getPage("+parseInt(currNum+1)+")\">＞</a></li>"+ "<li class=\"next\"><a href=\"javascript:getPage(" + parseInt(currNum + 1) + ")\">＞</a></li>" +
"<li class=\"prev\"><a href=\"javascript:getPage("+parseInt(number)+")\">＞＞</a></li>"; "<li class=\"prev\"><a href=\"javascript:getPage(" + parseInt(number) + ")\">＞＞</a></li>";
}else if(number==currNum&&currNum>3){ } else if (number == currNum && currNum > 3) {
ulDetail= "<li class='fytitle'><span >共" + dataCount + "条记录 共" + number + "页 当前第" + currNum + "页</span></li>"+ ulDetail = "<li class='fytitle'><span >共" + dataCount + "条记录 共" + number + "页 当前第" + currNum + "页</span></li>" +
"<li class='prev'><a href=\"javascript:getPage(1)\">＜＜</a></li>"+ "<li class='prev'><a href=\"javascript:getPage(1)\">＜＜</a></li>" +
"<li class=\"prev\"><a href=\"javascript:getPage("+parseInt(currNum-1)+")\">＜</a></li>"+ "<li class=\"prev\"><a href=\"javascript:getPage(" + parseInt(currNum - 1) + ")\">＜</a></li>" +
"<li class=\"numb\"><a href=\"javascript:getPage("+parseInt(currNum-2)+")\">"+parseInt(currNum-2)+"</a></li>"+ "<li class=\"numb\"><a href=\"javascript:getPage(" + parseInt(currNum - 2) + ")\">" + parseInt(currNum - 2) + "</a></li>" +
"<li class=\"numb\"><a href=\"javascript:getPage("+parseInt(currNum-1)+")\">"+parseInt(currNum-1)+"</a></li>"+ "<li class=\"numb\"><a href=\"javascript:getPage(" + parseInt(currNum - 1) + ")\">" + parseInt(currNum - 1) + "</a></li>" +
"<li class=\"numb choose\"><a href=\"javascript:getPage("+currNum+")\">"+currNum+"</a></li>"+ "<li class=\"numb choose\"><a href=\"javascript:getPage(" + currNum + ")\">" + currNum + "</a></li>" +
"<li class=\"next\"><a href=\"javascript:getPage("+currNum+")\">＞</a></li>"+ "<li class=\"next\"><a href=\"javascript:getPage(" + currNum + ")\">＞</a></li>" +
"<li class=\"prev\"><a href=\"javascript:getPage("+parseInt(number)+")\">＞＞</a></li>"; "<li class=\"prev\"><a href=\"javascript:getPage(" + parseInt(number) + ")\">＞＞</a></li>";
}else if(currNum==1&&number>3){ } else if (currNum == 1 && number > 3) {
ulDetail= "<li class='fytitle'><span >共" + dataCount + "条记录 共" + number + "页 当前第" + currNum + "页</span></li>"+ ulDetail = "<li class='fytitle'><span >共" + dataCount + "条记录 共" + number + "页 当前第" + currNum + "页</span></li>" +
"<li class='prev'><a href=\"javascript:getPage(1)\">＜＜</a></li>"+ "<li class='prev'><a href=\"javascript:getPage(1)\">＜＜</a></li>" +
"<li class=\"prev\"><a href=\"javascript:void(0)\">＜</a></li>"+ "<li class=\"prev\"><a href=\"javascript:void(0)\">＜</a></li>" +
"<li class=\"numb choose\"><a href=\"javascript:void(0)\">1</a></li>"+ "<li class=\"numb choose\"><a href=\"javascript:void(0)\">1</a></li>" +
"<li class=\"numb\"><a href=\"javascript:getPage(2)\">2</a></li>"+ "<li class=\"numb\"><a href=\"javascript:getPage(2)\">2</a></li>" +
"<li class=\"numb\"><a href=\"javascript:getPage(3)\">3</a></li>"+ "<li class=\"numb\"><a href=\"javascript:getPage(3)\">3</a></li>" +
"<li class=\"next\"><a href=\"javascript:getPage(2)\">＞</a></li>"+ "<li class=\"next\"><a href=\"javascript:getPage(2)\">＞</a></li>" +
"<li class=\"prev\"><a href=\"javascript:getPage("+parseInt(number)+")\">＞＞</a></li>"; "<li class=\"prev\"><a href=\"javascript:getPage(" + parseInt(number) + ")\">＞＞</a></li>";
}else{ } else {
ulDetail= "<li class='fytitle'><span >共" + dataCount + "条记录 共" + number + "页 当前第" + currNum + "页</span></li>"+ ulDetail = "<li class='fytitle'><span >共" + dataCount + "条记录 共" + number + "页 当前第" + currNum + "页</span></li>" +
"<li class='prev'><a href=\"javascript:getPage(1)\">＜＜</a></li>"+ "<li class='prev'><a href=\"javascript:getPage(1)\">＜＜</a></li>" +
"<li class=\"prev\"><a href=\"javascript:getPage("+parseInt(currNum-1)+")\">＜</a></li>"+ "<li class=\"prev\"><a href=\"javascript:getPage(" + parseInt(currNum - 1) + ")\">＜</a></li>" +
"<li class=\"numb\"><a href=\"javascript:getPage("+parseInt(currNum-1)+")\">"+parseInt(currNum-1)+"</a></li>"+ "<li class=\"numb\"><a href=\"javascript:getPage(" + parseInt(currNum - 1) + ")\">" + parseInt(currNum - 1) + "</a></li>" +
"<li class=\"numb choose\"><a href=\"javascript:getPage("+currNum+")\">"+currNum+"</a></li>"+ "<li class=\"numb choose\"><a href=\"javascript:getPage(" + currNum + ")\">" + currNum + "</a></li>" +
"<li class=\"numb\"><a href=\"javascript:getPage("+parseInt(currNum+1)+")\">"+parseInt(currNum+1)+"</a></li>"+ "<li class=\"numb\"><a href=\"javascript:getPage(" + parseInt(currNum + 1) + ")\">" + parseInt(currNum + 1) + "</a></li>" +
"<li class=\"next\"><a href=\"javascript:getPage("+parseInt(currNum+1)+")\">＞</a></li>"+ "<li class=\"next\"><a href=\"javascript:getPage(" + parseInt(currNum + 1) + ")\">＞</a></li>" +
"<li class=\"prev\"><a href=\"javascript:getPage("+parseInt(number)+")\">＞＞</a></li>"; "<li class=\"prev\"><a href=\"javascript:getPage(" + parseInt(number) + ")\">＞＞</a></li>";
} }
$(".fenye").append(ulDetail); $(".fenye").append(ulDetail);
} }
function choosele(num,cur){ function choosele(num, cur) {
if(num==cur){ if (num == cur) {
return " choose"; return " choose";
}else{ } else {
return ""; return "";
} }
} }

456
ruoyi-admin/src/main/resources/templates/section/transformer-detail.html
Unescape Escape View File

@ -13,11 +13,12 @@
<link th:href="@{/css/fontawesome/all.min.css}" rel="stylesheet"/> <link th:href="@{/css/fontawesome/all.min.css}" rel="stylesheet"/>
<link rel="stylesheet" th:href="@{/css/main.css}"/> <link rel="stylesheet" th:href="@{/css/main.css}"/>
<link rel="stylesheet" th:href="@{/css/autoscroll-table.css}"/> <link rel="stylesheet" th:href="@{/css/autoscroll-table.css}"/>
<link rel="stylesheet" th:href="@{/css/lot-ui/zTree.css}" /> <link rel="stylesheet" th:href="@{/css/lot-ui/zTree.css}"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-treeview/1.2.0/bootstrap-treeview.min.css"> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-treeview/1.2.0/bootstrap-treeview.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.contextMenu.min.css"> <link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.contextMenu.min.css">
<style> <style>
#company-name { #company-name {
position: absolute; position: absolute;
@ -88,7 +89,6 @@
} }
#sensor-list::-webkit-scrollbar { #sensor-list::-webkit-scrollbar {
display: none; display: none;
} }
@ -312,28 +312,28 @@
width: 36%; width: 36%;
} }
#treeview-selectable ul li{ #treeview-selectable ul li {
border:1px solid #094B7A; border: 1px solid #094B7A;
border-left: 0px solid #094B7A; border-left: 0px solid #094B7A;
height:50px; height: 50px;
display: flex; display: flex;
align-items: center; align-items: center;
color:#B6C0CA; color: #B6C0CA;
} }
.list-group-item{ .list-group-item {
background: transparent; background: transparent;
} }
#treeview-selectable ul .node-treeview-selectable:not(.node-disabled):hover { #treeview-selectable ul .node-treeview-selectable:not(.node-disabled):hover {
background-color: #083A61; background-color: #083A61;
opacity:0.2; opacity: 0.2;
color:white; color: white;
border:1px solid #094B7A; border: 1px solid #094B7A;
border-left: 3px solid #094B7A; border-left: 3px solid #094B7A;
} }
.sensor-Text{ .sensor-Text {
width: 29%; width: 29%;
height: 35%; height: 35%;
position: absolute; position: absolute;
@ -354,198 +354,204 @@
<script th:src="@{/js/autoscroll-table.js}"></script> <script th:src="@{/js/autoscroll-table.js}"></script>
<script th:src="@{/js/auto-update.js}"></script> <script th:src="@{/js/auto-update.js}"></script>
<script th:src="@{/js/font-adjust.js}"></script> <script th:src="@{/js/font-adjust.js}"></script>
<th:block th:include="include :: echarts-js" /> <th:block th:include="include :: echarts-js"/>
<th:block th:include="include :: ztree-js" /> <th:block th:include="include :: ztree-js"/>
<script th:src="@{/js/view-model.js}" src="../../static/js/view-model.js"></script> <script th:src="@{/js/view-model.js}" src="../../static/js/view-model.js"></script>
<script th:src="@{/ajax/libs/bootstrap-table/extensions/treeview/bootstrap-treeview.min.js}" src="../../static/ajax/libs/bootstrap-table/extensions/treeview/bootstrap-treeview.min.js"></script> <script th:src="@{/ajax/libs/bootstrap-table/extensions/treeview/bootstrap-treeview.min.js}"
src="../../static/ajax/libs/bootstrap-table/extensions/treeview/bootstrap-treeview.min.js"></script>
</head> </head>
<body class="body-transformer-detail1"> <body class="body-transformer-detail1">
<div id="company-name" style="left: 0.7%;width:12.6%;top: 1%;height:5.6%;"> <div id="company-name" style="left: 0.7%;width:12.6%;top: 1%;height:5.6%;">
<!--id="filterText"--> <!--id="filterText"-->
<input type="text" class="form-control d-inline-block" id="input-select-node" name="filterText" placeholder="输入关键字进行过滤" style="color:white;font-size:0.5rem;border-color: #1facf4;background-color: transparent;height:100%"> <input type="text" class="form-control d-inline-block" id="input-select-node" name="filterText"
</div> placeholder="输入关键字进行过滤"
style="color:white;font-size:0.5rem;border-color: #1facf4;background-color: transparent;height:100%">
<div id="sensor-list"> </div>
<!--<ul class="list-unstyled" id="sensor-list-inner"></ul>-->
<div id="sensor-list">
<div id="treeview-selectable"></div> <!--<ul class="list-unstyled" id="sensor-list-inner"></ul>-->
</div>
<div id="treeview-selectable"></div>
<div id="transformer-name">监控单元</div> </div>
<div id="transformer-model">
<img src="../../static/img/transformer-noshadow-lg.png" th:src="@{/img/transformer-noshadow-lg.png}" alt="监控单元"> <div id="transformer-name">监控单元</div>
</div> <div id="transformer-model">
<img src="../../static/img/transformer-noshadow-lg.png" th:src="@{/img/transformer-noshadow-lg.png}" alt="监控单元">
<div class="sensor-Text"> </div>
<p>设备编号：<span>10kv 主变压器001</span></p>
<p>设备型号：<span>SC(B)10型干式电力变压器</span></p> <div class="sensor-Text">
<p>启用时间：<span>2020年1月20日</span></p> <p>设备编号：<span>10kv 主变压器001</span></p>
<p>所属变电站：<span>新疆某某变电站</span></p> <p>设备型号：<span>SC(B)10型干式电力变压器</span></p>
<p>测试参数-1：<span>xxxxx</span></p> <p>启用时间：<span>2020年1月20日</span></p>
<p>测试参数-2：<span>xxxxx</span></p> <p>所属变电站：<span>新疆某某变电站</span></p>
</div> <p>测试参数-1：<span>xxxxx</span></p>
<p>测试参数-2：<span>xxxxx</span></p>
</div>
<nav class="nav search-bar d-inline-block" id="main-search-bar">
<form action="#" class="search-form-nav">
<label for="monitor-unit" class="search-label">监控单元:</label> <nav class="nav search-bar d-inline-block" id="main-search-bar">
<input type="text" class="form-control d-inline-block" id="monitor-unit" name="monitor-unit" placeholder="请输入监控单元"> <form action="#" class="search-form-nav">
<label for="sensor-type" class="search-label">传感器类型:</label> <label for="monitor-unit" class="search-label">监控单元:</label>
<input type="text" class="form-control d-inline-block" id="sensor-type" name="sensor-type" placeholder="请输入传感器类型"> <input type="text" class="form-control d-inline-block" id="monitor-unit" name="monitor-unit"
<label for="sensor-name" class="search-label">传感器名称:</label> placeholder="请输入监控单元">
<input type="text" class="form-control d-inline-block" id="sensor-name" name="sensor-name" placeholder="请输入传感器名称"> <label for="sensor-type" class="search-label">传感器类型:</label>
<input type="text" class="form-control d-inline-block" id="sensor-type" name="sensor-type"
<button class="btn btn-primary search-btn">搜索</button> placeholder="请输入传感器类型">
<!-- <button type="reset" class="btn btn-outline-primary reset-btn">重置</button>--> <label for="sensor-name" class="search-label">传感器名称:</label>
</form> <input type="text" class="form-control d-inline-block" id="sensor-name" name="sensor-name"
</nav> placeholder="请输入传感器名称">
<div id="sensor-card-group">
</div> <button class="btn btn-primary search-btn">搜索</button>
<!-- <button type="reset" class="btn btn-outline-primary reset-btn">重置</button>-->
</form>
</nav>
<div id="sensor-card-group">
</div>
</body> </body>
<script th:inline="javascript"> <script th:inline="javascript">
/*let info = [ /*let info = [
{ {
name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>变压器监控单元`, name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>变压器监控单元`,
id:'byq', id:'byq',
pid:'', pid:'',
items: [ items: [
{ {
id:'1#byq', id:'1#byq',
pid:'byq', pid:'byq',
name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>1#变压器`, name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>1#变压器`,
}, },
{ {
id:'2#byq', id:'2#byq',
pid:'byq', pid:'byq',
name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>2#变压器`, name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>2#变压器`,
}, },
{ {
id:'3#byq', id:'3#byq',
pid:'byq', pid:'byq',
name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>3#变压器`, name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>3#变压器`,
}, },
{ {
id:'4#byq', id:'4#byq',
pid:'byq', pid:'byq',
name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>4#变压器`, name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>4#变压器`,
}, },
], ],
}, },
{ {
name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>隔离开关监控单元`, name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>隔离开关监控单元`,
items: [ items: [
{ {
name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>1#隔离开关`, name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>1#隔离开关`,
}, },
{ {
name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>2#隔离开关`, name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>2#隔离开关`,
}, },
{ {
name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>3#隔离开关`, name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>3#隔离开关`,
}, },
{ {
name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>4#隔离开关`, name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>4#隔离开关`,
}, },
], ],
}, },
{ {
name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>电流互感器监控单元`, name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>电流互感器监控单元`,
items: [ items: [
{ {
name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>1#电流互感器`, name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>1#电流互感器`,
} }
], ],
}, },
{ {
name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>电压互感器监控单元`, name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>电压互感器监控单元`,
items: [ items: [
{ {
name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>1#电压互感器`, name: `<i class="fa-solid fa-caret-right sidebar-item-icon"></i>1#电压互感器`,
}
],
},
];
$(()=>{
sidebarList.renderSideBarList(document.getElementById("sensor-list-inner"), info)
})
const sidebarList = {
parent: null,
switchTo(firstLevelIndex, secondLevelIndex) {
this.parent.querySelectorAll(".sidebar-second-level").forEach((value, key) => {
value.classList.remove("active")
})
this.parent.children[firstLevelIndex].children[1].children[0].children[secondLevelIndex].children[0].classList.add("active")
console.log(this.parent.children[firstLevelIndex].children[1].children[0].children[secondLevelIndex].children[0])
},
renderSideBarList(parent, list) {
this.parent = parent
parent.innerHTML = ''
for (let firstLevel of Object.entries(list)) {
let html = ''
html += `<li>
<button class="btn collapsed sidebar-first-level" data-bs-toggle="collapse" data-bs-target="#transformer-collapse-${firstLevel[0]}" aria-expanded="false">
${firstLevel[1].name}
</button>
<div class="collapse" id="transformer-collapse-${firstLevel[0]}">
<ul class="list-unstyled pb-1" id='${firstLevel[1].id}'>`
for (let secondLevel of Object.entries(firstLevel[1].items)) {
html += `<li><a href="javascript:sidebarList.switchTo(${firstLevel[0]}, ${secondLevel[0]})" id='${secondLevel[1].id}' class="btn sidebar-second-level">${secondLevel[1].name}</a></li>`
}
html += `</ul>
</div>
</li>`
parent.innerHTML += html
} }
],
},
];
$(()=>{
sidebarList.renderSideBarList(document.getElementById("sensor-list-inner"), info)
})
const sidebarList = {
parent: null,
switchTo(firstLevelIndex, secondLevelIndex) {
this.parent.querySelectorAll(".sidebar-second-level").forEach((value, key) => {
value.classList.remove("active")
})
this.parent.children[firstLevelIndex].children[1].children[0].children[secondLevelIndex].children[0].classList.add("active")
console.log(this.parent.children[firstLevelIndex].children[1].children[0].children[secondLevelIndex].children[0])
},
renderSideBarList(parent, list) {
this.parent = parent
parent.innerHTML = ''
for (let firstLevel of Object.entries(list)) {
let html = ''
html += `<li>
<button class="btn collapsed sidebar-first-level" data-bs-toggle="collapse" data-bs-target="#transformer-collapse-${firstLevel[0]}" aria-expanded="false">
${firstLevel[1].name}
</button>
<div class="collapse" id="transformer-collapse-${firstLevel[0]}">
<ul class="list-unstyled pb-1" id='${firstLevel[1].id}'>`
for (let secondLevel of Object.entries(firstLevel[1].items)) {
html += `<li><a href="javascript:sidebarList.switchTo(${firstLevel[0]}, ${secondLevel[0]})" id='${secondLevel[1].id}' class="btn sidebar-second-level">${secondLevel[1].name}</a></li>`
}
html += `</ul>
</div>
</li>`
parent.innerHTML += html
} }
}*/ }
}*/
class SensorCardsViewModel extends AbstractViewModel { class SensorCardsViewModel extends AbstractViewModel {
constructor(idOrElement, parent = null, volatileMode = false) { constructor(idOrElement, parent = null, volatileMode = false) {
super(idOrElement, parent, volatileMode) super(idOrElement, parent, volatileMode)
} }
initMap() { initMap() {
return { return {
title: { title: {
value: "", value: "",
selector: ".card-title", selector: ".card-title",
}, },
temperature: { temperature: {
value: "", value: "",
selector: ".temp-value", selector: ".temp-value",
}, },
"battery-icon": { "battery-icon": {
value: "", value: "",
selector: ".battery-icon", selector: ".battery-icon",
}, },
status: { status: {
value: "", value: "",
selector: ".sensor-status", selector: ".sensor-status",
}, },
"conn-status": { "conn-status": {
value: "", value: "",
selector: ".conn-status", selector: ".conn-status",
}, },
datetime: { datetime: {
value: "", value: "",
selector: ".collect-time", selector: ".collect-time",
}, },
}
} }
}
render() { render() {
return `<div class="card sensor-card" id="${this.id}"> return `<div class="card sensor-card" id="${this.id}">
<div class="card-body"> <div class="card-body">
<div class="card-title">${this.get("title")}</div> <div class="card-title">${this.get("title")}</div>
<div class="temp-label">温度值 temp</div> <div class="temp-label">温度值 temp</div>
<div class="temp-value">${this.get("temperature")}</div> <div class="temp-value">${this.get("temperature")}</div>
@ -556,40 +562,39 @@
<div class="collect-time">${this.get("datetime")}</div> <div class="collect-time">${this.get("datetime")}</div>
</div> </div>
</div>` </div>`
}
} }
}
const sensorCollection = new ViewModelCollection(document.getElementById("sensor-card-group")) const sensorCollection = new ViewModelCollection(document.getElementById("sensor-card-group"))
$(() => {
sensorCollection.push(
new SensorCardsViewModel("sensor-card-1", document.getElementById("sensor-card-group")),
new SensorCardsViewModel("sensor-card-2", document.getElementById("sensor-card-group")),
new SensorCardsViewModel("sensor-card-3", document.getElementById("sensor-card-group")),
new SensorCardsViewModel("sensor-card-4", document.getElementById("sensor-card-group")),
new SensorCardsViewModel("sensor-card-5", document.getElementById("sensor-card-group")),
)
for (let i = 0; i < 5; i++) {
const vm = sensorCollection.get(i)
vm.set("title", "10kV I、II段母联110开关柜_上触头B相_温度传感器_XP00028C08")
vm.set("temperature", "47.5°C")
vm.set("battery-icon", `<i class="fa-solid fa-battery-full battery-icon"></i>`)
vm.set("status", "启用")
vm.set("conn-status", "在线")
vm.set("datetime", "10:00:00")
}
sensorCollection.refresh() $(() => {
}) sensorCollection.push(
</script> new SensorCardsViewModel("sensor-card-1", document.getElementById("sensor-card-group")),
new SensorCardsViewModel("sensor-card-2", document.getElementById("sensor-card-group")),
new SensorCardsViewModel("sensor-card-3", document.getElementById("sensor-card-group")),
new SensorCardsViewModel("sensor-card-4", document.getElementById("sensor-card-group")),
new SensorCardsViewModel("sensor-card-5", document.getElementById("sensor-card-group")),
)
for (let i = 0; i < 5; i++) {
const vm = sensorCollection.get(i)
vm.set("title", "10kV I、II段母联110开关柜_上触头B相_温度传感器_XP00028C08")
vm.set("temperature", "47.5°C")
vm.set("battery-icon", `<i class="fa-solid fa-battery-full battery-icon"></i>`)
vm.set("status", "启用")
vm.set("conn-status", "在线")
vm.set("datetime", "10:00:00")
}
sensorCollection.refresh()
})
</script>
<!-- Script --> <!-- Script -->
<!--<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>--> <!--<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>-->
<!--<script src="https://cdn.bootcss.com/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js"></script>--> <!--<script src="https://cdn.bootcss.com/bootstrap-treeview/1.2.0/bootstrap-treeview.min.js"></script>-->
<script type="text/javascript"> <script type="text/javascript">
$(function () {
$(function() {
var defaultData = [ var defaultData = [
{ {
@ -629,17 +634,17 @@
}, },
{ {
text: '电容互感器单元', text: '电容互感器单元',
href: '#parent5' , href: '#parent5',
tags: ['0'], tags: ['0'],
nodes: [] nodes: []
} }
]; ];
var initSelectableTree = function() { var initSelectableTree = function () {
return $('#treeview-selectable').treeview({ return $('#treeview-selectable').treeview({
data: defaultData, data: defaultData,
multiSelect: $('#chk-select-multi').is(':checked'), multiSelect: $('#chk-select-multi').is(':checked'),
onNodeSelected: function(event, node) { onNodeSelected: function (event, node) {
$('#selectable-output').prepend('<p>' + node.text + ' was selected</p>'); $('#selectable-output').prepend('<p>' + node.text + ' was selected</p>');
}, },
onNodeUnselected: function (event, node) { onNodeUnselected: function (event, node) {
@ -649,8 +654,11 @@
}; };
var $selectableTree = initSelectableTree(); var $selectableTree = initSelectableTree();
var findSelectableNodes = function() { var findSelectableNodes = function () {
return $selectableTree.treeview('search', [ $('#input-select-node').val(), { ignoreCase: false, exactMatch: false } ]); return $selectableTree.treeview('search', [$('#input-select-node').val(), {
ignoreCase: false,
exactMatch: false
}]);
}; };
var selectableNodes = findSelectableNodes(); var selectableNodes = findSelectableNodes();

10
ruoyi-system/src/main/java/com/ruoyi/system/domain/BaseMonitorunitInfo.java
Unescape Escape View File

@ -49,6 +49,8 @@ public class BaseMonitorunitInfo extends TreeEntity
@Excel(name = "监控单元状态") @Excel(name = "监控单元状态")
private Long monitorunitStatus; private Long monitorunitStatus;
private String monitorunitImage;
public void setObjId(Long objId) public void setObjId(Long objId)
{ {
this.objId = objId; this.objId = objId;
@ -112,6 +114,14 @@ public class BaseMonitorunitInfo extends TreeEntity
this.monitorunitStatus = monitorunitStatus; this.monitorunitStatus = monitorunitStatus;
} }
public String getMonitorunitImage() {
return monitorunitImage;
}
public void setMonitorunitImage(String monitorunitImage) {
this.monitorunitImage = monitorunitImage;
}
@Override @Override
public String toString() { public String toString() {
return new ToStringBuilder(this,ToStringStyle.MULTI_LINE_STYLE) return new ToStringBuilder(this,ToStringStyle.MULTI_LINE_STYLE)

7
ruoyi-system/src/main/java/com/ruoyi/system/domain/BaseSensorInfo.java
Unescape Escape View File

@ -27,6 +27,13 @@ public class BaseSensorInfo extends BaseEntity
this.enableFlag = enableFlag; this.enableFlag = enableFlag;
} }
public BaseSensorInfo(String sensorId, String sensorName, String sensorType, String monitorunitId) {
this.sensorId = sensorId;
this.sensorName = sensorName;
this.sensorType = sensorType;
this.monitorunitId = monitorunitId;
}
/** 主键标识 */ /** 主键标识 */
private Long objId; private Long objId;

2
ruoyi-system/src/main/java/com/ruoyi/system/domain/dto/BaseMonitorunitInfoDto.java
Unescape Escape View File

@ -19,4 +19,6 @@ public class BaseMonitorunitInfoDto extends BaseMonitorunitInfo {
private String name; private String name;
private int value; private int value;
private String unitUrl;
} }

11
ruoyi-system/src/main/resources/mapper/system/BaseMonitorunitInfoMapper.xml
Unescape Escape View File

@ -18,6 +18,7 @@
<result property="updateTime" column="Update_Time" /> <result property="updateTime" column="Update_Time" />
<result property="parentName" column="parent_name" /> <result property="parentName" column="parent_name" />
<result property="monitorunitStatus" column="Monitorunit_Status" /> <result property="monitorunitStatus" column="Monitorunit_Status" />
<result property="monitorunitImage" column="monitorunit_Image" />
</resultMap> </resultMap>
<resultMap type="BaseMonitorunitInfoDto" id="BaseMonitorunitInfoDtoResult"> <resultMap type="BaseMonitorunitInfoDto" id="BaseMonitorunitInfoDtoResult">
@ -36,10 +37,11 @@
<result property="monitorunitTypeName" column="MonitorUnitType_Name" /> <result property="monitorunitTypeName" column="MonitorUnitType_Name" />
<result property="monitorunitStatus" column="Monitorunit_Status" /> <result property="monitorunitStatus" column="Monitorunit_Status" />
<result property="substationName" column="Substation_Name" /> <result property="substationName" column="Substation_Name" />
<result property="monitorunitImage" column="monitorunit_Image" />
</resultMap> </resultMap>
<sql id="selectBaseMonitorunitInfoVo"> <sql id="selectBaseMonitorunitInfoVo">
select ObjId, MonitorUnit_Id, MonitorUnit_Name, Parent_Id, MonitorUnit_Type, Substation_Id, Enable_Flag, Create_By, Create_Time, Update_By, Update_Time,Monitorunit_Status from base_monitorunit_info select ObjId, MonitorUnit_Id, MonitorUnit_Name, Parent_Id, MonitorUnit_Type, Substation_Id, Enable_Flag, Create_By, Create_Time, Update_By, Update_Time,Monitorunit_Status,Monitorunit_Image from base_monitorunit_info
</sql> </sql>
<select id="selectBaseMonitorunitInfoList" parameterType="BaseMonitorunitInfo" resultMap="BaseMonitorunitInfoResult"> <select id="selectBaseMonitorunitInfoList" parameterType="BaseMonitorunitInfo" resultMap="BaseMonitorunitInfoResult">
@ -58,7 +60,7 @@
<select id="selectBaseMonitorunitInfoDtoList" parameterType="BaseMonitorunitInfo" resultMap="BaseMonitorunitInfoDtoResult"> <select id="selectBaseMonitorunitInfoDtoList" parameterType="BaseMonitorunitInfo" resultMap="BaseMonitorunitInfoDtoResult">
select t1.objid, t1.monitorunit_id, t1.monitorunit_name,t1.monitorunit_Status, t1.parent_id, t3.MonitorUnit_Name as parent_name, select t1.objid, t1.monitorunit_id, t1.monitorunit_name,t1.monitorunit_Status, t1.parent_id, t3.MonitorUnit_Name as parent_name,
t1.monitorunit_type,t2.MonitorUnitType_Name, t1.substation_id,t4.Substation_Name, t1.monitorunit_type,t2.MonitorUnitType_Name, t1.substation_id,t4.Substation_Name,t1.Monitorunit_Image,
t1.enable_flag from base_monitorunit_info t1 t1.enable_flag from base_monitorunit_info t1
left join base_monitorunit_type t2 on t1.MonitorUnit_Type = t2.MonitorUnitType_Id left join base_monitorunit_type t2 on t1.MonitorUnit_Type = t2.MonitorUnitType_Id
left join base_monitorunit_info t3 on t1.Parent_Id = t3.MonitorUnit_Id left join base_monitorunit_info t3 on t1.Parent_Id = t3.MonitorUnit_Id
@ -76,7 +78,7 @@
</select> </select>
<select id="selectBaseMonitorunitInfoByObjId" parameterType="Long" resultMap="BaseMonitorunitInfoResult"> <select id="selectBaseMonitorunitInfoByObjId" parameterType="Long" resultMap="BaseMonitorunitInfoResult">
select t.ObjId, t.MonitorUnit_Id, t.MonitorUnit_Name,t.monitorunit_status, t.Parent_Id, t.MonitorUnit_Type, t.Substation_Id, t.Enable_Flag, t.Create_By, t.Create_Time, t.Update_By, t.Update_Time, p.MonitorUnit_Name as parent_name select t.ObjId, t.MonitorUnit_Id, t.MonitorUnit_Name,t.monitorunit_status, t.Monitorunit_Image,t.Parent_Id, t.MonitorUnit_Type, t.Substation_Id, t.Enable_Flag, t.Create_By, t.Create_Time, t.Update_By, t.Update_Time, p.MonitorUnit_Name as parent_name
from base_monitorunit_info t from base_monitorunit_info t
left join base_monitorunit_info p on p.MonitorUnit_Id = t.Parent_Id left join base_monitorunit_info p on p.MonitorUnit_Id = t.Parent_Id
where t.ObjId = #{objId} where t.ObjId = #{objId}
@ -90,6 +92,7 @@
<if test="parentId != null">Parent_Id,</if> <if test="parentId != null">Parent_Id,</if>
<if test="monitorunitType != null">MonitorUnit_Type,</if> <if test="monitorunitType != null">MonitorUnit_Type,</if>
<if test="monitorunitStatus != null">Monitorunit_Status,</if> <if test="monitorunitStatus != null">Monitorunit_Status,</if>
<if test="monitorunitImage != null">Monitorunit_Image,</if>
<if test="substationId != null">Substation_Id,</if> <if test="substationId != null">Substation_Id,</if>
<if test="enableFlag != null">Enable_Flag,</if> <if test="enableFlag != null">Enable_Flag,</if>
<if test="createBy != null">Create_By,</if> <if test="createBy != null">Create_By,</if>
@ -103,6 +106,7 @@
<if test="parentId != null">#{parentId},</if> <if test="parentId != null">#{parentId},</if>
<if test="monitorunitType != null">#{monitorunitType},</if> <if test="monitorunitType != null">#{monitorunitType},</if>
<if test="monitorunitStatus != null">#{monitorunitStatus},</if> <if test="monitorunitStatus != null">#{monitorunitStatus},</if>
<if test="monitorunitImage != null">#{monitorunitImage},</if>
<if test="substationId != null">#{substationId},</if> <if test="substationId != null">#{substationId},</if>
<if test="enableFlag != null">#{enableFlag},</if> <if test="enableFlag != null">#{enableFlag},</if>
<if test="createBy != null">#{createBy},</if> <if test="createBy != null">#{createBy},</if>
@ -120,6 +124,7 @@
<if test="parentId != null">Parent_Id = #{parentId},</if> <if test="parentId != null">Parent_Id = #{parentId},</if>
<if test="monitorunitType != null">MonitorUnit_Type = #{monitorunitType},</if> <if test="monitorunitType != null">MonitorUnit_Type = #{monitorunitType},</if>
<if test="monitorunitStatus != null">Monitorunit_Status = #{monitorunitStatus},</if> <if test="monitorunitStatus != null">Monitorunit_Status = #{monitorunitStatus},</if>
<if test="monitorunitImage != null">Monitorunit_Image = #{monitorunitImage},</if>
<if test="substationId != null">Substation_Id = #{substationId},</if> <if test="substationId != null">Substation_Id = #{substationId},</if>
<if test="enableFlag != null">Enable_Flag = #{enableFlag},</if> <if test="enableFlag != null">Enable_Flag = #{enableFlag},</if>
<if test="createBy != null">Create_By = #{createBy},</if> <if test="createBy != null">Create_By = #{createBy},</if>

Write Preview
Loading…
Cancel
Save