修改界面

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/board/finalAssemblyProductionData.js

@@ -1,43 +1,62 @@
 $(() => {
     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(分类)
+    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))
+        $('#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>
@@ -45,3 +64,17 @@ const moduleTitle = () => {
     `
     $('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

@@ -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) {
@@ -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,
             },
         ],
     };

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/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,7 +188,6 @@
     }
 
 
-
     .my-transition {
         position: absolute;
         border: 0px solid red;
@@ -201,6 +199,7 @@
         opacity: 0;
         transition: transform 0.5s linear, opacity 0.5s linear;
     }
+
     .my-transition2 {
         position: absolute;
         border: 0px solid red;
@@ -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();
 
+    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,29 +403,8 @@
             $('.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']))
-        }
+        getTable(classes,dataTwo)
         if (times < 3) {
             times += 1
         } else {
@@ -425,12 +437,12 @@
     }
 
     // 生产统计数据
-    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%"],
+    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%"],
+    let planInfo2 = new AutoScrollTable(document.getElementById("my-transition2"), dayClass, {
+        width: tableWidth,
     }, 7)
 
     // 切换中心运行状态
@@ -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]]
@@ -503,57 +504,7 @@
                 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)}%`])
+            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('+')),
@@ -573,7 +524,6 @@
             )
         })
 
-
         // 右侧压力 + 右侧温度
         autoUpdate('/broad/fp/selectDeviceStation', INTERVAL, data => {
             // 右侧压力