<%--
  Created by IntelliJ IDEA.
  User: 徐扬
  Date: 2020/7/1
  Time: 14:25
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html >
<html>
<head>
    <title>流程图</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<style>
    body{padding:0; margin:0;}

    <%-- 流程图样式 --%>
    #yujing_liuchengtu {
        position: relative;
    }

    #gaojing_liuchengtu {
        position: relative;
    }

    .rectangle-size {
        position: absolute;
        text-align: center;
        line-height: 40px;
        height: 40px;
        width: 150px;
        border: 2px solid deepskyblue;
    }

    .circle-size {
        position: absolute;
        text-align: center;
        line-height: 40px;
        height: 40px;
        width: 110px;
        border: 2px solid deepskyblue;
        border-radius: 40px;
    }

    .square-size {
        width: 210px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        transform:skew(-30deg);
        -webkit-transform: skew(-30deg);
        -moz-transform: skew(-30deg);
        -o-transform:skew(-30deg);
        -ms-transform:skew(-30deg);
        border: 2px solid deepskyblue;
    }


    .judgeMonitor {
        display: inline-block;
        transform:skew(30deg);
        -webkit-transform: skew(30deg);
        -moz-transform: skew(30deg);
        -o-transform:skew(30deg);
        -ms-transform:skew(30deg);
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


    .cst-label {
        background-color: white;
        padding: 5px;
    }

    .dim-color {
        color: #a2a1a1;
        border-color: #a2a1a1;
    }

</style>
<body>
<div style="width: 100%;height: 100%" id="liuchengtu">
    <%-- 预警模块 --%>
    <div id="yujing" style="border-top: 2px solid deepskyblue;margin-left: 20px;margin-top: 15px">
        <div id="yujing_title" style="height: 10%;background-color: #eaf0ff;border: 2px solid deepskyblue;border-top: 0;line-height: 50px;font-size: 30px">国网冀北电力有限公司电能质量监督预警单流程</div>
        <div id="yujing_body" style="height: 90%">
            <div id="yujing_bumen" style="float:left;height:100%;width: 10%;text-align: center;line-height: 60px">
                <div style="height: 32%;width: 100%;border: 2px solid deepskyblue;border-top: 0;background-color: #eaf0ff;font-size: 20px;line-height: 150px">冀北电科院</div>
                <div style="height: 32%;width: 100%;border: 2px solid deepskyblue;border-top: 0;background-color: #eaf0ff;font-size: 20px;line-height: 150px">冀北检修公司</div>
                <div style="height: 32%;width: 100%;border: 2px solid deepskyblue;border-top: 0;background-color: #eaf0ff;font-size: 20px;line-height: 150px">地市供电公司</div>
            </div>
            <div id="yujing_liuchengtu" style="float:left;height:100%;width: 90%">
                <div style="height: 32%;width: 100%;border-right: 2px solid deepskyblue;border-bottom: 2px solid deepskyblue">
                    <div id="alert_occur" class="circle-size" style="margin-left: 1%;margin-top: 4%;float: left">数据监测超标</div>
                    <div id="alert_storage" class="square-size" style="margin-left: 15%;float: left;margin-top: 4%;float: left;"><span class="judgeMonitor">是否为220千伏及以上监测点</span></div>
                    <div id="alert_over" class="circle-size" style="margin-left: 90%;margin-top: 4%">结束</div>
                </div>
                <div style="height: 32%;width: 100%;border-right: 2px solid deepskyblue;border-bottom: 2px solid deepskyblue">
                    <div id="alert_sync" class="square-size" style="margin-top:4%;margin-left: 35%;float: left"><span class="judgeMonitor">是否满足预警单生成策略</span></div>
                    <div id="alert_ass_analysis" class="rectangle-size" style="margin-top:4%;margin-left: 58%;">下发技术监督预警单</div>
                    <div id="alert_reason_analysis" class="rectangle-size" style="margin-top:4%;margin-left: 76%;">上传技术监督预警单</div>
                </div>
                <div style="height: 32%;width: 100%;border-bottom: 2px solid deepskyblue;border-right: 2px solid deepskyblue">
                    <div id="alert_celue" class="square-size" style="margin-top:4%;margin-left:2%;float: left;"><span class="judgeMonitor">是否满足预警单生成策略</span></div>
                    <div id="alert_down_analysis" class="rectangle-size" style="margin-left: 30%;margin-top: 4%">下发技术监督预警单</div>
                    <div id="alert_up_analysis" class="rectangle-size" style="margin-left: 60%;margin-top: 4%">上传技术监督预警单</div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="${ctx}/js/plugin/jquery.min.js"></script>
<script src="${ctx}/js/plugin/jquery-ui/jquery-ui.js"></script>
<script src="${ctx}/js/plugin/jquery/jquery.jsplumb.js"></script>
<script src="${ctx}/js/plugin/layui/layui.all.js"></script>
<script src="${ctx}/jspJS/utils/judgeAjaxStatus.js"></script>
<script src="${ctx}/jspJS/utils/loading.js"></script>
<script>

    let nowFlow = [];
    //获取后台传来的数据
    let flowChartSupIndex = "${sessionScope.flowChartSupIndex}";
    let flowChartTypeString = "${sessionScope.flowChartType}";

    var flowChartProgress = 0;

    var height = $(document).height();
    var width = $(document).width();
    $("#yujing").css("height",height-4);
    $("#yujing").css("width",width-44);
    $("#yujing_liuchengtu").css("width",$("#yujing_liuchengtu").width()-2);

    $(document).ready(function () {
        getProgress();
        $.ajax({
            type: "post", // 以post方式发起请求
            url: "/pqs9300/flowChart/getPowerLever",
            data: { // 提交数据
                flowChartSupIndex: flowChartSupIndex,
            },
            success(data) {
                var arr = data.split("k");
                var powerLeverString = arr[0];
                var flowChartType = Number(flowChartTypeString);
                var powerLever = Number(powerLeverString);
                liuchengtu(flowChartType,powerLever,flowChartProgress);
                showFlowChart(flowChartType,powerLever,flowChartProgress);
                clickStyle(powerLever,flowChartProgress);
            }
        });
    });

    function refresh() {
        getProgress();
        $.ajax({
            type: "post", // 以post方式发起请求
            url: "/pqs9300/flowChart/getPowerLever",
            data: { // 提交数据
                flowChartSupIndex: flowChartSupIndex,
            },
            success(data) {
                var arr = data.split("k");
                var powerLeverString = arr[0];
                var flowChartType = Number(flowChartTypeString);
                var powerLever = Number(powerLeverString);
                liuchengtu(flowChartType,powerLever,flowChartProgress);
                showFlowChart(flowChartType,powerLever,flowChartProgress);
                clickStyle(powerLever,flowChartProgress);
            }
        });
    }

    function getProgress() {
        $.ajax({
            type: 'post',
            url: '/pqs9300/flowChart/getProgress',
            async:false,
            data: {
                supIndex: flowChartSupIndex,
            },
            success(data) {
                flowChartProgress = data;
            }
        })
    }


    <%-- global jsPlumb --%>
    function makeStyle(flag) {
        let config = {};

        config.connectorPaintStyle = {
            lineWidth: 2,
            strokeStyle: flag == 'dim' ? '#a2a1a1' : 'deepskyblue',
            joinstyle: 'round',
            outlineColor: '',
            outlineWidth: ''
        };

        return {
            // 端点形状
            endpoint: ['Dot', {
                radius: 4,
                fill: flag == 'dim' ? '#a2a1a1' : 'deepskyblue'
            }],
            // 连接线的样式
            connectorStyle: config.connectorPaintStyle,
            connectorHoverStyle: config.connectorHoverStyle,
            // 端点的样式
            paintStyle: {
                fillStyle: flag == 'dim' ? '#a2a1a1' : 'deepskyblue',
                radius: 3
            },
            isSource: true,
            connector: ['Flowchart', {
                gap: 1,
                cornerRadius: 10,
                alwaysRespectStubs: false,
            }],
            isTarget: true,
            // 设置连接点最多可以链接几条线
            maxConnections: -1,
            connectorOverlays: [
                ['Arrow', {
                    width: 8,
                    length: 10,
                    location: 1
                }]
            ]
        };
    }

    let config = {
        baseStyle: makeStyle('base'),
        dimStyle: makeStyle('dim')
    };
    let connections = {};

    //判断当前流程需要参数
    //1.预警单/告警单(flowChartType) 2.电压等级(根据索引去查询电压等级) 3.当前流程(flowChartProgress)
    function liuchengtu(flowChartType,powerLever,flowChartProgress){
        jsPlumb.ready(function () {
            //需要判断的模块
            let flow = ["occur_storage","storage_sync","storage_celue","celue_over","sync_over","sync_ass_analysis","ass_analysis_reason_analysis","celue_down_analysis_l","down_analysis_up_analysis"];
            flow.map(item => nowFlow[item] = {});
            /*预警单连接线设置*/
            let pointStyle = config.baseStyle;
            let dimStyle = config.dimStyle;

            /*预警单连接线设置*/
            jsPlumb.setContainer('liuchengtu');
            if (powerLever >=220){
                if (flowChartProgress === 0){
                    jsPlumb.addEndpoint('alert_occur', {uuid: 'alert_occur_r', anchor: 'Right'}, pointStyle);
                    jsPlumb.addEndpoint('alert_sync', {uuid: 'alert_sync_t', anchor: 'Top'}, pointStyle);
                    jsPlumb.addEndpoint('alert_sync', {uuid: 'alert_sync_r', anchor: 'Right'}, dimStyle);
                    jsPlumb.addEndpoint('alert_sync', {uuid: 'alert_sync_b', anchor: 'Bottom'}, dimStyle);
                    jsPlumb.addEndpoint('alert_storage', {uuid: 'alert_storage_l', anchor: 'Left'}, pointStyle);
                    jsPlumb.addEndpoint('alert_storage', {uuid: 'alert_storage_r', anchor: 'Right'}, pointStyle);
                    jsPlumb.addEndpoint('alert_storage', {uuid: 'alert_storage_b', anchor: 'Bottom'}, dimStyle);
                    jsPlumb.addEndpoint('alert_ass_analysis', {uuid: 'alert_ass_analysis_l', anchor: 'Left'}, dimStyle);
                    jsPlumb.addEndpoint('alert_ass_analysis', {uuid: 'alert_ass_analysis_r', anchor: 'Right'}, dimStyle);
                    jsPlumb.addEndpoint('alert_reason_analysis', {uuid: 'alert_reason_analysis_l', anchor: 'Left'}, dimStyle);
                    jsPlumb.addEndpoint('alert_reason_analysis', {uuid: 'alert_reason_analysis_r', anchor: 'Right'}, dimStyle);
                    jsPlumb.addEndpoint('alert_over', {uuid: 'alert_over_b', anchor: 'Bottom'}, dimStyle);
                    jsPlumb.addEndpoint('alert_celue', {uuid: 'alert_celue_t', anchor: 'Top'}, dimStyle);
                    jsPlumb.addEndpoint('alert_celue', {uuid: 'alert_celue_r', anchor: 'Right'}, dimStyle);
                    jsPlumb.addEndpoint('alert_celue', {uuid: 'alert_celue_b', anchor: 'Bottom'}, dimStyle);
                    jsPlumb.addEndpoint('alert_down_analysis', {uuid: 'alert_down_analysis_l', anchor: 'Left'}, dimStyle);
                    jsPlumb.addEndpoint('alert_down_analysis', {uuid: 'alert_down_analysis_r', anchor: 'Right'}, dimStyle);
                    jsPlumb.addEndpoint('alert_up_analysis', {uuid: 'alert_up_analysis_l', anchor: 'Left'}, dimStyle);
                    jsPlumb.addEndpoint('alert_up_analysis', {uuid: 'alert_up_analysis_r', anchor: 'Right'}, dimStyle);
                } else if (flowChartProgress === 1){
                    jsPlumb.addEndpoint('alert_occur', {uuid: 'alert_occur_r', anchor: 'Right'}, pointStyle);
                    jsPlumb.addEndpoint('alert_sync', {uuid: 'alert_sync_t', anchor: 'Top'}, pointStyle);
                    jsPlumb.addEndpoint('alert_sync', {uuid: 'alert_sync_r', anchor: 'Right'}, pointStyle);
                    jsPlumb.addEndpoint('alert_sync', {uuid: 'alert_sync_b', anchor: 'Bottom'}, dimStyle);
                    jsPlumb.addEndpoint('alert_storage', {uuid: 'alert_storage_l', anchor: 'Left'}, pointStyle);
                    jsPlumb.addEndpoint('alert_storage', {uuid: 'alert_storage_r', anchor: 'Right'}, pointStyle);
                    jsPlumb.addEndpoint('alert_storage', {uuid: 'alert_storage_b', anchor: 'Bottom'}, dimStyle);
                    jsPlumb.addEndpoint('alert_ass_analysis', {uuid: 'alert_ass_analysis_l', anchor: 'Left'}, pointStyle);
                    jsPlumb.addEndpoint('alert_ass_analysis', {uuid: 'alert_ass_analysis_r', anchor: 'Right'}, dimStyle);
                    jsPlumb.addEndpoint('alert_reason_analysis', {uuid: 'alert_reason_analysis_l', anchor: 'Left'}, dimStyle);
                    jsPlumb.addEndpoint('alert_reason_analysis', {uuid: 'alert_reason_analysis_r', anchor: 'Right'}, dimStyle);
                    jsPlumb.addEndpoint('alert_over', {uuid: 'alert_over_b', anchor: 'Bottom'}, dimStyle);
                    jsPlumb.addEndpoint('alert_celue', {uuid: 'alert_celue_t', anchor: 'Top'}, dimStyle);
                    jsPlumb.addEndpoint('alert_celue', {uuid: 'alert_celue_r', anchor: 'Right'}, dimStyle);
                    jsPlumb.addEndpoint('alert_celue', {uuid: 'alert_celue_b', anchor: 'Bottom'}, dimStyle);
                    jsPlumb.addEndpoint('alert_down_analysis', {uuid: 'alert_down_analysis_l', anchor: 'Left'}, dimStyle);
                    jsPlumb.addEndpoint('alert_down_analysis', {uuid: 'alert_down_analysis_r', anchor: 'Right'}, dimStyle);
                    jsPlumb.addEndpoint('alert_up_analysis', {uuid: 'alert_up_analysis_l', anchor: 'Left'}, dimStyle);
                    jsPlumb.addEndpoint('alert_up_analysis', {uuid: 'alert_up_analysis_r', anchor: 'Right'}, dimStyle);
                } else if (flowChartProgress === 2){
                    jsPlumb.addEndpoint('alert_occur', {uuid: 'alert_occur_r', anchor: 'Right'}, pointStyle);
                    jsPlumb.addEndpoint('alert_sync', {uuid: 'alert_sync_t', anchor: 'Top'}, pointStyle);
                    jsPlumb.addEndpoint('alert_sync', {uuid: 'alert_sync_r', anchor: 'Right'}, pointStyle);
                    jsPlumb.addEndpoint('alert_sync', {uuid: 'alert_sync_b', anchor: 'Bottom'}, dimStyle);
                    jsPlumb.addEndpoint('alert_storage', {uuid: 'alert_storage_l', anchor: 'Left'}, pointStyle);
                    jsPlumb.addEndpoint('alert_storage', {uuid: 'alert_storage_r', anchor: 'Right'}, pointStyle);
                    jsPlumb.addEndpoint('alert_storage', {uuid: 'alert_storage_b', anchor: 'Bottom'}, dimStyle);
                    jsPlumb.addEndpoint('alert_ass_analysis', {uuid: 'alert_ass_analysis_l', anchor: 'Left'}, pointStyle);
                    jsPlumb.addEndpoint('alert_ass_analysis', {uuid: 'alert_ass_analysis_r', anchor: 'Right'}, pointStyle);
                    jsPlumb.addEndpoint('alert_reason_analysis', {uuid: 'alert_reason_analysis_l', anchor: 'Left'}, pointStyle);
                    jsPlumb.addEndpoint('alert_reason_analysis', {uuid: 'alert_reason_analysis_r', anchor: 'Right'}, dimStyle);
                    jsPlumb.addEndpoint('alert_over', {uuid: 'alert_over_b', anchor: 'Bottom'}, dimStyle);
                    jsPlumb.addEndpoint('alert_celue', {uuid: 'alert_celue_t', anchor: 'Top'}, dimStyle);
                    jsPlumb.addEndpoint('alert_celue', {uuid: 'alert_celue_r', anchor: 'Right'}, dimStyle);
                    jsPlumb.addEndpoint('alert_celue', {uuid: 'alert_celue_b', anchor: 'Bottom'}, dimStyle);
                    jsPlumb.addEndpoint('alert_down_analysis', {uuid: 'alert_down_analysis_l', anchor: 'Left'}, dimStyle);
                    jsPlumb.addEndpoint('alert_down_analysis', {uuid: 'alert_down_analysis_r', anchor: 'Right'}, dimStyle);
                    jsPlumb.addEndpoint('alert_up_analysis', {uuid: 'alert_up_analysis_l', anchor: 'Left'}, dimStyle);
                    jsPlumb.addEndpoint('alert_up_analysis', {uuid: 'alert_up_analysis_r', anchor: 'Right'}, dimStyle);
                } else if (flowChartProgress === 6){
                    jsPlumb.addEndpoint('alert_occur', {uuid: 'alert_occur_r', anchor: 'Right'}, pointStyle);
                    jsPlumb.addEndpoint('alert_sync', {uuid: 'alert_sync_t', anchor: 'Top'}, pointStyle);
                    jsPlumb.addEndpoint('alert_sync', {uuid: 'alert_sync_r', anchor: 'Right'}, pointStyle);
                    jsPlumb.addEndpoint('alert_sync', {uuid: 'alert_sync_b', anchor: 'Bottom'}, dimStyle);
                    jsPlumb.addEndpoint('alert_storage', {uuid: 'alert_storage_l', anchor: 'Left'}, pointStyle);
                    jsPlumb.addEndpoint('alert_storage', {uuid: 'alert_storage_r', anchor: 'Right'}, pointStyle);
                    jsPlumb.addEndpoint('alert_storage', {uuid: 'alert_storage_b', anchor: 'Bottom'}, dimStyle);
                    jsPlumb.addEndpoint('alert_ass_analysis', {uuid: 'alert_ass_analysis_l', anchor: 'Left'}, pointStyle);
                    jsPlumb.addEndpoint('alert_ass_analysis', {uuid: 'alert_ass_analysis_r', anchor: 'Right'}, pointStyle);
                    jsPlumb.addEndpoint('alert_reason_analysis', {uuid: 'alert_reason_analysis_l', anchor: 'Left'}, pointStyle);
                    jsPlumb.addEndpoint('alert_reason_analysis', {uuid: 'alert_reason_analysis_r', anchor: 'Right'}, pointStyle);
                    jsPlumb.addEndpoint('alert_over', {uuid: 'alert_over_b', anchor: 'Bottom'}, pointStyle);
                    jsPlumb.addEndpoint('alert_celue', {uuid: 'alert_celue_t', anchor: 'Top'}, dimStyle);
                    jsPlumb.addEndpoint('alert_celue', {uuid: 'alert_celue_r', anchor: 'Right'}, dimStyle);
                    jsPlumb.addEndpoint('alert_celue', {uuid: 'alert_celue_b', anchor: 'Bottom'}, dimStyle);
                    jsPlumb.addEndpoint('alert_down_analysis', {uuid: 'alert_down_analysis_l', anchor: 'Left'}, dimStyle);
                    jsPlumb.addEndpoint('alert_down_analysis', {uuid: 'alert_down_analysis_r', anchor: 'Right'}, dimStyle);
                    jsPlumb.addEndpoint('alert_up_analysis', {uuid: 'alert_up_analysis_l', anchor: 'Left'}, dimStyle);
                    jsPlumb.addEndpoint('alert_up_analysis', {uuid: 'alert_up_analysis_r', anchor: 'Right'}, dimStyle);
                }
            } else {
                if (flowChartProgress === 0){
                    jsPlumb.addEndpoint('alert_occur', {uuid: 'alert_occur_r', anchor: 'Right'}, pointStyle);
                    jsPlumb.addEndpoint('alert_sync', {uuid: 'alert_sync_t', anchor: 'Top'}, dimStyle);
                    jsPlumb.addEndpoint('alert_sync', {uuid: 'alert_sync_r', anchor: 'Right'}, dimStyle);
                    jsPlumb.addEndpoint('alert_sync', {uuid: 'alert_sync_b', anchor: 'Bottom'}, dimStyle);
                    jsPlumb.addEndpoint('alert_storage', {uuid: 'alert_storage_l', anchor: 'Left'}, pointStyle);
                    jsPlumb.addEndpoint('alert_storage', {uuid: 'alert_storage_r', anchor: 'Right'}, dimStyle);
                    jsPlumb.addEndpoint('alert_storage', {uuid: 'alert_storage_b', anchor: 'Bottom'}, pointStyle);
                    jsPlumb.addEndpoint('alert_ass_analysis', {uuid: 'alert_ass_analysis_l', anchor: 'Left'}, dimStyle);
                    jsPlumb.addEndpoint('alert_ass_analysis', {uuid: 'alert_ass_analysis_r', anchor: 'Right'}, dimStyle);
                    jsPlumb.addEndpoint('alert_reason_analysis', {uuid: 'alert_reason_analysis_l', anchor: 'Left'}, dimStyle);
                    jsPlumb.addEndpoint('alert_reason_analysis', {uuid: 'alert_reason_analysis_r', anchor: 'Right'}, dimStyle);
                    jsPlumb.addEndpoint('alert_over', {uuid: 'alert_over_b', anchor: 'Bottom'}, dimStyle);
                    jsPlumb.addEndpoint('alert_celue', {uuid: 'alert_celue_t', anchor: 'Top'}, pointStyle);
                    jsPlumb.addEndpoint('alert_celue', {uuid: 'alert_celue_r', anchor: 'Right'}, dimStyle);
                    jsPlumb.addEndpoint('alert_celue', {uuid: 'alert_celue_b', anchor: 'Bottom'}, dimStyle);
                    jsPlumb.addEndpoint('alert_down_analysis', {uuid: 'alert_down_analysis_l', anchor: 'Left'}, dimStyle);
                    jsPlumb.addEndpoint('alert_down_analysis', {uuid: 'alert_down_analysis_r', anchor: 'Right'}, dimStyle);
                    jsPlumb.addEndpoint('alert_up_analysis', {uuid: 'alert_up_analysis_l', anchor: 'Left'}, dimStyle);
                    jsPlumb.addEndpoint('alert_up_analysis', {uuid: 'alert_up_analysis_r', anchor: 'Right'}, dimStyle);
                } else if (flowChartProgress === 1){
                    jsPlumb.addEndpoint('alert_occur', {uuid: 'alert_occur_r', anchor: 'Right'}, pointStyle);
                    jsPlumb.addEndpoint('alert_sync', {uuid: 'alert_sync_t', anchor: 'Top'}, dimStyle);
                    jsPlumb.addEndpoint('alert_sync', {uuid: 'alert_sync_r', anchor: 'Right'}, dimStyle);
                    jsPlumb.addEndpoint('alert_sync', {uuid: 'alert_sync_b', anchor: 'Bottom'}, dimStyle);
                    jsPlumb.addEndpoint('alert_storage', {uuid: 'alert_storage_l', anchor: 'Left'}, pointStyle);
                    jsPlumb.addEndpoint('alert_storage', {uuid: 'alert_storage_r', anchor: 'Right'}, dimStyle);
                    jsPlumb.addEndpoint('alert_storage', {uuid: 'alert_storage_b', anchor: 'Bottom'}, pointStyle);
                    jsPlumb.addEndpoint('alert_ass_analysis', {uuid: 'alert_ass_analysis_l', anchor: 'Left'}, dimStyle);
                    jsPlumb.addEndpoint('alert_ass_analysis', {uuid: 'alert_ass_analysis_r', anchor: 'Right'}, dimStyle);
                    jsPlumb.addEndpoint('alert_reason_analysis', {uuid: 'alert_reason_analysis_l', anchor: 'Left'}, dimStyle);
                    jsPlumb.addEndpoint('alert_reason_analysis', {uuid: 'alert_reason_analysis_r', anchor: 'Right'}, dimStyle);
                    jsPlumb.addEndpoint('alert_over', {uuid: 'alert_over_b', anchor: 'Bottom'}, dimStyle);
                    jsPlumb.addEndpoint('alert_celue', {uuid: 'alert_celue_t', anchor: 'Top'}, pointStyle);
                    jsPlumb.addEndpoint('alert_celue', {uuid: 'alert_celue_r', anchor: 'Right'}, pointStyle);
                    jsPlumb.addEndpoint('alert_celue', {uuid: 'alert_celue_b', anchor: 'Bottom'}, dimStyle);
                    jsPlumb.addEndpoint('alert_down_analysis', {uuid: 'alert_down_analysis_l', anchor: 'Left'}, pointStyle);
                    jsPlumb.addEndpoint('alert_down_analysis', {uuid: 'alert_down_analysis_r', anchor: 'Right'}, dimStyle);
                    jsPlumb.addEndpoint('alert_up_analysis', {uuid: 'alert_up_analysis_l', anchor: 'Left'}, dimStyle);
                    jsPlumb.addEndpoint('alert_up_analysis', {uuid: 'alert_up_analysis_r', anchor: 'Right'}, dimStyle);
                } else if (flowChartProgress === 2){
                    jsPlumb.addEndpoint('alert_occur', {uuid: 'alert_occur_r', anchor: 'Right'}, pointStyle);
                    jsPlumb.addEndpoint('alert_sync', {uuid: 'alert_sync_t', anchor: 'Top'}, dimStyle);
                    jsPlumb.addEndpoint('alert_sync', {uuid: 'alert_sync_r', anchor: 'Right'}, dimStyle);
                    jsPlumb.addEndpoint('alert_sync', {uuid: 'alert_sync_b', anchor: 'Bottom'}, dimStyle);
                    jsPlumb.addEndpoint('alert_storage', {uuid: 'alert_storage_l', anchor: 'Left'}, pointStyle);
                    jsPlumb.addEndpoint('alert_storage', {uuid: 'alert_storage_r', anchor: 'Right'}, dimStyle);
                    jsPlumb.addEndpoint('alert_storage', {uuid: 'alert_storage_b', anchor: 'Bottom'}, pointStyle);
                    jsPlumb.addEndpoint('alert_ass_analysis', {uuid: 'alert_ass_analysis_l', anchor: 'Left'}, dimStyle);
                    jsPlumb.addEndpoint('alert_ass_analysis', {uuid: 'alert_ass_analysis_r', anchor: 'Right'}, dimStyle);
                    jsPlumb.addEndpoint('alert_reason_analysis', {uuid: 'alert_reason_analysis_l', anchor: 'Left'}, dimStyle);
                    jsPlumb.addEndpoint('alert_reason_analysis', {uuid: 'alert_reason_analysis_r', anchor: 'Right'}, dimStyle);
                    jsPlumb.addEndpoint('alert_over', {uuid: 'alert_over_b', anchor: 'Bottom'}, dimStyle);
                    jsPlumb.addEndpoint('alert_celue', {uuid: 'alert_celue_t', anchor: 'Top'}, pointStyle);
                    jsPlumb.addEndpoint('alert_celue', {uuid: 'alert_celue_r', anchor: 'Right'}, pointStyle);
                    jsPlumb.addEndpoint('alert_celue', {uuid: 'alert_celue_b', anchor: 'Bottom'}, dimStyle);
                    jsPlumb.addEndpoint('alert_down_analysis', {uuid: 'alert_down_analysis_l', anchor: 'Left'}, pointStyle);
                    jsPlumb.addEndpoint('alert_down_analysis', {uuid: 'alert_down_analysis_r', anchor: 'Right'}, pointStyle);
                    jsPlumb.addEndpoint('alert_up_analysis', {uuid: 'alert_up_analysis_l', anchor: 'Left'}, pointStyle);
                    jsPlumb.addEndpoint('alert_up_analysis', {uuid: 'alert_up_analysis_r', anchor: 'Right'}, dimStyle);
                } else if (flowChartProgress === 6){
                    jsPlumb.addEndpoint('alert_occur', {uuid: 'alert_occur_r', anchor: 'Right'}, pointStyle);
                    jsPlumb.addEndpoint('alert_sync', {uuid: 'alert_sync_t', anchor: 'Top'}, dimStyle);
                    jsPlumb.addEndpoint('alert_sync', {uuid: 'alert_sync_r', anchor: 'Right'}, dimStyle);
                    jsPlumb.addEndpoint('alert_sync', {uuid: 'alert_sync_b', anchor: 'Bottom'}, dimStyle);
                    jsPlumb.addEndpoint('alert_storage', {uuid: 'alert_storage_l', anchor: 'Left'}, pointStyle);
                    jsPlumb.addEndpoint('alert_storage', {uuid: 'alert_storage_r', anchor: 'Right'}, dimStyle);
                    jsPlumb.addEndpoint('alert_storage', {uuid: 'alert_storage_b', anchor: 'Bottom'}, pointStyle);
                    jsPlumb.addEndpoint('alert_ass_analysis', {uuid: 'alert_ass_analysis_l', anchor: 'Left'}, dimStyle);
                    jsPlumb.addEndpoint('alert_ass_analysis', {uuid: 'alert_ass_analysis_r', anchor: 'Right'}, dimStyle);
                    jsPlumb.addEndpoint('alert_reason_analysis', {uuid: 'alert_reason_analysis_l', anchor: 'Left'}, dimStyle);
                    jsPlumb.addEndpoint('alert_reason_analysis', {uuid: 'alert_reason_analysis_r', anchor: 'Right'}, dimStyle);
                    jsPlumb.addEndpoint('alert_over', {uuid: 'alert_over_b', anchor: 'Bottom'}, pointStyle);
                    jsPlumb.addEndpoint('alert_celue', {uuid: 'alert_celue_t', anchor: 'Top'}, pointStyle);
                    jsPlumb.addEndpoint('alert_celue', {uuid: 'alert_celue_r', anchor: 'Right'}, pointStyle);
                    jsPlumb.addEndpoint('alert_celue', {uuid: 'alert_celue_b', anchor: 'Bottom'}, dimStyle);
                    jsPlumb.addEndpoint('alert_down_analysis', {uuid: 'alert_down_analysis_l', anchor: 'Left'}, pointStyle);
                    jsPlumb.addEndpoint('alert_down_analysis', {uuid: 'alert_down_analysis_r', anchor: 'Right'}, pointStyle);
                    jsPlumb.addEndpoint('alert_up_analysis', {uuid: 'alert_up_analysis_l', anchor: 'Left'}, pointStyle);
                    jsPlumb.addEndpoint('alert_up_analysis', {uuid: 'alert_up_analysis_r', anchor: 'Right'}, pointStyle);
                }
            }

            //预警单连线设置
            let occur_storage = jsPlumb.connect({uuids: ['alert_occur_r', 'alert_storage_l']});
            connections['occur_storage'] = occur_storage;

            let storage_sync = jsPlumb.connect({uuids: ['alert_storage_r', 'alert_sync_t']});
            storage_sync.addOverlay(['Custom', {
                create: function (component) {
                    return $('<span style="background-color: white; padding: 1px">是</span>');
                },
                location: 0.5
            }]);
            connections['storage_sync'] = storage_sync;

            let  storage_celue =  jsPlumb.connect({uuids: ['alert_storage_b', 'alert_celue_t']});
            storage_celue.addOverlay(['Custom', {
                create: function (component) {
                    return $('<span style="background-color: white; padding: 1px;">否</span>');
                },
                location: 0.5
            }]);
            connections['storage_celue'] = storage_celue;

            let celue_over = jsPlumb.connect({uuids: ['alert_celue_b', 'alert_over_b']});
            celue_over.addOverlay(['Custom', {
                create: function (component) {
                    return $('<span style="background-color: white; padding: 1px;">否</span>');
                },
                location: 0.5
            }]);

            let sync_over = jsPlumb.connect({uuids: ['alert_sync_b', 'alert_over_b']});
            sync_over.addOverlay(['Custom', {
                create: function (component) {
                    return $('<span style="background-color: white; padding: 1px;">否</span>');
                },
                location: 0.4
            }]);
            connections['sync_over'] = sync_over;

            let sync_ass_analysis = jsPlumb.connect({uuids: ['alert_sync_r', 'alert_ass_analysis_l']});
            sync_ass_analysis.addOverlay(['Custom', {
                create: function (component) {
                    return $('<span style="background-color: white; padding: 1px;">是</span>');
                },
                location: 0.5
            }]);
            connections['sync_ass_analysis'] = sync_ass_analysis;

            let ass_analysis_reason_analysis = jsPlumb.connect({uuids: ['alert_ass_analysis_r', 'alert_reason_analysis_l']});
            connections['ass_analysis_reason_analysis'] = ass_analysis_reason_analysis;

            let celue_down_analysis_l = jsPlumb.connect({uuids: ['alert_celue_r', 'alert_down_analysis_l']});
            celue_down_analysis_l.addOverlay(['Custom', {
                create: function (component) {
                    return $('<span style="background-color: white; padding: 1px;">是</span>');
                },
                location: 0.5
            }]);
            connections['celue_down_analysis_l'] = celue_down_analysis_l;

            let down_analysis_up_analysis = jsPlumb.connect({uuids: ['alert_down_analysis_r', 'alert_up_analysis_l']});
            connections['down_analysis_up_analysis'] = down_analysis_up_analysis;

            if (powerLever >=220 && flowChartProgress === 6){
                jsPlumb.connect({uuids: ['alert_up_analysis_r', 'alert_over_b']});
                jsPlumb.connect({uuids: ['alert_reason_analysis_r', 'alert_over_b']});
            } else if (powerLever <220 && flowChartProgress === 6){
                jsPlumb.connect({uuids: ['alert_reason_analysis_r', 'alert_over_b']});
                jsPlumb.connect({uuids: ['alert_up_analysis_r', 'alert_over_b']});
            } else {
                jsPlumb.connect({uuids: ['alert_reason_analysis_r', 'alert_over_b']});
                jsPlumb.connect({uuids: ['alert_up_analysis_r', 'alert_over_b']});
            }
        });
    }

    function showFlowChart(flowChartType,powerLever,flowChartProgress) {
        var divArr = [];
        //1.判断电压等级 >=220kv
        if(powerLever >=220){
            //2.判断当前进行的流程 flowChartProgress
            if (flowChartProgress === 0) {
                //循环给div添加背景色
                divArr = ["alert_occur","alert_storage"];
                for ( var i = 0; i <divArr.length; i++){
                    document.getElementById(divArr[i]).style.backgroundColor = '#006565';
                }
                for (let con in nowFlow) {
                    if ("occur_storage" === con) {
                        $("#alert_celue,#alert_down_analysis,#alert_up_analysis,#alert_ass_analysis,#alert_reason_analysis,#alert_over").addClass('dim-color');
                        connections[con].addOverlay(['Custom', {
                            create: function (component) {
                                return $(`<p style="color: white; background-color: lawngreen; padding: 2px; border-radius: 5px; margin-left: 200px;margin-top: 20px; font-size: x-small;">已完成</p>`);
                            },
                            location: 1,
                            id: con
                        }]);
                    };
                    if ("storage_sync" === con) {
                        $("#alert_celue,#alert_down_analysis,#alert_up_analysis,#alert_reason_analysis,#alert_over").addClass('dim-color');
                        connections[con].addOverlay(['Custom', {
                            create: function (component) {
                                return $(`<p style="color: white; background-color: orange; padding: 2px; border-radius: 5px; margin-left: 90px;margin-top: 45px; font-size: x-small;">判断中</p>`);
                            },
                            location: 1,
                            id: con
                        }]);
                    };
                }
            } else if (flowChartProgress === 1){
                divArr = ["alert_occur","alert_storage","alert_sync"];
                for ( var i = 0; i <divArr.length; i++){
                    document.getElementById(divArr[i]).style.backgroundColor = '#006565';
                }
                for (let con in nowFlow) {
                    if ("occur_storage" === con) {
                        $("#alert_celue,#alert_down_analysis,#alert_up_analysis,#alert_reason_analysis,#alert_over").addClass('dim-color');
                        connections[con].addOverlay(['Custom', {
                            create: function (component) {
                                return $(`<p style="color: white; background-color: lawngreen; padding: 2px; border-radius: 5px; margin-left: 200px;margin-top: 20px; font-size: x-small;">已完成</p>`);
                            },
                            location: 1,
                            id: con
                        }]);
                    };
                    if ("storage_sync" === con) {
                        $("#alert_celue,#alert_down_analysis,#alert_up_analysis,#alert_reason_analysis,#alert_over").addClass('dim-color');
                        connections[con].addOverlay(['Custom', {
                            create: function (component) {
                                return $(`<p style="color: white; background-color: lawngreen; padding: 2px; border-radius: 5px; margin-left: 90px;margin-top: 45px; font-size: x-small;">已完成</p>`);
                            },
                            location: 1,
                            id: con
                        }]);
                    };
                    if ("sync_ass_analysis" === con) {
                        $("#alert_celue,#alert_down_analysis,#alert_up_analysis,#alert_reason_analysis,#alert_over").addClass('dim-color');
                        connections[con].addOverlay(['Custom', {
                            create: function (component) {
                                return $(`<p style="color: white; background-color: red; padding: 2px; border-radius: 5px; margin-left: 150px;margin-top: 20px; font-size: x-small;">进行中</p>`);
                            },
                            location: 1,
                            id: con
                        }]);
                    };
                }
            } else if (flowChartProgress === 2){
                divArr = ["alert_occur","alert_storage","alert_sync","alert_ass_analysis"];
                for ( var i = 0; i <divArr.length; i++){
                    document.getElementById(divArr[i]).style.backgroundColor = '#006565';
                }
                $("#alert_reason_analysis").removeClass('dim-color');
                for (let con in nowFlow) {
                    if ("occur_storage" === con) {
                        $("#alert_celue,#alert_down_analysis,#alert_up_analysis,#alert_over").addClass('dim-color');
                        connections[con].addOverlay(['Custom', {
                            create: function (component) {
                                return $(`<p style="color: white; background-color: lawngreen; padding: 2px; border-radius: 5px; margin-left: 200px;margin-top: 20px; font-size: x-small;">已完成</p>`);
                            },
                            location: 1,
                            id: con
                        }]);
                    };
                    if ("storage_sync" === con) {
                        $("#alert_celue,#alert_down_analysis,#alert_up_analysis,#alert_over").addClass('dim-color');
                        connections[con].addOverlay(['Custom', {
                            create: function (component) {
                                return $(`<p style="color: white; background-color: lawngreen; padding: 2px; border-radius: 5px; margin-left: 90px;margin-top: 45px; font-size: x-small;">已完成</p>`);
                            },
                            location: 1,
                            id: con
                        }]);
                    };
                    if ("sync_ass_analysis" === con) {
                        $("#alert_celue,#alert_down_analysis,#alert_up_analysis,#alert_over").addClass('dim-color');
                        connections[con].addOverlay(['Custom', {
                            create: function (component) {
                                return $(`<p style="color: white; background-color: lawngreen; padding: 2px; border-radius: 5px; margin-left: 150px;margin-top: 20px; font-size: x-small;">已完成</p>`);
                            },
                            location: 1,
                            id: con
                        }]);
                    };
                    if ("ass_analysis_reason_analysis" === con) {
                        $("#alert_celue,#alert_down_analysis,#alert_up_analysis,#alert_over").addClass('dim-color');
                        connections[con].addOverlay(['Custom', {
                            create: function (component) {
                                return $(`<p style="color: white; background-color: red; padding: 2px; border-radius: 5px; margin-left: 150px;margin-top: 20px; font-size: x-small;">进行中</p>`);
                            },
                            location: 1,
                            id: con
                        }]);
                    };
                }
            } else if (flowChartProgress === 6){
                divArr = ["alert_occur","alert_storage","alert_sync","alert_ass_analysis","alert_reason_analysis","alert_over"];
                for ( var i = 0; i <divArr.length; i++){
                    document.getElementById(divArr[i]).style.backgroundColor = '#006565';
                }
                $("#alert_over").removeClass('dim-color');
                for (let con in nowFlow) {
                    if ("occur_storage" === con) {
                        $("#alert_celue,#alert_down_analysis,#alert_up_analysis").addClass('dim-color');
                        connections[con].addOverlay(['Custom', {
                            create: function (component) {
                                return $(`<p style="color: white; background-color: lawngreen; padding: 2px; border-radius: 5px; margin-left: 200px;margin-top: 20px; font-size: x-small;">已完成</p>`);
                            },
                            location: 1,
                            id: con
                        }]);
                    };
                    if ("storage_sync" === con) {
                        $("#alert_celue,#alert_down_analysis,#alert_up_analysis").addClass('dim-color');
                        connections[con].addOverlay(['Custom', {
                            create: function (component) {
                                return $(`<p style="color: white; background-color: lawngreen; padding: 2px; border-radius: 5px; margin-left: 90px;margin-top: 45px; font-size: x-small;">已完成</p>`);
                            },
                            location: 1,
                            id: con
                        }]);
                    };
                    if ("sync_ass_analysis" === con) {
                        $("#alert_celue,#alert_down_analysis,#alert_up_analysis").addClass('dim-color');
                        connections[con].addOverlay(['Custom', {
                            create: function (component) {
                                return $(`<p style="color: white; background-color: lawngreen; padding: 2px; border-radius: 5px; margin-left: 150px;margin-top: 20px; font-size: x-small;">已完成</p>`);
                            },
                            location: 1,
                            id: con
                        }]);
                    };
                    if ("ass_analysis_reason_analysis" === con) {
                        $("#alert_celue,#alert_down_analysis,#alert_up_analysis").addClass('dim-color');
                        connections[con].addOverlay(['Custom', {
                            create: function (component) {
                                return $(`<p style="color: white; background-color: lawngreen; padding: 2px; border-radius: 5px; margin-left: 150px;margin-top: 20px; font-size: x-small;">已完成</p>`);
                            },
                            location: 1,
                            id: con
                        }]);
                    };
                }
            }
            //电压等级 小于220kv
        } else {
            if (flowChartProgress === 0){
                divArr = ["alert_occur","alert_storage"];
                for ( var i = 0; i <divArr.length; i++){
                    document.getElementById(divArr[i]).style.backgroundColor = '#006565';
                }
                for (let con in nowFlow) {
                    if ("occur_storage" === con) {
                        $("#alert_sync,#alert_down_analysis,#alert_up_analysis,#alert_ass_analysis,#alert_reason_analysis,#alert_over").addClass('dim-color');
                        connections[con].addOverlay(['Custom', {
                            create: function (component) {
                                return $(`<p style="color: white; background-color: lawngreen; padding: 2px; border-radius: 5px; margin-left: 200px;margin-top: 20px; font-size: x-small;">已完成</p>`);
                            },
                            location: 1,
                            id: con
                        }]);
                    };
                    if ("storage_celue" === con) {
                        $("#alert_sync,#alert_down_analysis,#alert_up_analysis,#alert_reason_analysis,#alert_over").addClass('dim-color');
                        connections[con].addOverlay(['Custom', {
                            create: function (component) {
                                return $(`<p style="color: white; background-color: orange; padding: 2px; border-radius: 5px; margin-left: 90px;margin-top: 45px; font-size: x-small;">判断中</p>`);
                            },
                            location: 1,
                            id: con
                        }]);
                    };
                }
            } else if (flowChartProgress === 1){
                divArr = ["alert_occur","alert_storage","alert_celue"];
                for ( var i = 0; i <divArr.length; i++){
                    document.getElementById(divArr[i]).style.backgroundColor = '#006565';
                }
                for (let con in nowFlow) {
                    if ("occur_storage" === con) {
                        $("#alert_sync,#alert_up_analysis,#alert_ass_analysis,#alert_reason_analysis,#alert_over").addClass('dim-color');
                        connections[con].addOverlay(['Custom', {
                            create: function (component) {
                                return $(`<p style="color: white; background-color: lawngreen; padding: 2px; border-radius: 5px; margin-left: 200px;margin-top: 20px; font-size: x-small;">已完成</p>`);
                            },
                            location: 1,
                            id: con
                        }]);
                    };
                    if ("storage_celue" === con) {
                        $("#alert_sync,#alert_up_analysis,#alert_reason_analysis,#alert_over").addClass('dim-color');
                        connections[con].addOverlay(['Custom', {
                            create: function (component) {
                                return $(`<p style="color: white; background-color: lawngreen; padding: 2px; border-radius: 5px; margin-left: 90px;margin-top: 45px; font-size: x-small;">已完成</p>`);
                            },
                            location: 1,
                            id: con
                        }]);
                    };
                    if ("celue_down_analysis_l" === con) {
                        $("#alert_sync,#alert_up_analysis,#alert_reason_analysis,#alert_over").addClass('dim-color');
                        connections[con].addOverlay(['Custom', {
                            create: function (component) {
                                return $(`<p style="color: white; background-color: red; padding: 2px; border-radius: 5px; margin-left: 150px;margin-top: 20px; font-size: x-small;">进行中</p>`);
                            },
                            location: 1,
                            id: con
                        }]);
                    };
                }
            } else if (flowChartProgress === 2){
                divArr = ["alert_occur","alert_storage","alert_celue","alert_down_analysis"];
                for ( var i = 0; i <divArr.length; i++){
                    document.getElementById(divArr[i]).style.backgroundColor = '#006565';
                }
                $("#alert_up_analysis").removeClass('dim-color');
                for (let con in nowFlow) {
                    if ("occur_storage" === con) {
                        $("#alert_sync,#alert_ass_analysis,#alert_reason_analysis,#alert_over").addClass('dim-color');
                        connections[con].addOverlay(['Custom', {
                            create: function (component) {
                                return $(`<p style="color: white; background-color: lawngreen; padding: 2px; border-radius: 5px; margin-left: 200px;margin-top: 20px; font-size: x-small;">已完成</p>`);
                            },
                            location: 1,
                            id: con
                        }]);
                    };
                    if ("storage_celue" === con) {
                        $("#alert_sync,#alert_reason_analysis,#alert_over").addClass('dim-color');
                        connections[con].addOverlay(['Custom', {
                            create: function (component) {
                                return $(`<p style="color: white; background-color: lawngreen; padding: 2px; border-radius: 5px; margin-left: 90px;margin-top: 45px; font-size: x-small;">已完成</p>`);
                            },
                            location: 1,
                            id: con
                        }]);
                    };
                    if ("celue_down_analysis_l" === con) {
                        $("#alert_sync,#alert_reason_analysis,#alert_over").addClass('dim-color');
                        connections[con].addOverlay(['Custom', {
                            create: function (component) {
                                return $(`<p style="color: white; background-color: lawngreen; padding: 2px; border-radius: 5px; margin-left: 150px;margin-top: 20px; font-size: x-small;">已完成</p>`);
                            },
                            location: 1,
                            id: con
                        }]);
                    };
                    if ("down_analysis_up_analysis" === con) {
                        $("#alert_sync,#alert_reason_analysis,#alert_over").addClass('dim-color');
                        connections[con].addOverlay(['Custom', {
                            create: function (component) {
                                return $(`<p style="color: white; background-color: red; padding: 2px; border-radius: 5px; margin-left: 150px;margin-top: 20px; font-size: x-small;">进行中</p>`);
                            },
                            location: 1,
                            id: con
                        }]);
                    };
                }
            } else if (flowChartProgress === 6){
                divArr = ["alert_occur","alert_storage","alert_celue","alert_down_analysis","alert_up_analysis","alert_over"];
                for ( var i = 0; i <divArr.length; i++){
                    document.getElementById(divArr[i]).style.backgroundColor = '#006565';
                }
                $("#alert_over").removeClass('dim-color');
                for (let con in nowFlow) {
                    if ("occur_storage" === con) {
                        $("#alert_sync,#alert_ass_analysis,#alert_reason_analysis").addClass('dim-color');
                        connections[con].addOverlay(['Custom', {
                            create: function (component) {
                                return $(`<p style="color: white; background-color: lawngreen; padding: 2px; border-radius: 5px; margin-left: 200px;margin-top: 20px; font-size: x-small;">已完成</p>`);
                            },
                            location: 1,
                            id: con
                        }]);
                    };
                    if ("storage_celue" === con) {
                        $("#alert_sync,#alert_reason_analysis").addClass('dim-color');
                        connections[con].addOverlay(['Custom', {
                            create: function (component) {
                                return $(`<p style="color: white; background-color: lawngreen; padding: 2px; border-radius: 5px; margin-left: 90px;margin-top: 45px; font-size: x-small;">已完成</p>`);
                            },
                            location: 1,
                            id: con
                        }]);
                    };
                    if ("celue_down_analysis_l" === con) {
                        $("#alert_sync,#alert_reason_analysis").addClass('dim-color');
                        connections[con].addOverlay(['Custom', {
                            create: function (component) {
                                return $(`<p style="color: white; background-color: lawngreen; padding: 2px; border-radius: 5px; margin-left: 150px;margin-top: 20px; font-size: x-small;">已完成</p>`);
                            },
                            location: 1,
                            id: con
                        }]);
                    };
                    if ("down_analysis_up_analysis" === con) {
                        $("#alert_sync,#alert_reason_analysis").addClass('dim-color');
                        connections[con].addOverlay(['Custom', {
                            create: function (component) {
                                return $(`<p style="color: white; background-color: lawngreen; padding: 2px; border-radius: 5px; margin-left: 150px;margin-top: 20px; font-size: x-small;">已完成</p>`);
                            },
                            location: 1,
                            id: con
                        }]);
                    };
                }
            }
        }
    }

    /**
     * 流程图点击事件
     */
    $("#alert_ass_analysis").on("click",function () {
        getProgress();
        $.ajax({
            type: "post", // 以post方式发起请求
            url: "/pqs9300/flowChart/getPowerLever",
            data: { // 提交数据
                flowChartSupIndex: flowChartSupIndex,
            },
            success(data) {
                var arr = data.split("k");
                var powerLeverString = arr[0];
                var powerLever = Number(powerLeverString);
                if (flowChartProgress === 1 && powerLever>=220){
                    //先去校验下事务数据，以及文档文件
                    var i;
                    $.ajax({
                        type: "post",
                        url: "/pqs9300/transaction/checkTransaction",
                        dataType: "json",
                        data: {
                            supIndex: flowChartSupIndex
                        },
                        beforeSend: function () {
                            i = ityzl_SHOW_LOAD_DOWNLOAD();
                        },
                        success: function (data) {
                            if (data.code === 200) {
                                window.location.href = '/pqs9300/transaction/downTransactionWord?supIndex='+flowChartSupIndex;
                            } else {
                                layer.msg(data.message, {icon: 2, time: 1000});
                            }
                            ityzl_CLOSE_LOAD_LAYER(i);
                            type=2;
                            progress=7;
                            refresh();
                        }
                    })
                }
            }
        })
    })


    $("#alert_reason_analysis").on("click",function () {
        getProgress();
        $.ajax({
            type: "post", // 以post方式发起请求
            url: "/pqs9300/flowChart/getPowerLever",
            data: { // 提交数据
                flowChartSupIndex: flowChartSupIndex,
            },
            success(data) {
                var arr = data.split("k");
                var powerLeverString = arr[0];
                var powerLever = Number(powerLeverString);
                if (flowChartProgress === 2 && powerLever>=220){
                    parent.layer.open({
                        type: 2,
                        title: '预警反馈单',
                        maxmin : false,
                        area : ['100%' , '100%'],
                        content: '/pqs9300/transaction/excuteNextStep?supIndex='+flowChartSupIndex+"&excuteStep=1"+"&stepCount="+flowChartProgress,
                        scrollbar: false,
                        end:function () {
                            type=2;
                            progress=7;
                            refresh();
                        }
                    })
                } else if (flowChartProgress === 6 && powerLever>220){
                    flowChartProgress = 2;
                    parent.layer.open({
                        type: 2,
                        title: '预警反馈单',
                        maxmin : false,
                        area : ['100%' , '100%'],
                        content: '/pqs9300/flowChart/openFlowChartData?supIndex='+flowChartSupIndex+'&excuteStep=1'+'&stepCount='+flowChartProgress,
                        scrollbar: false,
                    });
                }
            }
        })
    })

    $("#alert_down_analysis").on("click",function () {
        getProgress();
        $.ajax({
            type: "post", // 以post方式发起请求
            url: "/pqs9300/flowChart/getPowerLever",
            data: { // 提交数据
                flowChartSupIndex: flowChartSupIndex,
            },
            success(data) {
                var arr = data.split("k");
                var powerLeverString = arr[0];
                var powerLever = Number(powerLeverString);
                if (flowChartProgress === 1 && powerLever<220){
                    //先去校验下事务数据，以及文档文件
                    var i;
                    $.ajax({
                        type: "post",
                        url: "/pqs9300/transaction/checkTransaction",
                        dataType: "json",
                        data: {
                            supIndex: flowChartSupIndex
                        },
                        beforeSend: function () {
                            i = ityzl_SHOW_LOAD_DOWNLOAD();
                        },
                        success: function (data) {
                            if (data.code === 200) {
                                window.location.href = '/pqs9300/transaction/downTransactionWord?supIndex='+flowChartSupIndex;
                            } else {
                                layer.msg(data.message, {icon: 2, time: 1000});
                            }
                            ityzl_CLOSE_LOAD_LAYER(i);
                            type=2;
                            progress=7;
                            refresh();
                        }
                    })
                }
            }
        })
    })

    $("#alert_up_analysis").on("click",function () {
        getProgress();
        $.ajax({
            type: "post", // 以post方式发起请求
            url: "/pqs9300/flowChart/getPowerLever",
            data: { // 提交数据
                flowChartSupIndex: flowChartSupIndex,
            },
            success(data) {
                var arr = data.split("k");
                var powerLeverString = arr[0];
                var powerLever = Number(powerLeverString);
                if (flowChartProgress === 2 && powerLever<220){
                    parent.layer.open({
                        type: 2,
                        title: '预警反馈单',
                        maxmin : false,
                        area : ['100%' , '100%'],
                        content: '/pqs9300/transaction/excuteNextStep?supIndex='+flowChartSupIndex+"&excuteStep=1"+"&stepCount="+flowChartProgress,
                        scrollbar: false,
                        end:function () {
                            type=2;
                            progress=7;
                            refresh();
                        }
                    })
                } else if (flowChartProgress === 6 && powerLever<220){
                    flowChartProgress= 2;
                    parent.layer.open({
                        type: 2,
                        title: '预警反馈单',
                        maxmin : false,
                        area : ['100%' , '100%'],
                        content: '/pqs9300/flowChart/openFlowChartData?supIndex='+flowChartSupIndex+'&excuteStep=1'+'&stepCount='+flowChartProgress,
                        scrollbar: false,
                    });
                }
            }
        })
    })


    /**
     * 点击事件小手显示
     */
    function clickStyle(power,progress) {
        if (power >= 220){
            if (progress === 1){
                document.getElementById("alert_ass_analysis").style.cursor = 'pointer';
            } else if (progress === 2){
                document.getElementById("alert_ass_analysis").style.cursor = '';
                document.getElementById("alert_reason_analysis").style.cursor = 'pointer';
            } else if (progress === 6){
                document.getElementById("alert_reason_analysis").style.cursor = 'pointer';
            }
        } else {
            if (progress === 1){
                document.getElementById("alert_down_analysis").style.cursor = 'pointer';
            } else if (progress === 2){
                document.getElementById("alert_down_analysis").style.cursor = '';
                document.getElementById("alert_up_analysis").style.cursor = 'pointer';
            } else if (progress === 6){
                document.getElementById("alert_up_analysis").style.cursor = 'pointer';
            }
        }
    }


</script>
</body>
</html>
