cdl/HTCloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1、陕西建龙打包版本

Browse Source 
2、drawio导入SFC
3、多系统并存修改
This commit is contained in:
dell
2025-02-19 16:06:08 +08:00
parent 4071d8f337
commit fbc097d131
73 changed files with 3874 additions and 13074 deletions
Download Patch File Download Diff File Expand all files Collapse all files

626
HT.Cloud.Web/Areas/DevicesManage/Views/DeviceMonitor/Index.cshtml Normal file
View File

@ -0,0 +1,626 @@
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Index.cshtml";
}
@inject Microsoft.AspNetCore.Hosting.IWebHostEnvironment env
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style>
/* 基本样式确保图表显示正确 */
.path {
background-color: transparent; /* 子元素背景透明，继承父元素背景 */
fill:transparent;
}
#svg-container {
width: 100%;
height: auto;
border: 1px solid #ccc;
overflow: auto;
}
.text-and-button {
display: flex;
align-items: center;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
height:30px;
}
.text-and-button .text-content {
/* 设置文本格式 */
font-family: Arial, sans-serif;
font-size: 16px;
color: #333;
margin-right: 20px; /* 文本与按钮之间的间隔 */
}
.text-and-button button {
/* 设置按钮样式 */
background-color:#4CAF50; /* 绿色背景 */
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
}
/* 初始样式定义 */
.defaultNode {
fill: #ffffff;
stroke: #000000;
stroke-width: 2px;
color: #000000;
}
/* 更新后的样式 */
.updatedNode {
fill: #add8e6; /* 浅蓝色作为底色 */
stroke: #333333;
stroke-width: 3px;
color: #ff0000; /* 红色作为文字颜色 */
}
.layui-card {
border: 1px solid #f2f2f2;
border-radius: 5px;
}
.icon {
margin-right: 10px;
color: #1aa094;
}
.icon-cray {
color: #ffb800 !important;
}
.icon-blue {
color: #1e9fff !important;
}
.icon-tip {
color: #ff5722 !important;
}
.layuimini-qiuck-module {
text-align: center;
margin-top: 10px
}
.layuimini-qiuck-module a i {
display: inline-block;
width: 100%;
height: 60px;
line-height: 60px;
text-align: center;
border-radius: 2px;
font-size: 30px;
background-color: #F8F8F8;
color: #333;
transition: all .3s;
-webkit-transition: all .3s;
}
.layuimini-qiuck-module a cite {
position: relative;
top: 2px;
display: block;
color: #666;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
font-size: 14px;
}
.welcome-module {
width: 100%;
height: 210px;
}
.panel {
background-color: #fff;
border: 1px solid transparent;
border-radius: 3px;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
box-shadow: 0 1px 1px rgba(0,0,0,.05)
}
.panel-body {
padding: 10px
}
.panel-title {
margin-top: 0;
margin-bottom: 0;
font-size: 12px;
color: inherit
}
.label {
display: inline;
padding: .2em .6em .3em;
font-size: 75%;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
margin-top: .3em;
}
.label {
display: inline;
padding: .2em .6em .3em;
font-size: 75%;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
margin-top: .3em;
}
.layui-red {
color: red
}
.main_btn > p {
height: 40px;
}
.layui-bg-number {
background-color: #F8F8F8;
}
.layuimini-notice:hover {
background: #f6f6f6;
}
.layuimini-notice {
padding: 7px 16px;
clear: both;
font-size: 12px !important;
cursor: pointer;
position: relative;
transition: background 0.2s ease-in-out;
}
.layuimini-notice-title, .layuimini-notice-label {
padding-right: 70px !important;
text-overflow: ellipsis !important;
overflow: hidden !important;
white-space: nowrap !important;
}
.layuimini-notice-title {
line-height: 28px;
font-size: 14px;
}
.layuimini-notice-extra {
position: absolute;
top: 50%;
margin-top: -8px;
right: 16px;
display: inline-block;
height: 16px;
color: #999;
}
</style>
<script>
layui.use(['layer', 'echarts', 'common', 'tree'], function () {
var $ = layui.jquery,
layer = layui.layer,
common = layui.common,
tree = layui.tree,
echarts = layui.echarts;
wcLoading.close();
var menujson ;
var currID='';
var xhr = new XMLHttpRequest();
xhr.open('GET', '/sfc/sfcmenu.json?nocache=' + new Date().getTime(), true); // 替换为你的JSON文件路径
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
try {
var menudata = JSON.parse(xhr.responseText);
menujson = menudata;
console.log('Data loaded:', menudata);
// 在这里处理你的数据
tree.render({
elem: '#ID-tree-demo-onlyIconControl',
data: menudata,
onlyIconControl: true, // 是否仅允许节点左侧图标控制展开收缩
click: function(obj){
layer.msg('打开流程-'+(obj.data.title));
currID = obj.data.id;
drawsvg(obj.data.title);
}
});
} catch (e) {
console.error('Failed to parse JSON:', e);
}
}
};
xhr.send();
//var data = JSON.parse(document.getElementById('sfcmenu').textContent); // 获取JSON数据，假设JSON被嵌入到HTML中或以某种方式可用作全局变量。
// 模拟数据
// 渲染
//拖拽
const draggable_dev = true;
// //开发色彩
// const fill_backgroud = '#8d98a3';
// const fill_iobox = '#8d98a3';
// const stroke_iobox = '#494d52';;
// const stroke_iobox_line = '#42444a';
// const stroke_iobox_spiltline = '#474b58';
// const fill_top_name = '#f1f4f6';
// const fill_top_name_value = '#f1f4f6';
// const fill_rect = '#a4a9ab';
// const fill_rect_text_name = '#e5e9ec';
// const fill_rect_text_description = '#f3f6f8';
// const fill_rect_io_on = '#aaff00';
// const fill_rect_io_off = '#a3a6a9';
//新版色彩
const fill_backgroud = '#28333e';
//const fill_backgroud = '#2a0056';
// const fill_iobox = '#2492e9';//00
// const fill_iobox = '#345266';//001
const fill_iobox = '#345b87';//002
// const fill_iobox = '#50657a';//003
// const fill_iobox = '#334b64';//004
//const fill_iobox = '#3d5062';//005
const stroke_iobox = '#494d52';;
const stroke_iobox_line = '#42444a';
const stroke_iobox_spiltline = '#474b58';
const fill_top_name = '#ffffff';
const fill_top_name_value = '#ffffff';
const fill_rect = '#cecece';
const fill_rect_text_name = '#ffffff';
//const fill_rect_text_name = '#02f2e0';
const fill_rect_text_description = '#ffffff';
//const fill_rect_text_description = '#02f2e0';
const fill_rect_io_on = '#00ff55';//'#00ff7f'
//const fill_rect_io_on = '#00ff7f'
const fill_rect_io_off = '#cecece';
function findTitleById(jsonData, id) {
// 递归函数，用于遍历JSON结构
function search(node) {
if (node.id === id) {
return node.title;
}
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 drawsvg(svgname){
var xhr = new XMLHttpRequest();
xhr.open('GET', '/sfc/' + svgname + '.svg?nocache=' + new Date().getTime(), true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var svgContainer = document.getElementById('svg-container');
svgContainer.innerHTML = xhr.responseText;
// 查找所有的矩形元素并添加双击事件监听器
var rectElements = svgContainer.getElementsByTagName('rect');
for (var i = 0; i < rectElements.length; i++) {
var rect = rectElements[i];
rect.addEventListener('dblclick', function(event) {
debugger;
console.log('Rectangle was double-clicked!');
// 获取rect的父节点的父节点
var parentOfParent = this.parentNode.parentNode;
var idToSearch = parentOfParent.childNodes[1].childNodes[0].childNodes[0].childNodes[0].childNodes[0].childNodes[0].childNodes[0].innerHTML;
//var menudata=menujson;
try {
//menudata = JSON.parse(xhr.responseText);
var svgnamenew = findTitleById(menujson, idToSearch);
currID = idToSearch;
drawsvg(svgnamenew);
} catch (e) {
console.error('Failed to parse JSON:', e);
}
// 改变矩形的颜色作为双击的反馈
//this.style.fill = 'red';
});
}
// 定义查找和修改元素背景色的函数
function changeElementColor(elementId, newColor) {
var element = document.getElementById(elementId);
if (element != null) {
element.style.fill = newColor;
} else {
console.log('Element not found:', elementId);
}
}
//_tfGcsZuRspaPDUqBOv4-14
//_tfGcsZuRspaPDUqBOv4-13
} else {
console.log('Failed to load SVG file:', xhr.statusText);
}
}
};
xhr.send();
var span = document.getElementById('mySpan');
span.textContent = svgname;
}
// // 假设图表的XML内容是作为一个JavaScript变量定义的
// var svgContent = '<svg width="400" height="400"><rect id="exampleID" x="10" y="10" width="100" height="100" fill="white" stroke="black"/></svg>'; // 替换为你的SVG内容
// setTimeout(()=>{
// // document.getElementById('svg-container').innerHTML = svgContent;
// // 查找并修改元素背景色的函数
// function changeElementColor(elementId, newColor) {
// var element = document.getElementById(elementId);
// if (element) {
// element.style.fill = newColor;
// } else {
// console.log('Element not found:', elementId);
// }
// }
// document.getElementById('change-color').addEventListener('click', function() {
// var elementId = document.getElementById('element-id').value;
// if (elementId) {
// changeElementColor(elementId, 'red'); // 这里设置为红色，可以根据需求更改
// } else {
// alert('Please enter an element ID.');
// }
// });
// },1000);
function ReturnParentNode(){
var parentId = currID.slice(0, -2);
try {
//menudata = JSON.parse(xhr.responseText);
var svgnamenew = findTitleById(menujson, parentId);
currID = parentId;
drawsvg(svgnamenew);
} catch (e) {
console.error('Failed to parse JSON:', e);
}
};
// 获取按钮元素
const button = document.getElementById('returnButton');
// 添加点击事件监听器
button.addEventListener('click', function() {
// 这里定义点击事件的处理逻辑
ReturnParentNode();
});
function AddListenDblclick (){
mermaid.init(undefined, document.querySelectorAll('.mermaid'));
var nodes = element.querySelectorAll('.node');
for(var i = 0;i<nodes.length;i++){
var nodeid = nodes[i].id;
var doid = nodeid.split('-')[1];
var rect = nodes[i].querySelector('rect')
if(doid == 'step2'){
rect.ondblclick= function(){
console.log('节点2被双击了');
}
}
}
};
// var element = document.getElementById("mermaidDiagram");
var t = null;
function time() {
clearTimeout(t); //清除定时器
UpdataChart()
t = setTimeout(time, 1 * 1000); //设定定时器，循环运行
}
async function UpdataChart() {
myajax = await $.ajax({
url: "/DevicesManage/DeviceMonitoring/GetRealDeviceTag",
type: "Get",
dataType: "json",
success: function (redata) {
}
});
$.when(myajax).done(function (redata) {
// debugger;
// 获取当前的SVG内容
var dataa = Object.entries(redata);
for(var j=0;j<dataa.length;j++){
var tagname = dataa[j][0];
var tagvalue = dataa[j][1];
var elements = document.querySelectorAll('[data-cell-id="'+tagname+'"]')//DEfbDvusWkKE94doMNAG-55"]');
if(tagvalue == 'True')
{
if (elements.length > 0) {
try
{
elements[0].childNodes[1].childNodes[0].childNodes[0].childNodes[0].childNodes[0].childNodes[0].childNodes[0].childNodes[0].style.background = '';
}catch{}
elements[0].childNodes[0].childNodes[0].style.fill = '#009900'; // 只修改第一个匹配的元素
// elements[0].childNodes[0].childNodes[0].style.stroke = '#009900';
} else {
// console.log('Element not found with data-cell-id:', tagname);
}
}
else if(tagvalue == '1')
{
if (elements.length > 0) {
try
{
elements[0].childNodes[1].childNodes[0].childNodes[0].childNodes[0].childNodes[0].childNodes[0].childNodes[0].childNodes[0].style.background = '';
}catch{}
elements[0].childNodes[0].childNodes[0].style.fill = '#009900'; // 只修改第一个匹配的元素
// elements[0].childNodes[0].childNodes[0].style.stroke = '#009900';
} else {
// console.log('Element not found with data-cell-id:', tagname);
}
}
else if(tagvalue == 'False')
{
if (elements.length > 0) {
try
{
elements[0].childNodes[1].childNodes[0].childNodes[0].childNodes[0].childNodes[0].childNodes[0].childNodes[0].childNodes[0].style.background = '';
}catch{}
elements[0].childNodes[0].childNodes[0].style.fill = '#ECECFF'; // 只修改第一个匹配的元素
// elements[0].childNodes[0].childNodes[0].style.stroke = '#000000';
} else {
// console.log('Element not found with data-cell-id:', tagname);
}
}
else if(tagvalue == '0')
{
if (elements.length > 0) {
try
{
elements[0].childNodes[1].childNodes[0].childNodes[0].childNodes[0].childNodes[0].childNodes[0].childNodes[0].childNodes[0].style.background = '';
}catch{}
elements[0].childNodes[0].childNodes[0].style.fill = '#ECECFF'; // 只修改第一个匹配的元素
// elements[0].childNodes[0].childNodes[0].style.stroke = '#000000';
} else {
// console.log('Element not found with data-cell-id:', tagname);
}
}
}
});
}
t = setTimeout(time, 1 * 1000); //开始运行
})
</script>
<script type="text/javascript" src="~/lib//drawio-embed/drawio-embed.min.js"></script>
<script type="text/javascript" src="~/lib//drawio/embed.dev.js"></script>
<script type="text/javascript" src="~/lib//mermaid/mermaid.js"></script>
<script type="text/javascript" src="~/lib//drawio/viewer-static.min.js"></script>
<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="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 id="ID-tree-demo-onlyIconControl"></div>
</div>
<div class="layui-col-xs10" style="overflow: auto;">
<div id="svg-container"></div>
@* <div id="mermaidDiagram" class="mermaid" style="width:10000px;height:10000px; "> *@
@* graph TD
step0[S0_初始步]-->con0{ 执行该流程请求 }
con0-->step1["S1_执行动作1"]
step1-->con11{S2转换条件}
con11-->step2["S2_执行子流程"]
step2-->con2{S3转换条件}
con2-->step3["S3_
设备输出1
设备输出2"]
step3-->con3{S6转换条件}
con3-->step6[S6_Set 执行该流程完成]
step1-->con12{S4转换条件}
con12-->step4["S4_执行子流程"]
step4-->con4{S5转换条件}
con4-->step5[S5_执行子流程]
step5-->con5{S6转换条件}
con5-->step6
step6-->con6{执行该流程完成}
con6-->step0 *@
</div>
</div>
</div>
@* <div id="mermaidDiagram" class="mermaid">
graph TD
step0[S0_初始步]-->con0{ 执行该流程请求 }
con0-->step1["S1_执行动作1"]
step1-->con11{S2转换条件}
con11-->step2["S2_执行子流程"]
step2-->con2{S3转换条件}
con2-->step3["S3_
设备输出1
设备输出2"]
step3-->con3{S6转换条件}
con3-->step6[S6_Set 执行该流程完成]
step1-->con12{S4转换条件}
con12-->step4["S4_执行子流程"]
step4-->con4{S5转换条件}
con4-->step5[S5_执行子流程]
step5-->con5{S6转换条件}
con5-->step6
step6-->con6{执行该流程完成}
con6-->step0
</div> *@
</div>
</div>