<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>看板</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/common.css" />
</head>

<body>
    <header class="aui-bar aui-bar-nav" id="header">
        <a class="aui-pull-left aui-btn" onclick="closeFrame();">
            <span class="aui-iconfont aui-icon-left"></span>
        </a>
        <div class="aui-title" data-i18n="6660001"></div>
    </header>
    <section class="aui-content container">
        <ul class="aui-list aui-list-noborder">

            <div class="aui-list-header">
                <div>
                    <i class="aui-iconfont aui-icon-my aui-text-danger"></i>
                    <span data-i18n="900198"></span>
                </div>
            </div>

            <section class="aui-content aui-grid aui-margin-b-15">
                <div class="aui-row" id="dashboard1">
                    <script id="DotTemplate" type="text/x-dot-template">
                        {{~it.data:value:index}}
                        <div class="aui-col-xs-4 open-frame" frame="tpm_yjwx" param='{"acd":{{=value.status}}}'>
                            <big class="" style="{{ if(parseInt(value.count)>0&&value.status!=6){  }} color:#ff0000!important;{{ } }}">{{=value.count}}</big>
                            <div class="aui-gird-lable aui-font-size-12">{{=lang(value.name)}}</div>
                        </div>
                        {{~}}
                    </script>
                </div>
                </div>
            </section>

            <div class="aui-list-header">
                <div>
                    <i class="aui-iconfont aui-icon-my aui-text-danger"></i>
                    <span data-i18n="900537"></span>
                </div>
            </div>
            <ul id="dashboard2">
                <script id="DotTemplate2" type="text/x-dot-template">
                    {{~it.data:value:index}}
                    <li class="aui-list-item weihu open-win" win="tpm_jhwhdetail" param='{"machineid":"{{= value.machineID}}","status":"1"}'>
                        <div class="aui-list-item-inner aui-list-item-arrow jhwhitem" data-id="{{=value.machineID}}">
                            <div class="aui-list-item-title">{{=value.location}}</div>
                            <div class="aui-list-item-right">{{=value.count + lang('6660004')}}</div>
                        </div>
                    </li>
                    {{~}}
                </script>
            </ul>
            <div class="aui-list-header">
                <div>
                    <i class="aui-iconfont aui-icon-my aui-text-danger"></i>
                    <span data-i18n="6660006"></span>
                </div>

            </div>
            <div id="chart_panel1" style="width: 100%;height:250px;padding:0 10px;overflow: visible;"></div>
            <div id="chart_panel2" style="width: 100%;height:250px;padding:0 10px;overflow: visible;"></div>
            <div id="chart_panel3" style="width: 100%;height:250px;padding:0 10px;"></div>
        </ul>
    </section>


</body>

<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/md5.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/swipe.js"></script>
<script type="text/javascript" src="../script/SHA1.js"></script>
<script type="text/javascript" src="../script/doT.min.js"></script>
<script type="text/javascript" src="../script/remotedb.js"></script>
<script type="text/javascript" src="../script/list.js"></script>
<script type="text/javascript" src="../script/aui-tab.js"></script>
<script type="text/javascript" src="../script/aui-toast.js"></script>
<script type="text/javascript" src="../script/zepto.min.js"></script>
<script type="text/javascript" src="../script/jquery.min.js"></script>
<script type="text/javascript" src="../script/CryptoJS/core.js"></script>
<script type="text/javascript" src="../script/CryptoJS/cipher-core.js"></script>
<script type="text/javascript" src="../script/CryptoJS/mode-ecb.js"></script>
<script type="text/javascript" src="../script/CryptoJS/aes.js"></script>

<script type="text/javascript" src="../script/i18next-12.0.0.min.js"></script>
<script type="text/javascript" src="../script/i18nextLocizeBackend.min.js"></script>
<script type="text/javascript" src="../script/jquery-i18next.min.js"></script>
<script type="text/javascript" src="../script/jquery.cookie.js"></script>
<script type="text/javascript" src="../script/i18n-app.js"></script>

