hexiugang
/
iamberry-common-parent


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429
							<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
    <#include "/base/add_base.ftl">
		<title>维修统计</title>
        <style>
            .my-title{font-weight: 500;padding-left: 15px;position: relative;}
            .my-title:after{content: '';position: absolute;left: 0;top:12%;width: 3px;height: 80%;background: #32a3d8;}
            .my-input{padding: 8px 5px;width: 80%;border:1px solid rgba(0,0,0,.1);}
            .my-input-date{padding: 8px 10px;border:1px solid rgba(0,0,0,.1);width: 80%;background: url(http://s.iamberry.com/images/rili-1.png) 98.5% center no-repeat; background-size:auto 50%;}
            .input-box{margin: 18px 0;}
            .input-dic{float: left;margin:5px 10px 0 0;font-size: 12px;}
            .add-list{list-style-type: none;padding: 10px;background-color: #f5f5f5;width: 60%;float: left;margin: 0;}
            .add-list>li{margin: 10px 0;}
            .my-textarea{padding: 5px 10px;width: 65%;border:1px solid rgba(0,0,0,.1);margin-left: 12.5%;}
            .my-btn-reset{padding: 10px 20px;width: 150px; background-color: #fff;color: #32a3d8;border: 1px solid #32a3d8;cursor:pointer;margin: 10px 10px 0 10px;}
            .my-btn-submit{padding: 10px 20px;width: 130px; background-color: #50a2ea;color: #fff;border: 1px solid #50a2ea;cursor:pointer;margin: 10px auto 0 auto;display: block;}
            .my-select{border: 1px solid rgba(0,0,0,.1);padding:6px 50px 6px 15px;height: 34px; -webkit-appearance:none;appearance:none;background: url(/common/images/pts/select-11.png) right center no-repeat;background-size:auto 100%;}
            input[type=radio]{-webkit-appearance:none;appearance:none;background: url(${path}/common/images/pts/radio-1.png) center center no-repeat;background-size:auto 100%;width: 20px;height: 20px;margin-right: 10px;}
            input[type=radio]:checked{-webkit-appearance:none;appearance:none;background: url(${path}/common/images/pts/radio-2.png) center center no-repeat;background-size:auto 100%;width: 20px;height: 20px;margin-right: 10px;}
            .huanhang{ float:left}
            .check-box, .radio-box{padding-left: 0;}
            .my-close{position:absolute;right: 0.5em;top: 0.45em;width:0.15em;height:1em;background: #333;-webkit-transform: rotate(45deg);transform: rotate(45deg);display: inline-block;}
            .my-close:after{content: "";position: absolute;top: 0;left: 0;width:0.15em;height:1em;background: #333;-webkit-transform: rotate(270deg);transform: rotate(270deg);}
            .b-close{position: relative; display: inline-block;margin: 2px 0; padding:4px 1em 4px 4px; width: 100px;background: #f0f0f0;border: 1px solid rgba(0,0,0,.1);border-radius: 5px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;cursor: pointer;}
            .close-box{width: 500px;margin-left: 15px;margin-top: -15px;}
        </style>
	</head>
	<body>
    	<div id="main" style="width: 1400px;height:500px;"></div>


        <div class="input-box" style="height: 45px;"  class="dataTableStatis" seachType="3">
            <label class="form-label col-2 col-sm-2 huanhang" style="text-align: right;margin: 10px 0px;font-weight: bold;font-size: 23px;">判定结果</label>
            <div class="formControls col-2 col-sm-2 text-c huanhang" style="margin-left: -4%;margin: 10px 0px 10px -19px;">
                <input class="my-input beginTime" style="width: 90%;" type="text" value="" name="beginTime_1" id="beginTime_1" onClick="WdatePicker({skin:'whyGreen',maxDate:'%y-%M',dateFmt: 'yyyy-MM',onpicked: getResetDateByTime,oncleared :getResetDateByTime })" placeholder="请选择月份(开始)" readonly="readonly"/>
            </div>
            <div class="formControls col-2 col-sm-2 text-c huanhang" style="margin-left: -4%;margin: 10px 0px 10px -19px;">
                <input class="my-input endTime" style="width: 90%;" type="text" value="" name="endTime_1" id="endTime_1" onClick="WdatePicker({skin:'whyGreen',maxDate:'%y-%M',dateFmt: 'yyyy-MM',minDate:beginTime_1.value,onpicked: getResetDateByTime,oncleared :getResetDateByTime })" placeholder="请选择月份(结束)" readonly="readonly"/>
            </div>
            <div class="formControls col-2 col-sm-2 huanhang" style="margin: 10px 0px;line-height: 34px;">
                <select id="configSelect_1" name="configSelect_1" class="chosen configSelect" style="">
                    <option value="">判断结果</option>
                    <#if (criticalResultList?size > 0)>
                        <#list criticalResultList as config>
                            <option value="${config.configId!""}">${config.configDetectContent!""}</option>
                        </#list>
                    </#if>
                </select>
            </div>
        </div>
    	<div id="main3" style="width: 1400px;height:500px;"></div>


        <div class="input-box" style="height: 45px;" class="dataTableStatis" seachType="2">
            <label class="form-label col-2 col-sm-2 huanhang" style="text-align: right;margin: 10px 0px;font-weight: bold;font-size: 23px;">故障原因</label>
            <div class="formControls col-2 col-sm-2 text-c huanhang" style="margin-left: -4%;margin: 10px 0px 10px -19px;">
                <input class="my-input beginTime" style="width: 90%;" type="text" value="" name="beginTime_2" id="beginTime_2" onClick="WdatePicker({skin:'whyGreen',maxDate:'%y-%M',dateFmt: 'yyyy-MM',onpicked: getResetDateByTime,oncleared :getResetDateByTime })" placeholder="请选择月份(开始)" readonly="readonly"/>
            </div>
            <div class="formControls col-2 col-sm-2 text-c huanhang" style="margin-left: -4%;margin: 10px 0px 10px -19px;">
                <input class="my-input endTime" style="width: 90%;" type="text" value="" name="endTime_2" id="endTime_2" onClick="WdatePicker({skin:'whyGreen',maxDate:'%y-%M',dateFmt: 'yyyy-MM',minDate:beginTime_2.value,onpicked: getResetDateByTime,oncleared :getResetDateByTime })" placeholder="请选择月份(结束)" readonly="readonly"/>
            </div>
            <div class="formControls col-2 col-sm-2 huanhang" style="margin: 10px 0px;line-height: 34px;">
                <select id="configSelect_2" name="configSelect_2" class="chosen configSelect" style="">
                    <option value="">故障原因</option>
                <#if (causeIssueList?size > 0)>
                    <#list causeIssueList as config>
                        <option value="${config.configId!""}">${config.configDetectContent!""}</option>
                    </#list>
                </#if>
                </select>
            </div>
        </div>
    	<div id="main4" style="width: 1400px;height:500px;"></div>

        <div class="input-box" style="height: 45px;" class="dataTableStatis" seachType="5">
            <label class="form-label col-2 col-sm-2 huanhang" style="text-align: right;margin: 10px 0px;font-weight: bold;font-size: 23px;">原因分析</label>
            <div class="formControls col-2 col-sm-2 text-c huanhang" style="margin-left: -4%;margin: 10px 0px 10px -19px;">
                <input class="my-input beginTime" style="width: 90%;" type="text" value="" name="beginTime_3" id="beginTime_3" onClick="WdatePicker({skin:'whyGreen',maxDate:'%y-%M',dateFmt: 'yyyy-MM',onpicked: getResetDateByTime,oncleared :getResetDateByTime })" placeholder="请选择月份(开始)" readonly="readonly"/>
            </div>
            <div class="formControls col-2 col-sm-2 text-c huanhang" style="margin-left: -4%;margin: 10px 0px 10px -19px;">
                <input class="my-input endTime" style="width: 90%;" type="text" value="" name="endTime_3" id="endTime_3" onClick="WdatePicker({skin:'whyGreen',maxDate:'%y-%M',dateFmt: 'yyyy-MM',minDate:beginTime_3.value,onpicked: getResetDateByTime,oncleared :getResetDateByTime })" placeholder="请选择月份(结束)" readonly="readonly"/>
            </div>
            <div class="formControls col-2 col-sm-2 huanhang" style="margin: 10px 0px;line-height: 34px;">
                <select id="configSelect_3" name="configSelect_3" class="chosen configSelect" style="">
                    <option value="">原因分析</option>
                <#if (causeAnalysisList?size > 0)>
                    <#list causeAnalysisList as config>
                        <option value="${config.configId!""}">${config.configDetectContent!""}</option>
                    </#list>
                </#if>
                </select>
            </div>
        </div>
    	<div id="main5" style="width: 1400px;height:500px;"></div>
	</body>
    <script type="text/javascript" src="${path}/common/lib/echarts/3.8/echarts.common.min.js"></script>
    <script type="text/javascript" src="${path}/common/lib/echarts/3.8/echarts.min.js"></script>
    <script type="text/javascript" src="${path}/common/lib/echarts/3.8/macarons.js"></script>
    <script type="text/javascript" src="${path}/common/lib/My97DatePicker/4.8/WdatePicker.js"></script>
	<script>
        var myChart = echarts.init(document.getElementById('main'));
        //type = 3
        var myChart3 = echarts.init(document.getElementById('main3'));
        //type = 2
        var myChart4 = echarts.init(document.getElementById('main4'));
        //type = 5
        var myChart5 = echarts.init(document.getElementById('main5'));

		$(function () {
            detectStatisticsData();
            detectStatisticsJudgement(3,"","","");
            detectStatisticsJudgement(2,"","","");
            detectStatisticsJudgement(5,"","","");
        })

        /**
         * 当月统计
         * @param state
         */
        function detectStatisticsData() {
            $.ajax({
                type: "POST",
                data: {},
                url: "${path}/admin/detect/detect_statistics_data",
                success: function(data){
                    if (data.returnCode == 200) {

                        var numArray = new Array();
                        var monthArray = new Array();
                        for (var i=0;i<data.returnMsg.complaintDetectInfoList.length;i++){
                            var countNum = data.returnMsg.complaintDetectInfoList[i].countNum;
                            numArray.push(countNum);

                            var detectProduction = data.returnMsg.complaintDetectInfoList[i].detectProduction;
                            if(detectProduction == "未知"){
                                var flag = false;
                                for (var k=0;k<monthArray.length;k++){
                                    if(monthArray[k] == '未知'){
                                        var otherMonthNum = numArray[k];
                                        numArray[k] = numArray[k]+countNum;
                                        flag = true;
                                    }
                                }
                                if(!flag){
                                    monthArray.push('未知');
                                }
                            }else{
                                var newDate = formatDate(detectProduction,"yyyy年MM月");
                                monthArray.push(newDate.substring(2,newDate.length))
                            }
						}

                        var newNumArray = new Array();
                        for (var i=0;i<monthArray.length;i++){
                            newNumArray.push(numArray[i]);
                        }
                        var option = {
                            title : {
                                text: '本月故障机器',
                                subtext: ''
                            },
                            tooltip : {
                                trigger: 'axis'
                            },
                            legend: {
                                data:['本月故障机器']
                            },
                            toolbox: {
                                show : true,
                                feature : {
//                                    dataView : {show: true, readOnly: false},
//                                    magicType : {show: true, type: ['line', 'bar']},
//                                    restore : {show: true},
//                                    saveAsImage : {show: true}
                                }
                            },
                            calculable : true,
                            xAxis : [
                                {
                                    type : 'category',
                                    data : monthArray
                                }
                            ],
                            yAxis : [
                                {
                                    type : 'value'
                                }
                            ],
                            series : {
                                name:'本月故障机器',
                                type:'bar',
                                data:newNumArray,
//								barWidth : 10%,
                                markPoint : {
                                    data : [
                                        {type : 'max', name: '最大值'},
                                        {type : 'min', name: '最小值'}
                                    ]
                                }
//                                ,markLine : {
//                                    data : [
//                                        {type : 'average', name: '平均值'}
//                                    ]
//                                }
                            }
                        };

                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);
                    }else{
                        layer.msg("获取信息失败！", {icon: 5, time: 3000});
                    }
                },
                error: function(XmlHttpRequest, textStatus, errorThrown){
                }
            });
        }

        /**
         * @param configType
         * @param beginTime
         * @param endTime
         * @param echartsObj
         */
        function detectStatisticsJudgement(configType,beginTime,endTime,configId,) {
            var echartsObj = null;
            switch (parseInt(configType)){
                case 3:
                    echartsObj = myChart3;
                    break;
                case 2:
                    echartsObj = myChart4;
                    break;
                case 5:
                    echartsObj = myChart5;
                    break;
                default:
                    break
            }
            if(!isEmpty(echartsObj)){
                return false;
            }
            $.ajax({
                type: "POST",
                data: {
                    configType : configType,
                    beginTime : beginTime,
                    endTime : endTime,
                    configId :configId
                },
                url: "${path}/admin/detect/detect_statistics_one",
                success: function(data){
                    if (data.returnCode == 200) {

                        var menuDate = new Array();
                        for (var i=0;i<data.returnMsg.detectConfigList.length;i++) {
                            var configDetectContent = data.returnMsg.detectConfigList[i].configDetectContent;
                            menuDate.push(configDetectContent);
                        }

                        var monthArray = new Array();
                        for (var j=0;j<data.returnMsg.detectProductionList.length;j++) {
                            var detectProduction = data.returnMsg.detectProductionList[j].detectProduction;
                            if(detectProduction == "未知"){
                                monthArray.push(detectProduction);
                            }else{
                                var newDate = formatDate(detectProduction,"yyyy-MM");
                                monthArray.push(newDate.substring(2,newDate.length));
                            }
                        }
                        var seriesArray = new Array();
                        for (var k=0;k<data.returnMsg.list.length;k++) {
                            var newDate = data.returnMsg.list[k];
                            var dateName,dateAttr;
                            var configId = data.returnMsg.cinfigList[k];
                            for(var m in newDate) {
                                dateName = m;
                                dateAttr = newDate[m];
                            }
                            var objArray = new Array();
                            for(var q=0;q<dateAttr.length;q++){
                                var obj = {
                                    value:dateAttr[q],
                                    name:dateName,
                                    configId:configId,
                                    configName:dateName
                                }
                                objArray.push(obj);
                            }
                            var series = {
                                name:dateName,
                                type:'bar',
                                data:objArray,
                                markLine : {
//                                    data : [
//                                        {type : 'average', name: '平均值'}
//                                    ]
                                }
                            }
                            seriesArray.push(series);
                        }
                        var option = {
                            title : {
                                text: '',
                                subtext: ''
                            },
                            tooltip : {
                                trigger: 'axis'
                            },
                            legend: {
                                data:menuDate
                            },
                            toolbox: {
                                show : true,
                                feature : {
//                                    dataView : {show: true, readOnly: false},
//                                    magicType : {show: true, type: ['line', 'bar']},
//                                    restore : {show: true},
//                                    saveAsImage : {show: true}
                                }
                            },
                            calculable : true,
                            xAxis : [
                                {
                                    type : 'category',
                                    data : monthArray
                                }
                            ],
                            yAxis : [
                                {
                                    type : 'value'
                                }
                            ],
                            series :seriesArray
                        };
                        // 使用刚指定的配置项和数据显示图表。
                        echartsObj.setOption(option,true);

                        echartsObj.on('click', function (params) {
                            toSelectConfigStatistic(params.data);

                            // alert("单击了"+params.componentType+"x轴标签");

                            //param具体包含的参数见 https://blog.csdn.net/allenjay11/article/details/76033232

//                            updatePage(option.xAxis.data[params.dataIndex],params.value);
//                            refresh();
                        });
                    }else{
                        layer.msg("获取信息失败！", {icon: 5, time: 3000});
                    }
                },
                error: function(XmlHttpRequest, textStatus, errorThrown){
                }
            });
        }

        $('.configSelect').change(function() {
            getResetDate($(this));
        });

        $('.beginTime').change(function() {
            getResetDate($(this));
        });
        $('.endTime').change(function() {
            getResetDate($(this));
        });

        /**
         * 选择数据后重置数据
         */
        function getResetDateByTime() {
            var id = this.id;
            var $node = $("#"+id);
//            var $thisDiv = $node.parents(".dataTableStatis");
            var $thisDiv = $node.parent().parent();
            var type = $thisDiv.attr("seachType");
            var beginTime = $thisDiv.find(".beginTime").val();
            var endTime = $thisDiv.find(".endTime").val();
            var configName = $thisDiv.find(".configSelect").find("option:selected").text();
            var configId = $thisDiv.find(".configSelect").val();
            detectStatisticsJudgement(type,beginTime,endTime,configId);
        }
        /**
         * 选择数据后重置数据
         */
        function getResetDate($node) {
//            var $thisDiv = $node.parents(".dataTableStatis");
            var $thisDiv = $node.parent().parent();
            var type = $thisDiv.attr("seachType");
            var beginTime = $thisDiv.find(".beginTime").val();
            var endTime = $thisDiv.find(".endTime").val();
            var configName = $thisDiv.find(".configSelect").find("option:selected").text();
            var configId = $thisDiv.find(".configSelect").val();
            detectStatisticsJudgement(type,beginTime,endTime,configId);
        }

        /**
         * 到单独配置页面
         */
        function toSelectConfigStatistic(data) {
            var configId = data.configId;
            window.location.href= "${path}/admin/detect/to_select_config_statistic?configId="+configId;
        }

        $('.chosen').chosen({
            no_results_text: "没有找到结果！",//搜索无结果时显示的提示
            search_contains:true,   //关键字模糊搜索。设置为true，只要选项包含搜索词就会显示；设置为false，则要求从选项开头开始匹配
            allow_single_deselect:true, //单选下拉框是否允许取消选择。如果允许，选中选项会有一个x号可以删除选项
            disable_search: false, //禁用搜索。设置为true，则无法搜索选项。
            disable_search_threshold: 0, //当选项少等于于指定个数时禁用搜索。
            inherit_select_classes: true, //是否继承原下拉框的样式类，此处设为继承
            placeholder_text_single: '', //单选选择框的默认提示信息，当选项为空时会显示。如果原下拉框设置了data-placeholder，会覆盖这里的值。
            width: '200px', //设置chosen下拉框的宽度。即使原下拉框本身设置了宽度，也会被width覆盖。
            max_shown_results: 1000, //下拉框最大显示选项数量
            display_disabled_options: false,
            single_backstroke_delete: false, //false表示按两次删除键才能删除选项，true表示按一次删除键即可删除
            case_sensitive_search: false, //搜索大小写敏感。此处设为不敏感
            group_search: false, //选项组是否可搜。此处搜索不可搜
            include_group_label_in_selected: true //选中选项是否显示选项分组。false不显示，true显示。默认false。
        });
	</script>
</html>