We_Relese/App/Relese/Views/Train/Portrait.cshtml

@using WeApp.Configuration
@using WeApp.Authorization
@using WeApp.TrainingCamp.Dto
@using WeApp.TrainingCampGroup.Dto

@{
    var isEdit = ViewBag.IsEdit;
    ViewBag.Title = "演练培训营画像";

    string activeMenu = PermissionNames.PagesTrainMgPortraitMg;
    ViewBag.ActiveMenu = activeMenu;
    string campState = ViewBag.CampState, groupState = ViewBag.GroupState;
    List<CampGroupDto> groups = ViewBag.Groups;
    CampDto camp = ViewBag.Camp;
    string campNo = camp.Id;
    //List<string> groupNos = groups?.Select(a => a.Id).ToList() ?? new List<string>();
}
@section css{
    <link href="~/Content/Css/portrait.css" rel="stylesheet" />
    <style>
        .tip-remark {
            display: flex;
            border: 1px solid #1e90ff;
            padding: 6px 5px;
            margin: 5px 10px;
        }

            .tip-remark span {
                width: 90%;
                display: flex;
                align-items: center;
                padding: 0 10px;
            }

            .tip-remark button {
                width: 10%;
            }

        .btn-report {
            position: absolute;
            left: 800px;
            top: 8px;
            z-index: 1089;
        }
    </style>
}
<div class="nav-box">
    @if (groups != null && groups.Any())
    {
        <ul class="nav">
            @foreach (var g in groups)
            {
                var id = g.Id;
                <li class="nav-item">
                    <a class="nav-link" data-toggle="pill" data-target="#group_@(id)" data-id="@(id)" role="tab">@(g.Name)</a>
                </li>
            }
            @if (isEdit)
            {
                <li class="nav-item">
                    <a class="nav-link " style="background: coral; border: 1px solid coral;color:#fff" href="javascript:RefreshPortrait()">重新生成画像</a>
                </li>
            }

        </ul>
    }
