877 lines
31 KiB
Plaintext
877 lines
31 KiB
Plaintext
@{
|
|
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>
|
|
|
|
.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 data = [{
|
|
title:'主流程',
|
|
id: 1,
|
|
children: [
|
|
{
|
|
title:'启动流程',
|
|
id: 1000,
|
|
children: [
|
|
{
|
|
title:'启动设备1流程',
|
|
id: 10001
|
|
},
|
|
{
|
|
title:'启动设备2流程',
|
|
id: 10002
|
|
}
|
|
,
|
|
{
|
|
title:'启动设备3流程',
|
|
id: 10002
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title:'停机流程',
|
|
id: 2000,
|
|
children: [
|
|
{
|
|
title:'停止设备1流程',
|
|
id: 20001
|
|
},
|
|
{
|
|
title:'停止设备2流程',
|
|
id: 20002
|
|
}
|
|
,
|
|
{
|
|
title:'停止设备3流程',
|
|
id: 20002
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title:'二次调节流程',
|
|
id: 3000,
|
|
children: [
|
|
{
|
|
title:'升温流程',
|
|
id: 30001
|
|
},
|
|
{
|
|
title:'降温流程',
|
|
id: 30002
|
|
}
|
|
,
|
|
{
|
|
title:'高产模式流程',
|
|
id: 30002
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: "其他子流程",
|
|
id:5000
|
|
}
|
|
]
|
|
}];
|
|
// 渲染
|
|
tree.render({
|
|
elem: '#ID-tree-demo-onlyIconControl',
|
|
data: data,
|
|
onlyIconControl: true, // 是否仅允许节点左侧图标控制展开收缩
|
|
click: function(obj){
|
|
layer.msg(JSON.stringify(obj.data));
|
|
}
|
|
});
|
|
|
|
|
|
//拖拽
|
|
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';
|
|
|
|
|
|
mermaid.initialize({
|
|
startOnLoad: true,
|
|
theme: 'default',
|
|
securityLevel: 'loose', // 允许对 SVG 进行后续的 JavaScript 操作
|
|
useMaxWidth:true,
|
|
maxWidth: 10000,
|
|
maxHeight: 6000
|
|
});
|
|
|
|
const diagramDefinition=`
|
|
graph TD
|
|
|
|
S_0[S_0<br>初始步]-->H0_SYS.SOn{{新系统未启用}}
|
|
H0_SYS.SOn-->S_01>S_0]
|
|
|
|
|
|
S_0[S_0<br>初始步]-->T_NOT_Run{{系统未运行（三级报警）}}
|
|
T_NOT_Run-->S_02>S_0]
|
|
|
|
|
|
S_0[S_0<br>初始步]-->T_Alarm3_Stop{{三级报警三类紧急停机}}
|
|
T_Alarm3_Stop-->S_Alarm3_Stop[S_Alarm3_Stop<br>三级报警_三类_紧急停机]
|
|
S_Alarm3_Stop-->Sys_On1{{True}}
|
|
Sys_On1-->S_03>S_0]
|
|
|
|
|
|
S_0[S_0<br>初始步]-->T_Alarm2_Stop{{三级报警二类快速停机}}
|
|
T_Alarm2_Stop-->S_Alarm2_Stop[S_Alarm2_Stop<br>三级报警_二类_快速停机]
|
|
S_Alarm2_Stop-->Sys_On2{{True}}
|
|
Sys_On2-->S_04>S_0]
|
|
|
|
|
|
S_0[S_0<br>初始步]-->T_Btn3_Stop{{紧急停机按钮}}
|
|
T_Btn3_Stop-->S_Btn3_Stop[S_Btn3_Stop<br>紧急停机按钮停机]
|
|
S_Btn3_Stop-->Sys_On3{{True}}
|
|
Sys_On3-->S_05>S_0]
|
|
|
|
|
|
S_0[S_0<br>初始步]-->T_Adjust4{{四次调节}}
|
|
T_Adjust4-->S_Adjust_4_0[S_Adjust_4_0<br>四次调节初始信息复位]
|
|
S_Adjust_4_0-->Sys_On4{{True}}
|
|
Sys_On4-->S_Adjust_4_1[S_Adjust_4_1<br>四次调节请求置位]
|
|
|
|
S_Adjust_4_1-->H0_Alarm.Alarm3{{三级报警}}
|
|
H0_Alarm.Alarm3-->H0_INFO_E26[H0_INFO_E26<br>Set H0_INFO_E26<br> Reset 启动请求]
|
|
H0_INFO_E26-->Sys_On5{{True}}
|
|
Sys_On5-->S_06>S_0]
|
|
|
|
S_Adjust_4_1-->A24_Step.Stop_F{{停止失败}}
|
|
A24_Step.Stop_F-->H0_INFO_E27[H0_INFO_E27<br>Set H0_INFO_E27]
|
|
H0_INFO_E27-->Sys_On6{{True}}
|
|
Sys_On6-->Jump_S_Adjust_4_1>S_Adjust_4_1]
|
|
|
|
S_Adjust_4_1-->A24_Step.Stop_W{{停止完成}}
|
|
A24_Step.Stop_W-->S_Adjust_4_2[S_Adjust_4_2<br>四次调节完成复位]
|
|
S_Adjust_4_2-->A24_Step.Stop_D{{停止延迟完成}}
|
|
A24_Step.Stop_D-->S_Adjust_4_3[S_Adjust_4_3<br>Reset A24_Step.Stop_Q<br>Reset Reset A24_Step.Stop_D]
|
|
S_Adjust_4_3-->Sys_On7{{True}}
|
|
Sys_On7-->S_07>S_0]
|
|
|
|
|
|
S_0[S_0<br>初始步]-->T_Adjust2{{二次调节}}
|
|
T_Adjust2-->S_Adjust_2_0[S_Adjust_2_0<br>二次调节初始信息复位]
|
|
S_Adjust_2_0-->Sys_On26{{True}}
|
|
Sys_On26-->S_Adjust_2_1[S_Adjust_2_1<br>二次调节请求置位]
|
|
|
|
S_Adjust_2_1-->H0_Alarm.Alarm3-2{{三级报警}}
|
|
H0_Alarm.Alarm3-2-->H0_INFO_E24[H0_INFO_E24<br>Set H0_INFO_E24<br> Reset A24_Step.Start_Q]
|
|
H0_INFO_E24-->Sys_On27{{True}}
|
|
Sys_On27-->S_27>S_0]
|
|
|
|
S_Adjust_2_1-->A24_Step.Start_F{{启动失败}}
|
|
A24_Step.Start_F-->H0_INFO_E25[H0_INFO_E25<br>Set H0_INFO_E25]
|
|
H0_INFO_E25-->Sys_On28{{True}}
|
|
Sys_On28-->Jump_S_Adjust_2_1>S_Adjust_2_1]
|
|
|
|
S_Adjust_2_1-->A24_Step.Start_W{{二次调节转换.启动完成}}
|
|
A24_Step.Start_W-->S_Adjust_2_2[S_Adjust_2_2<br>二次调节完成复位]
|
|
S_Adjust_2_2-->A24_Step.Start_D{{二次调节启动延迟完成}}
|
|
A24_Step.Start_D-->S_Adjust_2_3[S_Adjust_2_3<br>Reset A24_Step.Start_Q<br>Reset Reset A24_Start.Stop_D]
|
|
S_Adjust_2_3-->Sys_On29{{True}}
|
|
Sys_On29-->S_29>S_0]
|
|
|
|
|
|
S_0[S_0<br>初始步]-->T_AutoStart{{一键启动}}
|
|
T_AutoStart-->S_H0_Start_0[S_H0_Start_0<br>一键启动初始信息复位]
|
|
S_H0_Start_0-->Sys_On_S_H0_Start_0{{True}}
|
|
Sys_On_S_H0_Start_0-->S_H0_Start_1[S_H0_Start_1<br>一键启动请求置位]
|
|
|
|
S_H0_Start_1-->H0_Alarm.Alarm3-1{{三级报警}}
|
|
H0_Alarm.Alarm3-1-->H0_INFO_E0[H0_INFO_E0<br>Set H0_INFO_E0<br>Reset H0_Step.Start_Q]
|
|
H0_INFO_E0-->Sys_On8{{True}}
|
|
Sys_On8-->S_08>S_0]
|
|
|
|
S_H0_Start_1-->H0_Step.Stop_F{{启动失败}}
|
|
H0_Step.Stop_F-->H0_INFO_E1[H0_INFO_E1<br>Set H0_INFO_E1]
|
|
H0_INFO_E1-->Sys_On9{{True}}
|
|
Sys_On9-->S_H0_Start_1-1>S_H0_Start_1]
|
|
|
|
S_H0_Start_1-->H0_Step.Stop_W{{启动完成}}
|
|
H0_Step.Stop_W-->S_H0_Start_2[一键停机完成复位<br>Reset H0_INFO_E1<br>Reset H0_Step.Start_Q]
|
|
S_H0_Start_2-->Sys_On10{{True}}
|
|
Sys_On10-->S_10>S_0]
|
|
|
|
|
|
S_0[S_0<br>初始步]-->T_Start1{{液压润滑系统启动}}
|
|
T_Start1-->S_H1_Start_0[S_H1_Start_0<br>H1启动初始信息复位]
|
|
S_H1_Start_0-->Sys_On_S_H1_Start_0{{True}}
|
|
Sys_On_S_H1_Start_0-->S_H1_Start_1[S_H1_Start_1<br>一键启动请求置位]
|
|
|
|
S_H1_Start_1-->H1_Alarm.Alarm3-1{{三级报警}}
|
|
H1_Alarm.Alarm3-1-->H1_INFO_E0[H1_INFO_E0<br>Set H1_INFO_E0<br>Reset H1_Step.Start_Q]
|
|
H1_INFO_E0-->Sys_On11{{True}}
|
|
Sys_On11-->S_11>S_0]
|
|
|
|
S_H1_Start_1-->H1_Step.Stop_F{{启动失败}}
|
|
H1_Step.Stop_F-->H1_INFO_E1[H1_INFO_E1<br>Set H1_INFO_E1]
|
|
H1_INFO_E1-->Sys_On12{{True}}
|
|
Sys_On12-->S_H1_Start_1-1>S_H1_Start_1]
|
|
|
|
S_H1_Start_1-->H1_Step.Stop_W{{启动完成}}
|
|
H1_Step.Stop_W-->S_H1_Start_2[一键停机完成复位<br>Reset H1_INFO_E1<br>Reset H1_Step.Start_Q]
|
|
S_H1_Start_2-->Sys_On13{{True}}
|
|
Sys_On13-->S_13>S_0]
|
|
|
|
|
|
S_0[S_0<br>初始步]-->T_Start2{{烟气系统启动}}
|
|
T_Start2-->S_H2_Start_0[S_H2_Start_0<br>H2启动初始信息复位]
|
|
S_H2_Start_0-->Sys_On_S_H2_Start_0{{True}}
|
|
Sys_On_S_H2_Start_0-->S_H2_Start_1[S_H2_Start_1<br>一键启动请求置位]
|
|
|
|
S_H2_Start_1-->H2_Alarm.Alarm3-1{{三级报警}}
|
|
H2_Alarm.Alarm3-1-->H2_INFO_E0[H2_INFO_E0<br>Set H2_INFO_E0<br>Reset H2_Step.Start_Q]
|
|
H2_INFO_E0-->Sys_On14{{True}}
|
|
Sys_On14-->S_14>S_0]
|
|
|
|
S_H2_Start_1-->H2_Step.Stop_F{{启动失败}}
|
|
H2_Step.Stop_F-->H2_INFO_E1[H2_INFO_E1<br>Set H2_INFO_E1]
|
|
H2_INFO_E1-->Sys_On15{{True}}
|
|
Sys_On15-->S_H2_Start_1-1>S_H2_Start_1]
|
|
|
|
S_H2_Start_1-->H2_Step.Stop_W{{启动完成}}
|
|
H2_Step.Stop_W-->S_H2_Start_2[一键停机完成复位<br>Reset H2_INFO_E1<br>Reset H2_Step.Start_Q]
|
|
S_H2_Start_2-->Sys_On16{{True}}
|
|
Sys_On16-->S_16>S_0]
|
|
|
|
|
|
S_0[S_0<br>初始步]-->T_Start3{{磨机系统启动}}
|
|
T_Start3-->S_H3_Start_0[S_H3_Start_0<br>H3启动初始信息复位]
|
|
S_H3_Start_0-->Sys_On_S_H3_Start_0{{True}}
|
|
Sys_On_S_H3_Start_0-->S_H3_Start_1[S_H3_Start_1<br>一键启动请求置位]
|
|
|
|
S_H3_Start_1-->H3_Alarm.Alarm3-1{{三级报警}}
|
|
H3_Alarm.Alarm3-1-->H3_INFO_E0[H3_INFO_E0<br>Set H3_INFO_E0<br>Reset H3_Step.Start_Q]
|
|
H3_INFO_E0-->Sys_On17{{True}}
|
|
Sys_On17-->S_017>S_0]
|
|
|
|
S_H3_Start_1-->H3_Step.Stop_F{{启动失败}}
|
|
H3_Step.Stop_F-->H3_INFO_E1[H3_INFO_E1<br>Set H3_INFO_E1]
|
|
H3_INFO_E1-->Sys_On18{{True}}
|
|
Sys_On18-->S_H3_Start_1-1>S_H3_Start_1]
|
|
|
|
S_H3_Start_1-->H3_Step.Stop_W{{启动完成}}
|
|
H3_Step.Stop_W-->S_H3_Start_2[一键停机完成复位<br>Reset H3_INFO_E1<br>Reset H3_Step.Start_Q]
|
|
S_H3_Start_2-->Sys_On19{{True}}
|
|
Sys_On19-->S_19>S_0]
|
|
|
|
|
|
S_0[S_0<br>初始步]-->T_Start4{{给煤系统启动}}
|
|
T_Start4-->S_H4_Start_0[S_H4_Start_0<br>H4启动初始信息复位]
|
|
S_H4_Start_0-->Sys_On_S_H4_Start_0{{True}}
|
|
Sys_On_S_H4_Start_0-->S_H4_Start_1[S_H4_Start_1<br>一键启动请求置位]
|
|
|
|
S_H4_Start_1-->H4_Alarm.Alarm3-1{{三级报警}}
|
|
H4_Alarm.Alarm3-1-->H4_INFO_E0[H4_INFO_E0<br>Set H4_INFO_E0<br>Reset H4_Step.Start_Q]
|
|
H4_INFO_E0-->Sys_On20{{True}}
|
|
Sys_On20-->S_20>S_0]
|
|
|
|
S_H4_Start_1-->H4_Step.Stop_F{{启动失败}}
|
|
H4_Step.Stop_F-->H4_INFO_E1[H4_INFO_E1<br>Set H4_INFO_E1]
|
|
H4_INFO_E1-->Sys_On21{{True}}
|
|
Sys_On21-->S_H4_Start_1-1>S_H4_Start_1]
|
|
|
|
S_H4_Start_1-->H4_Step.Stop_W{{启动完成}}
|
|
H4_Step.Stop_W-->S_H4_Start_2[一键停机完成复位<br>Reset H4_INFO_E1<br>Reset H4_Step.Start_Q]
|
|
S_H4_Start_2-->Sys_On22{{True}}
|
|
Sys_On22-->S_22>S_0]
|
|
|
|
|
|
S_0[S_0<br>初始步]-->T_Start5{{收粉系统启动}}
|
|
T_Start5-->S_H5_Start_0[S_H5_Start_0<br>H5启动初始信息复位]
|
|
S_H5_Start_0-->Sys_On_S_H5_Start_0{{True}}
|
|
Sys_On_S_H5_Start_0-->S_H5_Start_1[S_H5_Start_1<br>一键启动请求置位]
|
|
|
|
S_H5_Start_1-->H5_Alarm.Alarm3-1{{三级报警}}
|
|
H5_Alarm.Alarm3-1-->H5_INFO_E0[H5_INFO_E0<br>Set H5_INFO_E0<br>Reset H5_Step.Start_Q]
|
|
H5_INFO_E0-->Sys_On23{{True}}
|
|
Sys_On23-->S_23>S_0]
|
|
|
|
S_H5_Start_1-->H5_Step.Stop_F{{启动失败}}
|
|
H5_Step.Stop_F-->H5_INFO_E1[H5_INFO_E1<br>Set H5_INFO_E1]
|
|
H5_INFO_E1-->Sys_On24{{True}}
|
|
Sys_On24-->S_H5_Start_1-1>S_H5_Start_1]
|
|
|
|
S_H5_Start_1-->H5_Step.Stop_W{{启动完成}}
|
|
H5_Step.Stop_W-->S_H5_Start_2[一键停机完成复位<br>Reset H5_INFO_E1<br>Reset H5_Step.Start_Q]
|
|
S_H5_Start_2-->Sys_On25{{True}}
|
|
Sys_On25-->S_25>S_0]
|
|
`
|
|
|
|
const flowchart1diagramDefinition = `
|
|
graph TD
|
|
step0[S0<br>初始步]-->con0{{执行该流程请求}}
|
|
con0-->step1["S1<br>执行动作1"]
|
|
step1-->con11{{"S2转换条件"}}
|
|
con11-->step2["S2<br>执行子流程"]
|
|
step2-->con2{{S3转换条件}}
|
|
con2-->step3["S3
|
|
设备输出1
|
|
设备输出2"]
|
|
step3-->con3{{S6转换条件}}
|
|
con3-->step6[S6<br>Set 执行该流程完成]
|
|
|
|
step1-->con12{{S4转换条件}}
|
|
con12-->step4["S4<br>执行子流程"]
|
|
step4-->con4{{S5转换条件}}
|
|
con4-->step5[S5<br>执行子流程]
|
|
step5-->con5{{S6转换条件}}
|
|
con5-->step6
|
|
step6-->con6{{执行该流程完成}}
|
|
con6-->step0
|
|
|
|
click con11 callback "这是一个悬浮提示"
|
|
click step2 callback "Node with Double Click"
|
|
`;
|
|
|
|
const diagramDefinition2 = `
|
|
graph TD
|
|
step0{S0_初始步}-->con0[执行该流程请求]
|
|
con0-->step1{S1_执行动作1}
|
|
step1-->con11[S2转换条件]
|
|
con11-->step2{S2_执行子流程}
|
|
step2-->con2[S4转换条件]
|
|
con2-->step4{S4_执行动作4}
|
|
|
|
step1-->con12[S3转换条件]
|
|
con12-->step3{S3_执行动作3}
|
|
step3-->con3[S4转换条件]
|
|
con3-->step4
|
|
|
|
`;
|
|
|
|
|
|
const element = document.getElementById("mermaidDiagram");
|
|
mermaid.render('graphDiv', diagramDefinition).then(({svg}) => {
|
|
element.innerHTML = svg;
|
|
});
|
|
|
|
function tooltip () {
|
|
const tooltip = document.createElement('div');
|
|
tooltip.style.position = 'absolute';
|
|
tooltip.style.border = '1px solid black';
|
|
tooltip.style.backgroundColor = 'white';
|
|
tooltip.style.padding = '10px';
|
|
tooltip.style.zIndex = '1000';
|
|
tooltip.style.left = event.clientX + 'px';
|
|
tooltip.style.top = event.clientY + 'px';
|
|
|
|
// 假设这里我们要显示一个简单的流程图
|
|
tooltip.innerHTML = `<div class="mermaid">
|
|
graph TD
|
|
A[开始] --> B[结束]
|
|
</div>`;
|
|
|
|
document.body.appendChild(tooltip);
|
|
|
|
// 初始化 MermaidJS 以渲染新的图形
|
|
mermaid.init(undefined, tooltip);
|
|
|
|
//处理悬浮窗关闭，例如点击外部区域关闭悬浮窗
|
|
// document.addEventListener('click', function(e) {
|
|
// if (!tooltip.contains(e.target)) {
|
|
// document.body.removeChild(tooltip);
|
|
// }
|
|
// }, {once: true});
|
|
};
|
|
|
|
setTimeout(()=>{
|
|
const mermaidSVGs = document.querySelectorAll('.mermaid svg');
|
|
if (mermaidSVGs.length > 0) {
|
|
console.log('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')
|
|
var polygon = nodes[i].querySelector('polygon')
|
|
if(doid == 'step2'){
|
|
rect.ondblclick= function(){
|
|
|
|
console.log('节点2被双击了');
|
|
var element2 = document.getElementById("mermaidDiagram");
|
|
mermaid.render('graphDiv', diagramDefinition2).then(({svg}) => {
|
|
element.innerHTML = svg;
|
|
});
|
|
}
|
|
}
|
|
if(doid == 'T_Alarm3_Stop'){
|
|
polygon.onclick= function(){
|
|
|
|
console.log('节点被击了');
|
|
tooltip();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},1000);
|
|
|
|
function ReturnParentNode(){
|
|
debugger;
|
|
var element3 = document.getElementById("mermaidDiagram");
|
|
mermaid.render('graphDiv', diagramDefinition).then(({svg}) => {
|
|
element.innerHTML = svg;
|
|
});
|
|
|
|
setTimeout(()=>{
|
|
const mermaidSVGs = document.querySelectorAll('.mermaid svg');
|
|
if (mermaidSVGs.length > 0) {
|
|
console.log('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 element2 = document.getElementById("mermaidDiagram");
|
|
mermaid.render('graphDiv', diagramDefinition2).then(({svg}) => {
|
|
element.innerHTML = svg;
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},1000);
|
|
}
|
|
|
|
|
|
|
|
// 获取按钮元素
|
|
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 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')
|
|
var polygon = nodes[i].querySelector('polygon')
|
|
if(rect){
|
|
|
|
rect.style.fill='#ECECFF';
|
|
}
|
|
if(polygon){
|
|
|
|
polygon.style.fill='#D3D3D3';
|
|
polygon.style.stroke = '#FFFFFF'
|
|
}
|
|
try
|
|
{
|
|
var tagdata = redata.filter(item => item.TagName === doid)[0];
|
|
var value = tagdata.TagValue;
|
|
if(value == '1'){
|
|
if(rect){
|
|
|
|
rect.style.fill='#009900';
|
|
}
|
|
if(polygon){
|
|
|
|
polygon.style.fill='#98FB98';
|
|
}
|
|
}
|
|
if(value == '0'){
|
|
if(rect){
|
|
|
|
rect.style.fill='#ECECFF';
|
|
}
|
|
if(polygon){
|
|
|
|
polygon.style.fill='#D3D3D3';
|
|
polygon.style.stroke = '#FFFFFF'
|
|
}
|
|
}
|
|
}catch{
|
|
|
|
}
|
|
// rect.addEventListener('ondblclick', function() {
|
|
// // 这里写双击事件的处理逻辑
|
|
// console.log('节点1被双击了');
|
|
// });
|
|
|
|
}
|
|
// var rect = node.querySelector('polygon')
|
|
// if (rect) {
|
|
// rect.style.fill='#00ff55'; // 浅蓝色背景
|
|
// }
|
|
// node.style.fill='#B74153';
|
|
// node.style.background = '#B74153'
|
|
|
|
// debugger;
|
|
// mermaid.render('graphDiv', diagramDefinition2).then(({svg}) => {
|
|
// element.innerHTML = svg;
|
|
// });
|
|
// var newStyle = '';
|
|
// for(var i = 0; i < redata.length; i++)
|
|
// {
|
|
|
|
// // newStyle = 'style B fill:#f96,stroke:#333,stroke-width:4px;';
|
|
|
|
// }
|
|
// var nenestyle = 'style step0 fill:#cecece,stroke:#00ff55,stroke-width:4px;';
|
|
// // svgContent = svgContent.replace(/style step0.*?;/, nenestyle);
|
|
// svgContent = svgContent.replace('</svg>', `${nenestyle}</svg>`);
|
|
// // 更新SVG内容以反映新样式
|
|
// element.innerHTML = svgContent;
|
|
});
|
|
}
|
|
t = setTimeout(time, 1 * 1000); //开始运行
|
|
})
|
|
</script>
|
|
<script type="text/javascript" src="~/lib//mermaid/mermaid.js"></script>
|
|
<div style ="width:100%;height:100%;">
|
|
<div class="layuimini-container" style="width:100%;height:100%; ">
|
|
|
|
<div class="text-and-button">
|
|
<span 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="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>
|