WEBUI/WMS.BZWeb/Views/Home/SXManager/SXManager.js

//var bootstrap = function ($, learun) {
$(function () {
    "use strict";

    function GetTodayInOutPie(data) {
        var dom = document.getElementById('todayinoutpie');
        var myChart = echarts.init(dom, null, {
            renderer: 'canvas',
            useDirtyRect: false
        });
        var app = {};

        var option;

        option = {
            title: {
                text: data.total,
                textStyle: {
                    color: '#1C3554',
                },
                subtext: '今日任务总数',
                subtextStyle: {
                    color: '#5A5E66',
                },
                left: 'center',
                top: '37%'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '1%',
                left: 'center'
            },
            series: [
                {
                    name: '出入库统计',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,

                    itemStyle: {
                        normal: {
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            },
                            color: function (colors) {
                                var colorList = [
                                    '#40A0FF',
                                    '#F7CA4D',
                                    '#23B89A',
                                    '#40A0FF',
                                    '#F7CA4D',
                                    '#23B89A'
                                ];
                                return colorList[colors.dataIndex];
                            }
                        }
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 40,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: data.datas
                    //[
                    //{ value: 1048, name: '出库任务' },
                    //{ value: 735, name: '入库任务' },
                    //{ value: 580, name: '移库任务' }
                    //]
                }
            ]
        };

        if (option && typeof option === 'object') {
            myChart.setOption(option);
        }
        window.addEventListener('resize', myChart.resize);
        //var chartDom = document.getElementById('todayinoutpie');
        //var myChart = echarts.init(chartDom);
        //var option;

        //option = {
        //    tooltip: {
        //        trigger: 'item'
        //    },
        //    legend: {
        //        top: '5%',
        //        left: 'center'
        //    },
        //    series: [
        //        {
        //            name: 'Access From',
        //            type: 'pie',
        //            radius: ['40%', '70%'],
        //            avoidLabelOverlap: false,
        //            itemStyle: {
        //                borderRadius: 10,
        //                borderColor: '#fff',
        //                borderWidth: 2
        //            },
        //            label: {
        //                show: false,
        //                position: 'center'
        //            },
        //            emphasis: {
        //                label: {
        //                    show: true,
        //                    fontSize: 40,
        //                    fontWeight: 'bold'
        //                }
        //            },
        //            labelLine: {
        //                show: false
        //            },
        //            data: [
        //                { value: 1048, name: 'Search Engine' },
        //                { value: 735, name: 'Direct' },
        //                { value: 580, name: 'Email' },
        //                { value: 484, name: 'Union Ads' },
        //                { value: 300, name: 'Video Ads' }
        //            ]
        //        }
        //    ]
        //};

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

    function Get7daysTaskBar(data) {
        var dom = document.getElementById('sevendaysTask');
        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: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            color: ['#40A0FF', '#23B89A', '#FF8541'],
            //tooltip: {
            //    trigger: 'axis',
            //    axisPointer: {
            //        type: 'shadow'
            //    }
            //},
            legend: {
                left: '57%',//调整位置
                data: ['出库', '入库', '移库']
            },
            xAxis: [
                {
                    type: 'category',
                    axisTick: { show: false },
                    data: data.xAxis,// ['5-10', '5-11', '5-12', '5-13', '5-14', '5-15', '5-16'],

                }
            ],
            yAxis: [
                {
                    /* interval: 50,*/
                    axisLabel: {
                        formatter: '{value}'
                    },
                    type: 'value'
                }
            ],
            series: [

                {
                    name: '出库',
                    type: 'bar',
                    //label: labelOption,
                    emphasis: {
                        focus: 'series'
                    },
                    lineStyle: { // 设置线条的style等
                        normal: {
                            color: '#40A0FF', // 折线线条颜色:红色
                        },
                    },
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                position: 'top',

                            },
                            //这里是颜色
                            color: function (params) {

                                //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                                var colorList = ['#40A0FF'];
                                return colorList[params.dataIndex]
                            }
                        }, // 移入当前的柱状图时改变颜色
                        emphasis: {
                            color: '#40A0FF',
                        }
                    },
                    data: data.series[0].data//[22, 18, 19, 34, 29]
                },

                {
                    name: '入库',
                    type: 'bar',
                    barGap: 0,
                    //label: labelOption,
                    emphasis: {
                        focus: 'series'
                    },
                    lineStyle: { // 设置线条的style等
                        normal: {
                            color: '#23B89A', // 折线线条颜色:红色
                        },
                    },
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                position: 'top',

                            },
                            //这里是颜色
                            color: function (params) {
                                //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                                var colorList = ['#23B89A'];
                                return colorList[params.dataIndex]
                            }
                        },
                        emphasis: {
                            color: '#23B89A',
                        }
                    },
                    data: data.series[1].data//[32, 32, 30, 34, 39]
                },
                {
                    name: '移库',
                    type: 'bar',
                    //label: labelOption,
                    emphasis: {
                        focus: 'series'
                    },
                    lineStyle: { // 设置线条的style等
                        normal: {
                            color: '#FF8541', // 折线线条颜色:红色
                        },
                    },
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                position: 'top',

                            },
                            //这里是颜色
                            color: function (params) {

                                //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                                var colorList = ['#FF8541'];
                                return colorList[params.dataIndex]
                            }
                        },
                        emphasis: {
                            color: '#FF8541',
                        }
                    },
                    data: data.series[2].data// [15, 23, 21, 15, 19]
                }
            ]
        };

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

    function GetWarehouseCellPie(data) {
        var chartDom = document.getElementById('WarehouseCell');
        var myChart = echarts.init(chartDom);
        var option;

        option = {

            tooltip: {
                trigger: 'item'
            },
            legend: {
                data: ['已使用', '空闲', '禁用', '锁定'],
                orient: 'vertical',
                // orient: 'horizontal',                
                bottom: '-5',
                // left: 'center',

                // top: "50",
                //right: '-80%',
                textStyle: { color: "#000000" },//字体颜色
                //icon: "circle"//图例形状设置
                //orient: 'vertical',
                //right: 'right'
                left: '79%',//调整位置
            },
            series: [
                {
                    name: '货位使用情况',
                    type: 'pie',
                    radius: '60%',
                    data: data
                    //[{ value: 1048, name: '已使用' },
                    //{ value: 735, name: '空闲' },
                    //{ value: 580, name: '禁用' },
                    //{ value: 484, name: '锁定' }]
                    , itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                formatter: '{b}:{c}({d}%)'
                            },
                            labelLine: {
                                show: true
                            },
                            color: function (colors) {
                                var colorList = [
                                    '#F4BD37', '#23B89A',
                                    '#D8E7FC',
                                    '#E46989',

                                ];
                                return colorList[colors.dataIndex];
                            }
                        }
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 40,
                            fontWeight: 'bold'
                        },
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                    labelLine: {
                        show: false
                    }
                }
            ]
        };

        option && myChart.setOption(option);
    }

    function GetTunnelWarehouseCellBar(data) {

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

        //https://blog.csdn.net/fu983531588/article/details/121338767
        //Echarts绘制横向柱状图(圆角+渐变)  https://blog.csdn.net/weixin_43953710/article/details/106694317
        //https://blog.csdn.net/lilycheng1986/article/details/121853940

        //var data = [{ "qty": 16, "total": 1732 }, { "qty": 787, "total": 1732 }, { "qty": 841, "total": 1700 }];
        var barWidth = 10;

        //option = {
        //    grid: {
        //        top: '5%',
        //        left: '25%',
        //        right: '25%',
        //        bottom: '0%',
        //        containLabel: true // 显示范围包含坐标刻度
        //    },

        //    //grid: {
        //    //    top: '10px',
        //    //    left: '120px',
        //    //    bottom: '30px',
        //    //},
        //    xAxis: {
        //        show: false
        //    },
        //    yAxis: {
        //        type: 'category',
        //        inverse: true, // 倒叙
        //        axisLabel: {
        //            margin: 0,
        //            align: 'left',
        //            formatter: (val) => {
        //                return `${val}`;
        //            }
        //        },
        //        axisLine: {
        //            show: false // 轴线
        //        },
        //        axisTick: {
        //            show: false // 刻度线
        //        },
        //        data: ['栏目1', '栏目2', '栏目3']
        //    },
        //    series: [
        //        {
        //            type: 'bar',
        //            showBackground: true,
        //            barWidth: 10,
        //            barMaxWidth: 20,
        //            barMinWidth: 5,
        //            label: {
        //                show: true,
        //                position: 'left',
        //                offset: [100, 0],
        //                valueAnimation: true,
        //                fontFamily: 'monospace',
        //                fontSize: 12,
        //                textStyle: {
        //                    //数值样式
        //                    color: "#1C3554",
        //                    fontSize: 12
        //                },
        //                formatter: function (params) {
        //                    return params.data.realValue + '/' + params.data.value;
        //                },
        //                // distance: -22
        //            },
        //            itemStyle: {
        //                normal: {
        //                    barBorderRadius: [0, 20, 20, 0],  //设置圆角方向[上，右，下，左]
        //                    //这里是颜色
        //                    color: function (params) {
        //                        //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
        //                        var colorList = ['#40A0FF'];
        //                        return colorList[params.dataIndex]
        //                    }
        //                }
        //            },
        //            data: data.map(function (item) {
        //                return {
        //                    realValue: item.qty,
        //                    value: item.total,
        //                };
        //            }),
        //        }
        //    ]
        //};
        option = {
            //backgroundColor: 'black',
            grid: {
                top: '53%',
                left: '25%',
                right: '25%',
                bottom: '0%',
                containLabel: true // 显示范围包含坐标刻度
            },
            xAxis: {
                show: false,
            },
            yAxis: {
                data: data.map(item => item.tunnel),
                inverse: true,
                splitLine: {
                    show: false,
                },
                axisLabel: {
                    textStyle: { fontSize: '80%', color: '#5A5E66' },
                },
                axisLine: {
                    show: false,
                },
                axisTick: false,
            },
            series: [
                {
                    type: 'bar',
                    barWidth: barWidth,
                    barGap: '5%',
                    barCategoryGap: '5%',/*多个并排柱子设置柱子之间的间距*/
                    zlevel: 2,
                    data: data.map(function (item) {
                        return {
                            value: item.qty
                        };
                    }),
                    itemStyle: {
                        normal: {
                            barBorderRadius: [0, 20, 20, 0],  //设置圆角方向[上，右，下，左]
                            //这里是颜色
                            color: function (params) {
                                //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                                var colorList = ['#40A0FF'];
                                return colorList[params.dataIndex]
                            }
                        }
                    }
                },
                {
                    type: 'bar',
                    barWidth: barWidth,
                    distance: 15,// 标签距离柱条的距离
                    barGap: '-100%',
                    barCategoryGap: '5%',/*多个并排柱子设置柱子之间的间距*/
                    data: data.map(function (item) {
                        return {
                            value: item.total,
                            realValue: item.qty,
                            total: item.total,
                        };
                    }),
                    label: {
                        normal: {
                            show: true,
                            precision: 1,
                            position: 'right',
                            offset: [10, 0],
                            valueAnimation: true,
                            fontFamily: 'monospace',
                            fontSize: 12,
                            textStyle: {
                                //数值样式
                                color: "#1C3554",
                                fontSize: 12
                            },
                            formatter: function (params) {
                                return params.data.realValue + '/' + params.data.total;
                            },
                        }
                    },

                    itemStyle: {
                        borderRadius: [0, 20, 20, 0],
                        normal: {
                            barBorderRadius: [0, 20, 20, 0],  //设置圆角方向[上，右，下，左]
                            //这里是颜色
                            color: function (params) {
                                //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                                var colorList = ['#E1E5E8'];
                                return colorList[params.dataIndex]
                            }
                        }, // 移入当前的柱状图时改变颜色
                    }
                },
            ],
        };

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

        window.addEventListener('resize', myChart.resize);
    }
    function GettodaysHourTask(data) {
        var chartDom = document.getElementById('todaysHourTask');
        var myChart = echarts.init(chartDom, null, {
            renderer: 'canvas',
            useDirtyRect: false
        });
        var option;

        option = {

            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                left: '57%',//调整位置
                top: '30',
                data: ['出库', '入库', '移库']
            },

            grid: {
                left: '3%',
                right: '4%',
                bottom: '1%',
                containLabel: true
            },
            xAxis: [
                {
                    //type: 'category',
                    boundaryGap: false,
                    data: data.xAxis,//['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
                }
            ],
            yAxis: [
                {

                    axisLabel: {
                        formatter: '{value}'
                    },
                    axisLine: {
                        show: true
                    },
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '出库',
                    type: 'line',
                    //stack: 'Total',
                    label: {
                        show: true,
                        position: 'top'
                    },
                    lineStyle: { // 设置线条的style等
                        normal: {
                            color: '#40A0FF', // 折线线条颜色:红色
                        },
                    },
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                position: 'top'
                            },
                            //这里是颜色
                            color: function (params) {
                                //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                                var colorList = ['#40A0FF'];
                                return colorList[params.dataIndex]
                            }
                        }
                    },
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: data.series[0].data//[78, 93, 76, 55, 68, 89, 82]
                },
                {

                    name: '入库',
                    type: 'line',
                    //stack: 'Total',
                    label: {
                        show: true,
                        position: 'top'
                    },
                    areaStyle: {},
                    lineStyle: { // 设置线条的style等
                        normal: {
                            color: '#23B89A', // 折线线条颜色:红色
                        },
                    },
                    itemStyle: {
                        normal: {
                            //这里是颜色
                            color: function (params) {

                                //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                                var colorList = ['#23B89A'];
                                return colorList[params.dataIndex]
                            }
                        }
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: data.series[1].data//[38, 23, 36, 45, 58, 59, 62]

                }
                ,
                {

                    name: '移库',
                    type: 'line',
                    //stack: 'Total',
                    label: {
                        show: true,
                        position: 'top'
                    },
                    lineStyle: { // 设置线条的style等
                        normal: {
                            color: '#FF8541', // 折线线条颜色:红色
                        },
                    },
                    areaStyle: {},
                    itemStyle: {
                        normal: {
                            //这里是颜色
                            color: function (params) {

                                //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                                var colorList = ['#FF8541'];
                                return colorList[params.dataIndex]
                            }
                        }
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: data.series[2].data//[8, 3, 6, 5, 8, 9, 6]

                }
            ]
        };


        option && myChart.setOption(option);
    }
    function GetMatWeightCategory(data) {
        var dom = document.getElementById('BomType');
        var myChart = echarts.init(dom, null, {
            renderer: 'canvas',
            useDirtyRect: false
        });
        var option;
        option = {
            tooltip: {
                trigger: 'item',
                position: ['20%', '50%']
            },

            legend: {
                data: data.map(item => item.name),
                orient: 'vertical',
                top: "15",
                //right: '-80%',
                textStyle: { color: "#000000" },//字体颜色
                //icon: "circle"//图例形状设置
                //orient: 'vertical',
                //right: 'right'
                left: '66%',//调整位置
                tooltip: {
                    show: true,
                    trigger: 'item',//鼠标移动上去展示全称
                },
                formatter: function (params) {
                    var val = "";
                    if (params.length > 6) {
                        val = params.substr(0, 12) + '...';
                        return val;
                    } else {
                        return params;
                    }
                },
            },
            series: [
                {

                    name: '物料占比',
                    type: 'pie',
                    radius: ['30%', '60%'],
                    avoidLabelOverlap: false,

                    itemStyle: {
                        normal: {
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            },
                            color: function (colors) {
                                var colorList = [
                                    '#12D8E4',
                                    '#75B1FF',
                                    '#3383FF',
                                    '#FFCD7E',
                                    '#FF8A8A',
                                    '#23B89A',
                                    '#F4BD37',
                                    '#D8E7FC',
                                    '#E46989',
                                ];
                                return colorList[colors.dataIndex];
                            }
                        }
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 40,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: data
                    // [
                    // { value: 1048, name: '出库任务' },
                    // { value: 735, name: '入库任务' },
                    // { value: 580, name: '移库任务' }
                    //]
                }
            ]
        };

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

        window.addEventListener('resize', myChart.resize);

    }
    function init() {

        top.learun.httpAsyncGet(top.$.rootUrl + '/' + Tenant + '/AdminDesktopHome/GetTodayTaskInOutPie', function (res) {
            if (res.code > 0) {
                var datas = [];
                for (var i = 0; i < res.data.tasks.length; i++) {
                    if (res.data.tasks[i].name == '出库') {
                        $("#outtoday").text(res.data.tasks[i].value);
                        datas.push({ value: res.data.tasks[i].value, name: "出库" });
                    }
                }
                for (var i = 0; i < res.data.tasks.length; i++) {
                    if (res.data.tasks[i].name == '入库') {
                        $("#intoday").text(res.data.tasks[i].value);
                        datas.push({ value: res.data.tasks[i].value, name: "入库" });
                    }
                }
                for (var i = 0; i < res.data.tasks.length; i++) {
                    if (res.data.tasks[i].name == '移库') {
                        $("#movetoday").text(res.data.tasks[i].value);
                        datas.push({ value: res.data.tasks[i].value, name: "移库" });
                    }
                }
                GetTodayInOutPie({ total: res.data.total, datas: datas });
            }
        });
        top.learun.httpAsyncGet(top.$.rootUrl + '/' + Tenant + '/AdminDesktopHome/Get7daysTaskBar', function (res) {
            if (res.code > 0) {
                Get7daysTaskBar(res.data);
            }
        });
        top.learun.httpAsyncGet(top.$.rootUrl + '/' + Tenant + '/AdminDesktopHome/GettodaysHourTask', function (res) {
            if (res.code > 0) {
                GettodaysHourTask(res.data);
            }
        });
        top.learun.httpAsyncGet(top.$.rootUrl + '/' + Tenant + '/Report/GetLocationUsageReportList?queryJson=%7B%7D', function (res) {
            if (res.code > 0) {
                var datas = [];
                var WarehouseCellPie = [];
                for (var i = 0; i < res.data.length; i++) {
                    if (res.data[i].Tunnel == '1') {
                        datas.push({ tunnel: res.data[i].Floor + "层 一巷道"   , qty: res.data[i].MaterilLocation, total: res.data[i].AllLocationTotal });
                    } else if (res.data[i].Tunnel == '2') {
                        datas.push({ tunnel: res.data[i].Floor + "层 二巷道" , qty: res.data[i].MaterilLocation, total: res.data[i].AllLocationTotal });
                    } else if (res.data[i].Tunnel == '3') {
                        datas.push({ tunnel: res.data[i].Floor + "层 三巷道" , qty: res.data[i].MaterilLocation, total: res.data[i].AllLocationTotal });
                    }
                    else if (res.data[i].Tunnel == '4') {
                        datas.push({ tunnel: res.data[i].Floor + "层 四巷道" , qty: res.data[i].MaterilLocation, total: res.data[i].AllLocationTotal });
                    } else if (res.data[i].Tunnel == '5') {
                        datas.push({ tunnel: res.data[i].Floor + "层 五巷道" , qty: res.data[i].MaterilLocation, total: res.data[i].AllLocationTotal });
                    } else if (res.data[i].Tunnel == '6') {
                        datas.push({ tunnel: res.data[i].Floor + "层 六巷道" , qty: res.data[i].MaterilLocation, total: res.data[i].AllLocationTotal });
                    } else if (res.data[i].Tunnel == '7') {
                        datas.push({ tunnel: res.data[i].Floor + "层 七巷道" , qty: res.data[i].MaterilLocation, total: res.data[i].AllLocationTotal });
                    } else if (res.data[i].Tunnel == '8') {
                        datas.push({ tunnel: res.data[i].Floor + "层 八巷道" , qty: res.data[i].MaterilLocation, total: res.data[i].AllLocationTotal });
                        } else if (res.data[i].Tunnel == '') {

                            WarehouseCellPie.push({ value: res.data[i].MaterilLocation, name: '已使用' });
                            WarehouseCellPie.push({ value: res.data[i].SpareLocation, name: '空闲' });
                            WarehouseCellPie.push({ value: res.data[i].StopLocation, name: '禁用' });
                            WarehouseCellPie.push({ value: res.data[i].LockLocation, name: '锁定' });
                        }
                    }
                    //var data = [{ "qty": 16, "total": 1732 }, { "qty": 787, "total": 1732 }, { "qty": 841, "total": 1700 }];
                    GetTunnelWarehouseCellBar(datas);
                    GetWarehouseCellPie(WarehouseCellPie);
                }
            });
        top.learun.httpAsyncGet(top.$.rootUrl + '/' + Tenant + '/AdminDesktopHome/GetMatWeightCategory', function (res) {
            if (res.code > 0) {
                GetMatWeightCategory(res.data);
            }
        });
    }

    init();
});