$(window).load(function () { $(".loading").fadeOut(); }) $(function () { var prefix = 'http://localhost:18531/eap/api/Dashboard/'; load(); setInterval(() => { load(); }, 1000 * 60 * 30); function load() { var dateNow = new Date(); var lastYear = dateNow.getFullYear() - 1; var thisYear = dateNow.getFullYear(); var yearSpan = lastYear + '、' + thisYear; $('.yearSpan').text(yearSpan); loadCurrentOutput(); loadCompletedLots(); loadMachineToPms(); loadPmRate(); loadAlarmCodePie(); loadGoodRate("中测"); loadGoodRate('成测'); loadOutputs('封装'); loadOutputs('中测'); loadOutputs('成测'); loadOS(); $('#owl').owlCarousel({ items: 1, autoPlay: 5000, pagination: false }); } function echarts_1(legends, data) { // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('echart1')); option = { tooltip: { trigger: 'item', formatter: "{b} : {c} ({d}%)" }, legend: { right: 0, top: 30, height: 160, itemWidth: 10, itemHeight: 10, itemGap: 10, textStyle: { color: 'rgba(255,255,255,.6)', fontSize: 12 }, orient: 'vertical', data: legends }, calculable: true, series: [ { name: ' ', color: ['#62c98d', '#2f89cf', '#4cb9cf', '#53b666', '#62c98d', '#205acf', '#c9c862', '#c98b62', '#c962b9', '#7562c9', '#c96262', '#c25775', '#00b7be'], type: 'pie', radius: [30, 70], center: ['35%', '50%'], roseType: 'radius', label: { normal: { show: true }, emphasis: { show: true } }, lableLine: { normal: { show: true }, emphasis: { show: true } }, data: data }, ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); window.addEventListener("resize", function () { myChart.resize(); }); } function echarts_2(legends, data) { // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('echart2')); option = { tooltip: { trigger: 'item', formatter: "{b} : {d}%" }, legend: { right: 0, top: 30, data: legends, icon: 'circle', textStyle: { color: 'rgba(255,255,255,.6)', } }, calculable: true, series: [{ name: '', color: ['#62c98d', '#2f89cf', '#4cb9cf', '#53b666', '#62c98d', '#205acf', '#c9c862', '#c98b62', '#c962b9', '#c96262'], type: 'pie', //起始角度,支持范围[0, 360] startAngle: 0, //饼图的半径,数组的第一项是内半径,第二项是外半径 radius: [51, 100], //支持设置成百分比,设置成百分比时第一项是相对于容器宽度,第二项是相对于容器高度 center: ['50%', '45%'], //是否展示成南丁格尔图,通过半径区分数据大小。可选择两种模式: // 'radius' 面积展现数据的百分比,半径展现数据的大小。 // 'area' 所有扇区面积相同,仅通过半径展现数据大小 roseType: 'area', //是否启用防止标签重叠策略,默认开启,圆环图这个例子中需要强制所有标签放在中心位置,可以将该值设为 false。 avoidLabelOverlap: false, label: { normal: { show: true, // formatter: '{c}辆' }, emphasis: { show: true } }, labelLine: { normal: { show: true, length2: 1, }, emphasis: { show: true } }, data: data }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); window.addEventListener("resize", function () { myChart.resize(); }); } function echarts_ZC(legends, dates, dbData, wbData) { // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('echart3')); option = { tooltip: { trigger: 'axis', axisPointer: { lineStyle: { color: '#57617B' } }, // formatter:'{a}-{b}:{c}%' }, legend: { data: legends, top: '0', textStyle: { color: "#fff" }, itemGap: 20, }, grid: { left: '0', right: '20', top: '10', bottom: '20', containLabel: true }, xAxis: [{ type: 'category', boundaryGap: false, axisLabel: { show: true, textStyle: { color: 'rgba(255,255,255,.6)' } }, axisLine: { lineStyle: { color: 'rgba(255,255,255,.1)' } }, data: dates }, { }], yAxis: [{ // min: 50, axisLabel: { show: true, textStyle: { color: 'rgba(255,255,255,.6)' } }, axisLine: { lineStyle: { color: 'rgba(255,255,255,.1)' } }, splitLine: { lineStyle: { color: 'rgba(255,255,255,.1)' } } }], series: [{ name: legends[0], type: 'line', smooth: false, lineStyle: { normal: { width: 2 } }, label: { normal: { show: false, position: 'bottom', color: '#fff', formatter: function (parmas) { if (parseFloat(parmas.data) <= 0) return ''; return parmas.data + '%'; } } }, areaStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(24, 163, 64, 0.3)' }, { offset: 0.8, color: 'rgba(24, 163, 64, 0)' }], false), shadowColor: 'rgba(0, 0, 0, 0.1)', shadowBlur: 10 } }, itemStyle: { normal: { color: '#cdba00', borderColor: 'rgba(137,189,2,0.27)', borderWidth: 12 } }, symbolSize: 2, data: dbData }, { name: legends[1], type: 'line', smooth: false, lineStyle: { normal: { width: 2 } }, label: { normal: { show: false, position: 'bottom', color: '#fff', formatter: function (parmas) { if (parseFloat(parmas.value) <= 0) return ''; return parmas.data + '%'; } } }, areaStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(39, 122,206, 0.3)' }, { offset: 0.8, color: 'rgba(39, 122,206, 0)' }], false), shadowColor: 'rgba(0, 0, 0, 0.1)', shadowBlur: 10 } }, itemStyle: { normal: { color: '#277ace', borderColor: 'rgba(0,136,212,0.2)', borderWidth: 12 } }, symbolSize: 2, data: wbData }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); window.addEventListener("resize", function () { myChart.resize(); }); } function echarts_CC(legends, dates, dbData, wbData) { // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('echart4')); option = { tooltip: { trigger: 'axis', axisPointer: { lineStyle: { color: '#57617B' } }, // formatter:'{a}-{b}:{c}%' }, legend: { data: legends, top: '0', textStyle: { color: "#fff" }, itemGap: 20, }, grid: { left: '0', right: '20', top: '10', bottom: '20', containLabel: true }, xAxis: [{ type: 'category', boundaryGap: false, axisLabel: { show: true, textStyle: { color: 'rgba(255,255,255,.6)' } }, axisLine: { lineStyle: { color: 'rgba(255,255,255,.1)' } }, data: dates }, { }], yAxis: [{ axisLabel: { show: true, textStyle: { color: 'rgba(255,255,255,.6)' } }, axisLine: { lineStyle: { color: 'rgba(255,255,255,.1)' } }, splitLine: { lineStyle: { color: 'rgba(255,255,255,.1)' } } }], series: [{ name: legends[0], type: 'line', smooth: false, lineStyle: { normal: { width: 2 } }, label: { normal: { show: false, position: 'bottom', color: '#fff', formatter: function (parmas) { if (parmas.data == 0) return ''; return parmas.data + '%'; } } }, areaStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(24, 163, 64, 0.3)' }, { offset: 0.8, color: 'rgba(24, 163, 64, 0)' }], false), shadowColor: 'rgba(0, 0, 0, 0.1)', shadowBlur: 10 } }, itemStyle: { normal: { color: '#cdba00', borderColor: 'rgba(137,189,2,0.27)', borderWidth: 12 } }, symbolSize: 2, data: dbData }, { name: legends[1], type: 'line', label: { normal: { show: false, position: 'bottom', color: '#fff', formatter: function (parmas) { if (parmas.data == 0) return ''; return parmas.data + '%'; } } }, smooth: false, symbolSize: 2, lineStyle: { normal: { width: 2 } }, areaStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(39, 122,206, 0.3)' }, { offset: 0.8, color: 'rgba(39, 122,206, 0)' }], false), shadowColor: 'rgba(0, 0, 0, 0.1)', shadowBlur: 10 } }, itemStyle: { normal: { color: '#277ace', borderColor: 'rgba(0,136,212,0.2)', borderWidth: 12 } }, data: wbData }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); console.log(option); window.addEventListener("resize", function () { myChart.resize(); }); } function outputZc(legends, xData, dbData, wbData) { // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('echart10')); option = { tooltip: { trigger: 'axis', axisPointer: { lineStyle: { color: '#57617B' } } }, "legend": { "data": legends, "top": "0%", "textStyle": { "color": "rgba(255,255,255,0.9)"//图例文字 } }, "xAxis": [ { "type": "category", data: xData, axisLine: { lineStyle: { color: "rgba(255,255,255,.1)" } }, axisLabel: { textStyle: { color: "rgba(255,255,255,.6)", fontSize: '14', }, }, }, ], "yAxis": [ { "type": "value", "name": "", // "interval": 10, "axisLabel": { "show": true, }, axisLine: { lineStyle: { color: 'rgba(255,255,255,.4)' } },//左线色 } ], "grid": { "top": "10%", "right": "30", "bottom": "30", "left": "70", show: true }, "series": [ { "name": legends[0], "type": "bar", "data": dbData, "barWidth": "auto", "itemStyle": { "normal": { "color": { "type": "linear", "x": 0, "y": 0, "x2": 0, "y2": 1, "colorStops": [ { "offset": 0, "color": "#609db8" }, { "offset": 1, "color": "#609db8" } ], "globalCoord": false } } }, label: { show: false, color: '#fff', position: 'top', formatter: function (params) { if (params.data == 0) { return ''; } return params.data; } } }, { "name": legends[1], "type": "bar", "data": wbData, "barWidth": "auto", "itemStyle": { "normal": { "color": { "type": "linear", "x": 0, "y": 0, "x2": 0, "y2": 1, "colorStops": [ { "offset": 0, "color": "#66b8a7" }, { "offset": 1, "color": "#66b8a7" } ], "globalCoord": false } } }, label: { show: false, color: '#fff', position: 'top', formatter: function (params) { if (params.data == 0) { return ''; } return params.data; } }, "barGap": "0" } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); window.addEventListener("resize", function () { myChart.resize(); }); } function outputCc(legends, xData, dbData, wbData) { // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('echart11')); option = { tooltip: { trigger: 'axis', axisPointer: { lineStyle: { color: '#57617B' } } }, "legend": { "data": legends, "top": "0%", "textStyle": { "color": "rgba(255,255,255,0.9)"//图例文字 } }, "xAxis": [ { "type": "category", data: xData, axisLine: { lineStyle: { color: "rgba(255,255,255,.1)" } }, axisLabel: { textStyle: { color: "rgba(255,255,255,.6)", fontSize: '14', }, }, }, ], "yAxis": [ { "type": "value", "name": "", // "interval": 10, "axisLabel": { "show": true, }, axisLine: { lineStyle: { color: 'rgba(255,255,255,.4)' } },//左线色 } ], "grid": { "top": "10%", "right": "30", "bottom": "30", "left": "70", show: true }, "series": [ { "name": legends[0], "type": "bar", "data": dbData, "barWidth": "auto", "itemStyle": { "normal": { "color": { "type": "linear", "x": 0, "y": 0, "x2": 0, "y2": 1, "colorStops": [ { "offset": 0, "color": "#609db8" }, { "offset": 1, "color": "#609db8" } ], "globalCoord": false } } }, label: { show: false, color: '#fff', position: 'top', } }, { "name": legends[1], "type": "bar", "data": wbData, "barWidth": "auto", "itemStyle": { "normal": { "color": { "type": "linear", "x": 0, "y": 0, "x2": 0, "y2": 1, "colorStops": [ { "offset": 0, "color": "#66b8a7" }, { "offset": 1, "color": "#66b8a7" } ], "globalCoord": false } } }, label: { show: false, color: '#fff', position: 'top', }, "barGap": "0" } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); window.addEventListener("resize", function () { myChart.resize(); }); } function outputFz(legends, xData, dbData, wbData) { // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('echart12')); option = { tooltip: { trigger: 'axis', axisPointer: { lineStyle: { color: '#57617B' } } }, "legend": { "data": legends, "top": "0%", "textStyle": { "color": "rgba(255,255,255,0.9)"//图例文字 } }, "xAxis": [ { "type": "category", data: xData, axisLine: { lineStyle: { color: "rgba(255,255,255,.1)" } }, axisLabel: { textStyle: { color: "rgba(255,255,255,.6)", fontSize: '14', }, }, }, ], "yAxis": [ { "type": "value", "name": "", // "interval": 10, "axisLabel": { "show": true, }, axisLine: { lineStyle: { color: 'rgba(255,255,255,.4)' } },//左线色 } ], "grid": { "top": "10%", "right": "30", "bottom": "30", "left": "70", show: true }, "series": [ { "name": legends[0], "type": "bar", "data": dbData, "barWidth": "auto", "itemStyle": { "normal": { "color": { "type": "linear", "x": 0, "y": 0, "x2": 0, "y2": 1, "colorStops": [ { "offset": 0, "color": "#609db8" }, { "offset": 1, "color": "#609db8" } ], "globalCoord": false } } }, label: { show: false, color: '#fff', position: 'top', } }, { "name": legends[1], "type": "bar", "data": wbData, "barWidth": "auto", "itemStyle": { "normal": { "color": { "type": "linear", "x": 0, "y": 0, "x2": 0, "y2": 1, "colorStops": [ { "offset": 0, "color": "#66b8a7" }, { "offset": 1, "color": "#66b8a7" } ], "globalCoord": false } } }, label: { show: false, color: '#fff', position: 'top', }, "barGap": "0" } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); window.addEventListener("resize", function () { myChart.resize(); }); } function echarts_5(legends, completedData, totalData) { // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('echart5')); // 颜色 var lightBlue = { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'rgba(41, 121, 255, 1)' }, { offset: 1, color: 'rgba(0, 192, 255, 1)' }], globalCoord: false } var option = { tooltip: { show: false }, grid: { top: '0%', left: '78', right: '14%', bottom: '0%', }, xAxis: { min: 0, max: totalData[0], splitLine: { show: false }, axisTick: { show: false }, axisLine: { show: false }, axisLabel: { show: false } }, yAxis: { data: legends, //offset: 15, axisTick: { show: false }, axisLine: { show: false }, axisLabel: { color: 'rgba(255,255,255,.6)', fontSize: 14 } }, series: [{ type: 'bar', label: { show: true, zlevel: 10000, position: 'right', padding: 10, color: '#49bcf7', fontSize: 14, formatter: '{c}' }, itemStyle: { color: '#49bcf7' }, barWidth: '15', data: completedData, z: 10 }, { type: 'bar', barGap: '-100%', itemStyle: { color: '#fff', opacity: 0.1 }, barWidth: '15', data: totalData, z: 5 }], }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); window.addEventListener("resize", function () { myChart.resize(); }); } function loadCurrentOutput() { $.get(prefix + 'GetCurrentOutputs', {}, function (res) { var html = ''; if (res && res.length > 0) { res.forEach(element => { html += '
' + element.orderCode + '' + element.productCode + '' + element.proName + '
' + index++ + '' + element.pName + '' + element.macCode + '' + element.dutyName + '