Merge remote-tracking branch 'gitee/master'

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

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)
             }
         })

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('<div class="trackEvents" id="trackEvents"></div>')
+        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 = `
-    <span style="position: absolute;top: 13%;left: 66.5%;color: #CFD2D0;font-size: 2vw;transform: translateX(-50%)">123.32</span>
-    <span style="position: absolute;top: 12.5%;left: 90%;color: #CFD2D0;font-size: 2vw;transform: translateX(-50%)">123秒</span>
+    <span style="position: absolute;top: 15.7%;left: 61.8%;color: #CFD2D0;font-size: 2vw;transform: translateX(-50%)">123.32</span>
+    <span style="position: absolute;top: 15.7%;left: 85.5%;color: #CFD2D0;font-size: 2vw;transform: translateX(-50%)">123</span>
     `
     $('body').append(html)
 }
 const moduleTitle = () => {
     const html = `
     <span style="position: absolute;top: 0.9%;left: 50%;color: #fff;font-size: 1.3vw;transform: translateX(-50%);letter-spacing: 0.3vw">总装生产数据及质量数据</span>
+    <span style="position: absolute;top: 10%;left: 53%;color: #CFD2D0;font-size: 1.0vw">LOSS（分钟）</span>
+    <span style="position: absolute;top: 10%;left: 76.5%;color: #CFD2D0;font-size: 1.0vw">标准节拍（秒）</span>
     <span style="position: absolute;top: 10%;left: 5.5%;color: #CFD2D0;font-size: 1.0vw">入库量</span>
     <span style="position: absolute;top: 54.3%;left: 5.5%;color: #CFD2D0;font-size: 1.0vw">外观检测</span>
     <span style="position: absolute;top: 24.8%;left: 53%;color: #CFD2D0;font-size: 1.0vw">LOSS分类</span>
     <span style="position: absolute;top: 54.3%;left: 53%;color: #CFD2D0;font-size: 1.0vw">外观质量问题</span>
     `
     $('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 = `
+    <span style="position: absolute;top: 10%;left: 19%;color: #fff;font-size: 1vw;">目标：2000 进度目标：1500 实际：1000 差异：500 达成率：66% </span>
+    <span style="position: absolute;top: 54.3%;left: 19%;color: #fff;font-size: 1vw">目标：3.05% 实际：2.16% 累计不良数：40</span>
+    `
+    $('body').append(html)
 }

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

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}%`);
         }

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();
+//         }
+//     }
+// });

ruoyi-admin/src/main/resources/templates/broad/finalAssemblyProductionData.html

@@ -1,4 +1,5 @@
-<!DOCTYPE html><html lang="zh" xmlns:th="http://www.thymeleaf.org">
+<!DOCTYPE html>
+<html lang="zh" xmlns:th="http://www.thymeleaf.org">
 
 <html lang="zh" xmlns:th="http://www.thymeleaf.org">
 <head>
@@ -7,7 +8,8 @@
           name="viewport">
     <title>箱壳成型数据监控平台</title>
     <meta content="箱壳成型数据监控平台" name="description">
-    <link href="../../static/css/board/finalAssemblyProductionData.css" rel="stylesheet" th:href="@{/css/board/finalAssemblyProductionData.css}"/>
+    <link href="../../static/css/board/finalAssemblyProductionData.css" rel="stylesheet"
+          th:href="@{/css/board/finalAssemblyProductionData.css}"/>
     <link href="../../static/css/materialdesignicons.min.css" rel="stylesheet"
           th:href="@{/css/materialdesignicons.min.css}"/>
     <link href="../../static/css/autoscroll-table.css" rel="stylesheet" th:href="@{/css/autoscroll-table.css}">
@@ -24,25 +26,34 @@
     <script src="../../static/js/update-split-blocks.js" th:src="@{/js/update-split-blocks.js}"></script>
     <script src="../../static/js/auto-update.js" th:src="@{/js/auto-update.js}"></script>
     <script src="../../static/js/data-merger.js" th:src="@{/js/data-merger.js}"></script>
+    <script src="../../static/js/scrollTable.js" th:src="@{/js/scrollTable.js}"></script>
 
 </head>
 <body style="display:flex;">
 
 <!--产量-->
 <div class="yield" id="yield"></div>
+<div class="yieldTabs" id="yieldTabs">
+    <div class="typeOne" id="typeOne" type="1">当班</div>
+    <div class="typeTwo" id="typeTwo" type="2">当日</div>
+</div>
 
 <!--LOSS(分类)-->
-<div class="
-" id="LOSSClassify"></div>
+<div class="LOSSClassify" id="LOSSClassify"></div>
 
 <!--一次装配不合格率-->
 <div class="fractionDefective" id="fractionDefective"></div>
 
 <!--追踪事件-->