</div>
<div class="row">
    @if (groups != null && groups.Any())
    {
        <div class="tab-content" style="width: 100%;">
            @foreach (var g in groups)
            {
                var id = g.Id;
                <div class="tab-pane fade" id="group_@(id)" data-id="@(id)">
                    <a class="btn btn-report btn-iwb" href="@Url.Action("Report","Train",new{g.Id})" target="_blank"> @(g.Name) 评估报告</a>
                    <div class="col-md-12" id="group-box_@(g.Id)">
                        <div id="group-info_@(id)" class="portrait-box">
                            <div class="title-box">
                                <div class="left">
                                    <span>演练信息</span>
                                </div>
                                <div class="right"></div>
                            </div>
                        </div>
                        <div id="group-process_@(id)" class="portrait-box">
                            <div class="title-box ra">
                                <div class="left">
                                    <span>演练过程</span>
                                </div>
                                <div class="right"></div>
                            </div>
                            <div class="content-box">
                                <div class="inner-box" style="width: 25%;">
                                    <div class="inner-title">演练情景</div>
                                    <div class="inner-content fdc">
                                        <div id="scene-info_@(id)" class="tab-box fdc" style="height: calc(100% - 110px);"></div>
                                        <div class="remark-box" style="height: 100px; margin-top: 10px;">
                                            <div class="inner-title">主情景说明</div>
                                            <div class="inner-content">
                                                <div class="span-textarea" style="" data-type="@(PortraitRemarkTypeDefinition.Scene)" data-id="@(id)">
                                                    <span id="scene_remark_@(id)" class="span-remark"></span>
                                                    @if (isEdit)
                                                    {
                                                        <button class="btn btn-iwb btn-sm" data-type="@(PortraitRemarkTypeDefinition.Scene)">信息提示</button>
                                                        <textarea id="scene_text_@(id)" name="" style="width: 100%; height: 100%;" placeholder="演练场景简要说明"></textarea>
                                                    }
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="inner-box" style="width: 50%; margin-left: 5px;">
                                    <div class="inner-title">推演网格</div>
                                    <div id="training-info_@(id)" class="inner-content">
                                        <div class="tab-box fdc">
                                            <div class="tab-header" style="width: 100%;">
                                                <ul class="nav training">
                                                    <li class="nav-item">
                                                        <a class="nav-link" id="tab-ti-fc_@(id)" data-no="@(id)" data-toggle="pill" data-target="#ti-fc_@(id)">蜂巢网格</a>
                                                    </li>
                                                    <li class="nav-item">
                                                        <a class="nav-link" id="tab-ti-sx_@(id)" data-type="1" data-no="@(id)" data-toggle="pill" data-target="#ti-sx_@(id)">树形网格</a>
                                                    </li>
                                                    <li class="nav-item">
                                                        <a class="nav-link" id="tab-ti-hx_@(id)" data-type="2" data-no="@(id)" data-toggle="pill" data-target="#ti-hx_@(id)">环形网格</a>
                                                    </li>
                                                </ul>
                                            </div>
                                            <div class="tab-content" style="width: 100%; height: 500px; padding: 0 5px 5px 5px;">
                                                <div class="tab-pane fade" id="ti-fc_@(id)" style="height: 100%;">
                                                    <div id="ti-fc-box_@(id)" class="chart-box" style="height: 100%;"></div>
                                                </div>
                                                <div class="tab-pane fade" id="ti-sx_@(id)" style="height: 100%;">
                                                    <div id="ti-sx-box_@(id)" class="chart-box" style="height: 100%;"></div>
                                                </div>
                                                <div class="tab-pane fade" id="ti-hx_@(id)" style="height: 100%;">
                                                    <div id="ti-hx-box_@(id)" class="chart-box" style="height: 100%;"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="inner-box" style="width: 25%; margin-left: 5px;">
                                    <div class="inner-title">组织角色</div>
                                    <div class="inner-content ">
                                        <div id="cmd-info_@(id)" class="tab-box fdc">

                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <div id="group-eval_@(id)" class="portrait-box">
                            <div class="title-box ra">
                                <div class="left">
                                    <span>演练评估</span>
                                </div>
                                <div class="right">
                                    <div id="score-chart_@(id)" style="width: 100%; height: 100%"></div>
                                </div>
                            </div>

                            <div class="content-box">
                                <div class="inner-box" style="width: 38%;">
                                    <div class="inner-title">四功评估</div>
                                    <div class="inner-content fdc eval-box">
                                        <div class="chart-box" id="sg-chart_@(id)" style="width: 100%; height: 100%"></div>
                                        <div class="" style="height: 100px">
                                            <div class="span-textarea" style="" data-type="@(PortraitRemarkTypeDefinition.SiGong)" data-id="@(id)">
                                                <span id="sg_remark_@(id)" class="span-remark @(isEdit?"generate":"")"></span>
                                                @if (isEdit)
                                                {
                                                    <button class="btn btn-iwb btn-sm" data-type="@(PortraitRemarkTypeDefinition.SiGong)">信息提示</button>
                                                    <textarea id="sg_text_@(id)" name="" style="width: 100%; height: 100%;" placeholder="四功评估简要说明"></textarea>
                                                }

                                            </div>
                                        </div>

                                    </div>

                                </div>
                                <div class="inner-box" style="width: 38%; margin-left: 5px;">
                                    <div class="inner-title">五力评估</div>
                                    <div class="inner-content fdc eval-box">
                                        <div class="chart-box" id="wl-chart_@(id)" style="width: 100%; height: 100%"></div>
                                        <div class="" style="height: 100px">
                                            <div class="span-textarea" style="" data-type="@(PortraitRemarkTypeDefinition.WuLi)" data-id="@(id)">
                                                <span id="wl_remark_@(id)" class="span-remark @(isEdit?"generate":"")"></span>
                                                @if (isEdit)
                                                {
                                                    <button class="btn btn-iwb btn-sm" data-type="@(PortraitRemarkTypeDefinition.WuLi)">信息提示</button>
                                                    <textarea id="wl_text_@(id)" name="" style="width: 100%; height: 100%;" placeholder="五力评估简要说明"></textarea>
                                                }

                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="inner-box" style="width: 24%; margin-left: 5px;">
                                    <div style="height: 50%;">
                                        <div class="inner-title">演练成绩与不足</div>
                                        <div class="inner-content eval-box">
                                            <div class="span-textarea" style="" data-type="@(PortraitRemarkTypeDefinition.Short)" data-id="@(id)">
                                                <span id="short_remark_@(id)" class="span-remark @(isEdit?"generate":"")"></span>
                                                @if (isEdit)
                                                {
                                                    <button class="btn btn-iwb btn-sm" data-type="@(PortraitRemarkTypeDefinition.Short)">信息提示</button>
                                                    <textarea id="short_text_@(id)" name="" style="width: 100%; height: 100%;" placeholder="演练成绩与不足简要说明"></textarea>
                                                }
                                            </div>
                                        </div>
                                    </div>
                                    <div style="height: 50%;margin-top: 10px">
                                        <div class="inner-title">专家评语</div>
                                        <div class="inner-content eval-box">
                                            <div class="span-textarea" style="" data-type="@(PortraitRemarkTypeDefinition.ZhuanJia)" data-id="@(id)">
                                                <span id="zj_remark_@(id)" class="span-remark @(isEdit?"generate":"")"></span>
                                                @if (isEdit)
                                                {
                                                    <button class="btn btn-iwb btn-sm" data-type="@(PortraitRemarkTypeDefinition.ZhuanJia)">信息提示</button>
                                                    <textarea id="zj_text_@(id)" name="" style="width: 100%; height: 100%;" placeholder="专家评语"></textarea>
                                                }
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            }
        </div>
    }
