dingcong
/
everlight.eap


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284
							<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <!-- <link rel="stylesheet" href="../lib/layui-v2.4.5/layui-v2.4.5/layui/css/layui.css"> -->
    <link rel="stylesheet" href="../css/index.css">
    <!-- <script type="text/javascript" src="../lib/layui-v2.4.5/layui-v2.4.5/layui/layui.js"></script> -->
    <script src="../lib/echarts.min.js"></script>
    <script src="../lib/jquery/jquery.min.js"></script>
    <script src="../lib/vue.min.js"></script>
    <style>
        .chart {
            width: 170px;
            height: 170px;
        }

        .container {

            position: relative;
        }

        .row {
            width: 100%;
        }

        .col {
            width: 170px;
            float: left;
        }

        .margin-top {
            margin-top: 50px;
        }

        #clock {
            font-family: 'Share Tech Mono', monospace;
            color: #427aa8;
            text-align: center;
            margin-top: 20px;
            margin-left: 35px;
            text-shadow: 0 0 20px #0aafe6, 0 0 20px rgba(10, 175, 230, 0);
        }

        #clock .time {
            letter-spacing: 0.05em;
            font-size: 65px;
            padding: 5px 0;
        }

        #clock .date {
            letter-spacing: 0.1em;
            font-size: 24px;
        }

        #clock .text {
            letter-spacing: 0.1em;
            font-size: 12px;
            padding: 20px 0 0;
        }
    </style>
</head>

