WEBUI/WMS.BZWeb/Areas/FJManager/Views/DeviceEffectives/Index.js

var refreshGirdData;
const CONFIG = {
    // 画布基准
    BASE_WIDTH: 1280,
    BASE_HEIGHT: 800,
}
let normalTableData = [
    {
        type: 'Card类型一',
        num: '66',
        rate: '40%',
    },
    {
        type: 'Card类型二',
        num: '22',
        rate: '30%',
    },
    {
        type: 'Card类型三',
        num: '11',
        rate: '20%',
    },
    {
        type: 'Card类型四',
        num: '11',
        rate: '20%',
    },
    {
        type: 'Card类型五',
        num: '11',
        rate: '20%',
    },
    {
        type: 'Card类型六',
        num: '11',
        rate: '20%',
    },
]
let normalTableColumn = [
    {
        key: 'index',
        title: '排名',
    },
    {
        key: 'rate',
        title: '占比',
        render: (params) => {
            let width = genVH(14),
                height = genVH(14),
                pieRate = parseInt(params.rate) / 100 * 2,
                dataUrl,
                ctx,
                canvas = document.createElement('canvas')

            canvas.width = width
            canvas.height = height
            ctx = canvas.getContext('2d')
            ctx.moveTo(width / 2, height / 2)
            ctx.arc(width / 2, height / 2, width / 2, 0, Math.PI * pieRate, false)
            ctx.closePath()
            ctx.fillStyle = '#6ac8f1'
            ctx.fill()
            dataUrl = canvas.toDataURL('image/png')

            return `
                <div class="table-rate-wrap">
                    <div class="table-pan-icon" style="background-image: url('${dataUrl}');
                        width: ${width}px; height: ${height}px;"></div>
                    <div class="table-rate-num">${params.rate}</div>
                </div>
            `
        },
    },
    {
        key: 'type',
        title: '类型',
        width: '40%',
        tooltip: true,
        align: 'center',
    },
    {
        key: 'num',
        title: '计数',
        align: 'right',
        class: 'normal-table-num',
    },
]

const renderOtherModule = (config) => {
    let domMap = renderContentBasic(config)

    if (config.render) {
        config.render(domMap, config)
    }
    //if (config.onResize) {
    //    window.addEventListener('resize', () => {
    //        emptyAllDom(domMap)
    //        config.onResize(domMap, config)
    //    })
    //}
}
const genVH = (length) => {
    let clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
    if (!clientHeight) return length
    return length * clientHeight / CONFIG.BASE_HEIGHT
}
const genVW = (length) => {
    let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
    if (!clientWidth) return length
    return length * clientWidth / CONFIG.BASE_WIDTH
}

const renderContentBasic = (config) => {
    const { domHeight = 200, domId, renderBasic, renderTitle, name } = config

    if (renderBasic === false) return renderBasic

    const dom = document.getElementById(domId)
    dom.style.height = `${domHeight / CONFIG.BASE_HEIGHT * 100}vh`

    let innerHTML = '', titleDomHeight = 0
    if (renderTitle !== false) {
        // 添加标题容器
        innerHTML = `
            <div class="content-box-title-icon"></div>
            <div class="content-box-title-text fontSize14">${name}</div>
        `
        const titleDom = appendContentNode({
            dom,
            innerHTML,
            nodeWrapName: `${domId}-title`,
            className: `content-box-title-wrap ${domId}-title`,
        })

        titleDomHeight = titleDom.getBoundingClientRect().height
    }

    // 添加内容容器
    const style = {
        height: `calc(100% - ${titleDomHeight}px)`,
    }
    innerHTML = `
        <div class="before-${domId}"></div>
        <div class="chart-wrap _${domId}"></div>
        <div class="after-${domId}"></div>
    `
    appendContentNode({
        dom,
        innerHTML,
        nodeWrapName: `${domId}-inner-wrap`,
        className: `content-box-inner-wrap ${domId}-inner-wrap`,
        style,
    })

    return {
        beforeDomClass: `before-${domId}`,
        contentDomClass: `_${domId}`,
        afterDomClass: `after-${domId}`,
        titleClass: `${domId}-title`,
    }
}

