//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: '77%',//调整位置 }, series: [ { name: '货位使用情况', type: 'pie', radius: '70%', 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 = 20; //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: '15%', 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: { // normal: { // show: true, // //position: 'top' // } //}, lineStyle: { // 设置线条的style等 normal: { color: '#40A0FF', // 折线线条颜色:红色 }, }, itemStyle: { normal: { //这里是颜色 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: { // normal: { // 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: { // normal: { // 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 && 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: "一巷道", qty: res.data[i].MaterilLocation, total: res.data[i].AllLocationTotal }); } else if (res.data[i].Tunnel == '2') { datas.push({ tunnel: "二巷道", qty: res.data[i].MaterilLocation, total: res.data[i].AllLocationTotal }); } else if (res.data[i].Tunnel == '3') { datas.push({ tunnel: "三巷道", qty: res.data[i].MaterilLocation, total: res.data[i].AllLocationTotal }); } else if (res.data[i].Tunnel == '4') { datas.push({ tunnel: "四巷道", qty: res.data[i].MaterilLocation, total: res.data[i].AllLocationTotal }); } else if (res.data[i].Tunnel == '5') { datas.push({ tunnel: "五巷道", qty: res.data[i].MaterilLocation, total: res.data[i].AllLocationTotal }); } else if (res.data[i].Tunnel == '6') { datas.push({ tunnel: "六巷道", qty: res.data[i].MaterilLocation, total: res.data[i].AllLocationTotal }); } else if (res.data[i].Tunnel == '7') { datas.push({ tunnel: "七巷道", qty: res.data[i].MaterilLocation, total: res.data[i].AllLocationTotal }); } else if (res.data[i].Tunnel == '8') { datas.push({ tunnel: "八巷道", 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(); });