@{
    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>