WEBUI/WMS.BZWeb/Areas/SXManager/Views/DeviceEffectives/QIndex.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 SrmRateData;
    var RobotRateData;
    var page = {
        init: function () {
            $("#beginTime").val(beginTime);
            $("#endTime").val(endTime);
            $("#robotbeginTime").val(beginTime);
            $("#robotendTime").val(endTime);
            page.GetSrmRateData();
            page.GetRobotRateData();
            page.initGird();
            page.bind();
            //page.GetSRMRate('SRM201');
            //page.GetSRMRate('SRM202');
            //page.GetSRMRate('SRM203');
            //page.GetSRMRate('SRM204');
            //page.GetSRMRate('SRM205');
            //page.GetSRMRate('SRM206');
            //page.GetSRMRate('SRM207');
            //page.GetSRMRate('SRM208');
        },
        bind: function () {
            // 查询
            $('#btn_Search').on('click', function () {
               
                page.GetSrmRateData();
            });
            $('#btn_robotSearch').on('click', function () {

                page.GetRobotRateData();
            });
            page.SpanFunction($("#SRMSpan").find('span'), page.ChangeFloor);
        },
        // 初始化列表 
        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');
            //            }
            //        });
            //    });
            //}
        },

        GetSrmRateData: function () {

            learun.httpAsync('GET', top.$.rootUrl + '/SXManager/DeviceEffectives/GetSrmRateData', { queryJson: JSON.stringify({ beginTime: $("#beginTime").val(), endTime: $("#endTime").val(), floor: $("#SRMSpan span.active").attr('data-queryValue'), DevType:'2'  }) }, function (res) {
                if (res.code > 0) {
                    SrmRateData = res.data;
                    let floor = $("#SRMSpan span.active").attr('data-queryValue');

                    for (let i = 0; i < SrmRateData[floor].length; i++) {
                        page.GetSRMRate(SrmRateData[floor][i].code, SrmRateData[floor][i]);
                    } ;
                }
            });

        },
        GetRobotRateData: function () {

            learun.httpAsync('GET', top.$.rootUrl + '/SXManager/DeviceEffectives/GetRobotRateData', { queryJson: JSON.stringify({ beginTime: $("#robotbeginTime").val(), endTime: $("#robotendTime").val(), floor: $("#SRMSpan span.active").attr('data-queryValue'), DevType: '3' }) }, function (res) {
                if (res.code > 0) {
                    RobotRateData = res.data;     
                    //RobotRateData['Robot1']
                    page.GetSRMRate(RobotRateData['Robot1'][0].code, RobotRateData['Robot1'][0]);
                    page.GetSRMRate(RobotRateData['Robot2'][0].code, RobotRateData['Robot2'][0]);
                }
            });

        },
        ChangeFloor: function () {
            let floor = $("#SRMSpan span.active").attr('data-queryValue');

            if (SrmRateData) {
                for (let i = 0; i < SrmRateData[floor].length; i++) {
                    page.GetSRMRate(SrmRateData[floor][i].code, SrmRateData[floor][i]);
                };
            }

     
        },
        //
        GetSRMRate: function (id,srmdatas) {
            //    var chartDom = document.getElementById('mainLastTaskCompletionRate');            
            var chartDom;
            let isRobot = id.includes('Robot');
            if (isRobot) {
                $("#" + id).next().text(id);
                chartDom = document.getElementById(id);
            }
            else {
                let last = id.charAt(id.length - 1);
                $("#SRM0" + last).next().text(id);
                chartDom = document.getElementById("SRM0" + last);
            }
            var myChart = echarts.init(chartDom, 'shine');
            var option;
            let data = srmdatas.rates;
            option = {
                title: {
                    text: ' ' + srmdatas.utilizationrate + ' '  ,//data.total                  
                    textStyle: {
                        color: '#1C3554',
                    },
                    subtext:'     利用率',
                    subtextStyle: {
                        color: '#5A5E66',
                    },
                    left: '26%',
                    top: '42%'
                },
                tooltip: {
                    trigger: 'item',
                    borderColor: "#fff",
                    formatter: function (params) {
                        // console.log(params);
                        // 计算百分比时，params.percent是图表自己计算的；
                        // params.data.rate（在dimensions中定义的）是我们自己传的值
                        let html =`<div style="height:auto;width: 135px;">
          <div style="font-size:14px;font-weight:bold;color:#333;margin-bottom:16px;display:flex;align-items:center;line-height:1;">
            <span style="display:inline-block;margin-right:8px;border-radius:6px;width:6px;height:6px;background-color:${params.color};"></span>
            ${params.name}
          </div>
          <div style="font-size:12px;color:#808080;margin-bottom:8px;display:flex;align-items:center;line-height:1;">
            <span>时长</span>
            <span style="flex:1;text-align:right;">${params.data.desc}</span>
          </div>
          <div style="font-size:12px;color:#808080;margin-bottom:8px;display:flex;align-items:center;line-height:1;">
            <span>占比</span>
            <span style="flex:1;text-align:right;">${(params.data.rate).toFixed(2)}%</span>
          </div>
             <div style="font-size:12px;color:#808080;margin-bottom:8px;display:flex;align-items:center;line-height:1;">
            <span>出库</span>
            <span style="flex:1;text-align:right;">${srmdatas.OutDepot}</span>
          </div>

             <div style="font-size:12px;color:#808080;margin-bottom:8px;display:flex;align-items:center;line-height:1;${isRobot ? 'display:none' : 'display:black'}">
            <span>入库</span>
            <span style="flex:1;text-align:right;">${srmdatas.EnterDepot }</span>
          </div>
             <div style="font-size:12px;color:#808080;margin-bottom:8px;display:flex;align-items:center;line-height:1;${isRobot ? 'display:none' : 'display:black'}">
            <span>移库</span>
            <span style="flex:1;text-align:right;">${srmdatas.TransferDepot}</span>
          </div>
        </div>`;
                        return html;
                    },
                     
                },
                legend: {
                    //itemWidth: 25, // 标志图形的长度
                    //itemHeight: 25, // 标志图形的宽度
                    orient: "vertical",
                    //right: 60,
                    left: '60%',//调整位置
                    //y: "center",
                    textStyle: {
                        //图例文字的样式
                        color: "black", //文字颜色
                        fontSize: 10, //文字大小
                    },
                    // 回调函数 实现标志图形字体后边加上百分比
                    formatter(name) {
                        // console.log(option);
                        let than = option.series[0].data; //获取series中的data
                        let total = 0;
                        let tarValue;
                        for (let i = 0, l = than.length; i < l; i++) {
                            total += than[i].value;
                            if (than[i].name == name) {
                                tarValue = than[i].rate;
                            }
                        }
                        //let p = total>0? (tarValue / total) * 100 :0;
                        return name + " " + " " + tarValue.toFixed(2) + "%";
                    }, 
                    //orient: 'vertical',
                    //left: '76%',//调整位置
                    top: '5%',
                    //left: 'center'
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: ['39%', '70%'], 
                        center: ['37%', '50%'],
                        avoidLabelOverlap: false,                        
                        itemStyle: {
                            borderRadius: 4
                        },
                        minAngle: 30, // 设置扇区最小角度
                        label: {
                            show: false,
                            position: 'center',
                            //normal: {
                            //    formatter: '{b}:{d}% ( {c} )'
                            //}
                        },
                        //emphasis: {
                        //    label: {
                        //        show: true,
                        //        fontSize: 10,
                        //        fontWeight: 'bold'
                        //    }
                        //},
                        labelLine: {
                            show: false
                        },
                        data:
                            data
                        //[
                        //    { value: 1048, name: 'Search Engine',desc:"ASED" },
                        //    { value: 735, name: 'Direct', desc: "dERDE" },
                        //    { value: 580, name: 'Email', desc: "EMAILSSS" },
                        //    { value: 484, name: 'Union Ads', desc: "UNIONS" },
                        //    { value: 300, name: 'Video Ads', desc: "VIDEO" }
                        //]
                    }
                ]
            };

            option && myChart.setOption(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);



  

        },
         
    };
    refreshGirdData = function () {

    };
    page.init();
}

 
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,
        }
    ]
};