puti
/
snd-escloud


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293
							<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{admin/common/common}">
<head>
    <title>诊断用户组列表</title>
</head>
<body layout:fragment="content">
<style>
    .stars {
        white-space: nowrap;
        text-align: center;
    }

    .stars li {
        display: inline-block;
        color: #ADADAD;
        cursor: pointer;
        list-style: none;
    }

    .stars li .iconfont {
        font-size: 30px;
    }

    .textarea-style {
        border: solid 1px #dadada;
        padding: 5px;
        width: 100%;
        height: 80px;
        resize: none;
    }

    .dj-style {
        margin-left: 10px;
        padding-top: 5px;
    }

    .chart_data {
        position: relative;
        border: solid 0px #dadada;
        padding: 0 5px;
        margin-top: 20px;
    }
</style>
<div class="page-container">
    <form class="form form-horizontal" id="form-add" style="padding-left: 13px">
        <div class="row cl" style="text-align: center;font-size: 20px;">
            诊断满意度打分
        </div>
        <div class="row cl">
            <div class="chart_data mt-20 col-xs-6 col-sm-6" id="left_container">
                <div class="clearfix">
                    <span class="pull-left" style="margin-top: 5px;">打分：</span>
                    <ul class="stars pull-left">
                        <li><i class="iconfont">&#xe610;</i></li>
                        <li><i class="iconfont">&#xe610;</i></li>
                        <li><i class="iconfont">&#xe610;</i></li>
                        <li><i class="iconfont">&#xe610;</i></li>
                        <li><i class="iconfont">&#xe610;</i></li>
                    </ul>
                    <div style="text-align: center">
                        <span id="pjdj" class="dj-style"></span>
                        <input hidden name="satisfaction_score" th:value="${satisfaction_score}"
                               th:id="satisfaction_score"/>
                        <input hidden name="id" th:value="${id}"/>
                    </div>
                </div>
            </div>
            <div class="chart_data mt-20 col-xs-6 col-sm-6" id="right_container">
                <div class="clearfix">
                    <span class="pull-left" style="margin-top: 5px;">反馈和建议：</span>
                    <div class="pull-left" style="width: 480px;">
                        <textarea class="textarea-style" name="feedback" th:id="feedback"
                                  th:value="${feedback}">[[${feedback}]]</textarea>
                    </div>
                </div>
            </div>
        </div>
        <div class="row cl">
            <div style="text-align: center">
                <a class="btn btn-primary radius" onclick="release()"><i class="Hui-iconfont">&#xe632;</i>确定</a>
                <a onClick="removeIframe();" class="btn btn-default radius" type="button">&nbsp;&nbsp;取消&nbsp;&nbsp;</a>
            </div>
        </div>
        <div class="row cl">
            <div id="container" style="min-width: 400px; max-width: 600px; height: 400px; margin: 0 auto"></div>
            <div class="" style="text-align: center; margin: 30px 0;">
                <p>诊断评分：<span id="cj" class="ft-color-red">[[${diagnostic_score}]]</span></p>
            </div>
        </div>
    </form>
