可视化修改
This commit is contained in:
dell
@ -67,5 +67,12 @@ namespace HT.Cloud.Web.Areas.DevicesManage.Controllers
|
||||
var data = _realTimeDeviceState.GetRealDeviceTag(systemDescription);
|
||||
return Content(data.Result);
|
||||
}
|
||||
}
|
||||
[HttpPost]
|
||||
public async Task<ActionResult> GetRealTableData(string[] grouptype)
|
||||
{
|
||||
|
||||
var data = _realTimeDeviceState.GetRealTableData(grouptype[0]);
|
||||
return Content(data.Result);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -227,8 +227,81 @@
|
||||
layer = layui.layer,
|
||||
common = layui.common,
|
||||
tree = layui.tree,
|
||||
table = layui.table,
|
||||
echarts = layui.echarts;
|
||||
wcLoading.close();
|
||||
|
||||
// Initial table rendering
|
||||
table.render({
|
||||
elem: '#dynamicTable', // Table ID
|
||||
cols: [[ // Table headers (unchanged)
|
||||
// {field: 'id', title: '序号', width: 60},
|
||||
// {field: 'isMet', title: '状态', width: 20},
|
||||
{
|
||||
field: 'isMet',
|
||||
title: '状态',
|
||||
width: 30,
|
||||
templet: function(d) {
|
||||
// SVG indicator light: green for "满足", red for "未满足"
|
||||
var color = d.isMet === 'True' ? '#6495ED' : '#FFF143';
|
||||
return `
|
||||
<div style="display: flex; justify-content: center; align-items: center; height: 100%;">
|
||||
<svg width="20" height="20">
|
||||
<circle cx="10" cy="10" r="8" fill="${color}" />
|
||||
</svg>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
},
|
||||
{field: 'condition', title: '条件'},
|
||||
// {field: 'isMet', title: '是否满足', width: 90}
|
||||
]],
|
||||
data: [], // Initially empty, will be populated by backend data
|
||||
even: true, // Enable even row styling
|
||||
done: function(res, curr, count) {
|
||||
// Custom row styling based on 'status' field
|
||||
var tableData = res.data;
|
||||
layui.each(tableData, function(index, item){
|
||||
var tr = $('tr[data-index="' + index + '"]');
|
||||
if (item.status=="True") {
|
||||
// tr.css('background-color', '#67E667'); // Green for true
|
||||
// tr.css('color', 'black');
|
||||
tr.css('color', '#6495ED');
|
||||
} else {
|
||||
// tr.css('background-color', '#FF7373'); // Red for false
|
||||
// tr.css('color', 'black');
|
||||
tr.css('color', '#D69646');
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
var GROUPSTATIC = "";
|
||||
|
||||
// Function to fetch data from backend and reload table
|
||||
function fetchAndReload() {
|
||||
$.ajax({
|
||||
url: '/DevicesManage/DeviceMonitoring/GetRealTableData', // Replace with your actual backend API
|
||||
method: 'Post',
|
||||
dataType: 'json',
|
||||
data:{grouptype : GROUPSTATIC},
|
||||
success: function(response) {
|
||||
table.reload('dynamicTable', {
|
||||
data: response
|
||||
});
|
||||
},
|
||||
error: function(err) {
|
||||
console.error('Failed to fetch data:', err);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Initial fetch
|
||||
fetchAndReload();
|
||||
|
||||
// Refresh every 1 second
|
||||
setInterval(fetchAndReload, 1000);
|
||||
|
||||
var menujson ;
|
||||
var currID='';
|
||||
var xhr = new XMLHttpRequest();
|
||||
@ -247,7 +320,7 @@
|
||||
click: function(obj){
|
||||
layer.msg('打开流程-'+(obj.data.title));
|
||||
currID = obj.data.id;
|
||||
drawsvg(obj.data.title);
|
||||
drawsvg(obj.data.title,obj.data.group);
|
||||
}
|
||||
});
|
||||
} catch (e) {
|
||||
@ -332,7 +405,56 @@
|
||||
|
||||
return "No title found for the given ID.";
|
||||
}
|
||||
function drawsvg(svgname){
|
||||
|
||||
function findGroupById(jsonData, id) {
|
||||
// 递归函数，用于遍历JSON结构
|
||||
function search(node) {
|
||||
if (node.id === id) {
|
||||
return node.group;
|
||||
}
|
||||
if (node.children) {
|
||||
for (var i = 0; i < node.children.length; i++) {
|
||||
var result = search(node.children[i]);
|
||||
if (result !== undefined) {
|
||||
return result;
|
||||
}
|
||||
}
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
|
||||
// 从根节点开始搜索
|
||||
for (var i = 0; i < jsonData.length; i++) {
|
||||
var result = search(jsonData[i]);
|
||||
if (result !== undefined) {
|
||||
return result;
|
||||
}
|
||||
}
|
||||
|
||||
return "No title found for the given ID.";
|
||||
}
|
||||
|
||||
function drawTable(group){
|
||||
$.ajax({
|
||||
url: '/DevicesManage/DeviceMonitoring/GetRealTableData', // Replace with your actual backend API
|
||||
method: 'Post',
|
||||
dataType: 'json',
|
||||
data:{grouptype : group},
|
||||
success: function(response) {
|
||||
// Assuming response is an array of objects like:
|
||||
// [{id: 1, condition: "焦炉煤气压力>=2KPA", isMet: "满足", status: true}, ...]
|
||||
table.reload('dynamicTable', {
|
||||
data: response
|
||||
});
|
||||
},
|
||||
error: function(err) {
|
||||
console.error('Failed to fetch data:', err);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function drawsvg(svgname,group){
|
||||
GROUPSTATIC = group;
|
||||
var xhr = new XMLHttpRequest();
|
||||
|
||||
xhr.open('GET', '/sfc/' + svgname + '.svg?nocache=' + new Date().getTime(), true);
|
||||
@ -343,7 +465,7 @@
|
||||
var svgContainer = document.getElementById('svg-container');
|
||||
svgContainer.innerHTML = xhr.responseText;
|
||||
|
||||
|
||||
drawTable(group);
|
||||
// 查找所有的矩形元素并添加双击事件监听器
|
||||
var rectElements = svgContainer.getElementsByTagName('rect');
|
||||
for (var i = 0; i < rectElements.length; i++) {
|
||||
@ -359,8 +481,9 @@
|
||||
try {
|
||||
//menudata = JSON.parse(xhr.responseText);
|
||||
var svgnamenew = findTitleById(menujson, idToSearch);
|
||||
var groupnew = findGroupById(menujson, idToSearch);
|
||||
currID = idToSearch;
|
||||
drawsvg(svgnamenew);
|
||||
drawsvg(svgnamenew,groupnew);
|
||||
} catch (e) {
|
||||
console.error('Failed to parse JSON:', e);
|
||||
}
|
||||
@ -432,8 +555,9 @@
|
||||
try {
|
||||
//menudata = JSON.parse(xhr.responseText);
|
||||
var svgnamenew = findTitleById(menujson, parentId);
|
||||
var groupnew = findGroupById(menujson, parentId);
|
||||
currID = parentId;
|
||||
drawsvg(svgnamenew);
|
||||
drawsvg(svgnamenew,groupnew);
|
||||
} catch (e) {
|
||||
console.error('Failed to parse JSON:', e);
|
||||
}
|
||||
@ -562,17 +686,17 @@
|
||||
<script type="text/javascript" src="~/lib//leafer-ui@1.2.1/web.js"></script>
|
||||
<script src="~/sfc//sfcmenu.json"></script>
|
||||
<div style ="width:100%;height:100%;">
|
||||
<div class="layuimini-container" style="width:100%;height:100%; ">
|
||||
<div class="layuimini-container" style="width:100%;max-height:100%; ">
|
||||
|
||||
<div class="text-and-button">
|
||||
<span id="mySpan" class="text-content">当前位置：主流程--启动流程--启动设备1</span>
|
||||
<button id="returnButton">返回上级流程</button>
|
||||
</div>
|
||||
<div class="layui-row" style="overflow:hidden">
|
||||
<div class="layui-col-xs2" style="overflow:hidden">
|
||||
<div class="layui-row" style="overflow:hidden;max-height:100%">
|
||||
<div class="layui-col-xs2" style="overflow-y: auto;height:800px">
|
||||
<div id="ID-tree-demo-onlyIconControl"></div>
|
||||
</div>
|
||||
<div class="layui-col-xs10" style="overflow: auto;">
|
||||
<div class="layui-col-xs7" style="overflow-y: auto;height:800px">
|
||||
<div id="svg-container"></div>
|
||||
@* <div id="mermaidDiagram" class="mermaid" style="width:10000px;height:10000px; "> *@
|
||||
@* graph TD
|
||||
@ -596,6 +720,79 @@
|
||||
step6-->con6{执行该流程完成}
|
||||
con6-->step0 *@
|
||||
</div>
|
||||
<div class="layui-col-xs3" style="overflow-y: auto;height:800px">
|
||||
<p style="font-weight: bold;font-size:16px">烟气系统启动条件:</p>
|
||||
<table class="layui-table" lay-even id="dynamicTable">
|
||||
@* <colgroup>
|
||||
<col width="60">
|
||||
<col>
|
||||
<col width="90">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>序号</th>
|
||||
<th>条件</th>
|
||||
<th>是否满足</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr style="background:#67E667;color:black">
|
||||
<td>1</td>
|
||||
<td>焦炉煤气压力>=2KPA</td>
|
||||
<td>满足</td>
|
||||
</tr>
|
||||
<tr style="background:#67E667;color:black">
|
||||
<td>2</td>
|
||||
<td>助燃风机运行</td>
|
||||
<td>满足</td>
|
||||
</tr>
|
||||
<tr style="background:#FF7373;color:black">
|
||||
<td>3</td>
|
||||
<td>助燃空气压力>3KPA</td>
|
||||
<td>未满足</td>
|
||||
</tr>
|
||||
<tr style="background:#67E667;color:black">
|
||||
<td>4</td>
|
||||
<td>助燃空气流量>500m³/H</td>
|
||||
<td>满足</td>
|
||||
</tr>
|
||||
<tr style="background:#FF7373;color:black">
|
||||
<td>5</td>
|
||||
<td>空气调节阀开度反馈>5%</td>
|
||||
<td>未满足</td>
|
||||
</tr>
|
||||
<tr style="background:#67E667;color:black">
|
||||
<td>6</td>
|
||||
<td>高炉煤气压力>3KPA</td>
|
||||
<td>满足</td>
|
||||
</tr>
|
||||
<tr style="background:#FF7373;color:black">
|
||||
<td>7</td>
|
||||
<td>高炉煤气流量>500m³/H</td>
|
||||
<td>未满足</td>
|
||||
</tr>
|
||||
<tr style="color:black">
|
||||
<td>8</td>
|
||||
<td>煤气调节阀开度反馈>5%</td>
|
||||
<td style="color:green">满足</td>
|
||||
</tr>
|
||||
<tr style="color:black">
|
||||
<td>9</td>
|
||||
<td>高炉煤气快切阀开到位</td>
|
||||
<td style="color:red">未满足</td>
|
||||
</tr>
|
||||
<tr style="color:green">
|
||||
<td>10</td>
|
||||
<td>烟气炉炉膛温度>750℃</td>
|
||||
<td>满足</td>
|
||||
</tr>
|
||||
<tr style="color:red">
|
||||
<td>11</td>
|
||||
<td>放散调节阀开度反馈>50%</td>
|
||||
<td>未满足</td>
|
||||
</tr>
|
||||
</tbody> *@
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
@* <div id="mermaidDiagram" class="mermaid">
|
||||
|
||||
Reference in New Issue
Block a user