D7QUANTAI/DSWeb/Areas/Account/Views/Chfee_payapplication/Map.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Areas/MvcShipping/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

    
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<script type="text/javascript"  src="../../../../Areas/Account/Viewsjs/jquery-3.1.1.js"></script>

<script type="text/javascript">
    //全局变量
    //窗口宽度
    var screenWidth = window.screen.width;

    //窗口高度
    var screenHeight = window.screen.height;

    //获取画布
    var c = document.getElementById("myCanvas");
    c.width = screenWidth;
    c.height = screenHeight;
    var ctx = c.getContext("2d");
    var bsno = getQueryString('bsno');
    var name = getQueryString('name');

    //获取数据并绘制图层
    $(document).ready(function () {
        $.getJSON("/Account/Chfee_payapplication/GetMapData",
        { BSNO: bsno,
          NAME:name},
        function (data) {
            draw(data.data);
        })

    });
    var workfname = '';

    function draw(data) {

        //矩形的宽
        var rectWidth = 150;

        //矩形的高
        var rectHeight = 90;

        //矩形之间的横间距
        var rectPaddingX = 100;

        //矩形之间的纵间距
        var rectPaddingY = 10;

        //第一块矩形与窗口边缘的距离
        var rectMarginLeft = 75;

        //已审批的矩形背景色
        var accessBgColor = "#7ABFE0";

        //当前审批的矩形背景色
        var currBgColor = "#FFE66F";

        //未执行审批的矩形背景色
        var unBgColor = "#CDCD9A";

        //Group矩形背景色
        var groupBgColor = "#E5F3F2";

        //Group的宽度
        var groupWidth = rectWidth + 20;

        //绘制图形
        for (var i = 0; i < data.length; i++) {

            //①绘制矩形
            ///当前组内的矩形数量
            var cnt =  data[i].Acts.length;
            workfname = data[i].FlowName;
            ///绘制每一个Group的大矩形
            var groupHeight = cnt * rectHeight + rectPaddingY * (cnt - 1)+40;

            var groupX = (rectWidth + rectPaddingX) * i + rectMarginLeft;

            var groupY = screenHeight / 2 - groupHeight / 2;

            drawRoundedRect(groupX, groupY, groupWidth, groupHeight, 5, 2, "#000000", groupBgColor);

            ///绘制Group内文本
            ///文本颜色
            ctx.fillStyle = "#000000";

            ///绘制文本
            ctx.fillText("步骤:"+ (i+1), groupX + 10, groupY + 20);

            for (var m = 0; m <cnt; m++) {
                
                //矩形的x坐标
                var rectX = groupX+10;

                //矩形的y坐标
                var rectY =  groupY + (rectHeight + rectPaddingY) * m +30;

                ///绘制圆角矩形
                ////矩形背景色
                var rectBg;

                ////矩形的高度
                var rectHeightReset = rectHeight;

                if (data[i].Acts[m].OpState == '0') {

                    rectBg = unBgColor;

                } else if (data[i].Acts[m].OpState == '1') {

                    rectBg = accessBgColor;

                } else {

                    rectBg = "#FFFFFF";

                }
                if (data[i].Acts[m].IsCurr=='1') {
                    rectBg = currBgColor;
                }

                drawRoundedRect(rectX, rectY, rectWidth, rectHeightReset, 5, 2, "#000000", rectBg);

                //绘制矩形内文本
                ///文本颜色
                ctx.fillStyle = "#000000";

                ///绘制文本-步骤名称
                ctx.fillText((i+1) + "-" + m + ":" + data[i].Acts[m].Name, rectX + 10, rectY + 20);

                ///绘制文本-审批人
                //判断是否是发起步骤，发起步骤做特殊处理
                if (i == 0) {

                    ctx.fillText("申请人：" + data[i].Acts[m].Oper, rectX + 10, rectY + 40);

                    ctx.fillText("申请时间：", rectX + 10, rectY + 60);

                    ctx.fillText( data[i].Acts[m].OpTime, rectX + 10, rectY + 80);

                } else {

                    ctx.fillText("审批人：" + data[i].Acts[m].Oper, rectX + 10, rectY + 40);
                    ///绘制文本-审批时间
                    if (data[i].Acts[m].OpState == '1') {

                        ctx.fillText("审批时间：", rectX + 10, rectY + 60);

                        ctx.fillText( data[i].Acts[m].OpTime, rectX + 10, rectY + 80);

                    } else {
                        ctx.fillText("审批时间：----", rectX + 10, rectY + 60);
                    }
                }
            }
            

            //②绘制连线
            if (i < data.length - 1) {

                //取得线段的A点
                var ax = groupX + groupWidth;

                var ay = groupY + groupHeight / 2;

                //取得线段的B点
                var bx = ax + rectPaddingX;

                var by = ay;

                ctx.beginPath();

                ctx.moveTo(ax, ay);

                ctx.lineTo(bx, by);

                ctx.stroke();

                ctx.closePath();

            }
        }

        //#region ③绘制图例
        var exRectx = 20;

        var exRecty = 30;

        var exRectHeight = 80;

        var exRectWidth = 130;

        var exRectPadding = 5;

        var exHeight = 20;

        var exWidth = 50;

        drawRoundedRect(exRectx, exRecty, exRectWidth, exRectHeight, 1, 1, "#000000", "#FFFFFF");

        for (var i = 0; i < 3; i++) {

            var exX = exRectx + 5;

            var exY = exRecty + (exHeight + exRectPadding) * i + 5;

            var exBgColor;

            var exText;

            if (i == 0) {

                //已完成
                exBgColor = accessBgColor;

                exText = "已完成";

            } else if (i == 1) {

                //未完成
                exBgColor = unBgColor;

                exText = "未完成";

            } else {

                //当前
                exBgColor = currBgColor;

                exText = "当前进行";

            }

            drawRoundedRect(exX, exY, exWidth, exHeight, 1, 1, "#000000", exBgColor);

            ctx.fillStyle = "#000000";

            ctx.fillText("：" + exText, exX + exWidth + 5, exY+12);
        }
        //#endregion

        //#region ④绘制标题


        ctx.fillStyle = "#000000";
        ctx.fillText(" 工作流名称：" +workfname, 20, 20);
        //#endregion


    }

    ///绘制圆角矩形
    ///x,y,w,h =>x、y、宽、长
    ///r=>圆角半径
    ///bdwidth=>边框粗细
    ///bdcolor=>边框颜色
    ///bgcolor=>背景颜色
    function drawRoundedRect(x, y, w, h, r, bdWidth, bdColor, bgcolor) {
        ctx.beginPath();
        ctx.moveTo(x + r, y);
        ctx.lineWidth = bdWidth;
        ctx.strokeStyle = bdColor;
        ctx.fillStyle = bgcolor;
        ctx.arcTo(x + w, y, x + w, y + h, r);
        ctx.arcTo(x + w, y + h, x, y + h, r);
        ctx.arcTo(x, y + h, x, y, r);
        ctx.arcTo(x, y, x + w, y, r);
        ctx.stroke();
        ctx.fill();
        ctx.closePath();
    }
    
    ///获取QuertString
    function getQueryString(name) {
        var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
        var r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return unescape(r[2]);
        }
        return null;
    }
</script>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="head" runat="server">
<canvas id="myCanvas" width="1" height="1"
style="border:1px solid #000000;">
</canvas>

</asp:Content>