</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>
        $(function() {
            $('.nav-box .nav .nav-item a.nav-link').on('show.bs.tab',
                function(e) {
                    var id = $(e.target).data('id');
                    GetGroupInfo(id);
                });
            $('.nav-box .nav .nav-item').eq(0).find('a.nav-link').tab('show');
            $('.training .nav-item a.nav-link').on('shown.bs.tab',
                function(e) {
                    var id = $(e.target).data('target');
                    var active = $(id + ' .tab-header').find('.nav .nav-item a.nav-link.active');
                    if (active.length) {
                        active.removeClass('active').tab('show');
                    } else {
                        $(id + ' .tab-header').find('.nav .nav-item').eq(0).find('a.nav-link').tab('show');
                    }
                });
            @if (isEdit)
            {
                <text>
                    $('.span-textarea').off('click.text').on('click.text',
                        function() {
                            EditInfo($(this));
                        });

                    $('.span-textarea button').on('mousedown',
                        function(e) {
                            e.preventDefault();
                            var $that = $(this);
                            var type = $that.data('type');

                            PortraitRemark($that, type);
                        });
                </text>
            }

        });

        function RefreshPortrait() {
            $.iwbAjax4({
                url: abp.appUrl + "Portrait/CleanPortrait?no=@(campNo)",
                success: function() {
                    $('.nav-box .nav .nav-item').eq(0).find('a.nav-link').removeClass('active').tab('show').trigger('shown.bs.tab');
                }
            });
        }

        function GetGroupInfo(no) {
            $.iwbAjax4({
                url: abp.appUrl + "Portrait/GenerateGroupPortrait?no=" + no,
                success: function(res) {
                    if (res) {
                        FormatterGroupInfo(res, no);
                    }
                }
            });
        }

        function FormatterGroupInfo(data, no) {
            var line = '<dl class="line"><dt>{0}</dt><dd>{1}</dd></dl>', str = '';
            str += line.format("参演单位:", data.groupName ? data.groupName : "");
            str += line.format("演练主题:", data.campName ? data.campName : "");
            str += line.format("演练地点:", data.address ? data.address : "");
            str += line.format("演练时间:", data.startDate ? new Date(data.startDate).format("yyyy-MM-dd hh:mm") : "");
            $('#group-info_' + no).find('.title-box .right').html(str);
            str = '';
            str += line.format("演练用时:", '<span class="mid">{0}</span>分钟'.format(data.trainingMinute));
            str += line.format("情景数量:", '<span class="mid">{0}</span>条'.format(data.sceneCount));
            str += line.format("组织角色:", '<span class="mid">{0}</span>个'.format(data.roleCount));
            str += line.format("下达指令:", '<span class="mid">{0}</span>条'.format(data.cmdCount));
            $('#group-process_' + no).find('.title-box .right').html(str);
            $('#scene_remark_' + no).html(data.sceneRemark ? data.sceneRemark : "");
            $('#sg_remark_' + no).html(data.siGongRemark ? data.siGongRemark : "");
            $('#wl_remark_' + no).html(data.wuLiRemark ? data.wuLiRemark : "");
            $('#short_remark_' + no).html(data.shortRemark ? data.shortRemark : "");
            $('#zj_remark_' + no).html(data.zhuanJiaRemark ? data.zhuanJiaRemark : "");
            FormatterRoundScene(data.sceneInfos, no);
            FormatterRoleCmdInfo(data.roleCmdInfos, no);
            try {
                var trainingData = JSON.parse(data.trainingInfos);
                FormatterChartBox(trainingData, no, 'fc', FcRoundChart);
                FormatterChartBox(trainingData, no, 'sx', TreePathChart);
                FormatterChartBox(trainingData, no, 'hx', TreePathChart);

                $('#tab-ti-fc_' + no).tab('show').trigger('shown.bs.tab');
            } catch (e1) {
                console.log(e1);
            }

            try {
                var scoreData = JSON.parse(data.roundScoreInfos);
                RoundScoreChart(no, scoreData);

            } catch (e3) {
                console.log(e3);
            }
            try {
                var sgData = JSON.parse(data.siGongInfos);
                SiGongChart(no, sgData);
            } catch (e4) {
                console.log(e4);
            }
            try {
                var wlData = JSON.parse(data.wuLiInfos);
                WuLiChart(no, wlData);
            } catch (e5) {
                console.log(e5);
            }
        }

        function FormatterRoundScene(dataStr, no) {
            var str = '';
            try {
                var data = JSON.parse(dataStr);
                if (data && data.length > 0) {
                    var str1 = '', str2 = '';
                    data.forEach(function(v) {
                        str1 +=
                            '<li class="nav-item"><a class="nav-link" data-toggle="pill" data-target="#scene_{0}_{1}" role="tab">第{1}轮</a></li>'
                            .format(no, v.roundIndex);
                        str2 +=
                            '<div class="tab-pane fade" id="scene_{0}_{1}"><div class="body-content">{2}</div></div>'
                            .format(no, v.roundIndex, FormatterScene(v.sceneInfos));
                    });
                    str += '<div class="tab-header"><ul class="nav">{0}</ul></div>'.format(str1);
                    str += '<div class="tab-content" style="width: 100%;">{0}</div>'.format(str2);
                }
            } catch (e) {
                console.log(e);
            }
            $('#scene-info_' + no).empty();
            if (str) {
                $('#scene-info_' + no).html(str);
                $('#scene-info_' + no).find('.nav-item').eq(0).find('a.nav-link').tab('show');
                OverlayScrollbar($('#scene-info_' + no + ' .body-content'));

            }
        }

        function FormatterScene(data) {
            var str = '';
            if (data && data.length > 0) {
                data.forEach(function(v) {
                    str +=
                        '<div class="scene-box"><span class="name">{0}:</span><span class="content">{1}</span></div>'
                        .format(v.name,
                            v.description);
                });
            }
            return str;
        }

        function FormatterChartBox(data, no, idStr, callBack) {
            var str = '';
            try {
                // var data = JSON.parse(dataStr);
                if (data && data.length > 0) {
                    var str1 = '', str2 = '';
                    data.forEach(function(v) {
                        str1 +=
                            '<li class="nav-item"><a class="nav-link" data-toggle="pill" data-target="#{2}-chart_{0}_{1}" data-no="{0}" data-round="{1}"  role="tab">第{1}轮</a></li>'
                            .format(no, v.roundIndex, idStr);
                        str2 +=
                            '<div class="tab-pane fade" id="{2}-chart_{0}_{1}" style="width: 100%; height: 100%;"><div class="body-content"  style="width: 100%; height: 100%;"><div id="{2}-container_{0}_{1}" style="width:100%;height:100%"></div></div></div>'
                            .format(no, v.roundIndex, idStr);
                    });
                    str += '<div class="tab-header"><ul class="nav">{0}</ul></div>'.format(str1);
                    str += '<div class="tab-content" style="width: 100%;">{0}</div>'.format(str2);
                }
            } catch (e) {
                console.log(e);
            }
            $('#ti-' + idStr + '-box_' + no).empty();
            if (str) {
                $('#ti-' + idStr + '-box_' + no).html(str);
                $('#ti-' + idStr + '-box_' + no + '>.tab-header').find('.nav .nav-item a.nav-link').on('shown.bs.tab',
                    function(e) {
                        if (callBack && typeof callBack == 'function') {
                            var no = $(e.target).data('no'),
                                round = $(e.target).data('round');
                            var roundData = data.find(function(v) {
                                return v.roundIndex == round;
                            });
                            callBack(no, roundData, idStr);
                        }
                    });
                //$('#ti-' + idStr + '-box_' + no + '>.tab-header').find('.nav .nav-item').eq(0).find('a.nav-link').tab('show');
                OverlayScrollbar($('#ti-' + idStr + '-box_' + no + ' .body-content'));
            }

        }

        function FormatterRoleCmdInfo(dataStr, no) {
            var str = '';
            try {
                var data = JSON.parse(dataStr);
                if (data && data.length > 0) {
                    var str1 = '', str2 = '';
                    data.forEach(function(v) {
                        str1 +=
                            '<li class="nav-item"><a class="nav-link" data-toggle="pill"  data-id="{0}_{1}" data-target="#cmd_{0}_{1}" role="tab">第{1}轮</a></li>'
                            .format(no, v.roundIndex);
                        str2 += '<div class="tab-pane fade" id="cmd_{0}_{1}"><div class="body-content">{2}</div></div>'
                            .format(no,
                                v.roundIndex,
                                FormatterCmd(v.roleCmdInfos, 'cmd-role_{0}_{1}'.format(no, v.roundIndex)));
                    });
                    str += '<div class="tab-header"><ul class="nav">{0}</ul></div>'.format(str1);
                    str += '<div class="tab-content" style="width: 100%;">{0}</div>'.format(str2);
                }
            } catch (e) {
                console.log(e);
            }
            $('#cmd-info_' + no).empty();
            if (str) {
                $('#cmd-info_' + no).html(str);

                $('#cmd-info_' + no + '>.tab-header').find('.nav .nav-item a.nav-link').on('shown.bs.tab',
                    function(e) {
                        var id = $(e.target).data('id');
                        $('#cmd-role_' + id).find('.nav .nav-item').eq(0).find('a.nav-link').tab('show');
                        OverlayScrollbar($('#cmd-role_' + no + ' .body-content'));
                    });
                $('#cmd-info_' + no + '>.tab-header').find('.nav .nav-item').eq(0).find('a.nav-link').tab('show');
                OverlayScrollbar($('#cmd-info_' + no + ' .body-content'));

            }
        }

        function FormatterCmd(data, no) {
            var str = '';
            if (data && data.length > 0) {
                var str1 = '', str2 = '', i = 0;
                data.forEach(function(v) {
                    var ran = new Date().getTime() + Math.floor(Math.random() * 10000);
                    str1 +=
                        '<li class="nav-item"><a class="nav-link" data-toggle="pill"  data-target="#role_{0}" role="tab">{1}</a></li>'
                        .format(ran, v.roleName);
                    var str3 = '';
                    if (v.cmdInfo) {
                        v.cmdInfo.forEach(function(val) {
                            var arr = val.split('|');
                            var style = arr[0] == '@(LogStateDefinition.NotSend)' ? "not-send" : "";
                            str3 += '<div class="cmd-box  {0}"><span class="content">{1}</span></div>'.format(style,
                                arr[1]);
                        });
                    }
                    str2 +=
                        '<div class="tab-pane fade" id="role_{0}" style=""><div class="body-content" style="height: 100%;">{1}</div></div>'
                        .format(ran, str3);
                    i++;
                });
                str += '<div class="tab-box" id="{0}" style="height: 100%;">'.format(no);
                str +=
                    '<div class="tab-header" style="height: 100%;width:200px; "><ul class="nav nav-role">{0}</ul></div>'
                    .format(str1);
                str +=
                    '<div class="tab-content" style="width: 100%;height: 100%;padding:0;border:none;border-left: 2px solid #007bff;border-radius: 0;">{0}</div>'
                    .format(str2);
                str += '</div>';
            }
            return str;
        }
    </script>

    <script>
        var color = ['#FF3030', '#FF6A6A', '#FFD700', '#54FF9F', '#00E5EE'];
        var roundColor = ['#FFA939', '#FF6A69', '#35D480'];

        //推演网格
        function TreePathChart(groupNo, data, idStr) {
            if (data) {
                console.log("TreePath", data);
            } else {
                console.log("TreePath-Null");
                return;
            }
            var isRadial = idStr == "hx";
            idStr = idStr + '-container_' + groupNo + '_' + data.roundIndex;
            if ($('#' + idStr).data('use') === true) {
                return;
            }
            var treeChart = echarts.init(document.getElementById(idStr)), seriesOpt = {};
            var d = ConvertTreeData(data.infos, 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: 15,
                initialTreeDepth: 2,
                label: {
                    position: 'top',
                    rotate: 0,
                    fontSize: 13,
                    fontWeight: 'normal',
                    distance: 5
                },
                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 = {
                tooltip: {
                    trigger: 'item',
                    triggerOn: 'mousemove'
                },
                series: [o]
            };
            treeChart.setOption(option);
            $('#' + idStr).data('use', true);
        }

        //蜂巢网格
        function FcRoundChart(groupNo, 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_' + groupNo + '_' + data.roundIndex;
                if ($('#' + idStr).data('use') === true) {
                    return;
                }
                window.Highcharts.chart(idStr,
                    {
                        chart: {
                            reflow: true,
                            height: '60%',
                            margin: 5,
                            inverted: false,
                            backgroundColor: 'transparent'

                        },
                        exporting: {
                            enabled: false
                        },
                        title: {
                            visible: false,
                            text: null
                        },
                        xAxis: {
                            visible: false
                        },
                        yAxis: {
                            visible: false,
                            reversed: true
                        },
                        colorAxis: {
                            visible: false,
                            dataClasses: [
                                {
                                    from: 0,
                                    to: 1,
                                    color: '#c7f0f3',
                                    name: ''
                                }, {
                                    from: 1,
                                    to: 2,
                                    color: '#02595a',
                                    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(groupNo, data) {
            if ($('#score-chart_' + groupNo).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-chart_' + groupNo));
            var series = [];
            for (var i = 1; i <= data.length; i++) {
                var temp = {
                    name: '第 ' + i + ' 轮',
                    type: 'bar',
                    stack: '总分',
                    label: {
                        normal: {
                            show: true,
                            position: 'inside',
                            color: "#fff",
                            fontSize: 14,
                            fontWeight: 'bold',
                            formatter: '{a}:  {c} 分'
                        }
                    },
                    barWidth: 39,
                    barMinHeight: 140,
                    itemStyle: {},
                    data: [data[i - 1]]
                }
                if (i === 1) {
                    temp.itemStyle = {
                        color: roundColor[0],
                        barBorderRadius: [30, 0, 0, 30]
                    }
                    temp.label.normal.color = "#fff";
                } else if (i === data.length) {
                    temp.itemStyle = {
                        color: roundColor[2],
                        barBorderRadius: [0, 30, 30, 0]
                    }
                    temp.label.normal.color = "#fff";
                } else {
                    if (i % 3 === 1) {
                        temp.itemStyle = {
                            color: roundColor[0]
                        }
                        temp.label.normal.color = "#fff";
                    } else if (i % 3 === 2) {
                        temp.itemStyle = {
                            color: roundColor[1]
                        }
                    } else if (i % 3 === 0) {
                        temp.itemStyle = {
                            color: roundColor[2]
                        }
                        temp.label.normal.color = "#fff";
                    }
                }
                series.push(temp);
            }
            //console.log(series);
            var option = {
                grid: {
                    left: 30,
                    right: 140
                },
                xAxis: {
                    show: false,
                    type: 'value'
                },
                yAxis: {
                    show: false,
                    type: 'category',
                    data: ['分数']
                },
                series: series
            };
            scoreChart.setOption(option);
            $('#score-chart_' + groupNo).data('use', true);

        }

        //四功
        function SiGongChart(groupNo, data) {
            if ($('#sg-chart_' + groupNo).data('use') === true) {
                return;
            }
            if (data && data.length > 0) {
                console.log("SiGong", data);
            } else {
                console.log("SiGong-Null");
                return;
            }
            var siGongChart = echarts.init(document.getElementById('sg-chart_' + groupNo));
            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);
                for (var q = 0; q < 3; q++) {
                    sgData[q].push(data[i - 1].tagScoreInfos[q]);
                }

            }
            for (var j = 1; j < 4; j++) {
                var temp = {
                    name: '第 ' + j + ' 轮',
                    type: 'bar',
                    label: {
                        normal: {
                            show: true,
                            formatter: '{a}:{c} 分',
                            color: "#fff",
                            rotate: 90
                        }
                    },
                    barMinHeight: 40,
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: '#FFA939' // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: '#27303f' // 100% 处的颜色
                                }
                            ]
                        },
                        barBorderRadius: [50, 50, 0, 0]
                        //shadowBlur: 2,
                        //shadowColor: "#666",
                        //shadowOffsetX: 2,
                        //shadowOffsetY: 1
                    },
                    data: sgData[j - 1]
                }
                if (j === 1) {
                    //temp.itemStyle = {
                    //    color: roundColor[0]
                    //}
                    temp.itemStyle.color.colorStops[0].color = roundColor[0];
                    temp.label.normal.color = "#fff";
                } else if (j === 2) {
                    //temp.itemStyle = {
                    //    color: roundColor[1]
                    //}
                    temp.itemStyle.color.colorStops[0].color = roundColor[1];
                } else {
                    //temp.itemStyle = {
                    //    color: roundColor[2]
                    //}
                    temp.itemStyle.color.colorStops[0].color = roundColor[2];
                    temp.label.normal.color = "#fff";
                }
                series.push(temp);
            }
            var option = {
                grid: {
                    top: 20,
                    bottom: 30,
                    left: 30,
                    right: 30,
                    borderColor: '#2d8aea'
                },
                //legend: {
                //    data: legendDate
                //},
                xAxis: {
                    type: 'category',
                    data: legendDate,
                    axisLabel: {
                        color: '#fff'
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#2d8aea'
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        color: '#fff'
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#2d8aea'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#2d8aea'
                        }
                    }
                },
                series: series
            };
            console.log(option);
            siGongChart.setOption(option);
            $('#sg-chart_' + groupNo).data('use', true);
        }

        //五力
        function WuLiChart(groupNo, data) {
            if ($('#wl-chart_' + groupNo).data('use') === true) {
                return;
            }
            if (data && data.length > 0) {
                console.log("WuLi", data);
            } else {
                console.log("WuLi-Null");
                return;
            }
            var wuLiChart = echarts.init(document.getElementById('wl-chart_' + groupNo));
            var series = [];
            var indicatorData = [];
            var wlData = [
                { name: '第 1 轮', value: [], lineStyle: { color: roundColor[0] } },
                { name: '第 2 轮', value: [], lineStyle: { color: roundColor[1] } },
                { name: '第 3 轮', value: [], lineStyle: { color: roundColor[2] } }
            ];
            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] });
                for (var q = 0; q < 3; q++) {
                    wlData[q].value.push(data[i - 1].tagScoreInfos[q]);
                }
            }
            for (var j = 0; j < 4; j++) {
                var temp = {
                    name: '第 ' + j + ' 轮',
                    type: 'radar',
                    radarIndex: j
                }
                if (j === 0) {
                    temp.name = '三轮五力雷达图';
                    temp.data = wlData;
                } else {
                    if (j === 1) {
                        temp.lineStyle = {
                            color: roundColor[0]
                        }
                        //temp.label.normal.color = "#fff";
                    } else if (j === 2) {
                        temp.lineStyle = {
                            color: roundColor[1]
                        }
                        // temp.label.normal.color = "#fff";
                    } else {
                        temp.lineStyle = {
                            color: roundColor[2]
                        }
                    }
                    temp.data = [wlData[j - 1]];
                }

                series.push(temp);
            }
            var option = {
                grid: {
                    top: 10,
                    bottom: 10,
                    left: 30,
                    right: 30
                },
                radar: [
                    {
                        indicator: indicatorData,
                        center: ['30%', '50%'],
                        radius: 120,
                        splitNumber: 4,
                        axisLine: {
                            lineStyle: {
                                color: ['#C1CDCD']
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                color: ['#F0FFFF', '#C1CDCD']
                            }
                        }
                    },
                    {
                        indicator: indicatorData,
                        radius: 40,
                        center: ['77%', '20%'],
                        splitNumber: 3,
                        nameGap: 5,
                        axisLine: {
                            show: false
                        },
                        splitLine: {
                            lineStyle: {
                                color: ['#F0FFFF', '#C1CDCD']
                            }
                        }
                    },
                    {
                        indicator: indicatorData,
                        radius: 40,
                        center: ['77%', '50%'],
                        splitNumber: 3,
                        nameGap: 5,
                        axisLine: {
                            show: false
                        },
                        splitLine: {
                            lineStyle: {
                                color: ['#F0FFFF', '#C1CDCD']
                            }
                        }
                    },
                    {
                        indicator: indicatorData,
                        center: ['77%', '80%'],
                        radius: 40,
                        splitNumber: 3,
                        nameGap: 5,
                        axisLine: {
                            show: false
                        },
                        splitLine: {
                            lineStyle: {
                                color: ['#F0FFFF', '#C1CDCD']
                            }
                        }
                    }
                ],
                series: series
            };
            //console.log(option);
            wuLiChart.setOption(option);
            $('#wl-chart_' + groupNo).data('use', true);
        }

        function ConvertTreeData(data, isRadial) {
            var newData = [];
            var color1 = "#1E90FF",
                color2 = "#999",
                width1 = isRadial ? 2 : 4,
                width2 = isRadial ? 1 : 3;
            if (data && data.length) {
                data.forEach(function (v) {
                    var newItem = $.extend(true, {}, {
                        itemStyle: {
                            color: color2,
                            borderColor: color2,
                            width: width2
                        },
                        label: {
                            color: "#1E90FF"
                        },
                        lineStyle: {
                            color: color2,
                            borderColor: color2,
                            width: width2
                        }
                    }, v);
                    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>

    <script>
        function EditInfo($that) {
            var $content = $that.find('span'), $btn = $that.find('button'), $text = $that.find('textarea');
            if ($text.css('display') === 'flex') {
                return;
            }
            var text = $content.text();
            $content.css('display', 'none');
            $btn.css('display', 'block');
            $text.css('display', 'flex').off('blur').on('blur.text',
                function (e) {
                    e.preventDefault();
                    SaveInfo($(this));
                });
            $text.val(text);
            $text[0].focus();
        }

        function SaveInfo($that) {
            var text = $that.val(),
                $that2 = $that.closest('.span-textarea'),
                $content = $that2.find('span'),
                $btn = $that2.find('button');
            var type = $that2.data('type');
            var groupNo = $that2.data('id');
            $that.css('display', 'none');
            $btn.css('display', 'none');
            $content.text(text).css('display', 'flex');
            UpdateRemark({
                groupNo: groupNo,
                type: type,
                remark: text
            });
        }

        function UpdateRemark(data) {
            $.iwbAjax5({
                url: abp.appUrl + 'Portrait/UpdateRemark',
                data: data
            });
        }

        function PortraitRemark($that, type) {
            $(".span-textarea textarea").off('blur.text');
            var no = $($that).closest(".tab-pane").data("id");
            $.iwbAjax4({
                url: abp.appUrl + 'PortraitRemark/GetRemarkByType?type=' + type + "&no=" + no,
                success: function (res) {
                    if (res && res.length > 0) {
                        var str = '';
                        var $text = $that.closest('.span-textarea').find('textarea');
                        res.forEach(function (v) {
                            str +=
                                '<div class="tip-remark"><span>{0}</span><button class="btn btn-iwb btn-sm select-remark">选择</button></div>'
                                    .format(v.remarkContent);
                        });
                        $(document).iwbModal('create',
                            {
                                modal: 'modal-remark',
                                modaltitle: '预置信息提示',
                                modalSize: 'modal-lg',
                                modalBody: str,
                                shownAfter: function () {
                                    $('#modal-remark .select-remark').off('mousedown.addInfo').on('mousedown.addInfo',
                                        function (e) {
                                            e.preventDefault();
                                            var text = $(this).closest('.tip-remark').find('span').text();
                                            $text.val($text.val() + text);
                                            $(this).prop('disabled', true);
                                        });
                                    $('#modal-remark').off('hidden.bs.modal').on('hidden.bs.modal',
                                        function () {
                                            $text[0].focus();
                                            $('.span-textarea textarea').off('blur.text').on('blur.text',
                                                function (e) {
                                                    e.preventDefault();
                                                    SaveInfo($(this));
                                                });

                                        });
                                }
                            });
                    } else {
                        abp.message.warn('未查询到提示信息！').done(function () {
                            $('.span-textarea textarea').off('blur.text').on('blur.text',
                                function (e) {
                                    e.preventDefault();
                                    SaveInfo($(this));
                                });
                        });
                    }
                },
                error: function () {
                    $(".span-textarea textarea").off('blur.text').on('blur.text',
                        function () {
                            SaveInfo($(this));
                        });
                }
            });
        }
    </script>

    <!--格式化-->
    <script id="formatter-script" type="text/javascript">
        function TypeFormatter(v) {
            var name = $('#hid-type option[value="' + v + '"]').text();
            switch (v) {
            case 0:
                return '<span class="label label-danger">' + name + '</span>';
            default:
                return '<span class="label label-info">' + name + '</span>';
            }
        }


        function StateFormatter(v) {
            var name = $('#hid-state option[value="' + v + '"]').text();
            switch (v) {
            case '@(CampGroupStateDefinition.New)':
                return '<span class="label label-info">' + name + '</span>';
            case '@(CampGroupStateDefinition.Run)':
                return '<span class="label label-iwb">' + name + '</span>';
            case '@(CampGroupStateDefinition.Error)':
            case '@(CampGroupStateDefinition.End)':
                return '<span class="label label-danger">' + name + '</span>';
            default:
                return '<span class="label label-info">' + name + '</span>';
            }
        }
    </script>

}


<section style="display: none">
    <select id="hid-type">
        <option value=""></option>
    </select>
    <select id="hid-camp-state">
        @(Html.Raw(campState))
    </select>
    <select id="hid-group-state">
        @(Html.Raw(groupState))
    </select>
    @*@Html.DropDownList("hid-type", type)*@
</section>