<script src="../script/echarts4.min.js"></script>
<script type="text/javascript">
    var host, lang, i18next;
    var currentExceptIndex = 0;
    apiready = function() {
        fnReady();
        ajaxsetup();
        host = $api.getStorage('host');
        load_i18n(function(t, i18n) {
            lang = t;
            i18next = i18n;
            getDashboard();
            getList1();
            getChart1();
            getChart3();
        });
    };



    // var host='http://61.177.28.246:8100';
    //         load_i18n(function(t, i18n) {
    //         lang = t;
    //         i18next = i18n;
    //                         // getHost();
    //             ajaxsetup();
    //             autologin();
    //             getDashboard();
    //             getList1();
    //             getChart1();
    //             getChart3();

    //     });


    function getDashboard() {
        $.ajax({
            url: host + '/tpm/AppRepair/GetAppRepairCount',
            //  data:JSON.stringify({
            //     "machineCode":qrcode
            // }),
            type: 'POST',
            success: function(result) {
                console.log(JSON.stringify(result));
                if (result.ret == 1) {
                    var testTemplate = doT.template($("#DotTemplate").text());
                    $("#dashboard1").html(testTemplate(result));
                    fnReadyOpenWin();
                    fnReadyOpenFrame();
                } else {
                    customToast(lang(result.msg), 2000);
                }
            }
        })
    }

    function getList1() {
        $.ajax({
            url: host + '/tpm/AppPlan/UnExecutePlanList',
            //  data:JSON.stringify({
            //     "machineCode":qrcode
            // }),
            type: 'POST',
            success: function(result) {
                // console.log(JSON.stringify(result));
                if (result.ret == 1) {
                    var testTemplate2 = doT.template($("#DotTemplate2").text());
                    // console.log(testTemplate2(result));
                    $("#dashboard2").html(testTemplate2(result));

                    // listen_rowclick();

                    var $excepts = $(".weihu");
                    if ($excepts.length > 3) {
                        $("#dashboard2").append(' <li class="aui-text-center " id="seeMoreRecords">' + lang('6660005') + '</li>');
                        $excepts.slice(3, $excepts.length).hide();

                        $("#seeMoreRecords").click(function(e) {
                            currentExceptIndex += 3;
                            $(".weihu").slice(currentExceptIndex, currentExceptIndex + 3).show();


                            if ($(".weihu:hidden").length === 0) {
                                $("#seeMoreRecords").hide();
                            }
                        });
                    }

                    fnReadyOpenWin();
                } else {
                    customToast(lang(result.msg), 2000);
                }
            }
        })
    }

    function getChart1() {
        // var host='http://61.177.28.246:8100';
        $.ajax({
            url: host + '/tpm/AppRepair/GetMachineMTTRBFIndex',
            //  data:JSON.stringify({
            //     "machineCode":qrcode
            // }),
            type: 'POST',
            success: function(result) {
                console.log(JSON.stringify(result));
                var daterange = result.data.mttr.date[0].replace('-', '/').replaceAll('0', '') + ' - ' + result.data.mttr.date[6].replace('-', '/').replaceAll('0', '')
                var subtitle = result.data.month.split('-')[0] + lang('1142') + ' ' + daterange
                if (result.ret == 1) {
                    barchart("chart_panel1", result.data.mttr.date, result.data.mttr.value, "MTTR", subtitle);
                    barchart("chart_panel2", result.data.mtbf.date, result.data.mtbf.value, "MTBF", subtitle);
                } else {
                    customToast(lang(result.msg), 2000);
                }
            }
        })
    }

    function barchart(e, x, y, t, subt) {
        var dom = document.getElementById(e);
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
        option = {
            title: {
                left: 'center',
                text: t,
                subtext: subt,
            },
            grid: {
                right: '15%'
            },
            color: ['#3398DB'],
            xAxis: {
                type: 'category',
                data: x,
                name: lang('600532'),
                axisLabel: {
                    interval: 0
                }
            },
            yAxis: {
                type: 'value',
                name: t + '/min'
            },
            series: [{
                data: y,
                type: 'bar',
                showAllSymbol: "true"
            }]
        };;
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
    }



    function getChart3(argument) {

        // var host='http://61.177.28.246:8100';
        $.ajax({
            url: host + '/tpm/AppPlan/PlanPunctual',
            //  data:JSON.stringify({
            //     "machineCode":qrcode
            // }),
            type: 'POST',
            success: function(result) {
                console.log(JSON.stringify(result));
                // console.log(JSON.stringify(result).myReplace('plannum','计划数').myReplace('executenum','执行数'));
                if (result.ret == 1) {
                    var subtitle = dateUtil.getNowMonth().split('-')[0] + ' ' + result.data.source[0].w.replace('-', '/').replaceAll('0', '') + ' - ' + result.data.source[6].w.replace('-', '/').replaceAll('0', '')
                    api.hideProgress();
                    result.data.dimensions = ["w", lang('800203'), lang('800202'), '']
                    var realjosn = JSON.parse(JSON.stringify(result).myReplace('plannum', lang('800203')).myReplace('executenum', lang('800202')));
                    var dom = document.getElementById("chart_panel3");
                    var myChart = echarts.init(dom);
                    var app = {};
                    option = null;
                    option = {
                        title: {
                            y: 'top',
                            left: 'center',
                            text: lang('800204'),
                            subtext: subtitle,
                            padding: [
                                10, // 上
                                0, // 右
                                140, // 下
                                0, // 左
                            ]
                        },
                        grid: {
                            top: '100',
                            right: '15%'
                        },
                        legend: {
                            padding: [65, 0, 20, 0]
                        },
                        tooltip: {},
                        dataset: realjosn.data,
                        xAxis: {
                            type: 'category',
                            axisLabel: {
                                interval: 0
                            },
                            name: lang('600532')
                        },
                        yAxis: {
                            name: lang('6660113')
                        },
                        series: [{
                            type: 'bar'
                        }, {
                            type: 'bar'
                        }]
                    };;
                    if (option && typeof option === "object") {
                        myChart.setOption(option, true);
                    }
                } else {
                    customToast(lang(result.msg), 2000);
                }
            }
        })

    }


    function reloadMe() {
        console.log('reloadMe');
        location.reload();
        window.location.reload();
    }
</script>

</html>
