We_Relese/OnlineApp/Relese/Views/Play/Report.cshtml

@using Abp.Configuration
@using IwbZero.ToolCommon.StringModel
@using WeOnlineApp.Configuration
@using WeOnlineApp.TrainingCampPlay.Dto

@{
    Layout = "~/Views/Shared/Layout/_Layout.Play.cshtml";
    ViewBag.PageId = "history";
    PlayReportDto play = ViewBag.Play;
    ViewBag.Title = $"{(StringExtensions.IsEmpty(play.Name) ? "" : $"[{play.Name}] ")}演练报告";
}

<style>
    .report-box {
        --mainColor: #65758f;
        color: var(--mainColor);
        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;
                }

    .table th, .table td {
        text-align: center;
    }

    .table thead th {
        border-bottom: 2px solid;
        border-top: none;
    }

    .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: #e5e5e5;
        }

            .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: #f5f5f5;
        }

            .scene-box .behavior-info .progress {
                background: #f0f0f0;
                margin: 5px 0;
            }

            .scene-box .behavior-info .progress-bar {
                background-color: var(--mainColor);
            }

    .btn.btn-iwb {
        color: #fff;
        background-color: #02595a;
        border-color: #02595a;
        box-shadow: none;
    }
</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=""> @(play.Name)</div>
        </div>
        <div class="date-box">@(play.EndDate!=null?play.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>@(play.Name)</dd>
            </dl>
            <dl>
                <dt>培训营名称：</dt>
                <dd>@(play.CampName)</dd>
            </dl>
            <dl>
                <dt>演练主题：</dt>
                <dd>@(play.PackageName)</dd>
            </dl>
            <dl>
                <dt>演练目的：</dt>
                <dd>@(play.Purposes)</dd>
            </dl>
            <dl>
                <dt>主办单位：</dt>
                <dd>@(play.Organizer)</dd>
            </dl>
            <dl>
                <dt>演练时长：</dt>
                <dd>@(Convert.ToInt32(play.TrainingMinute))分钟 （ @(play.StartDate?.ToString("yyyy-MM-dd HH:mm:ss")) — @(play.EndDate?.ToString("yyyy-MM-dd HH:mm:ss")) ）</dd>
            </dl>
            <dl>
                <dt>演练角色：</dt>
                <dd>
                    @if (play.PlayRoleNames.IsNotEmpty())
                    {
                        var arr = play.PlayRoleNames.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>
<div id="export" style="position: fixed; right: 17%; top: 30px; display: none;">
    <button type="button" class="btn btn-iwb btn-sm" onclick="Export()">导出PDF</button>
</div>

@section scripts
{
    <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/html2canva/html2canvas.min.js"></script>
    <script src="~/Content/Libs/jsPdf/jspdf.min.js.js"></script>
    <script src="~/Content/Libs/jsPdf/html2pdf.js"></script>
    <script>
        $(function() {
            GetPlayUsers();
            GetPlayData();
        });

        function Export() {
            $('#report .first-page').css('display', 'flex');
            ExportPdf('report', '@(play.Name)演练报告-' + new Date().format('yyMMddhhmm'));
            $('#report .first-page').css('display', 'none');
        }

        function GetPlayUsers() {
            $.iwbAjax4({
                url: abp.appUrl + 'CampPlay/GetPlayUsers?no=@(play.Id)',
                success: function(res) {
                    if (res && res.length) {
                        var str = '';
                        var i = 0;
                        res.forEach(function(v) {
                            i++;
                            var state = v.playerState == @(CampPlayUserStateDefinition.End) ? "完成演练" : "未完成演练";
                            str += '<tr><th>{0}</th><td>{1}</td><td>{2}</td><td>{3}</td><td>{4}</td></tr>'
                                .format(i, v.userName, v.playerName, v.role, state);
                        });
                        if (str) {
                            $('#play-user-box').html(str);
                        }
                    }
                }
            });
        }
    </script>

    <script>
        var t;
        function GetPlayData() {
            $('body').append('<div id="loading-data-tip" 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; ">正在加载演练报告数据，请稍后！</div></div>');
            setTimeout(function () {
                $('#loading-data-tip').fadeIn(1000);
            }, 1000);
           
            $.iwbAjax4({
                url: abp.appUrl + 'CampPlay/GetPlayData?no=@(play.Id)',
                success: function(res) {
                    if (res) {
                        $('#eval-result').html(res.evalQualitativeResult);
                        ChartFormatter(res.chartData);
                        SceneRoundFormatter(res.scenes);
                        ScoreChartFormatter(res.scoreData);
                    }
                    $('#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>
        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>
        var color = ['#FF3030', '#FF6A6A', '#FFD700', '#54FF9F', '#00E5EE'];
        var roundColor = ['#FFA939', '#FF6A69', '#35D480', '#FFA939', '#FF6A69', '#35D480'];
        var mainColor = '#65758f';

        //推演网格
        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: "#ddd",
                    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: {
                            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: 'transparent'
                            //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: '#ddd',
                                    name: ''
                                }, {
                                    from: 1,
                                    to: 2,
                                    color: mainColor,
                                    name: ''
                                }
                            ]
                        },
                        tooltip: {
                            enabled: false,
                            headerFormat: '',
                            pointFormat: ''
                        },
                        colors: ['#ddd'],
                        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: mainColor // 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 = mainColor,
                color2 = "#ddd",
                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;
        }

    </script>
}