const appendContentNode = (config) => {
    const { dom, innerHTML, nodeWrapName, className, style = {} } = config
    let contentNodeWrap = document.getElementsByClassName(nodeWrapName)

    if (contentNodeWrap.length) {
        contentNodeWrap.innerHTML = innerHTML
    } else {
        contentNodeWrap = document.createElement('div')
        contentNodeWrap.className = className
        contentNodeWrap.innerHTML = innerHTML

        Object.keys(style).forEach(key => {
            contentNodeWrap.style[key] = style[key]
        })

        dom.appendChild(contentNodeWrap)
    }

    return contentNodeWrap
}
const renderNormalTable = (classNameParams, config) => {
    const contentDom = document.getElementsByClassName(classNameParams.contentDomClass)
    let dom = ''
    let table = document.createElement('table')
    let tableHeader = document.createElement('table')
    let tableBodyWrap = document.createElement('div')
    table.className = 'normal-table fontSize12'
    tableHeader.className = 'normal-table fontSize12'
    tableBodyWrap.className = 'normal-table-wrap'

    // 表头
    if (!config.hideHeader) {
        dom += `<tr>`
        config.column.forEach(item => {
            const { width, align } = item

            let style = ' style="'
            if (width) style += `width: ${width};`
            if (align) style += `text-align: ${align};`
            style += `"`

            dom += `<th${style}><span>${item.title}</span></th>`
        })
        dom += `</tr>`
    }
    tableHeader.innerHTML = dom
    document.getElementsByClassName(classNameParams.beforeDomClass)[0].appendChild(tableHeader)

    // 表体
    dom = ''
    config.data.forEach((item, index) => {
        dom += `<tr>`
        config.column.forEach(cell => {
            const { render, key, width, align } = cell
            let { class: className = '' } = cell

            let style = ' style="'
            if (width) style += `width: ${width};`
            if (align) style += `text-align: ${align};`
            style += `"`

            if (cell.tooltip) className += ` ${config.domId}-table-overflow-text`

            if (render) {
                dom += `<td${style} class="${className}">${render(item)}</td>`
            } else if (key === 'index') {
                dom += `<td${style} class="${className}"><span>${index + 1}</span></td>`
            } else {
                dom += `<td${style} class="${className}"><span>${item[key]}</span></td>`
            }
        })
        dom += `</tr>`
    })
    if (!config.data.length) dom += `<tr><td colspan="${config.column.length}" style="text-align: center;height: 100%;">暂无数据</td></tr>`
    table.innerHTML = dom
    tableBodyWrap.appendChild(table)
    contentDom[0].appendChild(tableBodyWrap)
    contentDom[0].style.height = `calc(100% - ${tableHeader.getBoundingClientRect().height}px)`

    // scrollbar compensation
    if (tableBodyWrap.scrollHeight > tableBodyWrap.clientHeight) {
        document.getElementsByClassName(classNameParams.beforeDomClass)[0].classList.add('scrollbar-compensation')
    }

    // tooltips
    let tooltips = document.createElement('div')
    tooltips.className = 'table-tootips'
    tooltips.innerHTML = '<span class="tooltips-arrow"></span><span class="tooltips-text"></span>'
    contentDom[0].appendChild(tooltips)

    const tooltipsArrow = document.getElementsByClassName('tooltips-arrow')[0]
    const tooltipsText = document.getElementsByClassName('tooltips-text')[0]
    const tableOverflowTextDom = document.getElementsByClassName(`${config.domId}-table-overflow-text`)
    for (let i = 0; i < tableOverflowTextDom.length; i++) {
        if (tableOverflowTextDom[i].scrollWidth - tableOverflowTextDom[i].clientWidth > 1) {
            tableOverflowTextDom[i].addEventListener('mouseout', () => {
                tooltips.style.display = 'none'
            })

            tableOverflowTextDom[i].addEventListener('mouseover', () => {
                tooltips.style.display = 'block'
                const fontSize = '1.125vh'
                const padding = genVH(8)
                const size = getTextSize(tableOverflowTextDom[i].innerText, fontSize)
                tooltips.style.fontSize = fontSize
                tooltips.style.padding = `${padding}px`
                tooltips.style.left = `${tableOverflowTextDom[i].offsetLeft + (tableOverflowTextDom[i].clientWidth / 2 - size.width / 2 - padding)}px`
                tooltips.style.top = `${tableOverflowTextDom[i].offsetTop - tableBodyWrap.scrollTop - (size.height + padding * 2) - tooltipsArrow.clientHeight}px`
                tooltipsArrow.style.transform = `translate3d(${size.width / 2 + padding - tooltipsArrow.clientWidth / 2}px, 0, 0)`
                tooltipsText.innerHTML = tableOverflowTextDom[i].innerText
            })
        }
    }
}
var bootstrap = function ($, learun) {
    "use strict";
    const devices = ["SRM1", "SRM2", "SRM3"];
    var page = {
        init: function () {
            page.initGird();
            page.bind();
            page.GetLastTaskCompletionRate();
            page.GetTaskCompletionRate();
            page.GetTaskNumsData();
            page.GetMainDDJData();
            page.GetMainFaultsData();
            page.GetmainJobTimesData();
            page.GetDeviceTaskTimesData();
            page.GetDeviceRunTimesData();
            page.GetDeviceJobTimesData();
            // top.$('#iframebg').css("display", "none");
        },
        bind: function () {

            renderOtherModule({
                domId: 'card-8',
                name: '设备故障信息',
                domHeight: 220,
                data: normalTableData,
                column: normalTableColumn,
                render: renderNormalTable,
            });

            $.each(devices, function (n, item) {
                $("#Code").append($("<option value='" + item + "'>" + item + "</option>"));
            });

            $("#Code").change(function () {
                alert(123);
            });
            page.SpanFunction($("#mainTaskCompletionRateSpan").find('span'), page.GetTaskNumsData);
            page.SpanFunction($("#mainTaskNumsSpan").find('span'), page.GetTaskCompletionRate);
            page.SpanFunction($("#mainddjSpan").find('span'), page.GetMainDDJData);
            page.SpanFunction($("#mainFaultsSpan").find('span'), page.GetMainFaultsData);
            page.SpanFunction($("#mainJobTimesSpan").find('span'), page.GetmainJobTimesData);
            page.SpanFunction($("#deviceTaskTimesSpan").find('span'), page.GetDeviceTaskTimesData);
            page.SpanFunction($("#deviceRunTimesSpan").find('span'), page.GetDeviceRunTimesData);
            page.SpanFunction($("#deviceJobTimesSpan").find('span'), page.GetDeviceJobTimesData);

        },
        // 初始化列表 
        initGird: function () {
        },
        search: function (param) {
        },
        SpanFunction: function (list, callBack) {
            $(list).on('click', function () {            
                $(this).addClass('active').siblings('span').removeClass('active');                
                var index = $(this).index();
                var text = $(this).text();

                //alert($(this).attr('queryValue'));
                if (!!callBack) {
                    callBack();
                }
            })
            //for (var i = 0; i < list.length; i++) {
            //    $(list[i]).on('click', function () {
            //        var name = $(this).text();
            //        list.each(function () {
            //            if ($(this).text() == name) {
            //                $(this).addClass('active');
            //                if (!!callBack) {
            //                    callBack();
            //                }
            //            }
            //            else {
            //                $(this).removeClass('active');
            //            }
            //        });
            //    });
            //}
        },
        //上一班完成率
        GetLastTaskCompletionRate: function () {
            //    var chartDom = document.getElementById('mainLastTaskCompletionRate');

            var chartDom = document.getElementById('mainLastTaskCompletionRate');
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                series: [
                    {
                        type: 'gauge',
                        progress: {
                            show: true,
                            width: 12
                        },
                        axisLine: {
                            lineStyle: {
                                width: 12
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            length: 10,
                            lineStyle: {
                                width: 2,
                                color: '#999'
                            }
                        },
                        axisLabel: {
                            distance: 7,
                            color: '#999',
                            fontSize: 10
                        },
                        anchor: {
                            show: true,
                            showAbove: true,
                            size: 15,
                            itemStyle: {
                                borderWidth: 10
                            }
                        },
                        title: {
                            show: false
                        },
                        detail: {
                            valueAnimation: true,
                            fontSize: 20,
                            formatter: function (value) {
                                return value + '%';
                            },
                            offsetCenter: [0, '70%']
                        },
                        data: [
                            {
                                value: 78
                            }
                        ]
                    }
                ]
            };

            option && myChart.setOption(option);

            //    var myChart = echarts.init(chartDom, null, {
            //        renderer: 'canvas',
            //        useDirtyRect: false
            //    });
            //    var option;
            //    function renderItem(params, api) {
            //        var valOnRadian = api.value(1);
            //        var coords = api.coord([api.value(0), valOnRadian]);
            //        var polarEndRadian = coords[3];
            //        var imageStyle = {
            //            image: _panelImageURL,
            //            x: params.coordSys.cx - _outerRadius,
            //            y: params.coordSys.cy - _outerRadius,
            //            width: _outerRadius * 2,
            //            height: _outerRadius * 2
            //        };
            //        return {
            //            type: 'group',
            //            children: [
            //                {
            //                    type: 'image',
            //                    style: imageStyle,
            //                    clipPath: {
            //                        type: 'sector',
            //                        shape: {
            //                            cx: params.coordSys.cx,
            //                            cy: params.coordSys.cy,
            //                            r: _outerRadius,
            //                            r0: _innerRadius,
            //                            startAngle: 0,
            //                            endAngle: -polarEndRadian,
            //                            transition: 'endAngle',
            //                            enterFrom: { endAngle: 0 }
            //                        }
            //                    }
            //                },
            //                {
            //                    type: 'image',
            //                    style: imageStyle,
            //                    clipPath: {
            //                        type: 'polygon',
            //                        shape: {
            //                            points: makePionterPoints(params, polarEndRadian)
            //                        },
            //                        extra: {
            //                            polarEndRadian: polarEndRadian,
            //                            transition: 'polarEndRadian',
            //                            enterFrom: { polarEndRadian: 0 }
            //                        },
            //                        during: function (apiDuring) {
            //                            apiDuring.setShape(
            //                                'points',
            //                                makePionterPoints(params, apiDuring.getExtra('polarEndRadian'))
            //                            );
            //                        }
            //                    }
            //                },
            //                {
            //                    type: 'circle',
            //                    shape: {
            //                        cx: params.coordSys.cx,
            //                        cy: params.coordSys.cy,
            //                        r: _insidePanelRadius
            //                    },
            //                    style: {
            //                        fill: '#fff',
            //                        shadowBlur: 25,
            //                        shadowOffsetX: 0,
            //                        shadowOffsetY: 0,
            //                        shadowColor: 'rgba(76,107,167,0.4)'
            //                    }
            //                },
            //                {
            //                    type: 'text',
            //                    extra: {
            //                        valOnRadian: valOnRadian,
            //                        transition: 'valOnRadian',
            //                        enterFrom: { valOnRadian: 0 }
            //                    },
            //                    style: {
            //                        text: makeText(valOnRadian),
            //                        fontSize: 50,
            //                        fontWeight: 700,
            //                        x: params.coordSys.cx,
            //                        y: params.coordSys.cy,
            //                        fill: 'rgb(0,50,190)',
            //                        align: 'center',
            //                        verticalAlign: 'middle',
            //                        enterFrom: { opacity: 0 }
            //                    },
            //                    during: function (apiDuring) {
            //                        apiDuring.setStyle(
            //                            'text',
            //                            makeText(apiDuring.getExtra('valOnRadian'))
            //                        );
            //                    }
            //                }
            //            ]
            //        };
            //    }
            //    function convertToPolarPoint(renderItemParams, radius, radian) {
            //        return [
            //            Math.cos(radian) * radius + renderItemParams.coordSys.cx,
            //            -Math.sin(radian) * radius + renderItemParams.coordSys.cy
            //        ];
            //    }
            //    function makePionterPoints(renderItemParams, polarEndRadian) {
            //        return [
            //            convertToPolarPoint(renderItemParams, _outerRadius, polarEndRadian),
            //            convertToPolarPoint(
            //                renderItemParams,
            //                _outerRadius,
            //                polarEndRadian + Math.PI * 0.03
            //            ),
            //            convertToPolarPoint(renderItemParams, _pointerInnerRadius, polarEndRadian)
            //        ];
            //    }
            //    function makeText(valOnRadian) {
            //        // Validate additive animation calc.
            //        if (valOnRadian < -10) {
            //            alert('illegal during val: ' + valOnRadian);
            //        }
            //        return ((valOnRadian / _valOnRadianMax) * 100).toFixed(0) + '%';
            //    }
            //     option = {
            //        animationEasing: _animationEasingUpdate,
            //        animationDuration: _animationDuration,
            //        animationDurationUpdate: _animationDurationUpdate,
            //        animationEasingUpdate: _animationEasingUpdate,
            //        dataset: {
            //            source: [[1, 156]]
            //        },
            //        tooltip: {},
            //        angleAxis: {
            //            type: 'value',
            //            startAngle: 0,
            //            show: false,
            //            min: 0,
            //            max: _valOnRadianMax
            //        },
            //        radiusAxis: {
            //            type: 'value',
            //            show: false
            //        },
            //        polar: {},
            //        series: [
            //            {
            //                type: 'custom',
            //                coordinateSystem: 'polar',
            //                renderItem: renderItem
            //            }
            //        ]
            //    };
            //    setInterval(function () {
            //        var nextSource = 98;// [[1, Math.round(Math.random() * _valOnRadianMax)]];
            //        myChart.setOption({
            //            dataset: {
            //                source: nextSource
            //            }
            //        });
            //    }, 3000);

            //    if (option && typeof option === 'object') {
            //        myChart.setOption(option);
            //    }

        },
        //任务完成率
        GetTaskCompletionRate: function () {


            var chartDom = document.getElementById('mainTaskCompletionRate');
            var myChart = echarts.init(chartDom, null, {
                renderer: 'canvas',
                useDirtyRect: false
            });
            var option;

            option = {
                //title: {
                //    text: 'Chart'
                //},
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {

                    data: ['Email']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '1%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: ['5-1', '5-2', '5-3', '5-4', '5-5', '5-6', '5-7']
                    }
                ],
                yAxis: [
                    {
                        interval: 25,
                        axisLabel: {
                            formatter: '{value} %'
                        },
                        axisLine: {
                            show: true
                        },
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: 'ttttt',
                        type: 'line',
                        stack: 'Total',
                        label: {
                            show: true,
                            position: 'top'
                        },
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        data: [78, 93, 76, 55, 68, 89, 82]
                    }
                ]
            };


            //option = {
            //    xAxis: {
            //        type: 'category',
            //        boundaryGap: false,
            //        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            //    },
            //    yAxis: {
            //        axisLine: {
            //            show: true
            //        },
            //        type: 'value'
            //    },
            //    grid: {
            //        left: '3%',
            //        right: '4%',
            //        bottom: '3%',
            //        containLabel: true
            //    },
            //    series: [
            //        {
            //            data: [820, 932, 901, 934, 1290, 1330, 1320],
            //            type: 'line',
            //            areaStyle: {}
            //        }
            //    ]
            //};

            option && myChart.setOption(option);
        },
        //任务量统计
        GetTaskNumsData: function () {

            var dom = document.getElementById('mainTaskNums');
            var myChart = echarts.init(dom, null, {
                renderer: 'canvas',
                useDirtyRect: false
            });
            var app = {};
            var option;
            const labelOption = {
                show: true,
                position: 'insideBottom',
                distance: 15,
                align: 'left',
                verticalAlign: 'middle',
                rotate: 90,
                formatter: '{c}  {name|{a}}',
                fontSize: 16,
                rich: {
                    name: {}
                }
            };
            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    left: '70%',//调整位置
                    data: ['下发任务', '完成任务']
                },
                xAxis: [
                    {
                        type: 'category',
                        axisTick: { show: false },
                        data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
                    }
                ],
                yAxis: [
                    {
                        //interval: 25,
                        axisLabel: {
                            formatter: '{value}'
                        },
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '下发任务',
                        type: 'bar',
                        barGap: 0,
                        label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: [320, 332, 301, 334, 390]
                    },
                    {
                        name: '完成任务',
                        type: 'bar',
                        label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: [220, 182, 191, 234, 290]
                    }
                ]
            };

            if (option && typeof option === 'object') {
                myChart.setOption(option);
            }
        },
        //堆垛机数据统计
        GetMainDDJData: function () {
            var chartDom = document.getElementById('mainddj');
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                title: {
                    text: ''
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    left: '70%',//调整位置
                    data: ['堆垛机利用率', '堆垛机故障率']
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['5-8白班', '5-8晚班', '5-9白班', '5-9晚班', '5-10白班', '5-10晚班', '5-11白班', '5-11晚班', '5-12白班', '5-12晚班', '5-13白班', '5-13晚班', '5-14白班', '5-14晚班']
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} %'
                    }
                },
                series: [
                    {
                        name: '堆垛机故障率',
                        type: 'line',
                        data: [1, -2, 2, 5, 3, 2, 0],
                        markPoint: {
                            data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
                        },
                        markLine: {
                            data: [
                                { type: 'average', name: 'Avg' },
                                [
                                    {
                                        symbol: 'none',
                                        x: '90%',
                                        yAxis: 'max'
                                    },
                                    {
                                        symbol: 'circle',
                                        label: {
                                            position: 'start',
                                            formatter: 'Max'
                                        },
                                        type: 'max',
                                        name: '最高点'
                                    }
                                ]
                            ]
                        }
                    },
                    {
                        name: '堆垛机利用率',
                        type: 'line',
                        data: [10, 11, 13, 11, 12, 12, 9],
                        markPoint: {
                            data: [
                                { type: 'max', name: 'Max' },
                                { type: 'min', name: 'Min' }
                            ]
                        },
                        markLine: {
                            data: [{ type: 'average', name: 'Avg' }]
                        }
                    }
                ]
            };

            option && myChart.setOption(option);
        },
        //故障统计
        GetMainFaultsData: function () {

            var chartDom = document.getElementById('mainFaults');
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },

                legend: {
                    left: '50%',//调整位置
                    data: ['故障次数', '故障持续时间']
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['SRM1', 'SRM2', 'SRM3', 'SRM4', 'SRM5', 'SRM6', '1011', '1012', '1013', '1014', '1015', '1016', '1017', '1018', '1019', '1020'],
                        axisPointer: {
                            type: 'shadow'
                        },
                        boundaryGap: false,
                    }
                ],
                yAxis: [
                    {
                        axisLine: {
                            show: true
                        },
                        type: 'value',
                        name: '故障次数',
                        interval: 25,
                        axisLabel: {
                            formatter: '{value} 次'
                        }
                    },
                    {
                        type: 'value',
                        name: '故障持续时间',
                        interval: 30,
                        axisLabel: {
                            formatter: '{value} 分钟'
                        }
                    }
                ],
                series: [
                    {
                        name: '故障次数',
                        type: 'bar',
                        barWidth: 12,
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + ' 次';
                            }
                        },
                        label: {
                            show: true,
                            position: 'top'
                        },
                        data: [
                            2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6
                        ]
                    },
                    {
                        name: '故障持续时间',
                        type: 'line',
                        yAxisIndex: 1,
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + ' 分钟';
                            }
                        },
                        data: [60, 2.2, 45, 4.5, 6.3, 10.2, 20.3]
                    }
                ]
            };

            option && myChart.setOption(option);
        },
        //作业时间数据统计
        GetmainJobTimesData: function () {
            var chartDom = document.getElementById('mainJobTimes');
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },

                legend: {
                    left: '70%',//调整位置
                    data: ['作业完成时间', '平均作业处理时间']
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
                        axisPointer: {
                            type: 'shadow'
                        }
                    }
                ],
                yAxis: [
                    {
                        axisLine: {
                            show: true
                        },
                        type: 'value',
                        name: '作业完成时间',
                        interval: 6,
                        axisLabel: {
                            formatter: '{value} h'
                        }
                    },
                    {
                        type: 'value',
                        name: '平均作业处理时间',
                        interval: 30,
                        axisLabel: {
                            formatter: '{value} h'
                        }
                    }
                ],
                series: [
                    {
                        name: '作业完成时间',
                        type: 'bar',
                        barWidth: 12,
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + ' ml';
                            }
                        },
                        label: {
                            show: true,
                            position: 'top'
                        },
                        data: [
                            2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6
                        ]
                    },
                    {
                        name: '平均作业处理时间',
                        type: 'line',
                        yAxisIndex: 1,
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + ' °C';
                            }
                        },
                        data: [60, 2.2, 45, 4.5, 6.3, 10.2, 20.3]
                    }
                ]
            };

            option && myChart.setOption(option);
        },

        //平均任务执行耗时
        GetDeviceTaskTimesData: function () {
            //deviceTaskTimes

            var chartDom = document.getElementById('deviceTaskTimes');
            var myChart = echarts.init(chartDom);
            var option;

            option = {

                legend: {

                    data: ['']
                },

                grid: {
                    left: '3%',
                    right: '2%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: ['5-1', '5-2', '5-3', '5-4', '5-5', '5-6', '5-7', '5-8', '5-9', '5-10', '5-11', '5-12', '5-13', '5-14', '5-15', '5-16', '5-17', '5-18', '5-19', '5-20', '5-21', '5-22', '5-23', '5-24', '5-25', '5-26', '5-27', '5-28', '5-29', '5-30', '5-31'],
                    }
                ],
                yAxis: [
                    {
                        interval: 6,
                        axisLabel: {
                            formatter: '{value} h'
                        },
                        axisLine: {
                            show: true
                        },
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: 'ttttt',
                        type: 'line',
                        stack: 'Total',
                        label: {
                            show: true,
                            position: 'top'
                        },
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        data: [20, 19, 23, 22, 18, 16, 14]
                    }
                ]
            };

            option && myChart.setOption(option);

        },
        //设备运行耗时统计
        GetDeviceRunTimesData: function () {

            var dom = document.getElementById('deviceRunTimes');
            var myChart = echarts.init(dom, null, {
                renderer: 'canvas',
                useDirtyRect: false
            });
            var app = {};
            var option;
            const labelOption = {
                show: true,
                position: 'insideBottom',
                distance: 15,
                align: 'left',
                verticalAlign: 'middle',
                rotate: 90,
                formatter: '{c}  {name|{a}}',
                fontSize: 16,
                rich: {
                    name: {}
                }
            };
            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    left: '70%',//调整位置
                    data: ['平均行驶时间', '平均取货时间', '平均放货时间']
                },
                xAxis: [
                    {
                        type: 'category',
                        axisTick: { show: false },
                        data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
                    }
                ],
                yAxis: [
                    {
                        interval: 15,
                        axisLabel: {
                            formatter: '{value} min'
                        },
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '平均行驶时间',
                        type: 'bar',
                        barGap: 0,
                        label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: [32, 32, 30, 34, 39]
                    },
                    {
                        name: '平均取货时间',
                        type: 'bar',
                        label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: [22, 18, 19, 34, 29]
                    },
                    {
                        name: '平均放货时间',
                        type: 'bar',
                        label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: [15, 23, 21, 15, 19]
                    }
                ]
            };

            if (option && typeof option === 'object') {
                myChart.setOption(option);
            }
        },
        //作业时间数据统计
        GetDeviceJobTimesData: function () {
            var chartDom = document.getElementById('deviceJobTimes');
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },

                legend: {
                    left: '70%',//调整位置
                    data: ['作业完成时间', '平均作业处理时间']
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
                        axisPointer: {
                            type: 'shadow'
                        }
                    }
                ],
                yAxis: [
                    {
                        axisLine: {
                            show: true
                        },
                        type: 'value',
                        name: '作业完成时间',
                        interval: 6,
                        axisLabel: {
                            formatter: '{value} h'
                        }
                    },
                    {
                        type: 'value',
                        name: '平均作业处理时间',
                        interval: 30,
                        axisLabel: {
                            formatter: '{value} h'
                        }
                    }
                ],
                series: [
                    {
                        name: '作业完成时间',
                        type: 'bar',
                        barWidth: 12,
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + ' ml';
                            }
                        },
                        label: {
                            show: true,
                            position: 'top'
                        },
                        data: [
                            2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6
                        ]
                    },
                    {
                        name: '平均作业处理时间',
                        type: 'line',
                        yAxisIndex: 1,
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + ' °C';
                            }
                        },
                        data: [60, 2.2, 45, 4.5, 6.3, 10.2, 20.3]
                    }
                ]
            };

            option && myChart.setOption(option);

        },
    };
    refreshGirdData = function () {

    };
    page.init();
}