<body style="padding-top:8px;">
    <div style="float:left;">
        <div class="container">
            <div class="row">
                <div class="col">
                    <div id="db-effi" class="chart"></div>
                </div>
                <div class="col">
                    <div id="db-runrate" class="chart"></div>
                </div>
                <div class="col">
                    <div id="wb-effi" class="chart"></div>
                </div>
                <div class="col">
                    <div id="wb-runrate" class="chart"></div>
                </div>
            </div>
        </div>
    </div>
    <div style="float: left;">
        <div id="clock">
            <p class="date"></p>
            <p class="time"></p>
        </div>
    </div>

    <script type="text/javascript">
        $(function () {
            var option = {
                tooltip: {
                    formatter: "{a} <br/>{b} : {c}%"
                },
                series: [
                    {
                        name: '业务指标',
                        type: 'gauge',
                        splitLine: {			// 分隔线样式。
                            show: true,				// 是否显示分隔线,默认 true。
                            length: 10,				// 分隔线线长。支持相对半径的百分比,默认 30。
                            lineStyle: {			// 分隔线样式。
                                opacity: 1,					//图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
                                width: 2,					//线度,默认 2。
                                type: "solid",				//线的类型,默认 solid。 此外还有 dashed,dotted
                                shadowBlur: 10,				//(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。 
                                shadowColor: "#fff",		//阴影颜色。支持的格式同color。
                            }
                        },
                        axisTick: {				// 刻度(线)样式。
                            show: true,				// 是否显示刻度(线),默认 true。
                            splitNumber: 10,			// 分隔线之间分割的刻度数,默认 5。
                            length: 10,				// 刻度线长。支持相对半径的百分比,默认 8。
                        },
                        pointer: {				// 仪表盘指针。
                            show: true,				// 是否显示指针,默认 true。
                            length: "50%",			// 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
                            width: 4,				// 指针宽度,默认 8。
                        },

                        itemStyle: {			// 仪表盘指针样式。
                            color: "auto",			// 指针颜色，默认(auto)取数值所在的区间的颜色
                            opacity: 1,				// 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
                            borderWidth: 0,			// 描边线宽,默认 0。为 0 时无描边。
                            borderType: "solid",	// 柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
                            borderColor: "#000",	// 图形的描边颜色,默认 "#000"。支持的颜色格式同 color，不支持回调函数。
                            shadowBlur: 10,			// (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。 
                            shadowColor: "#fff",	// 阴影颜色。支持的格式同color。
                        },
                        title: {				// 仪表盘标题。
                            show: true,				// 是否显示标题,默认 true。
                            offsetCenter: [0, "-25%"],//相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
                            color: "#5CACEE",			// 文字的颜色,默认 #333。
                            fontSize: 11,			// 文字的字体大小,默认 15。
                        },

                        axisLabel: {			// 刻度标签。
                            show: true,				// 是否显示标签,默认 true。
                            distance: 10,			// 标签与刻度线的距离,默认 5。
                            fontSize: 10,			// 文字的字体大小,默认 5。
                            formatter: "{value}",	// 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板，模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板，函数参数分别为刻度数值,如formatter: function (value) {return value + 'km/h';}
                        },
                        radius: '90%',
                        axisLine: {				// 仪表盘轴线(轮廓线)相关配置。
                            show: true,				// 是否显示仪表盘轴线(轮廓线),默认 true。
                            lineStyle: {			// 仪表盘轴线样式。
                                //仪表盘的轴线可以被分成不同颜色的多段。每段的  结束位置(范围是[0,1]) 和  颜色  可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
                                opacity: 1,					//图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
                                width: 8,					//轴线宽度,默认 30。
                                shadowBlur: 20,				//(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。 
                                shadowColor: "#fff",		//阴影颜色。支持的格式同color。
                            }
                        },
                        detail: { formatter: '{value}%', fontSize: 15 },
                        data: [{ value: 0, name: '' }]
                    }
                ]
            };
            var dbEffi = echarts.init(document.getElementById('db-effi'));
            var dbRun = echarts.init(document.getElementById('db-runrate'));

            var wbEffi = echarts.init(document.getElementById('wb-effi'));
            var wbRun = echarts.init(document.getElementById('wb-runrate'));
            loadData();
            function loadData() {
                $.ajax({
                    url: 'http://localhost:18531/eap/api/analysis2/getstatustotal',
                    type: 'get',
                    dataType: 'json',
                    success: function (res) {
                        console.log(res);
                        var mtbfs = [];
                        var effics = [];
                        var dbM = 0, wbM = 0;
                        if (res.mtbfs != null || res.mtbfs.length > 0) {
                            for (var i = 0; i < res.mtbfs.length; i++) {
                                if (res.mtbfs[i].pcode == 'DB') {
                                    dbM += res.mtbfs[i].mtbf;
                                }
                                if (res.mtbfs[i].pcode == 'WB') {
                                    wbM += res.mtbfs[i].mtbf;
                                }
                            }
                            dbM = Math.round(dbM);
                            wbM = Math.round(wbM);
                            var overalMtbf = dbM + wbM;
                            mtbfs = [{ type: 'total', value: overalMtbf }, { type: 'DB', value: dbM }, { type: 'WB', value: wbM }];
                        }
                        if (res.effics != null || res.effics.length > 0) {
                            var dbEffiency = 0, dbRunRate = 0, dbIdleRate = 0, dbAlarmRate = 0;
                            var wbEffiency = 0, wbRunRate = 0, wbIdleRate = 0, wbAlarmRate = 0;
                            var totalEffiency = 0, totalRunRate = 0, totalIdleRate = 0, totalAlarmRate;
                            for (var j = 0; j < res.effics.length; j++) {
                                if (res.effics[j].key == 'DB') {
                                    dbEffiency = Math.round(res.effics[j].overallEfficiency * 100);
                                    dbRunRate = Math.round(res.effics[j].runRate * 100);
                                    // dbIdleRate = Math.round(res.effics[j].idleRate * 100);
                                    dbAlarmRate = Math.round(res.effics[j].alarmRate * 100);
                                    dbIdleRate = 100 - dbAlarmRate - dbRunRate;
                                }
                                if (res.effics[j].key == 'WB') {
                                    wbEffiency += Math.round(res.effics[j].overallEfficiency * 100);
                                    wbRunRate += Math.round(res.effics[j].runRate * 100);
                                    // wbIdleRate += Math.round(res.effics[j].idleRate * 100);
                                    wbAlarmRate += Math.round(res.effics[j].alarmRate * 100);
                                    wbIdleRate = 100 - wbRunRate - wbAlarmRate;
                                }
                            }
                            totalEffiency = Math.round((dbEffiency + wbEffiency) / 2);
                            totalRunRate = Math.round((dbRunRate + wbRunRate) / 2);
                            //  totalIdleRate = Math.round((dbIdleRate + wbIdleRate) / 2);
                            totalAlarmRate = Math.round((dbAlarmRate + wbAlarmRate) / 2);
                            totalIdleRate = 100 - totalRunRate - totalAlarmRate;

                            plusZero(overalMtbf);
                            plusZero(dbM);
                            plusZero(wbM);
                            plusZero(dbEffiency);
                            plusZero(dbRunRate);
                            plusZero(dbIdleRate);
                            plusZero(dbAlarmRate);
                            plusZero(wbEffiency);
                            plusZero(wbRunRate);
                            plusZero(wbIdleRate);
                            plusZero(wbAlarmRate);
                            plusZero(totalEffiency);
                            plusZero(totalRunRate);
                            plusZero(totalIdleRate);
                            plusZero(totalAlarmRate);
                        }


                        setOption('', ['综合效率'], dbEffiency.toString(), [{ value: dbEffiency, name: 'DB综合效率' }], dbEffi);
                        setOption('', ['稼动率'], dbRunRate.toString(), [{ value: dbRunRate, name: 'DB稼动率' }], dbRun);

                        setOption('', ['综合效率'], wbEffiency.toString(), [{ value: wbEffiency, name: 'WB综合效率' }], wbEffi);
                        setOption('', ['稼动率'], wbRunRate.toString(), [{ value: wbRunRate, name: 'WB稼动率' }], wbRun);
                    }
                });


                setTimeout(() => {
                    loadData();
                }, 1000 * 60 * 60 * 2);
            }
            function setOption(title, lenged, name, data, chart) {
                // option.title.text = title;
                //option.legend.title = lenged;
                option.series[0].name = name;
                option.series[0].data = data;
                chart.setOption(option);
            }

            function plusZero(value) {
                if (value > 0)
                    return value + 0.001;
            }

            var week = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            var timerID = setInterval(updateTime, 1000);
            updateTime();
            function updateTime() {
                var cd = new Date();
                var time = zeroPadding(cd.getHours(), 2) + ':' + zeroPadding(cd.getMinutes(), 2) + ':' + zeroPadding(cd.getSeconds(), 2);
                var date = zeroPadding(cd.getFullYear(), 4) + '-' + zeroPadding(cd.getMonth() + 1, 2) + '-' + zeroPadding(cd.getDate(), 2) + ' ' + week[cd.getDay()];
                $('.date').text(date);
                $('.time').text(time);
            };

            function zeroPadding(num, digit) {
                var zero = '';
                for (var i = 0; i < digit; i++) {
                    zero += '0';
                }
                return (zero + num).slice(-digit);
            }
        });
    </script>
</body>

</html>