1、陕西建龙打包版本
2、drawio导入SFC 3、多系统并存修改
This commit is contained in:
dell
@ -0,0 +1,876 @@
|
||||
@{
|
||||
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>
|
||||
Reference in New Issue
Block a user