var dom = document.getElementById('mainLastTaskCompletionRate');
var mainmyChart = echarts.init(dom, null, {
    renderer: 'canvas',
    useDirtyRect: false
});
var app = {};
var ROOT_PATH = 'https://echarts.apache.org/examples';
var option;

var _panelImageURL = ROOT_PATH + '/data/asset/img/custom-gauge-panel.png';
var _animationDuration = 1000;
var _animationDurationUpdate = 1000;
var _animationEasingUpdate = 'quarticInOut';
var _valOnRadianMax = 200;
var _outerRadius = 200;
var _innerRadius = 170;
var _pointerInnerRadius = 40;
var _insidePanelRadius = 140;
var _currentDataIndex = 0;
function renderItem(params, api) {
    var valOnRadian = api.value(1);
    var coords = api.coord([api.value(0), valOnRadian]);
    var polarEndRadian = coords[3];
    var imageStyle = {
        image: _panelImageURL,
        x: params.coordSys.cx - _outerRadius,
        y: params.coordSys.cy - _outerRadius,
        width: _outerRadius * 2,
        height: _outerRadius * 2
    };
    return {
        type: 'group',
        children: [
            {
                type: 'image',
                style: imageStyle,
                clipPath: {
                    type: 'sector',
                    shape: {
                        cx: params.coordSys.cx,
                        cy: params.coordSys.cy,
                        r: _outerRadius,
                        r0: _innerRadius,
                        startAngle: 0,
                        endAngle: -polarEndRadian,
                        transition: 'endAngle',
                        enterFrom: { endAngle: 0 }
                    }
                }
            },
            {
                type: 'image',
                style: imageStyle,
                clipPath: {
                    type: 'polygon',
                    shape: {
                        points: makePionterPoints(params, polarEndRadian)
                    },
                    extra: {
                        polarEndRadian: polarEndRadian,
                        transition: 'polarEndRadian',
                        enterFrom: { polarEndRadian: 0 }
                    },
                    during: function (apiDuring) {
                        apiDuring.setShape(
                            'points',
                            makePionterPoints(params, apiDuring.getExtra('polarEndRadian'))
                        );
                    }
                }
            },
            {
                type: 'circle',
                shape: {
                    cx: params.coordSys.cx,
                    cy: params.coordSys.cy,
                    r: _insidePanelRadius
                },
                style: {
                    fill: '#fff',
                    shadowBlur: 25,
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    shadowColor: 'rgba(76,107,167,0.4)'
                }
            },
            {
                type: 'text',
                extra: {
                    valOnRadian: valOnRadian,
                    transition: 'valOnRadian',
                    enterFrom: { valOnRadian: 0 }
                },
                style: {
                    text: makeText(valOnRadian),
                    fontSize: 50,
                    fontWeight: 700,
                    x: params.coordSys.cx,
                    y: params.coordSys.cy,
                    fill: 'rgb(0,50,190)',
                    align: 'center',
                    verticalAlign: 'middle',
                    enterFrom: { opacity: 0 }
                },
                during: function (apiDuring) {
                    apiDuring.setStyle(
                        'text',
                        makeText(apiDuring.getExtra('valOnRadian'))
                    );
                }
            }
        ]
    };
}
function convertToPolarPoint(renderItemParams, radius, radian) {
    return [
        Math.cos(radian) * radius + renderItemParams.coordSys.cx,
        -Math.sin(radian) * radius + renderItemParams.coordSys.cy
    ];
}
function makePionterPoints(renderItemParams, polarEndRadian) {
    return [
        convertToPolarPoint(renderItemParams, _outerRadius, polarEndRadian),
        convertToPolarPoint(
            renderItemParams,
            _outerRadius,
            polarEndRadian + Math.PI * 0.03
        ),
        convertToPolarPoint(renderItemParams, _pointerInnerRadius, polarEndRadian)
    ];
}
function makeText(valOnRadian) {
    // Validate additive animation calc.
    if (valOnRadian < -10) {
        alert('illegal during val: ' + valOnRadian);
    }
    return ((valOnRadian / _valOnRadianMax) * 100).toFixed(0) + '%';
}
option = {
    animationEasing: _animationEasingUpdate,
    animationDuration: _animationDuration,
    animationDurationUpdate: _animationDurationUpdate,
    animationEasingUpdate: _animationEasingUpdate,
    dataset: {
        source: [[1, 156]]
    },
    tooltip: {},
    angleAxis: {
        type: 'value',
        startAngle: 0,
        show: false,
        min: 0,
        max: _valOnRadianMax
    },
    radiusAxis: {
        type: 'value',
        show: false
    },
    polar: {},
    series: [
        {
            type: 'custom',
            coordinateSystem: 'polar',
            renderItem: renderItem,
        }
    ]
};
setInterval(function () {
    var nextSource = 98;// [[1, Math.round(Math.random() * _valOnRadianMax)]];
    mainmyChart.setOption({
        dataset: {
            source: nextSource
        }
    });
}, 3000);

if (option && typeof option === 'object') {
    mainmyChart.setOption(option);
}