puti
/
snd-escloud


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239
							<!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>
    </form>
</div>

<script th:inline="javascript">
    $(function () {
        var star = $("#satisfaction_score").val();
        //初始化星星已选中情况
        initChosenStars();

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

        $('.stars li').hover(
            function () {
                if (!isClicked && star<0) {
                    $(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 && star<0) {
                    $('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;
            }
        });
    });

    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>