-<div class="trackEvents" id="trackEvents"></div>
+<div class="trackEventsScrollTable" id="trackEventsScrollTable">
+<div class="trackEvents" id="trackEvents">
+</div>
+
+</div>
 
 </body>
-<script src="../../static/js/board/finalAssemblyProductionData.js" th:src="@{/js/board/finalAssemblyProductionData.js}"></script>
+<script src="../../static/js/board/finalAssemblyProductionData.js"
+        th:src="@{/js/board/finalAssemblyProductionData.js}"></script>
 <script>
 </script>
 </html>

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);
     }
 </style>
@@ -299,28 +298,34 @@
 
     <!--发泡线 - 状态-->
     <div class="top-mid-Text" style="position: absolute;top:73%;left: 7%;">
-        <img alt="运行状态" id="status-a" src="../../static/img/runImg.png" th:src="@{/img/runImg.png}"/>
+        <img alt="运行状态" c="../../static/img/runImg.png" id="status-a" sr style="width: 3vw"
+             th:src="@{/img/runImg.png}"/>
     </div>
 
     <div class="top-mid-Text" style="position: absolute;top:73%;left:23%">
-        <img alt="运行状态" id="status-b" src="../../static/img/runImg.png" th:src="@{/img/runImg.png}"/>
+        <img alt="运行状态" c="../../static/img/runImg.png" id="status-b" sr style="width: 3vw"
+             th:src="@{/img/runImg.png}"/>
     </div>
 
     <div class="top-mid-Text" style="position: absolute;top:73%;left:39%">
-        <img alt="运行状态" id="status-c" src="../../static/img/runImg.png" th:src="@{/img/runImg.png}"/>
+        <img alt="运行状态" c="../../static/img/runImg.png" id="status-c" sr style="width: 3vw"
+             th:src="@{/img/runImg.png}"/>
     </div>
 
     <div class="top-mid-Text" style="position: absolute;top:73%;left:55%">
-        <img alt="运行状态" id="status-d" src="../../static/img/runImg.png" th:src="@{/img/runImg.png}"/>
+        <img alt="运行状态" c="../../static/img/runImg.png" id="status-d" sr style="width: 3vw"
+             th:src="@{/img/runImg.png}"/>
     </div>
 
     <!--发泡机 - 状态-->
     <div class="top-mid-Text" style="position: absolute;top:73%;left:77%">
-        <img alt="运行状态" id="status-sys1" src="../../static/img/runImg.png" th:src="@{/img/runImg.png}"/>
-        <!--<img alt="运行状态" src="../../static/img/stopImg.png" th:src="@{/img/stopImg.png}"/>-->
+        <img alt="运行状态" id="status-sys1" src="../../static/img/runImg.png" style="width: 3vw"
+             th:src="@{/img/runImg.png}"/>
+        <!--<img alt="运行状态" src="../../stati style="width: 3vw" c/img/stopImg.png" th:src="@{/img/stopImg.png}"/>-->
     </div>
     <div class="top-mid-Text" style="position: absolute;top:73%;left:95%">
-        <img alt="运行状态" id="status-sys2" src="../../static/img/runImg.png" th:src="@{/img/runImg.png}"/>
+        <img alt="运行状态" id="status-sys2" src="../../static/img/runImg.png" style="width: 3vw"
+             th:src="@{/img/runImg.png}"/>
         <!--<img alt="运行状态" src="../../static/img/stopImg.png" th:src="@{/img/stopImg.png}"/>-->
     </div>
 </div>
@@ -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 === '未生产' ? `<span style="color: yellow">${value.status}</span>` : 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 === '未生产' ? `<span style="color: yellow">${value.status}</span>` : 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 === '未生产' ? `<span style="color: yellow">${value.status}</span>` : 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 === '未生产' ? `<span style="color: yellow">${value.status}</span>` : 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 === '未生产'?`<span style="color: yellow">${value.status}</span>`: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 === '未生产'?`<span style="color: yellow">${value.status}</span>`: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 === '未生产'?`<span style="color: yellow">${value.status}</span>`: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 === '未生产'?`<span style="color: yellow">${value.status}</span>`: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 === '未生产'?`<span style="color: yellow">${value.status}</span>`: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 === '未生产'?`<span style="color: yellow">${value.status}</span>`: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 === '未生产'?`<span style="color: yellow">${value.status}</span>`: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 === '未生产'?`<span style="color: yellow">${value.status}</span>`: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 = `
         <span style="margin: auto;text-align:center;width:5.2%;font-size: 0.85vw;"> </span>
         <span style="margin: auto;text-align:center;width:10.2%;font-size: 0.85vw;">合计</span>