</div>
<script type="text/javascript" th:src="@{/js/lib/highcharts/highcharts.js}"></script>
<script type="text/javascript" th:src="@{/js/lib/highcharts/exporting.js}"></script>
<script type="text/javascript" th:src="@{/js/lib/highcharts/highcharts-zh_CN.js}"></script>
<script type="text/javascript" th:src="@{/js/lib/highcharts/highcharts-more.js}"></script>
<script type="text/javascript" src="https://www.highcharts.com/samples/data/usdeur.js"></script>
<script th:inline="javascript">
    $(function () {

        //初始化星星已选中情况
        initChosenStars();

        //为星星设置hover效果
        var isClicked = false;
        var beforeClickedIndex = -1;
        var clickNum = 0; //点击同一颗星次数

        $('.stars li').hover(
            function () {
                if (!isClicked) {
                    $(this).css('color', '#F0AD4E');
                    var index = $(this).index();

                    for (var i = 0; i <= index; i++) {
                        $('li:nth-child(' + i + ')').css('color', '#F0AD4E');
                    }
                }
            },
            function () {
                if (!isClicked) {
                    $('li').css('color', '#ADADAD');
                }
            }
        );

        //星星点击事件
        $('.stars li').click(function () {
            $('li').css('color', '#ADADAD');
            isClicked = true;
            var index = $(this).index();

            for (var i = 1; i <= index + 1; i++) {
                $('li:nth-child(' + i + ')').css('color', '#F0AD4E');
                if (index == 0) {
                    $('#pjdj').text("不满意")
                    $('#satisfaction_score').val(1)
                } else if (index == 1) {
                    $('#pjdj').text("不太满意")
                    $('#satisfaction_score').val(2)
                } else if (index == 2) {
                    $('#pjdj').text("马马虎虎")
                    $('#satisfaction_score').val(3)
                } else if (index == 3) {
                    $('#pjdj').text("比较满意")
                    $('#satisfaction_score').val(4)
                } else if (index == 4) {
                    $('#pjdj').text("满意")
                    $('#satisfaction_score').val(5)
                } else {
                    $('#pjdj').text("")
                }
            }
            if (index == beforeClickedIndex) { //两次点击同一颗星星 该星星颜色变化
                clickNum++;
                if (clickNum % 2 == 1) {
                    $('li:nth-child(' + (index + 1) + ')').css('color', '#ADADAD');
                    $('#pjdj').text("")
                } else {
                    $('li:nth-child(' + (index + 1) + ')').css('color', '#F0AD4E');
                }
                if (index - 1 == 0) {
                    $('#pjdj').text("不满意")
                    $('#satisfaction_score').val(1)
                } else if (index - 1 == 1) {
                    $('#pjdj').text("不太满意")
                    $('#satisfaction_score').val(2)
                } else if (index - 1 == 2) {
                    $('#pjdj').text("马马虎虎")
                    $('#satisfaction_score').val(3)
                } else if (index - 1 == 3) {
                    $('#pjdj').text("比较满意")
                    $('#satisfaction_score').val(4)
                } else if (index - 1 == 4) {
                    $('#pjdj').text("满意")
                    $('#satisfaction_score').val(5)
                } else {
                    $('#pjdj').text("")
                }
            } else {
                clickNum = 0;
                beforeClickedIndex = index;
            }
        });

        var diagnosticReport = [[${diagnosticReport}]];

        var chart = Highcharts.chart('container', {
            chart: {
                polar: true,
                type: 'area'
            },
            title: {
                text: '《科技创新能力综合评估诊断报告》',
                x: -80
            },
            pane: {
                size: '80%'
            },
            xAxis: {
                categories: ['主体基础', '人才结构', '营收投入', '知识产权', '研发管理'],
                tickmarkPlacement: 'on',
                lineWidth: 0
            },
            yAxis: {
                gridLineInterpolation: 'polygon',
                lineWidth: 0,
                min: 0
            },
            tooltip: {
                shared: true,
                pointFormat: '<span style="color:{series.color}">{series.name}: <b>{point.y:,.0f}</b><br/>'
            },
            legend: {
                align: 'right',
                verticalAlign: 'top',
                y: 70,
                layout: 'vertical'
            },
            series: [{
                name: '诊断结果',
                data: [diagnosticReport.main_fondation, diagnosticReport.talent_structure, diagnosticReport.revenue_investment, diagnosticReport.intellectual_property, diagnosticReport.development_management],
                pointPlacement: 'on'
            }],
            exporting: {
                filename: '《科技创新能力综合评估诊断报告》'
            }
        });
    });

    function initChosenStars() {
        //初始化星星已选中情况
        var chosenStars = [[${satisfaction_score}]];
        if (chosenStars) {
            for (var i = 0; i <= chosenStars; i++) {
                $('li:nth-child(' + i + ')').css('color', '#F0AD4E');
            }
        }
        if (chosenStars == 1) {
            $('#pjdj').text("不满意")
        } else if (chosenStars == 2) {
            $('#pjdj').text("不太满意")
        } else if (chosenStars == 3) {
            $('#pjdj').text("马马虎虎")
        } else if (chosenStars == 4) {
            $('#pjdj').text("比较满意")
        } else if (chosenStars == 5) {
            $('#pjdj').text("满意")
        }
    }

    function release() {
        var score = $("#satisfaction_score").val();
        var feedback = $("#feedback").text();
        if (!score) {
            errorMessage("请选择满意度");
            return;
        }
        if (feedback) {
            $("#feedback").text($.trim(feedback));
            if ($.trim(feedback).length > 2000) {
                errorMessage("反馈和建议最多支持2000个字符");
                return;
            }
        }
        $("#form-add").ajaxSubmit({
            type: 'post',
            url: pagePath + "/policy/save/evaluation",
            dataType: "json",
            data: {},
            success: function (data) {
                if (data.success) {
                    succeedMessage(data.message);
                    setTimeClose();
                } else {
                    errorMessage(data.message);
                }
            },
            error: function () {
                errorMessage('系统错误!');
            }
        });
    }

    //取消
    function removeIframe() {
        var index = parent.layer.getFrameIndex(window.name);
        parent.layer.close(index);
    }
</script>
</body>
</html>