diff --git a/ruoyi-admin/src/main/resources/static/css/board/finalAssemblyProductionData.css b/ruoyi-admin/src/main/resources/static/css/board/finalAssemblyProductionData.css index 774b942..8a05c2f 100644 --- a/ruoyi-admin/src/main/resources/static/css/board/finalAssemblyProductionData.css +++ b/ruoyi-admin/src/main/resources/static/css/board/finalAssemblyProductionData.css @@ -12,11 +12,33 @@ body { .yield { position: absolute; - width: 45%; + width: 42%; height: 35%; top: 15%; left: 3.4%; } +.yieldTabs{ + position: absolute; + width: 3%; + height: 8%; + top: 15%; + left: 45.4%; + font-size: 0.8vw; + border-radius: 5px; + background-color: #C2D8FF; + color: #2C95FD; + text-align: center; +} +.typeOne,.typeTwo,.typeThree{ + width: 100%; + height: 50%; + line-height: calc(8vh / 2); + cursor: pointer; +} +.typeOne{ + background-color: #2C95FD; + color:#C2D8FF; +} .LOSSClassify{ position: absolute; width: 45%; @@ -39,4 +61,5 @@ body { height: 35%; top: 60%; left: 51%; + font-size: 1vw; } \ No newline at end of file diff --git a/ruoyi-admin/src/main/resources/static/img/board/finalAssemblyProductionData/backgroundImg.jpg b/ruoyi-admin/src/main/resources/static/img/board/finalAssemblyProductionData/backgroundImg.jpg index d949d8e..15e9984 100644 Binary files a/ruoyi-admin/src/main/resources/static/img/board/finalAssemblyProductionData/backgroundImg.jpg and b/ruoyi-admin/src/main/resources/static/img/board/finalAssemblyProductionData/backgroundImg.jpg differ diff --git a/ruoyi-admin/src/main/resources/static/js/auto-update.js b/ruoyi-admin/src/main/resources/static/js/auto-update.js index 8842028..b1f7e2f 100644 --- a/ruoyi-admin/src/main/resources/static/js/auto-update.js +++ b/ruoyi-admin/src/main/resources/static/js/auto-update.js @@ -9,7 +9,7 @@ async function autoUpdate(url, interval, callback = () => {}, method = 'post') { resolve(data) }, error: function (reason) { - console.error(reason) + setTimeout(() => autoUpdate(url, interval, callback, method), interval) reject(reason) } }) diff --git a/ruoyi-admin/src/main/resources/static/js/board/finalAssemblyProductionData.js b/ruoyi-admin/src/main/resources/static/js/board/finalAssemblyProductionData.js index d90a042..81ce55a 100644 --- a/ruoyi-admin/src/main/resources/static/js/board/finalAssemblyProductionData.js +++ b/ruoyi-admin/src/main/resources/static/js/board/finalAssemblyProductionData.js @@ -1,47 +1,80 @@ $(() => { moduleTitle() LOSS() + yieldTabs() + Tips() // 公共请求地址 let url = '/broad/box' const INTERVAL = 30000 - // 表格头 - const planWorkOrderColumns = [ - "编号", "计划数量", "完成数量", "差异值", "时间", - ] - - // 追踪事件 - const orderDetailsTable = new AutoScrollTable(document.getElementById("trackEvents"), planWorkOrderColumns, {width: ['30%', null, null, null, '17%']}) // LOSS(分类) - verticalBarChart(null, document.getElementById("LOSSClassify")); + autoUpdate(url + "/getProductPlanInfo ", INTERVAL, data => { + verticalBarChart(null, document.getElementById("LOSSClassify")); + }) // 产量 - barChartAndLineChart(null, document.getElementById("yield")); + autoUpdate(url + "/getProductPlanInfo ", INTERVAL, data => { + barChartAndLineChartThree(null, document.getElementById("yield")); + }) // 一次装配不合格率 - barChartAndLineChart(null, document.getElementById("fractionDefective")); - + autoUpdate(url + "/getProductPlanInfo ", INTERVAL, data => { + barChartAndLineChartFour(null, document.getElementById("fractionDefective")); + }) //追踪事件轮询 - autoUpdate(url+"/getProductPlanInfo ", INTERVAL, data => { - orderDetailsTable.loadData(data.map(value => [value.plan_code, value.plan_number, value.actual_number, value.plan_number-value.actual_number, value.day]), Object.keys(planWorkOrderColumns)) + autoUpdate(url + "/getProductPlanInfo ", INTERVAL, data => { + $('#trackEvents').remove() + $('.trackEventsScrollTable').html('
') + dynamicTable({ + el: '#trackEvents', + rowNum: 5, + timeout: 0, + header: [ "编号", "计划数量", "完成数量", "差异值", "时间"], + data: data.map(value => [value.plan_code, value.plan_number, value.actual_number, value.plan_number - value.actual_number, value.day]), + index: false, + fontColor: '#B4B7BF ', + indexBGC: '#86F3FF', + headerBGC: 'rgba(8,36,75,0.2)', + oddRowBGC: 'rgba(8,36,75,0.2)', + evenRowBGC: 'rgba(8,36,75,0.2)', + colWidth: ['30%', '13%', '13%', '14%', '30%'] + }); }) + tableAnimation('#trackEvents') }) +let yieldType = '1' const LOSS = () => { const html = ` - 123.32 - 123秒 + 123.32 + 123 ` $('body').append(html) } const moduleTitle = () => { const html = ` 总装生产数据及质量数据 + LOSS（分钟） + 标准节拍（秒） 入库量 外观检测 LOSS分类 外观质量问题 ` $('body').append(html) +} +const yieldTabs = () => { + $('#yieldTabs div').click(function () { + yieldType = $(this).attr('type') + $(this).css({backgroundColor: '#2C95FD', color: '#C2D8FF'}) + $(this).siblings().css({backgroundColor: '#C2D8FF', color: '#2C95FD'}) + }) +} +const Tips = () => { + const html = ` + 目标：2000 进度目标：1500 实际：1000 差异：500 达成率：66% + 目标：3.05% 实际：2.16% 累计不良数：40 + ` + $('body').append(html) } \ No newline at end of file diff --git a/ruoyi-admin/src/main/resources/static/js/echartsCommon.js b/ruoyi-admin/src/main/resources/static/js/echartsCommon.js index 2647941..4717261 100644 --- a/ruoyi-admin/src/main/resources/static/js/echartsCommon.js +++ b/ruoyi-admin/src/main/resources/static/js/echartsCommon.js @@ -142,7 +142,7 @@ const horizontalRoundedBarChartWithBackgroundTwo = function (data, id) { if (!data) { data = { yNameOne: ["设备001", "设备001", "设备001", "设备001", "设备001", "设备001", "设备001", "设备001", "设备001"], - yData: [41, 99, 32, 41, 24,4,16,64,18], + yData: [41, 99, 32, 41, 24, 4, 16, 64, 18], xDataName: "达成率", } } @@ -464,9 +464,9 @@ const barChartAndLineChartTwo = function (data, id) { if (!data) { data = { xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"], - yDataOne: [61, 25, 57, 83, 87, 73, 17,25, 57, 83, 87, 73], + yDataOne: [61, 25, 57, 83, 87, 73, 17, 25, 57, 83, 87, 73], yDataOneName: "百分比", - yDataTwo: [382, 102, 186, 200, 102, 186, 315,255, 527, 837, 587, 173], + yDataTwo: [382, 102, 186, 200, 102, 186, 315, 255, 527, 837, 587, 173], yDataTwoName: "成品数量", } } @@ -485,12 +485,12 @@ const barChartAndLineChartTwo = function (data, id) { crossStyle: { color: '#999', }, - label:{ - fontSize:0.5*vw, + label: { + fontSize: 0.5 * vw, } }, - textStyle:{ - fontSize:0.5*vw, + textStyle: { + fontSize: 0.5 * vw, } }, legend: { @@ -512,7 +512,7 @@ const barChartAndLineChartTwo = function (data, id) { }, }, type: 'category', - data:data.xName, + data: data.xName, axisPointer: { type: 'shadow' } @@ -527,12 +527,12 @@ const barChartAndLineChartTwo = function (data, id) { }, }, axisLabel: { - //坐标轴刻度标签的相关设置 - textStyle: { - color: "#d1e6eb", - margin: 15, - fontSize: 0.75 * vw - }, + //坐标轴刻度标签的相关设置 + textStyle: { + color: "#d1e6eb", + margin: 15, + fontSize: 0.75 * vw + }, formatter: '{value} %' } }, @@ -588,6 +588,355 @@ const barChartAndLineChartTwo = function (data, id) { charts.setOption(option); $(window).resize(charts.resize); } +const barChartAndLineChartThree = function (data, id) { + let charts = echarts.init(id); + if (!data) { + data = { + xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"], + yDataOne: [200, 382, 102, 267, 186, 315, 316], + yDataOneName: "实际产量", + yDataTwo: [382, 102, 186, 200, 102, 186, 315], + yDataTwoName: "目标产量", + } + } + let option = { + tooltip: { + trigger: 'axis', + axisPointer: { + crossStyle: { + color: '#999', + }, + label: { + fontSize: 0.5 * vw, + } + }, + textStyle: { + fontSize: 0.8 * vw + } + }, + grid: { + top: "15%", + left: "1%", + right: "1%", + bottom: "8%", + containLabel: true, + }, + legend: { + show: true, + itemGap: 50, + data: [data.yDataOneName, data.yDataTwoName], + textStyle: { + color: "#f9f9f9", + borderColor: "#fff", + fontSize: 0.75 * vw + }, + }, + dataZoom: [], + xAxis: [ + { + type: "category", + boundaryGap: true, + axisLine: { + show: true, + lineStyle: { + color: '#fff', + opacity: 0.3, + }, + }, + axisLabel: { + //坐标轴刻度标签的相关设置 + textStyle: { + color: "#d1e6eb", + margin: 15, + fontSize: 0.75 * vw + }, + }, + axisTick: { + show: false, + }, + splitLine: { + show: true, + lineStyle: { + type: 'dashed', + color: '#777777', + opacity: 0.3, + }, + }, + data: data.xName, + }, + ], + yAxis: [ + { + type: "value", + min: 0, + // max: 140, + splitNumber: 7, + splitLine: { + show: true, + lineStyle: { + type: 'dashed', + color: '#777777', + opacity: 0.3, + }, + }, + axisLine: { + show: true, + lineStyle: { + color: '#fff', + opacity: 0.3, + }, + }, + axisLabel: { + margin: 20, + textStyle: { + color: "#d1e6eb", + fontSize: 0.75 * vw + }, + }, + axisTick: { + show: false, + }, + }, + ], + series: [ + { + name: data.yDataOneName, + type: "bar", + barWidth: '70%', + label: { + show: true, + position: "top", + textStyle: { + color: "#fff", + fontSize: 0.75 * vw + }, + }, + itemStyle: { + normal: { + barBorderRadius: 5, + color: function (data) { + console.log(data.dataIndex) + return "#0D81ED" + }, + }, + }, + data: data.yDataOne, + }, + { + name: data.yDataTwoName || '', + type: "line", + // smooth: true, //是否平滑曲线显示 + // symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆 + showAllSymbol: true, + symbol: "emptyCircle", + symbolSize: 6, + lineStyle: { + normal: { + color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ + { + offset: 0, + color: "#8fb9d7", + }, + { + offset: 1, + color: "#0F59E6", + }, + ]), + }, + borderColor: "#f0f", + }, + label: { + show: true, + position: "top", + textStyle: { + color: "#fff", + fontSize: 0.75 * vw + }, + }, + itemStyle:{ + color: '#F2D770', + border:0, + }, + // tooltip: { + // show: false + // }, + areaStyle: { + //区域填充样式 + normal: { + //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。 + color: new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "rgba(12,120,249,0.4)", + }, + { + offset: 1, + color: "rgba(0,0,0, 0)", + }, + ], + false + ), + shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色 + shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。 + }, + }, + data: data.yDataTwo || [], + }, + ], + }; + + charts.setOption(option); + $(window).resize(charts.resize); +} +const barChartAndLineChartFour = function (data, id) { + let charts = echarts.init(id); + if (!data) { + data = { + xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"], + yDataOne: [61, 25, 57, 83, 87, 73, 17, 25, 57, 83, 87, 73], + yDataOneName: "不良数", + yDataTwo: [9, 3, 7, 7, 7, 2, 7, 1, 6, 7, 2, 1, 5], + yDataTwoName: "一次装配不合格率", + yDataThree: [3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3], + yDataThreeName: "目标", + } + } + let option = { + grid: { + top: "15%", + left: "1%", + right: "1%", + bottom: "2%", + containLabel: true, + }, + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'cross', + crossStyle: { + color: '#999', + }, + label: { + fontSize: 0.5 * vw, + } + }, + textStyle: { + width:30, + fontSize: 0.5 * vw, + } + }, + legend: { + itemWidth:3*vw, + data: [data.yDataOneName, data.yDataTwoName, data.yDataThreeName], + textStyle: { + color: "#d1e6eb", + margin: 15, + fontSize: 0.75 * vw + }, + }, + xAxis: [ + { + axisLabel: { + //坐标轴刻度标签的相关设置 + textStyle: { + color: "#d1e6eb", + margin: 15, + fontSize: 0.75 * vw + }, + }, + type: 'category', + data: data.xName, + axisPointer: { + type: 'shadow' + } + } + ], + yAxis: [ + { + type: 'value', + splitLine: { + lineStyle: { + color: "rgba(255,255,255,0.1)", + }, + }, + axisLabel: { + //坐标轴刻度标签的相关设置 + textStyle: { + color: "#d1e6eb", + margin: 15, + fontSize: 0.75 * vw + }, + formatter: '{value}' + } + }, + { + type: 'value', + splitLine: { + show: false, + }, + axisLabel: { + //坐标轴刻度标签的相关设置 + textStyle: { + color: "#d1e6eb", + margin: 15, + fontSize: 0.75 * vw + }, + formatter: '{value}% ' + } + } + ], + series: [ + { + name: data.yDataOneName, + type: 'bar', + data: data.yDataOne, + label: { + show: true, + position: 'top', + textStyle: { + color: "rgba(255,255,255,0.5)", + fontSize: 0.75 * vw + }, + }, + itemStyle: { + normal: { + color: '#0BB5FB', + }, + }, + }, + { + name: data.yDataTwoName, + type: 'line', + yAxisIndex: 1, + data: data.yDataTwo, + itemStyle: { + normal: { + color: '#F9A25B', + }, + }, + }, + { + name: data.yDataThreeName, + type: 'line', + yAxisIndex: 1, + data: data.yDataThree, + itemStyle: { + normal: { + color: '#0DB99D', + }, + }, + } + ] + }; + + charts.setOption(option); + $(window).resize(charts.resize); +} // 饼图 const pieChart = function (data, id) { @@ -612,10 +961,10 @@ const pieChart = function (data, id) { }, ] } - if(data.length === 0){ + if (data.length === 0) { data = [{ - value : 0, - name:'' + value: 0, + name: '' }] } let option = { @@ -680,24 +1029,10 @@ const pieChart = function (data, id) { const verticalBarChart = function (data, id) { let charts = echarts.init(id); if (!data) { - data = [ - { - value: 285, - name: "类型1", - }, - { - value: 410, - name: "类型2", - }, - { - value: 274, - name: "类型3", - }, - { - value: 235, - name: "类型4", - }, - ] + data = { + xName: [">10分钟", "3-10分钟", "0-3分钟"], + yData: [254, 3254, 1654], + } } let option = { tooltip: { @@ -713,11 +1048,7 @@ const verticalBarChart = function (data, id) { containLabel: true, }, xAxis: { - data: [ - ">10分钟", - "3-10分钟", - "0-3分钟", - ], + data: data.xName, axisLine: { lineStyle: { color: "#0177d4", @@ -753,7 +1084,15 @@ const verticalBarChart = function (data, id) { series: [ { type: "bar", - barWidth: vw, + barWidth: '75%', + label: { + show: true, + position: 'top', + textStyle: { + fontSize: 0.8 * vw, + color: '#fff' + } + }, itemStyle: { normal: { color: new echarts.graphic.LinearGradient( @@ -775,7 +1114,7 @@ const verticalBarChart = function (data, id) { ), }, }, - data: [254, 3254, 1654], + data: data.yData, }, ], }; @@ -1420,8 +1759,8 @@ const multipleBrokenLineAreaDiagram = (data, ids) => { yDataTwoName: '发电量', } } - let max = Math.round(Math.max(...data.yDataOne,...data.yDataTwo)) - let min = Math.round(Math.min(...data.yDataOne,...data.yDataTwo)) + let max = Math.round(Math.max(...data.yDataOne, ...data.yDataTwo)) + let min = Math.round(Math.min(...data.yDataOne, ...data.yDataTwo)) let option = { tooltip: { @@ -1464,7 +1803,7 @@ const multipleBrokenLineAreaDiagram = (data, ids) => { axisLabel: { show: true, color: '#fff', - interval:0, + interval: 0, }, data: data.xData, }, @@ -1475,8 +1814,8 @@ const multipleBrokenLineAreaDiagram = (data, ids) => { axisTick: { show: false, }, - max:max+0.5, - min:min - 1, + max: max + 0.5, + min: min - 1, axisLine: { lineStyle: { color: "#57617B", @@ -1485,7 +1824,7 @@ const multipleBrokenLineAreaDiagram = (data, ids) => { axisLabel: { show: true, color: '#fff', - interval:0.5, + interval: 0.5, }, splitLine: { show: false, @@ -1816,7 +2155,7 @@ const percentageRingDiagram = function (data, id) { textAlign: "center", textStyle: { fontWeight: "normal", - fontSize: 0.8*vw, + fontSize: 0.8 * vw, color: colors[index][0], textAlign: "center", }, @@ -1825,7 +2164,7 @@ const percentageRingDiagram = function (data, id) { // name: item.name, type: "pie", clockWise: false, - radius: [2*vw, 2.5*vw], + radius: [2 * vw, 2.5 * vw], itemStyle: { normal: { color: colors[index][0], @@ -1936,7 +2275,7 @@ const percentageRingDiagramTwo = function (data, id) { textAlign: "center", textStyle: { fontWeight: "normal", - fontSize: 0.8*vw, + fontSize: 0.8 * vw, color: colors[index][0], textAlign: "center", }, @@ -1945,7 +2284,7 @@ const percentageRingDiagramTwo = function (data, id) { // name: item.name, type: "pie", clockWise: false, - radius: [2*vw, 2.5*vw], + radius: [2 * vw, 2.5 * vw], itemStyle: { normal: { color: colors[index][0], diff --git a/ruoyi-admin/src/main/resources/static/js/scrollTable.js b/ruoyi-admin/src/main/resources/static/js/scrollTable.js index c1ae54c..7e20786 100644 --- a/ruoyi-admin/src/main/resources/static/js/scrollTable.js +++ b/ruoyi-admin/src/main/resources/static/js/scrollTable.js @@ -214,7 +214,6 @@ let dynamicTable = resource => { } else { for (let i = 0; i < colWidth.length; i++) { let emptyUnitColWidth = emptyUnit(colWidth[i]); - console.log(emptyUnitColWidth) $(`${ele} > .table > .thead > .tr > .th:nth-child(${i + 1})`).width(`${emptyUnitColWidth}%`); $(`${ele} > .table > .tbody > .tr > .td:nth-child(${i + 1})`).width(`${emptyUnitColWidth}%`); } diff --git a/ruoyi-admin/src/main/resources/static/ruoyi/js/common.js b/ruoyi-admin/src/main/resources/static/ruoyi/js/common.js index e3b7a97..8c1b60b 100644 --- a/ruoyi-admin/src/main/resources/static/ruoyi/js/common.js +++ b/ruoyi-admin/src/main/resources/static/ruoyi/js/common.js @@ -537,16 +537,16 @@ function _stopIt(e) { } /** 设置全局ajax处理 */ -$.ajaxSetup({ - complete: function(XMLHttpRequest, textStatus) { - if (textStatus == 'timeout') { - $.modal.alertWarning("服务器超时，请稍后再试！"); - $.modal.enable(); - $.modal.closeLoading(); - } else if (textStatus == "parsererror" || textStatus == "error") { - $.modal.alertWarning("服务器错误，请联系管理员！"); - $.modal.enable(); - $.modal.closeLoading(); - } - } -}); +// $.ajaxSetup({ +// complete: function(XMLHttpRequest, textStatus) { +// if (textStatus == 'timeout') { +// $.modal.alertWarning("服务器超时，请稍后再试！"); +// $.modal.enable(); +// $.modal.closeLoading(); +// } else if (textStatus == "parsererror" || textStatus == "error") { +// $.modal.alertWarning("服务器错误，请联系管理员！"); +// $.modal.enable(); +// $.modal.closeLoading(); +// } +// } +// }); diff --git a/ruoyi-admin/src/main/resources/templates/broad/finalAssemblyProductionData.html b/ruoyi-admin/src/main/resources/templates/broad/finalAssemblyProductionData.html index 6e21edc..5fa9806 100644 --- a/ruoyi-admin/src/main/resources/templates/broad/finalAssemblyProductionData.html +++ b/ruoyi-admin/src/main/resources/templates/broad/finalAssemblyProductionData.html @@ -1,4 +1,5 @@ - + + @@ -7,7 +8,8 @@ name="viewport"> 箱壳成型数据监控平台 - + @@ -24,25 +26,34 @@ +
+
+
当班
+
当日
+
-
+
-
+
+
+
+ +
- + diff --git a/ruoyi-admin/src/main/resources/templates/broad/fp.html b/ruoyi-admin/src/main/resources/templates/broad/fp.html index 4d05812..5d0d93b 100644 --- a/ruoyi-admin/src/main/resources/templates/broad/fp.html +++ b/ruoyi-admin/src/main/resources/templates/broad/fp.html @@ -39,7 +39,6 @@ } - .total { flex-wrap: nowrap; justify-content: space-around; @@ -189,8 +188,7 @@ } - - .my-transition{ + .my-transition { position: absolute; border: 0px solid red; width: 68%; @@ -201,6 +199,7 @@ opacity: 0; transition: transform 0.5s linear, opacity 0.5s linear; } + .my-transition2 { position: absolute; border: 0px solid red; @@ -215,7 +214,7 @@ .my-click-transiton { opacity: 1; - z-index: 2 ; + z-index: 2; transform: scale(1, 1); } @@ -299,28 +298,34 @@
- 运行状态 + 运行状态
- 运行状态 + 运行状态
- 运行状态 + 运行状态
- 运行状态 + 运行状态
- 运行状态 - + 运行状态 +
- 运行状态 + 运行状态
@@ -353,11 +358,39 @@ //夹具生产计划切换 let tableData = [] let classes = 0 + let dayClass = ['工位', '型号', '状态', '目标', '计划', '累计', '达成率', '8:30', '9:30', '10:30', '11:30', '12:30', '13:30', '14:30', '15:30', '16:30', '17:30', '18:30', '19:30'] + let nightClass = ['工位', '型号', '状态', '目标', '计划', '累计', '达成率', '20:30', '21:30', '22:30', '23:30', '0:30', '1:30', '2:30', '3:30', '4:30', '5:30', '6:30', '7:30'] + let tableWidth = ["5%", '10%', "7%", "5%", "5%", "5%", "8%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%"] showalert(); - window.setInterval(showalert, 1000 * 15); + setTimeout(() => { + window.setInterval(showalert, 1000 * 15); + },1000) let isFirst = true let times = 1 + const getTable = (state,data) => { + if (state === 0) { + planInfo = new AutoScrollTable(document.getElementById("my-transition"), dayClass, { + width: tableWidth, + }, 7) + + planInfo2 = new AutoScrollTable(document.getElementById("my-transition2"), dayClass, { + width: tableWidth, + }, 7) + planInfo.loadData(data.map(value => [value.station_no, value.name, value.status === '未生产' ? `${value.status}` : value.status, value.target, value.plan_number, value.qty, `${value.rate}%`, value.h1, value.h2, value.h3, value.h4, value.h5, value.h6, value.h7, value.h8, value.h9, value.h10, value.h11, value.h12]), Object.keys(['工位', '型号', '状态', '目标', '计划', '累计', '达成率', '8:30', '9:30', '10:30', '11:30', '12:30', '13:30', '14:30', '15:30', '16:30', '17:30', '18:30', '19:30'])) + planInfo2.loadData(data.map(value => [value.station_no, value.name, value.status === '未生产' ? `${value.status}` : value.status, value.target, value.plan_number, value.qty, `${value.rate}%`, value.h1, value.h2, value.h3, value.h4, value.h5, value.h6, value.h7, value.h8, value.h9, value.h10, value.h11, value.h12]), Object.keys(['工位', '型号', '状态', '目标', '计划', '累计', '达成率', '8:30', '9:30', '10:30', '11:30', '12:30', '13:30', '14:30', '15:30', '16:30', '17:30', '18:30', '19:30'])) + } else { + planInfo = new AutoScrollTable(document.getElementById("my-transition"), nightClass, { + width: tableWidth, + }, 7) + + planInfo2 = new AutoScrollTable(document.getElementById("my-transition2"), nightClass, { + width: tableWidth, + }, 7) + planInfo.loadData(data.map(value => [value.station_no, value.name, value.status === '未生产' ? `${value.status}` : value.status, value.target, value.plan_number, value.qty, `${value.rate}%`, value.h1, value.h2, value.h3, value.h4, value.h5, value.h6, value.h7, value.h8, value.h9, value.h10, value.h11, value.h12]), Object.keys(['工位', '型号', '状态', '目标', '计划', '累计', '达成率', '20:30', '21:30', '22:30', '23:30', '0:30', '1:30', '2:30', '3:30', '4:30', '5:30', '6:30', '7:30'])) + planInfo2.loadData(data.map(value => [value.station_no, value.name, value.status === '未生产' ? `${value.status}` : value.status, value.target, value.plan_number, value.qty, `${value.rate}%`, value.h1, value.h2, value.h3, value.h4, value.h5, value.h6, value.h7, value.h8, value.h9, value.h10, value.h11, value.h12]), Object.keys(['工位', '型号', '状态', '目标', '计划', '累计', '达成率', '20:30', '21:30', '22:30', '23:30', '0:30', '1:30', '2:30', '3:30', '4:30', '5:30', '6:30', '7:30'])) + } + } function showalert() { var myTransition = $('.my-transition'); @@ -370,32 +403,11 @@ $('.my-transition').addClass('my-click-transiton'); } if (tableData.length === 0) return - console.log(times) - let dataTwo = tableData.slice(times*7,times*7 + 7) - if (classes === 0){ - planInfo = new AutoScrollTable(document.getElementById("my-transition"), ['工位', '型号', '状态', '目标', '计划', '累计', '达成率', '8:30', '9:30', '10:30', '11:30', '12:30', '13:30', '14:30', '15:30', '16:30', '17:30', '18:30', '19:30'], { - width: ["5%", '10%', "7%", "5%", "5%", "5%", "8%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%"], - },7) - - planInfo2 = new AutoScrollTable(document.getElementById("my-transition2"), ['工位', '型号', '状态', '目标', '计划', '累计', '达成率', '8:30', '9:30', '10:30', '11:30', '12:30', '13:30', '14:30', '15:30', '16:30', '17:30', '18:30', '19:30'], { - width: ["5%", '10%', "7%", "5%", "5%", "5%", "8%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%"], - },7) - planInfo.loadData(dataTwo.map(value => [value.station_no, value.name, value.status === '未生产'?`${value.status}`:value.status, value.target, value.plan_number, value.qty, `${value.rate}%`, value.h1, value.h2, value.h3, value.h4, value.h5, value.h6, value.h7, value.h8, value.h9, value.h10, value.h11, value.h12]), Object.keys( ['工位', '型号', '状态', '目标', '计划','累计','达成率','8:30', '9:30', '10:30', '11:30', '12:30', '13:30', '14:30', '15:30', '16:30', '17:30', '18:30', '19:30'])) - planInfo2.loadData(dataTwo.map(value => [value.station_no, value.name, value.status === '未生产'?`${value.status}`:value.status, value.target, value.plan_number, value.qty, `${value.rate}%`, value.h1, value.h2, value.h3, value.h4, value.h5, value.h6, value.h7, value.h8, value.h9, value.h10, value.h11, value.h12]), Object.keys( ['工位', '型号', '状态', '目标', '计划','累计','达成率','8:30', '9:30', '10:30', '11:30', '12:30', '13:30', '14:30', '15:30', '16:30', '17:30', '18:30', '19:30'])) - }else{ - planInfo = new AutoScrollTable(document.getElementById("my-transition"), ['工位', '型号', '状态', '目标', '计划', '累计', '达成率', '20:30', '21:30', '22:30', '23:30', '0:30', '1:30', '2:30', '3:30', '4:30', '5:30', '6:30', '7:30'], { - width: ["5%", '10%', "7%", "5%", "5%", "5%", "8%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%"], - },7) - - planInfo2 = new AutoScrollTable(document.getElementById("my-transition2"), ['工位', '型号', '状态', '目标', '计划', '累计', '达成率', '20:30', '21:30', '22:30', '23:30', '0:30', '1:30', '2:30', '3:30', '4:30', '5:30', '6:30', '7:30'], { - width: ["5%", '10%', "7%", "5%", "5%", "5%", "8%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%"], - },7) - planInfo.loadData(dataTwo.map(value => [value.station_no, value.name, value.status === '未生产'?`${value.status}`:value.status, value.target, value.plan_number, value.qty, `${value.rate}%`, value.h1, value.h2, value.h3, value.h4, value.h5, value.h6, value.h7, value.h8, value.h9, value.h10, value.h11, value.h12]), Object.keys( ['工位', '型号', '状态', '目标', '计划','累计','达成率','20:30', '21:30', '22:30', '23:30', '0:30', '1:30', '2:30', '3:30', '4:30', '5:30', '6:30', '7:30'])) - planInfo2.loadData(dataTwo.map(value => [value.station_no, value.name, value.status === '未生产'?`${value.status}`:value.status, value.target, value.plan_number, value.qty, `${value.rate}%`, value.h1, value.h2, value.h3, value.h4, value.h5, value.h6, value.h7, value.h8, value.h9, value.h10, value.h11, value.h12]), Object.keys( ['工位', '型号', '状态', '目标', '计划','累计','达成率','20:30', '21:30', '22:30', '23:30', '0:30', '1:30', '2:30', '3:30', '4:30', '5:30', '6:30', '7:30'])) - } - if(times < 3) { + let dataTwo = tableData.slice(times * 7, times * 7 + 7) + getTable(classes,dataTwo) + if (times < 3) { times += 1 - }else{ + } else { times = 0 } } @@ -425,13 +437,13 @@ } // 生产统计数据 - let planInfo = new AutoScrollTable(document.getElementById("my-transition"), ['工位', '型号', '状态', '目标', '计划', '累计', '达成率', '8:30', '9:30', '10:30', '11:30', '12:30', '13:30', '14:30', '15:30', '16:30', '17:30', '18:30', '19:30'], { - width: ["5%", '10%', "7%", "5%", "5%", "5%", "8%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%"], - },7) + let planInfo = new AutoScrollTable(document.getElementById("my-transition"), dayClass, { + width: tableWidth, + }, 7) - let planInfo2 = new AutoScrollTable(document.getElementById("my-transition2"), ['工位', '型号', '状态', '目标', '计划', '累计', '达成率', '8:30', '9:30', '10:30', '11:30', '12:30', '13:30', '14:30', '15:30', '16:30', '17:30', '18:30', '19:30'], { - width: ["5%", '10%', "7%", "5%", "5%", "5%", "8%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%"], - },7) + let planInfo2 = new AutoScrollTable(document.getElementById("my-transition2"), dayClass, { + width: tableWidth, + }, 7) // 切换中心运行状态 function updateStatus(id, status) { @@ -450,7 +462,7 @@ area() // 订单执行 + 生产统计 autoUpdate('/broad/fp/selectOrderExecution', INTERVAL, data => { - orderInf.loadData(data.map(value => [value.name, value.plan_number, value.actual_number, value.plan_number - value.actual_number, `${value.rate ==0? value.rate : value.rate + '%'}`]), Object.keys(orderInfColumns)) + orderInf.loadData(data.map(value => [value.name, value.plan_number, value.actual_number, value.plan_number - value.actual_number, `${value.rate == 0 ? value.rate : value.rate + '%'}`]), Object.keys(orderInfColumns)) modelChart.setOption({ xAxis: { @@ -465,17 +477,6 @@ }) }) - const orderAgv = function (plannedProduction, actualProduction) { - if (plannedProduction == 0) { - return 0; - } - if (actualProduction == 0) { - return 0; - } - - return (actualProduction / plannedProduction * 100).toFixed(1) - } - // 当班计划/实际产量/当班差异 autoUpdate('/broad/fp/selectFpOrderInfo', INTERVAL, data => { // let p = [data[1], data[0][2], data[0][3]] @@ -495,69 +496,19 @@ autoUpdate('/broad/fp/selectStationHourInfo', INTERVAL, data => { tableData = data let dataOne = [] - if(isFirst) { - dataOne = data.slice(0, 7) + if (isFirst) { + dataOne = data.slice(0, 7) isFirst = false - }else{ + } else { times-- dataOne = data.slice(times * 7, times * 7 + 7) times++ } - // let consolidatedRow = ["", "合计", ""] - // - // for (let i = 3; i < 19; i++) { - // if (i === 6) { - // consolidatedRow.push(`${(consolidatedRow[5] / consolidatedRow[4] * 100).toFixed(1)}%`) - // continue - // } - // - // let sum = 0 - // - // for (let j = 1; j < data.length; j++) { - // let d = data[j][i] - // if (!d || d === '') { - // continue - // } - // if (typeof d === 'string') { - // d = parseInt(d) - // } - // - // sum += d - // } - // - // consolidatedRow.push(sum.toString()) - // } - // - // data.push(consolidatedRow) - - if (classes === 0){ - planInfo = new AutoScrollTable(document.getElementById("my-transition"), ['工位', '型号', '状态', '目标', '计划', '累计', '达成率', '8:30', '9:30', '10:30', '11:30', '12:30', '13:30', '14:30', '15:30', '16:30', '17:30', '18:30', '19:30'], { - width: ["5%", '10%', "7%", "5%", "5%", "5%", "8%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%"], - },7) - - planInfo2 = new AutoScrollTable(document.getElementById("my-transition2"), ['工位', '型号', '状态', '目标', '计划', '累计', '达成率', '8:30', '9:30', '10:30', '11:30', '12:30', '13:30', '14:30', '15:30', '16:30', '17:30', '18:30', '19:30'], { - width: ["5%", '10%', "7%", "5%", "5%", "5%", "8%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%"], - },7) - planInfo.loadData(dataOne.map(value => [value.station_no, value.name, value.status === '未生产'?`${value.status}`:value.status, value.target, value.plan_number, value.qty, `${value.rate}%`, value.h1, value.h2, value.h3, value.h4, value.h5, value.h6, value.h7, value.h8, value.h9, value.h10, value.h11, value.h12]), Object.keys( ['工位', '型号', '状态', '目标', '计划','累计','达成率','8:30', '9:30', '10:30', '11:30', '12:30', '13:30', '14:30', '15:30', '16:30', '17:30', '18:30', '19:30'])) - planInfo2.loadData(dataOne.map(value => [value.station_no, value.name, value.status === '未生产'?`${value.status}`:value.status, value.target, value.plan_number, value.qty, `${value.rate}%`, value.h1, value.h2, value.h3, value.h4, value.h5, value.h6, value.h7, value.h8, value.h9, value.h10, value.h11, value.h12]), Object.keys( ['工位', '型号', '状态', '目标', '计划','累计','达成率','8:30', '9:30', '10:30', '11:30', '12:30', '13:30', '14:30', '15:30', '16:30', '17:30', '18:30', '19:30'])) - }else{ - planInfo = new AutoScrollTable(document.getElementById("my-transition"), ['工位', '型号', '状态', '目标', '计划', '累计', '达成率', '20:30', '21:30', '22:30', '23:30', '0:30', '1:30', '2:30', '3:30', '4:30', '5:30', '6:30', '7:30'], { - width: ["5%", '10%', "7%", "5%", "5%", "5%", "8%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%"], - },7) - - planInfo2 = new AutoScrollTable(document.getElementById("my-transition2"), ['工位', '型号', '状态', '目标', '计划', '累计', '达成率', '20:30', '21:30', '22:30', '23:30', '0:30', '1:30', '2:30', '3:30', '4:30', '5:30', '6:30', '7:30'], { - width: ["5%", '10%', "7%", "5%", "5%", "5%", "8%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%"], - },7) - planInfo.loadData(dataOne.map(value => [value.station_no, value.name, value.status === '未生产'?`${value.status}`:value.status, value.target, value.plan_number, value.qty, `${value.rate}%`, value.h1, value.h2, value.h3, value.h4, value.h5, value.h6, value.h7, value.h8, value.h9, value.h10, value.h11, value.h12]), Object.keys( ['工位', '型号', '状态', '目标', '计划','累计','达成率','20:30', '21:30', '22:30', '23:30', '0:30', '1:30', '2:30', '3:30', '4:30', '5:30', '6:30', '7:30'])) - planInfo2.loadData(dataOne.map(value => [value.station_no, value.name, value.status === '未生产'?`${value.status}`:value.status, value.target, value.plan_number, value.qty, `${value.rate}%`, value.h1, value.h2, value.h3, value.h4, value.h5, value.h6, value.h7, value.h8, value.h9, value.h10, value.h11, value.h12]), Object.keys( ['工位', '型号', '状态', '目标', '计划','累计','达成率','20:30', '21:30', '22:30', '23:30', '0:30', '1:30', '2:30', '3:30', '4:30', '5:30', '6:30', '7:30'])) - } - - // times = 1 - // data.map(value => [value.orderType, value.plannedProduction, value.actualProduction, value.plannedProduction - value.actualProduction, `${(value.actualProduction / value.plannedProduction * 100).toFixed(2)}%`]) - total((data.filter(val => val.status === '生产中').length/28).toFixed(4)*100 + '%', + getTable(classes,dataOne) + total((data.filter(val => val.status === '生产中').length / 28).toFixed(4) * 100 + '%', eval(data.map(val => val.plan_number).join('+')), eval(data.map(val => val.qty).join('+')), - ((eval(data.map(val => val.qty).join('+'))/eval(data.map(val => val.plan_number).join('+'))).toFixed(4)*100 +'' ).substring(0,3)+ '%', + ((eval(data.map(val => val.qty).join('+')) / eval(data.map(val => val.plan_number).join('+'))).toFixed(4) * 100 + '').substring(0, 3) + '%', eval(data.map(val => val.h1).join('+')), eval(data.map(val => val.h2).join('+')), eval(data.map(val => val.h3).join('+')), @@ -573,7 +524,6 @@ ) }) - // 右侧压力 + 右侧温度 autoUpdate('/broad/fp/selectDeviceStation', INTERVAL, data => { // 右侧压力 @@ -751,11 +701,11 @@ // 预装箱体库存 const repertoryChart = echarts.init(document.getElementById("bottom-right")) repertoryChart.setOption({ - grid:{ - top:'1%', - bottom:'10%', - left:'1%', - right:'1%', + grid: { + top: '1%', + bottom: '10%', + left: '1%', + right: '1%', }, color: ['#4499CE'], xAxis: { @@ -951,7 +901,7 @@ ` $("body").append(html) } - const total = (val1=0,val2=0,val3=0,val4=0,val5=0,val6=0,val7=0,val8=0,val9=0,val10=0,val11=0,val12=0,val13=0,val14=0,val15=0,val16=0) => { + const total = (val1 = 0, val2 = 0, val3 = 0, val4 = 0, val5 = 0, val6 = 0, val7 = 0, val8 = 0, val9 = 0, val10 = 0, val11 = 0, val12 = 0, val13 = 0, val14 = 0, val15 = 0, val16 = 0) => { const html = ` 合计