We_Relese/App/Relese/Views/Shared/Camp/_Report.cshtml

@using Abp.Configuration
@using IwbZero.ToolCommon.StringModel
@using WeApp.Configuration
@using WeApp.Helpers
@using WeApp.TrainingPortrait.Dto
@model WeApp.Views.Shared.Camp.ReportModel
@{
    GroupReportDto group = Model.Group;
    ViewBag.Title = $"{(StringExtensions.IsEmpty(group.Name) ? "" : $"[{group.Name}] ")}演练报告";
}

<style>
    .report-box {
        color: #02595a;
        width: 894px;
        display: flex;
        flex-direction: column;
        margin: 0 auto;
        padding: 0 50px
    }

    .first-page {
        width: 100%;
        height: 950pt;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 24px;
        display: none;
    }

        .first-page .box {
            margin-top: 100px;
            width: 70%;
            padding: 15px 20px;
            border-left: 5px solid;
        }

            .first-page .box .name {
                font-size: 40px;
                font-weight: 600;
                margin: 50px 0;
            }

        .first-page .date-box {
            margin-top: 400px;
            font-size: 30px;
        }

    .box-info {
        width: 100%;
    }

        .box-info .info-header {
            width: 100%;
            padding: 10px 20px 5px 40px;
            border-bottom: 3px solid;
            font-size: 24px;
            font-weight: 600;
        }

        .box-info .info-body {
            width: 100%;
            padding: 10px;
        }

            .box-info .info-body dl {
                display: flex;
                align-items: center;
            }

            .box-info .info-body dl {
                margin-bottom: 10px;
            }

                .box-info .info-body dl:last-child {
                    margin-bottom: 0;
                }

                .box-info .info-body dl dt, .box-info .info-body dl dd {
                    display: inline-block;
                }

                .box-info .info-body dl dt {
                    font-weight: 600;
                    padding-right: 5px;
                    white-space: nowrap;
                    font-size: 18px;
                }

                .box-info .info-body dl dd {
                    margin-bottom: 0;
                    word-break: break-all;
                }



    .play-chart-box, .play-scene-box {
        width: 100%;
        display: flex;
        flex-direction: column;
        margin-top: 20px;
    }

    .chart-title {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 10px;
    }

    .round {
        text-align: center;
    }

        .round span {
            padding: 5px 15px 2px;
            font-size: 16px;
            font-weight: 600;
            border-bottom: 2px solid;
        }

    .scene-box {
        margin: 15px 10px;
        padding: 10px 0;
        border: 2px solid;
        border-radius: 5px;
    }

        .scene-box .scene-info {
            padding: 5px;
            border: 1px solid;
            border-radius: 5px;
            margin: 5px 10px;
            background: #c7f0f3;
        }

            .scene-box .scene-info .name {
                font-size: 16px;
                font-weight: 600;
            }

            .scene-box .scene-info .desc {
                text-indent: 2em;
                font-size: 14px;
            }

            .scene-box .scene-info .score {
                margin-top: 3px;
                font-size: 16px;
                display: flex;
                justify-content: center;
            }

                .scene-box .scene-info .score span {
                    font-weight: 600;
                    text-align: center;
                    width: 100%;
                }

        .scene-box .behavior-info {
            border: 1px dashed;
            background: #e7f0f3;
        }
    .scene-box .behavior-info .progress {
        background: #c7f0f3;
        margin: 5px 0;
    }
    .scene-box .behavior-info .progress-bar {
        background-color: #02595a;
    }
        .btn.btn-iwb {
            color: #fff;
            background-color: #02595a;
            border-color: #02595a;
            box-shadow: none;
        }

    .table-box .table th, .table td {
        text-align: center;
        border-color: #02595a;
        padding: 8px 5px;
    }

    .table-box .table thead th {
        /*border-bottom: 2px solid;*/
        border-top: 1px solid #02595a;
        border-bottom: 1px solid #02595a;
    }

    .table-box th.round-tag {
        padding: 10px 10px 10px 75px;
        text-align: left;
        position: relative;
    }

        .table-box th.round-tag strong {
            font-size: 130%;
            letter-spacing: 10px;
        }

    .table-box th.scene {
        width: 200px;
    }

    .table-box th.b-title {
        vertical-align: middle;
        letter-spacing: 3px;
        font-size: 115%;
    }

    .table-box th.s-title, td {
        vertical-align: middle;
        font-size: 85%;
    }

    .table-box th.round-tag .level-box {
        position: absolute;
        right: 40px;
        top: 0;
        display: flex;
        flex-direction: row;
        height: 100%;
        font-weight: 400;
    }

    .table-box .level-box .l-box {
        display: inline-block;
        margin-right: 15px;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .table-box .t-level {
        --wh: 15px;
        display: inline-block;
        width: var(--wh);
        height: var(--wh);
        border-radius: 50%;
        margin: 0 auto;
    }

        .table-box .t-level.big {
            --wh: 18px;
            margin: 0 8px;
        }

        .table-box .t-level.l-1 {
            background: #f00
        }

        .table-box .t-level.l-2 {
            background: orange;
        }

        .table-box .t-level.l-3 {
            background: #0f0
        }

    .review-box {
        padding: 0 20px 10px;
    }

        .review-box strong {
            font-size: 18px;
        }

        .review-box .review {
            margin-top: 10px;
            text-indent: 2em;
        }
</style>
<div class="report-box" id="report">
    <div class="first-page">
        <div class="box">
            <div class="">@(SettingManager.GetSettingValue(IwbSettingNames.ReportCompany))</div>
            <div class="name">@(SettingManager.GetSettingValue(IwbSettingNames.ReportName))</div>
            <div class=""> @(group.Name)</div>
        </div>
        <div class="date-box">@(group.EndDate!=null?group.EndDate?.ToString("yyyy-MM-dd"):DateTime.Now.ToString("yyyy-MM-dd")) </div>
    </div>

    <div class="base-info-box box-info">
        <div class="info-header">演练信息</div>
        <div class="info-body">
            <dl>
                <dt>演练分组：</dt>
                <dd>@(group.Name)</dd>
            </dl>
            <dl>
                <dt>培 训 营：</dt>
                <dd>@(group.CampName)</dd>
            </dl>
            <dl>
                <dt>演练主题：</dt>
                <dd>@(group.PackageName)</dd>
            </dl>
            @*<dl>
                    <dt>演练目的：</dt>
                    <dd>@(group.Purposes)</dd>
                </dl>
                <dl>
                    <dt>主办单位：</dt>
                    <dd>@(group.Organizer)</dd>
                </dl>*@
            <dl>
                <dt>演练时长：</dt>
                <dd>@(Convert.ToInt32(group.TrainingMinute))分钟 （ @(group.StartDate?.ToString("yyyy-MM-dd HH:mm:ss")) — @(group.EndDate?.ToString("yyyy-MM-dd HH:mm:ss")) ）</dd>
            </dl>
            <dl>
                <dt>演练角色：</dt>
                <dd>
                    @if (group.RoleNames.IsNotEmpty())
                    {
                        var arr = group.RoleNames.Split(',');
                        foreach (var r in arr)
                        {
                            <span style="padding: 5px">@(r)</span>
                        }
                    }
                </dd>
            </dl>
            <dl>
                <dt>演练成绩：</dt>
                <dd id="eval-result">优秀</dd>
            </dl>
        </div>
    </div>

    @*<div class="base-info-box box-info">
            <div class="info-header">参演人员</div>
            <div class="info-body">
                <table class="table table-hover table-striped">

                    <thead>
                    <tr>
                        <th style="width: 15px">#</th>
                        <th style="width: 100px">用户名</th>
                        <th>参演人</th>
                        <th>参演角色</th>
                        <th style="width: 120px">状态</th>
                    </tr>
                    </thead>
                    <tbody id="play-user-box"></tbody>
                </table>
            </div>
        </div>*@

    <div class="base-info-box box-info">
        <div class="info-header">演练过程</div>
        <div class="info-body">
            <div class="play-chart-box">
                <div class="chart-title">情景演变图：</div>
                <div id="tree-chart" class="chart-box"></div>
            </div>
            <div class="play-chart-box">
                <div class="chart-title">情景蜂巢图：</div>
                <div id="fc-chart" class="chart-box"></div>
            </div>
            <div class="play-scene-box">
                <div class="chart-title">演练过程得分详解：</div>
                <div id="scene-box" class="scene-info-box">

                </div>
            </div>
        </div>
    </div>

    <div class="base-info-box box-info">
        <div class="info-header">演练能力</div>
        <div class="info-body">
            <div class="play-chart-box">
                <div class="chart-title">轮次评分：</div>
                <div id="round-chart" class="chart-box"></div>
            </div>
            <div class="play-chart-box">
                <div class="chart-title">四功评析：</div>
                <div id="sg-chart" class="chart-box"></div>
            </div>
            <div class="play-scene-box">
                <div class="chart-title">五力评析：</div>
                <div id="wl-chart" class="chart-box">

                </div>
            </div>
        </div>
    </div>

    <div class="base-info-box box-info">
        <div class="info-header">能力解析</div>
        <div class="info-body">
            <div class="play-chart-box">
                <div class="chart-title">四功五力解析详情：</div>
                <div id="tag-box" class="table-box"></div>
            </div>
            <div class="play-chart-box">
                <div class="chart-title">系统评语：</div>
                <div id="xt-review" class="review-box"></div>
            </div>
            <div class="play-scene-box">
                <div class="chart-title">专家评语：</div>
                <div id="zj-review" class="review-box">

                </div>
            </div>
        </div>
    </div>
</div>
@if (Model.IsSystem)
{
    <div id="export" style="position: fixed; right: 17%; top: 80px; display: block;">
        <button type="button" class="btn btn-iwb btn-sm" onclick="ExportSql()">导出PDF</button>
    </div>
}


@using (Html.BeginScripts())
{
    <script src="~/Content/Libs/eCharts/echarts.min.js"></script>
    @*<script type="text/javascript" src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
        <script type="text/javascript" src="https://code.highcharts.com.cn/highcharts/modules/heatmap.js"></script>
        <script type="text/javascript" src="https://code.highcharts.com.cn/highcharts/modules/oldie.js"></script>
        <script type="text/javascript" src="https://code.highcharts.com.cn/highcharts/modules/tilemap.js"></script>*@
    <script src="~/Content/Libs/highcharts/highcharts.min.js"></script>
    <script src="~/Content/Libs/highcharts/modules/heatmap.min.js"></script>
    <script src="~/Content/Libs/highcharts/modules/oldie.min.js"></script>
    <script src="~/Content/Libs/highcharts/modules/tilemap.min.js"></script>
    <script src="~/Content/Libs/highcharts/modules/exporting.js"></script>
    @*<script src="~/Content/Libs/highcharts/modules/offline-exporting.src.js"></script>*@
    @*<script src="~/Content/Libs/highcharts/modules/exporting-image.src.js"></script>*@
    @*<script src="~/Content/Libs/html2canva/html2canvas.min.js"></script>
        <script src="~/Content/Libs/jsPdf/jspdf.min.js.js"></script>
        <script src="~/Content/Libs/jsPdf/html2pdf.js"></script>*@
    
    <script>
   

    </script>
    <script id="report-data-script">
        var t;

        function GetReportData() {
            $('body').append(loading.format('loading-data-tip','正在加载演练报告数据，请稍后！'));
            setTimeout(function() {
                    $('#loading-data-tip').fadeIn(1000);
                },
                1000);

            $.iwbAjax4({
                url: abp.appUrl + 'Portrait/GetGroupReportData?no=@(group.Id)',
                success: function(res) {
                    if (res) {
                        $('#report').data("report-info", res);
                        $('#eval-result').html(res.evalQualitativeResult);
                        ChartFormatter(res.chartData);
                        SceneRoundFormatter(res.scenes);
                        TagRoundFormatter(res.scenes);
                        ReviewFormatter(res.reportEvalStrings);
                        ScoreChartFormatter(res.scoreData);
                        //window.Highcharts.charts.forEach(function(v) {
                        //    v.getImageData();
                        //});
                    }
                    $('#loading-data-tip').fadeOut(1000, function() { $('#loading-data-tip').remove(); });
                    clearTimeout(t);
                    t = setTimeout(function() {
                            $('#export').fadeIn(500);
                        },
                        3000);
                },
                error: function() {
                    $('#loading-data-tip').fadeOut(1000, function() { $('#loading-data-tip').remove(); });
                }
            });
        }

        function ChartFormatter(data) {
            if (data && data.length) {
                data.forEach(function(v) {
                    var str = '<div id="{0}-container_{1}" style="width:100%;height:{2}px;"></div>';
                    $('#tree-chart').append(str.format('tree', v.roundIndex, 500));
                    TreePathChart(v, "tree");
                    $('#fc-chart').append(str.format('fc', v.roundIndex, 420));
                    FcRoundChart(v, 'fc');
                });
            }
        }

        function ScoreChartFormatter(data) {
            if (data) {
                var str = '<div id="score-container_{0}" style="width:100%;height:{1}px;"></div>';
                $('#round-chart').append(str.format('round', 50));
                RoundScoreChart(data.scoreInfos);
                $('#sg-chart').append(str.format('sg', 400));
                SiGongChart(data.siGongInfos);
                $('#wl-chart').append(str.format('wl', 300));
                WuLiChart(data.wuLiInfos);
            }
        }
    </script>

    <script id="scene-script">
        function SceneRoundFormatter(data) {
            var str = '';
            if (data && data.length) {
                data.forEach(function (v) {
                    str += '<div class="round"><span>第{0}轮</span></div>'.format(v.roundIndex);
                    v.sceneInfos.forEach(function (a) {
                        str += SceneFormatter(a);
                    });
                });
            }
            if (str) {
                $('#scene-box').html(str);
            }
        }

        function SceneFormatter(data) {
            var str = '';
            if (data) {
                str += '<div class="scene-box">';

                str += '<div class="scene-info">';
                str += '<div class="name">[情景]：{0}</div>'.format(data.name);
                str += '<div class="desc">{0}</div>'.format(data.description);

                str += '</div>';
                if (data.behaviors && data.behaviors.length) {
                    data.behaviors.forEach(function (v) {
                        str += BehaviorFormatter(v);
                    });
                }
                str += '</div>';
            }
            return str;
        }

        function BehaviorFormatter(data) {
            var str = '';
            if (data) {
                str += '<div class="behavior-info scene-info">';
                str += '<div class="name">[规则]：{0}</div>'.format(data.name);
                str += '<div class="desc">{0}</div>'.format(data.description);
                str += '<div class="score"><span>实际评分：{0} 分</span><span>行为总分：{1} 分</span></div>'.format(data.score,
                    data.fullScore);
                str += '<div class="progress"><div class="progress-bar" style="width:{0}%;"></div></div>'.format(
                    data.fullScore ? (data.score * 100 / data.fullScore).toFixed(2) : 0);
                str += '</div>';
            }
            return str;
        }
    </script>

    <script id="tag-script">
        function TagRoundFormatter(data) {
            var str = '';
            if (data && data.length) {
                str = '<table class="table table-bordered">';
                data.forEach(function (v) {
                    var level = '<div class="l-box"><span class="t-level l-1 big"></span><span>及格</span></div>';
                    level += '<div class="l-box"><span class="t-level l-2 big"></span><span>良好</span></div>';
                    level += '<div class="l-box"><span class="t-level l-3 big"></span><span>优秀</span></div>';
                    str +=
                        '<thead><tr><th class="round-tag" colspan="20"><strong>第{0}轮</strong><div class="level-box">{1}</div></th></tr></thead>'
                        .format(
                            v.roundIndex,
                            level);
                    var isFirst = true;
                    v.sceneInfos.forEach(function (a) {
                        str += TagFormatter(a, isFirst);
                        isFirst = false;
                    });
                    str += '<tr>';
                    str += '<th class="b-title">{0}</th>'.format("轮次总结");
                    v.behaviorTags.forEach(function (vv) {
                        str += '<td class=""> <span class="t-level l-{0}"><span></td>'.format(vv.level);
                    });
                    str += '</tr></tbody>';
                });

                str += '</table>';
            }
            if (str) {
                $('#tag-box').html(str);
            }
        }

        function TagFormatter(data, isFirst) {
            var str = '';
            if (data && data.behaviorTags) {
                if (isFirst) {
                    var head = '';
                    head +=
                        '<tr class="header"><th class="b-title scene"  rowspan="2" >情景信息</th><th class="b-title"  colspan="4">四项基本功</th><th class="b-title"  colspan="5">五项能力</th></tr>';
                    head += '<tr>';
                    data.behaviorTags.forEach(function (v) {
                        head += '<th class="s-title">{0}</th>'.format(v.tagNo);
                    });
                    head += '</tr>';
                    str += ' <thead>{0}</thead><tbody>'.format(head);;
                }
                str += '<tr>';
                str += '<td class="">{0}</td>'.format(data.name);
                data.behaviorTags.forEach(function (v) {
                    str += '<td class=""> <span class="t-level l-{0}"><span></td>'.format(v.level);
                });
                str += '</tr>';
            }
            return str;
        }
    </script>

    <script id="pingYu-script">
        function ReviewFormatter(data) {
            var str = "";
            if (data && data.length) {
                data.forEach(function(v) {
                    if (v.type == @(PortraitRemarkTypeDefinition.ZhuanJia)) {
                        var s = '<div class="review"><span>{0}</span></div>'.format(v.content);
                        if (s) {
                            $('#zj-review').html(s);
                        }
                    } else {
                        str += '<div class="review">';
                        str += '<strong>{0}</strong>'.format(GetReviewName(v.type));
                        str += '<span>{0}</span>'.format(v.content);
                        str += '</div>';
                    }
                });
            }
            if (str) {
                $('#xt-review').html(str);
            }
        }

        function GetReviewName(type) {
            switch (type) {
            case @(PortraitRemarkTypeDefinition.Scene):
                return "场景：";
            case @(PortraitRemarkTypeDefinition.SiGong):
                return "四项基本功：";
            case @(PortraitRemarkTypeDefinition.WuLi):
                return "五项能力：";
            case @(PortraitRemarkTypeDefinition.Short):
                return "成绩与不足：";
            case @(PortraitRemarkTypeDefinition.ZhuanJia):
                return "专家评语：";
            default:
                return "";
            }
        }
    </script>

    <script id="chart-script">
        var color = ['#FF3030', '#FF6A6A', '#FFD700', '#54FF9F', '#00E5EE'];
        var roundColor = ['#FFA939', '#FF6A69', '#35D480', '#FFA939', '#FF6A69', '#35D480'];
        var mainColor = '#02595a';

        //推演网格
        function TreePathChart(data, idStr) {
            if (data) {
                //console.log("TreePath", data);
            } else {
                console.log("TreePath-Null");
                return;
            }
            //var isRadial = idStr == "hx";
            idStr = idStr + '-container_' + data.roundIndex;
            if ($('#' + idStr).data('use') === true) {
                return;
            }
            var treeChart = echarts.init(document.getElementById(idStr)), seriesOpt = {};
            var d = ConvertTreeData(data.infos, false); // isRadial);
            //console.log("ConvertTreeData", d);
            //if (isRadial) {
            //    seriesOpt = {
            //        layout: 'radial'
            //    }
            //}
            var opt = {
                type: 'tree',
                data: d,
                top: '5%',
                left: '5%',
                bottom: '5%',
                right: '5%',
                symbolSize: 10,
                initialTreeDepth: -1,
                label: {
                    position: 'top',
                    rotate: 0,
                    fontSize: 11,
                    fontWeight: 'normal',
                    distance: 1
                },
                lineStyle: {
                    width: 2
                },
                itemStyle: {
                    borderWidth: 1
                },
                leaves: {
                    itemStyle: {
                        borderWidth: 1.5
                    }
                },
                expandAndCollapse: true,
                animationDuration: 550,
                animationDurationUpdate: 450
            };
            var o = $.extend(true, {}, opt, seriesOpt);
            //console.log(o);
            var option = {
                title: {
                    text: "第" + data.roundIndex + "轮情景演变示意图",
                    show: true,
                    left: 'center',
                    textStyle: {
                        color: mainColor
                    }
                },
                tooltip: {
                    trigger: 'item',
                    triggerOn: 'mousemove',
                    formatter: function (p) {
                        return p.data.showName;
                    },
                    backgroundColor: "#c7f0f3",
                    textStyle: { color: mainColor, fontSize: 12 },
                    padding: [8, 15]
                },
                series: [o]
            };
            treeChart.setOption(option);
            $('#' + idStr).data('use', true);
        }

        //蜂巢网格
        function FcRoundChart(data, idStr) {
            if (data) {
                var seriesData = [];
                seriesData.push($.extend({}, { name: data.fcInfo.name, type: 'tilemap', data: data.fcInfo.fcInfos }));
                if (data.fcFlowInfo && data.fcFlowInfo.length > 0) {
                    data.fcFlowInfo.forEach(function (v) {
                        seriesData.push($.extend({}, { name: v.name, type: 'spline', data: v.flowInfos }));
                    });
                }
                console.log(seriesData);
                idStr = idStr + '-container_' + data.roundIndex;
                if ($('#' + idStr).data('use') === true) {
                    return;
                }
                window.Highcharts.chart(idStr,
                    {
                        chart: {
                            //events:{
                            //    load:function(e){
                            //        var curDiv=this.container;
                            //        //svg标签转img标签,某些邮件客户端支持img_svg,不支持svg标签
                            //        var svg=curDiv.innerHTML;
                            //        var imgStr="<img src=\"data:image/svg+xml;base64,"+utoa(svg)+"\" >";
                            //        curDiv.outerHTML=imgStr;
                            //    }
                            //},
                            reflow: true,
                            height: '60%',
                            margin: 10,
                            inverted: false,
                            //backgroundColor: {
                            //    linearGradient: [0, 0, 500, 500],
                            //    stops: [
                            //        [0, 'rgba(255, 255, 255,0)'],
                            //        [1, 'rgba(200, 200, 255,0)']
                            //    ]
                            //}
                            backgroundColor: '#ffffff'
                            //plotBackgroundColor:'#f3fffe'
                            //plotBackgroundColor: {
                            //    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                            //    stops: [
                            //        [0, '#F5F5F5'],
                            //        [0.5, '#FFffFF'],
                            //        [1, '#F5F5F5']
                            //    ]
                            //}
                        },
                        exporting: {
                            enabled: false
                        },
                        title: {
                            text: "第" + data.roundIndex + "轮情景流蜂巢示意图",
                            align: 'center',
                            floating: false,
                            margin: 125,
                            style: {
                                'color': mainColor,
                                'fontWeight': '600',
                                'fontFamily': 'sans-serif'
                            },
                            y: 25
                        },
                        xAxis: {
                            visible: false
                        },
                        yAxis: {
                            visible: false,
                            reversed: true
                        },
                        colorAxis: {
                            visible: false,
                            dataClasses: [
                                {
                                    from: 0,
                                    to: 1,
                                    color: '#c7f0f3',
                                    name: ''
                                }, {
                                    from: 1,
                                    to: 2,
                                    color: mainColor,
                                    name: ''
                                }
                            ]
                        },
                        tooltip: {
                            enabled: false,
                            headerFormat: '',
                            pointFormat: ''
                        },
                        colors: ['#c7f0f3'],
                        legend: {
                            enabled: false
                        },
                        credits: {
                            enabled: false
                        },
                        plotOptions: {
                            tilemap: {
                                allowPointSelect: true,
                                clip: true,
                                cursor: 'pointer',
                                enableMouseTracking: false
                            },
                            spline: {
                                enableMouseTracking: false,
                                lineWidth: 5,
                                marker: {
                                    enabled: false
                                },
                                series: {
                                    animation: {
                                        duration: 3000
                                    }
                                }
                            }
                        },
                        series: seriesData
                    });

                $('#' + idStr).data('use', true);
            }
        }

        //轮次得分条
        function RoundScoreChart(data) {
            if ($('#score-container_round').data('use') === true) {
                return;
            }
            if (data && data.length > 0) {
                // console.log("RoundScore", data);
            } else {
                console.log("RoundScore-Null");
                return;
            }
            var scoreChart = echarts.init(document.getElementById('score-container_round'));
            var series = [];
            for (var i = 0; i < data.length; i++) {
                var temp = {
                    name: '第 ' + (i + 1) + ' 轮',
                    type: 'bar',
                    stack: '总分',
                    label: {
                        normal: {
                            show: true,
                            position: 'inside',
                            color: "#fff",
                            fontSize: 14,
                            fontWeight: 'bold',
                            formatter: '{a}:  {c} 分'
                        }
                    },
                    barWidth: 40,
                    barMinHeight: 150,
                    itemStyle: {},
                    data: [data[i]]
                };
                if (i === 0 && i === data.length - 1) {
                    temp.itemStyle = {
                        barBorderRadius: [30]
                    }
                } else if (i === 0) {
                    temp.itemStyle = {
                        barBorderRadius: [30, 0, 0, 30]
                    }
                } else if (i === data.length - 1) {
                    temp.itemStyle = {
                        barBorderRadius: [0, 30, 30, 0]
                    }
                }
                temp.itemStyle.color = roundColor[i % 3];
                series.push(temp);
            }
            var option = {
                grid: {
                    left: 0,
                    right: 0
                },
                xAxis: {
                    show: false,
                    type: 'value'
                },
                yAxis: {
                    show: false,
                    type: 'category',
                    data: ['分数']
                },
                series: series
            };
            //console.log(option);
            scoreChart.setOption(option);
            $('#score-container_round').data('use', true);

        }

        //四功
        function SiGongChart(data) {
            if ($('#score-container_sg').data('use') === true) {
                return;
            }
            if (data && data.length > 0) {
                //console.log("SiGong", data);
            } else {
                console.log("SiGong-Null");
                return;
            }
            var series = [];
            var legendDate = [];
            var sgData = [];

            for (var i = 1; i <= data.length; i++) {
                if (i > 4) {
                    return;
                }
                var item = data[i - 1];
                legendDate.push(item.name);
                sgData.push([]);
            }

            if (data[0] && data[0].tagScoreInfos) {
                var roundCount = data[0].tagScoreInfos.length;
                for (var w = 1; w <= data.length; w++) {
                    if (w > 4) {
                        return;
                    }
                    var scores = data[w - 1].tagScoreInfos;
                    for (var q = 0; q < scores.length; q++) {
                        sgData[q].push(scores[q]);
                    }
                }
                for (var j = 0; j < roundCount; j++) {
                    var temp = {
                        name: '第 ' + (j + 1) + ' 轮',
                        type: 'bar',
                        label: {
                            normal: {
                                show: true,
                                formatter: '{a}:{c} 分',
                                color: "#fff",
                                rotate: 90
                            }
                        },
                        barMinHeight: 150,
                        itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: roundColor[j % 3] // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: '#27303f' // 100% 处的颜色
                                    }
                                ]
                            },
                            barBorderRadius: [50, 50, 0, 0]
                            //shadowBlur: 2,
                            //shadowColor: "#666",
                            //shadowOffsetX: 2,
                            //shadowOffsetY: 1
                        },
                        data: sgData[j]
                    };
                    series.push(temp);
                }

            }
            var option = {
                grid: {
                    top: 40,
                    bottom: 40,
                    left: 30,
                    right: 30,
                    borderColor: mainColor
                },
                title: {
                    text: "四功能力评析示意图",
                    show: true,
                    left: 'center',
                    textStyle: {
                        color: mainColor
                    }
                },
                //legend: {
                //    data: legendDate
                //},
                xAxis: {
                    type: 'category',
                    data: legendDate,
                    axisLabel: {
                        color: mainColor
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: mainColor
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        color: mainColor
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: mainColor
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: mainColor
                        }
                    }
                },
                series: series
            };
            //console.log(option);
            var siGongChart = echarts.init(document.getElementById('score-container_sg'));
            siGongChart.setOption(option);
            $('#score-container_sg').data('use', true);
        }

        //五力
        function WuLiChart(data) {
            if ($('#score-container_wl').data('use') === true) {
                return;
            }
            if (data && data.length > 0) {
                //console.log("WuLi", data);
            } else {
                console.log("WuLi-Null");
                return;
            }
            var indicatorData = [];
            for (var i = 1; i <= data.length; i++) {
                if (i > 5) {
                    return;
                }
                var item = data[i - 1];
                indicatorData.push({ text: item.name, max: 100, color: color[i - 1] });
            }
            var series = [];
            var wlData = [];
            var radar = [
                {
                    indicator: indicatorData,
                    center: ['30%', '50%'],
                    radius: 120,
                    splitNumber: 5,
                    axisLine: {
                        lineStyle: {
                            color: ['#C1CDCD']
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: ['#00ced1', mainColor]
                        }
                    }
                }
            ];

            if (data[0] && data[0].tagScoreInfos) {
                var roundCount = data[0].tagScoreInfos.length;
                var h = 175 * roundCount;
                if (h > 300) {
                    $('#score-container_wl').height(h);
                }
                var radarTemp = {
                    indicator: indicatorData,
                    radius: 40,
                    center: ['77%', '25%'],
                    splitNumber: 3,
                    nameGap: 5,
                    axisLine: {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            color: ['#00ced1', mainColor]
                        }
                    }
                };

                var minSplit = (100 / (roundCount + 1)).toFixed(2);
                for (var j = 0; j <= roundCount; j++) {
                    var temp = {
                        name: '第 ' + j + ' 轮',
                        type: 'radar',
                        radarIndex: j
                    }
                    if (j === 0) {
                        temp.name = '五力雷达图';
                        temp.data = wlData;
                    } else {
                        wlData.push({ name: '第 ' + j + ' 轮', value: [], lineStyle: { color: roundColor[j - 1] } });
                        temp.lineStyle = {
                            color: roundColor[j - 1]
                        };
                        temp.data = [wlData[j - 1]];
                        radar.push($.extend(true, {}, radarTemp, { center: ['77%', (minSplit * j) + '%'] }));
                    }
                    series.push(temp);
                }
                for (var w = 1; w <= data.length; w++) {
                    if (w > 5) {
                        return;
                    }
                    var scores = data[w - 1].tagScoreInfos;
                    for (var q = 0; q < scores.length; q++) {
                        wlData[q].value.push(scores[q]);
                    }
                }

            }

            var option = {
                grid: { top: 10, bottom: 10, left: 30, right: 30 },
                title: {
                    text: "五力能力评析示意图",
                    show: true,
                    left: 'center',
                    textStyle: {
                        color: mainColor
                    }
                },
                radar: radar,
                series: series
            };

            //console.log(option);
            var wuLiChart = echarts.init(document.getElementById('score-container_wl'));
            wuLiChart.setOption(option);
            $('#score-container_wl').data('use', true);
        }

        function ConvertTreeData(data, isRadial) {
            var newData = [];
            var color1 = "#02595a",
                color2 = "#999",
                width1 = 2, // isRadial ? 2 : 4,
                width2 = 1; // isRadial ? 1 : 3;
            if (data && data.length) {
                data.forEach(function (v) {
                    var newItem = $.extend(true,
                        {},
                        {
                            itemStyle: {
                                color: color2,
                                borderColor: color2,
                                width: width2
                            },
                            label: {
                                color: "#999"
                            },
                            lineStyle: {
                                color: color2,
                                borderColor: color2,
                                width: width2
                            }
                        },
                        v);
                    newItem.showName = newItem.name;
                    newItem.name = newItem.name.indexOf('情景流') == 0
                        ? "情景流"
                        : newItem.name.indexOf('情景') == 0
                        ? "情景"
                            : newItem.name;
                    newItem.collapsed = true;

                    if (v.isRun) {
                        newItem.itemStyle.color = color1;
                        newItem.itemStyle.borderColor = color1;
                        newItem.itemStyle.width = width1;
                        newItem.label.color = color1;
                        newItem.label.fontWeight = 'bold';
                        newItem.lineStyle.color = color1;
                        newItem.lineStyle.borderColor = color1;
                        newItem.lineStyle.width = width1;
                        newItem.collapsed = false;

                    }
                    if (v.children && v.children.length) {
                        newItem.children = ConvertTreeData(v.children, isRadial);

                    }
                    newData.push(newItem);
                });
            }
            return newData;
        }

        // 使用utf-8字符集进行base64编码
        function utoa(str) {
            return window.btoa(unescape(encodeURIComponent(str)));
        }
        // 使用utf-8字符集解析base64字符串
        function atou(str) {
            return decodeURIComponent(escape(window.atob(str)));
        }

    </script>

    <script>
        var loading =
            '<div id="{0}" style="position: fixed; top: 0;right:0; bottom: 0; left: 0; margin: 0 auto; background: rgba(255, 255, 255, .5); color: #02595a; font-size: 24px; font-weight: 600;z-index:9999;display:none;"><div style="width:100%;height:100%;display: flex; justify-content: center; align-items: center; ">{1}</div></div>';
        $('#report').data("group-info", @(Html.Raw(group.Obj2StringCamelCase())));
        GetReportData();
    </script>

    if (Model.IsSystem)
    {
        <script>
            setTimeout(function () { $('.preloader').fadeOut(600); }, 50);
           
            var hasLoad = false;
            $(function() {
                $('#export button').text("导出PDF").prop("disabled", false);
                hasLoad = true;
            });
            
            function ExportSql() {
                if (!hasLoad) {
                    $('#export button').text("正在加载PDF导出插件").prop("disabled", true);
                    abp.message.warn("PDF导出插件正在加载中，请稍后...！");
                    return;
                }
                $('body').append(loading.format('loading-report-tip','正在导出演练报告，请稍后！'));
                $('#loading-report-tip').fadeIn(500,
                    function() {
                        try {
                            ReportToPdf();
                        } catch (e) {
                            console.log("ReportToPdf", e);
                            abp.message.error("导出失败！");
                        } finally {
                            $('#loading-report-tip').fadeOut(1000, function () { $('#loading-report-tip').remove(); });
                        }
                    });

                @*$('#report .first-page').css('display', 'flex');
            ExportSqlPdf('report', '@(group.Name)演练报告-' + new Date().format('yyMMddhhmm'));
            $('#report .first-page').css('display', 'none');*@
            }
        </script>

        <script src="~/Content/Libs/canvg/umd.js"></script>
        <script src="~/Content/Libs/jsPdf/dist/jspdf.umd.min.js"></script>
        <script src="~/Content/Libs/jsPdf/CustomFonts/jspdf.customfonts.min.js"></script>
        <script src="~/Content/Libs/jsPdf/CustomFonts/iwbyue-normal.js"></script>
        <script src="~/Content/Libs/jsPdf/CustomFonts/iwbyue-bold.js"></script>
        <script id="pdf-script">
            window.jsPDF = window.jspdf.jsPDF;
            var doc, mr = 20, mw = 210 - mr, mh = 297 - mr, w = 0, h = 0;

            function ReportToPdf() {
                var group = $('#report').data("group-info"), data = $('#report').data("report-info");
                //console.log("ReportToPdf", group, data);
                doc = new jsPDF('p', 'mm', 'a4');
                doc.addFileToVFS('iwbyue-normal.ttf', font);
                doc.addFont('iwbyue-normal.ttf', 'iwbyue', 'normal');
                doc.addFileToVFS('iwbyue-bold.ttf', fontb);
                doc.addFont('iwbyue-bold.ttf', 'iwbyue', 'bold');
                // set font
                doc.setFont("iwbyue", "normal");
                doc.setTextColor(2, 89, 90);
                w = mr;
                h = mr;
                Face();
                if (group) {
                    WriteTitle("演练信息");
                    Info1(group);
                }
                if (data) {
                    WriteTitle("演练过程");
                    Info2(data);
                    WriteTitle("演练能力");
                    Info3(data);
                    WriteTitle("能力解析");
                    Info4(data);
                }
                doc.save("@(group.Name)演练报告@(DateTime.Now.ToString("yyyyMMddHHmm")).pdf");
            }
            //封面
            function Face() {
                var name = "@(SettingManager.GetSettingValue(IwbSettingNames.ReportCompany))";
                var hh = mh / 2 - 50;
                doc.setFontSize(30);
                var l = doc.getTextDimensions(name), lw = Math.ceil(l.w), lh = Math.ceil(l.h );
                var ww = ((mw - lw - mr) / 2) + mr;
                doc.text(name, ww, hh);
                hh = hh + lh+10;
                doc.setFontSize(28);
                name = "@(SettingManager.GetSettingValue(IwbSettingNames.ReportName))";
                l = doc.getTextDimensions(name), lw = Math.ceil(l.w), lh = Math.ceil(l.h);
                ww = ((mw - lw - mr) / 2) + mr;
                doc.text(name, ww, hh);
                hh = mh / 2 + 50;
                var date = new Date().format("yyyy - MM - dd");
                doc.setFontSize(24);
                l = doc.getTextDimensions(date), lw = Math.ceil(l.w);
                ww = ((mw - lw - mr) / 2) + mr;
                doc.text(date, ww, hh);
            }
            //演练信息
            function Info1(group) {
                doc.setFont("iwbyue", "bold");

                var ww = WriteTitleSm("演练分组：");
                WriteText(group.name, ww);
                //WriteText("演练分组：{0}".format(group.name));
                ww = WriteTitleSm("培  训  营：");
                WriteText(group.campName, ww + 1);
                ww = WriteTitleSm("演练分组：");
                WriteText(group.packageName, ww);
                ww = WriteTitleSm("演练时长：");
                WriteText("{0} 分钟（ {1} — {2} ) ".format(group.trainingMinute, new Date(group.startDate).format("yyyy-MM-dd hh:mm:ss"), new Date(group.endDate).format("yyyy-MM-dd hh:mm:ss")), ww);
                ww = WriteTitleSm("演练角色：");
                WriteText(group.roleNames, ww, true);
                ww = WriteTitleSm("演练成绩：");
                WriteText($("#eval-result").text(), ww);
            }
            //演练过程
            function Info2(data) {
                WriteTitleSm("情景演变图：", true);
                h = h - 5;
                C1();
                AddPage();
                WriteTitleSm("情景蜂巢图：", true);
                h = h - 5;
                C2();
                AddPage();
                WriteTitleSm("演练过程得分详解：", true);
                C3(data.scenes);
                function C1() {
                    $('#tree-chart').find('canvas').each(function (i, v) {
                        var chart = echarts.getInstanceByDom(document.getElementById('tree-container_' + (i + 1)));
                        var img = new Image();
                        img.src = chart.getDataURL({
                            pixelRatio: 1,
                            backgroundColor: '#fff'
                        });
                        h = h - 5;
                        var hh = 83;
                        if (h+hh > mh) {
                            AddPage();
                        }
                        doc.addImage(img, 'JPEG', w+15, h, mw - mr-15, hh);
                        h = hh + h;
                    });
                }
                function C2() {
                    //console.log(window.Highcharts.charts);
                    //window.Highcharts.charts.forEach(function (v) {
                    //    var hh = 100;
                    //    if (h + hh > mh) {
                    //        AddPage();
                    //    }
                    //    var svg = v.getSVG();
                    //    //var canvas = document.createElement('canvas');
                    //    //var dataUrl = v.getImageData();
                    //    //console.log("111",dataUrl);
                    //    //var img = new Image();
                    //    //img.src = dataUrl;
                    //    //var imgData = canvas.toDataURL('image/png');
                    //    //var img = v.getImageData();
                    //    //doc.addImage(imgData, 'JPEG', w, h, mw - mr, hh);
                    //    doc.addSvgAsImage(svg,  w, h, mw - mr, hh);
                    //    h = hh + h;
                    //});
                    //window.Highcharts.charts.forEach(function (v) {
                    //    var hh = 90;
                    //    if (h + hh > mh) {
                    //        AddPage();
                    //    }
                    //    var svg = v.getSVG();
                    //    var canvas = document.createElement('canvas');
                    //    canvas.width = mw - mr;
                    //    canvas.height = hh;
                    //    var ctx = canvas.getContext("2d");
                    //    ctx.fillStyle = "#fff";
                    //    ctx.fillRect(0, 0, canvas.width, canvas.height);
                    //    var ops = {
                    //        ignoreMouse: true,
                    //        ignoreAnimation: true,
                    //        ignoreDimensions: true
                    //    };
                    //    var vv = window.canvg.Canvg.fromString(ctx, svg, ops);
                    //    vv.render(ops);
                    //    doc.addImage(canvas.toDataURL("image/jpeg", 1.0),"png" , w, h, mw - mr, hh);
                    //    h = hh + h;
                    //});
                    $('#fc-chart').find('svg').each(function (i,v) {
                        var hh = 83;
                        if (h + hh > mh) {
                            AddPage();
                        }
                        var svg = $(v).parent()[0].innerHTML;
                        if (svg)
                            svg = svg.replace(/\r?\n|\r/g, '').trim();

                        var canvas = document.createElement('canvas');
                        var www=15,ww = mw - mr - www;
                        canvas.width =ww;
                        canvas.height = hh;
                        var ctx = canvas.getContext("2d");
                        ctx.fillStyle = "#fff";
                        ctx.fillRect(0, 0, canvas.width, canvas.height);
                        var ops = {
                            ignoreMouse: true,
                            ignoreAnimation: true,
                            ignoreDimensions: true
                        };
                        var vv = window.canvg.Canvg.fromString(ctx, svg, ops);
                        vv.resize();
                        vv.start();
                        //vv.render(ops);
                        doc.addImage(canvas.toDataURL("image/png"),"png" , w+www, h, ww, hh);
                        h = hh + h;
                    });
                    //$('#fc-chart').find('svg').each(function (i, v) {
                    //    var hh = 90;
                    //    if (h + hh > mh) {
                    //        AddPage();
                    //    }
                    //    //var svg = $('#fc-container_' + (i + 1)).find('svg').parent()[0].innerHTML;
                    //    //var svg = $(v).parent()[0].innerHTML;
                    //    //var canvas = document.createElement('canvas');
                    //    //console.log(svg);
                    //    //if (svg)
                    //    //    svg = svg.replace(/\r?\n|\r/g, '').trim();
                    //    //var vv = window.canvg.Canvg.fromString(canvas, svg);
                    //    //vv.start();
                    //    //console.log(canvas);
                    //   // $(body).append(canvas);
                    //    //var imgData = canvas.toDataURL('image/png');

                    //    //var img = v.getImageData();
                    //    //var img = new Image();
                    //    //var imgData = $(v).attr("src").replace("data:image/svg+xml;base64,", "");
                    //    //img.src = imgData
                    //    //console.log(imgData);
                    //    //var img = ImgToDataUrl($(v).attr("src"), CallbackBase64);
                    //    //doc.addImage(svg, 'png', w, h, mw - mr, hh);
                    //    doc.addSvgAsImage($(v).attr("src"),  w, h, mw - mr, hh);
                    //    h = hh + h;
                    //});
                }
                function C3(data) {
                    if (data&&data.length) {
                        data.forEach(function(v) {
                            Round(v.roundIndex);
                            Scene(v.sceneInfos);
                        });
                    }

                    function Round(index) {
                        var txt = "第 {0} 轮".format(index);
                        doc.setFontSize(16);
                        doc.setFont("iwbyue", "bold");
                        var l = doc.getTextDimensions(txt), lw = Math.ceil(l.w), lh = Math.ceil(l.h);
                        //console.log(l);
                        var ww = ((mw - lw - mr) / 2) + mr;
                        doc.text(txt, ww, h);
                        doc.setFont("iwbyue", "normal");
                        h = h + 2;
                        doc.setLineWidth(1);
                        doc.setLineDash([0]);
                        doc.setDrawColor(2, 89, 90);
                        doc.line(ww - 3, h, ww + lw + 3, h);
                        doc.setFontSize(16);
                        h = h + 10;
                        if (h > mh) {
                            AddPage();
                        }
                    }
                    function Scene(data) {
                        if (data && data.length) {
                            data.forEach(function (v) {
                                WriteTitleSm("[情景] {0}".format(v.name), true);
                                WriteText(v.description, 5, true, 13, 2);
                                Behavior(v.behaviors);
                                doc.setLineWidth(0.1);
                                doc.setLineDash([2.5]);
                                doc.setDrawColor(2, 89, 90);
                                h = h - 5;
                                doc.line(mr - 5, h, mw + 5, h);
                                h = h + 10;
                                if (h > mh) {
                                    AddPage();
                                }
                                doc.setFontSize(16);
                            });
                        }
                    }
                    function Behavior(data) {
                        if (data && data.length) {
                            data.forEach(function (v) {
                                // WriteTitleSm("[规则][得分：{1}/{2}] {0}".format(v.name, v.score, v.fullScore), true);
                                WriteTitleSm("[规则]  [得分：{1}/{2}] {0}".format("", v.score, v.fullScore), true,14);
                                WriteText(v.description, 5, true, 12, 2);
                                if (h > mh) {
                                    AddPage();
                                }
                            });
                        }
                    }
                }

                function ImgToDataUrl(src, callback, imageType) {
                    var img = new Image();
                    imageType = imageType || 'image/png';
                    img.setAttribute('crossOrigin', 'anonymous');
                    img.onload = function () {

                        /*image completely converted to base64string */
                        var canvas = document.createElement('CANVAS');
                        var ctx = canvas.getContext('2d');
                        canvas.height = this.height;
                        canvas.width = this.width;
                        ctx.drawImage(this, 0, 0);
                        var dataURL = canvas.toDataURL(imageType);
                        //img.src = dataURL;
                        /* call back function */
                        callback(dataURL);
                    };
                    img.src = src;
                    if (img.complete || img.complete === undefined) {
                        img.src = src;
                    }
                    return img;
                }
                function CallbackBase64(base64Img)
                {
                    /*base64Img contains full base64string of image   */
                    console.log("XXXXX",base64Img);
                }
            }

            //演练能力
            function Info3(data) {
                WriteTitleSm("轮次评分：", true);
                C4();
                WriteTitleSm("四功评析：", true);
                C5();
                WriteTitleSm("五力评析：", true);
                C6(data.scenes);

                function C4() {
                    var chart = echarts.getInstanceByDom(document.getElementById('score-container_round'));
                    var img = new Image();
                    img.src = chart.getDataURL({
                        pixelRatio: 1,
                        backgroundColor: '#fff'
                    });
                    h = h - 5;
                    var hh = 12;
                    if (h+hh > mh) {
                        AddPage();
                    }
                    doc.addImage(img, 'JPEG', w, h, mw - mr, hh);
                    h = hh + h+10;
                }
                function C5() {
                    var chart = echarts.getInstanceByDom(document.getElementById('score-container_sg'));
                    var img = new Image();
                    img.src = chart.getDataURL({
                        pixelRatio: 1,
                        backgroundColor: '#fff'
                    });
                    h = h - 5;
                    var hh = 90;
                    if (h+hh > mh) {
                        AddPage();
                    }
                    doc.addImage(img, 'JPEG', w, h, mw - mr, hh);
                    h = hh + h+10;
                }
                function C6(data) {
                    var chart = echarts.getInstanceByDom(document.getElementById('score-container_wl'));
                    var img = new Image();
                    img.src = chart.getDataURL({
                        pixelRatio: 1,
                        backgroundColor: '#fff'
                    });
                    h = h - 5;
                    var hh = 35 * data.length || 105;
                    if (h+hh > mh) {
                        AddPage();
                    }
                    doc.addImage(img, 'JPEG', w, h, mw - mr, hh);
                    h = hh + h+10;
                }
            }

            var th = 13, th2 = 9, tw1 = 34, tw2 = 14, tw3 = 19,mr2=5;

            function Info4(data) {
                doc.setFontSize(10);
                var ll = doc.getTextDimensions("我");
                var c = Math.floor((tw1 - mr2) / ll.w);

                WriteTitleSm("四功五力解析详情：", true);
                h = h - 5;
                C9(data.scenes);
                h = h + 10;
                //WriteTitle("系统评语：", true);
                WriteTitleSm("四项基本功：", true);
                WriteText(data.reportEvalStrings[0].content, 0, true, 12, 2);
                WriteTitleSm("五项能力：", true);
                WriteText(data.reportEvalStrings[1].content, 0, true, 12, 2);
                WriteTitleSm("成绩与不足：", true);
                WriteText(data.reportEvalStrings[2].content, 0, true, 12, 2);

                WriteTitleSm("专家评语：", true);
                WriteText(data.reportEvalStrings[3].content, 0, true, 12, 2);

                function C9(data) {
                    if (data&&data.length) {
                        data.forEach(function (v) {
                            RoundTh(v.roundIndex);
                            SceneTd(v.sceneInfos);
                            var hh = WriteSceneName("轮次总结");
                            Tags(v.behaviorTags, hh);
                            h=h+hh;
                            doc.line(mr, h, mw, h);
                        });
                    }

                    function RoundTh(index) {

                        //var th = window.th, tw1 = window.tw1, tw2 = window.tw2, tw3 = window.tw3;
                        w = mr;
                        //doc.setFontType("bold");
                        doc.setFontSize(20);
                        doc.setFont("iwbyue", "bold");
                        var txt = "第 {0} 轮".format(index);
                        var l = doc.getTextDimensions(txt);
                        var  ww = mr + 15;
                        var hh = h + (th - l.h) / 2 + l.h;
                        doc.setLineWidth(0.2);
                        doc.setDrawColor(2, 89, 90);
                        doc.line(mr, h, mw, h);
                        doc.line(mr, h, mr, h+th);
                        doc.line(mw, h, mw, h + th);
                        doc.text(txt, ww, hh);
                        doc.setFontSize(14);
                        doc.setLineWidth(0.1);
                        doc.setDrawColor(255, 0, 0);
                        doc.setFillColor(255, 0, 0);
                        //doc.setFontType("normal");

                        var tw = 20;
                        ww = mw - tw * 3 - 10;
                        doc.circle(ww, h+th/2, 2.5, "FD");
                        doc.text("及格", ww + 5, h + th/2+2);
                        ww = ww + tw;
                        doc.setDrawColor(255, 165, 0);
                        doc.setFillColor(255, 165, 0);
                        doc.circle(ww, h+th/2, 2.5, "FD");
                        doc.text("良好", ww + 5, h + th/2 +2 );
                        ww = ww + tw;
                        doc.setDrawColor(0,255, 0);
                        doc.setFillColor(0,255, 0);
                        doc.circle(ww, h+th/2, 2.5, "FD");
                        doc.text("优秀", ww + 5, h + th / 2 + 2);
                        doc.setLineWidth(0.2);
                        h = th + h;
                        doc.setDrawColor(2, 89, 90);
                        doc.line(mr, h, mw, h);

                        //doc.setFontType("bold");
                        doc.line(mr,h,mr,h+th2*2);
                        doc.line(mr + tw1, h, mr + tw1, h + th2 *2);
                        txt = "情 景 信 息";
                        l = doc.getTextDimensions(txt);
                        ww = mr + (tw1 - l.w) / 2;
                        hh = h + (th2*2 - l.h) / 2 + l.h;
                        doc.text(txt, ww, hh);
                        doc.line(mr + tw1 + tw2 * 3 + tw3, h, mr + tw1 + tw2 * 3 + tw3, h + th2*2);
                        txt = "四 项 基 本 功";
                        l = doc.getTextDimensions(txt);
                        hh = h + (th2 - l.h) / 2 + l.h;
                        ww = mr+tw1 + (tw2 * 3 + tw3 - l.w) / 2;
                        doc.text(txt, ww, hh);
                        doc.line(mw, h, mw, h + th2*2);
                        txt = "五 项 能 力";
                        l = doc.getTextDimensions(txt);
                        ww = mr + tw1 + tw2 * 3 + tw3+ (tw2 * 4 + tw3 - l.w) / 2;
                        hh = h + (th2 - l.h) / 2 + l.h;
                        doc.text(txt, ww, hh );
                        doc.line(mr + tw1, h + th2, mw, h + th2);
                        h = th2 + h;

                        doc.setFontSize(10);
                        //doc.setFontType("normal");
                        w = mr + tw1 + tw2;
                        doc.line(w, h, w, h + th2);
                        txt = "对上级";
                        l = doc.getTextDimensions(txt);
                        ww = w - (tw2 - l.w) / 2 - l.w;
                        hh = h + (th2 - l.h) / 2 + l.h;
                        doc.text(txt, ww, hh);

                        w = w+ tw2;
                        doc.line(w, h, w, h + th2);
                        txt = "对下级";
                        ww = w - (tw2 - l.w) / 2 - l.w;
                        doc.text(txt, ww, hh);

                        w = w+ tw3;
                        doc.line(w, h, w, h + th2);
                        txt = "对相关单位";
                        //doc.setFontSize(8);
                        l = doc.getTextDimensions(txt);
                        ww = w - (tw3 - l.w) / 2 - l.w;
                        doc.text(txt, ww, hh);

                        w = w+ tw2;
                        txt = "对媒体";
                        //doc.setFontSize(10);
                        l = doc.getTextDimensions(txt);
                        ww = w - (tw2 - l.w) / 2 - l.w;
                        doc.text(txt, ww, hh);

                        w = w + tw2;
                        doc.line(w, h, w, h + th2);
                        txt = "协调力";
                        ww = w - (tw2 - l.w) / 2 - l.w;
                        doc.text(txt, ww, hh);

                        w = w + tw2;
                        doc.line(w, h, w, h + th2);
                        txt = "决策力";
                        ww = w - (tw2 - l.w) / 2 - l.w;
                        doc.text(txt, ww, hh);

                        w = w + tw2;
                        doc.line(w, h, w, h + th2);
                        txt = "掌控力";
                        ww = w - (tw2 - l.w) / 2 - l.w;
                        doc.text(txt, ww, hh);

                        w = w + tw3;
                        doc.line(w, h, w, h + th2);
                        txt = "舆论引导力";
                        //doc.setFontSize(8);
                        l = doc.getTextDimensions(txt);
                        ww = w - (tw3 - l.w) / 2 - l.w;
                        doc.text(txt, ww, hh);

                        w = w + tw2;
                        txt = "研判力";
                        //doc.setFontSize(10);
                        l = doc.getTextDimensions(txt);
                        ww = w - (tw2 - l.w) / 2 - l.w;
                        doc.text(txt, ww, hh);

                        h = h + th2;
                        doc.line(mr, h, mw, h);
                    }
                    function SceneTd(data) {
                        doc.setFontSize(10);
                        if (data&&data.length) {
                            data.forEach(function (v) {
                                var hh=  WriteSceneName(v.name);
                                Tags(v.behaviorTags, hh);
                                h=h+hh;
                                doc.line(mr, h, mw, h);

                            });
                        }
                    }
                    function WriteSceneName(txt) {
                        var cc = Math.ceil(txt.length / c);
                        var hh = cc * ll.h + mr2;
                        doc.setLineWidth(0.2);
                        doc.setDrawColor(2, 89, 90);
                        doc.line(mr, h, mr, h + hh);
                        doc.line(mr + tw1, h, mr + tw1, h + hh);
                        var txt2 = doc.splitTextToSize(txt, tw1 - mr2);
                        doc.text(txt2, mr + mr2 / 2, h + ll.h + mr2 / 2);
                        return hh;
                    }
                    function Tags(tags, hh) {
                        if (tags && tags.length) {
                            w = mr + tw1;
                            for (var i = 0; i < tags.length; i++) {
                                var tag = tags[i];
                                var ww = i == 2 || i == 7 ? tw3 : tw2;
                                Tag(tag.level, ww, hh);
                            }
                        }
                    }
                    function Tag(level, ww, hh) {
                        if (level != 0) {
                            switch (level) {
                            case 1:
                                doc.setDrawColor(255, 0, 0);
                                doc.setFillColor(255, 0, 0);
                                doc.circle(w + ww / 2, h + hh / 2, 2, "FD");
                                break;
                            case 2:
                                doc.setDrawColor(255, 165, 0);
                                doc.setFillColor(255, 165, 0);
                                doc.circle(w + ww / 2, h + hh / 2, 2, "FD");
                                break;
                            case 3:
                                doc.setDrawColor(0, 255, 0);
                                doc.setFillColor(0, 255, 0);
                                doc.circle(w + ww / 2, h + hh / 2, 2, "FD");
                                break;
                            }
                        }
                        w = w + ww;
                        doc.setDrawColor(2, 89, 90);
                        doc.line(w, h, w, h + hh);
                    }
                }
            }

            function AddPage() {
                w = mr;
                h = mr;
                doc.addPage("a4");
            }

            function WriteTitle(title) {
                if (doc&&title) {
                    AddPage();
                    w = mr;
                    doc.setFontSize(24);
                    doc.setFont("iwbyue");
                    //doc.setFontType("bold");
                    doc.text(title, w + 10, h);
                    //doc.setFontType("normal");
                    h = h + 5;
                    doc.setLineWidth(1);
                    doc.setDrawColor(2, 89, 90);
                    doc.line(mr - 5, h, mw + 5, h);
                    doc.setFontSize(16);
                    h = h + 10;
                    if (h > mh) {
                        AddPage();
                    }
                }
            }

            function WriteTitleSm(title, hh,fs) {
                if (doc&&title) {
                    w = mr;
                    fs = fs || 16;
                    doc.setFontSize(fs);
                    //doc.setFontType("bold");
                    doc.text(title, w, h);
                    var dim = doc.getTextDimensions(title);
                    //console.log(dim);
                    if (hh) {
                        h = h + 10;
                        if (h > mh) {
                            AddPage();
                        }
                    }
                    //doc.setFontType("normal");
                    return Math.ceil(dim.w);
                }
            }
            function WriteText(txt, ww, long, fs, ti, rw) {
                var hh = 0;
                if (doc) {
                    fs = fs || 16;
                    doc.setFontSize(fs);
                    var www = mr;
                    rw = rw || mw;
                    if (ww) {
                        www = mr + ww;
                    }
                    if (txt) {
                        if (long) {
                            var txt1 = txt.split('');
                            var l = GetTextDimensions(txt1, doc), lw = l.w, lh = Math.ceil(l.h + 2);
                            hh = lh;
                            if (ti) {
                                www = www + ti * lw;
                            }
                            txt = txt.split('');
                            for (var i = 0; i < txt.length; i++) {
                                doc.text(txt[i], www, h);
                                www = www + lw;
                                if (www >= rw) {
                                    www = mr + ww;
                                    h = h + lh;
                                    hh = hh + lh;
                                    if (h > mh) {
                                        AddPage();
                                    }
                                }
                            }
                        } else {
                            doc.text(txt, www, h);
                        }
                    }
                    h = h + 10;
                    if (h > mh) {
                        AddPage();
                    }

                }
                return hh;
            }

            function GetTextDimensions(txt, doc,i) {
                if (txt[0] || i < 10) {
                    i = i || 0;
                    var reg = /\p{Unified_Ideograph}/u;
                    if (reg.test(txt[0])) {
                        return doc.getTextDimensions(txt[0]);
                    } else {
                        if (!txt[0]) {
                            i++;
                        }
                        txt.shift();
                        return GetTextDimensions(txt, doc,i);
                    }
                }
                return { w: 0, h: 0 };
            }


        </script>

    }
}