From f9d9afb22315c338351ab424160ba162fd091c5e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=9C=E7=AC=99=E6=AD=8C?= <2277317060@qq.com>
Date: Sat, 26 Nov 2022 02:20:35 +0000
Subject: [PATCH] =?UTF-8?q?=20=E4=BF=AE=E6=94=B9=E5=8F=91=E6=B3=A1?=
 =?UTF-8?q?=E7=BA=BF=E7=94=9F=E4=BA=A7=E7=BB=9F=E8=AE=A1=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E8=A1=A8=E6=A0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../templates/scada/NorthFoamerMesPlan.html   | 1986 ++++++++---------
 1 file changed, 993 insertions(+), 993 deletions(-)
diff --git a/ruoyi-admin/src/main/resources/templates/scada/NorthFoamerMesPlan.html b/ruoyi-admin/src/main/resources/templates/scada/NorthFoamerMesPlan.html
index af97423..34e3db4 100644
--- a/ruoyi-admin/src/main/resources/templates/scada/NorthFoamerMesPlan.html
+++ b/ruoyi-admin/src/main/resources/templates/scada/NorthFoamerMesPlan.html
@@ -1,994 +1,994 @@
-<!DOCTYPE html>
-<html lang="zh" xmlns:th="http://www.thymeleaf.org">
-<head>
-    <meta charset="UTF-8">
-    <meta content="width=device-width,initial-scale=1.0"
-          name="viewport">
-    <title>发泡SCADA数据平台</title>
-    <meta content="U壳钣金SCADA数据平台" name="description">
-    <link href="../../static/css/main-style.css" rel="stylesheet" th:href="@{/css/main-style.css}"/>
-    <!--    <link href="../../static/css/materialdesignicons.min.css" th:href="@{/css/materialdesignicons.min.css}" rel="stylesheet"/>-->
-    <!-- 360浏览器急速模式 -->
-    <meta content="webkit" name="renderer">
-    <!-- 避免IE使用兼容模式 -->
-    <meta content="IE=edge" http-equiv="X-UA-Compatible">
-    <link href="../../static/css/autoscroll-table.css" rel="stylesheet" th:href="@{/css/autoscroll-table.css}">
-
-</head>
-<style>
-    .top-mid-Text-status {
-        position: absolute;
-        top: 14%;
-        width: 0;
-        height: 0;
-    }
-
-    #top-left {
-        border: 0px solid red;
-        position: absolute;
-        width: 23.5%;
-        height: 20%;
-        top: 14.85%;
-        left: 3.4%;
-        /*font-size: 12%;*/
-        /*padding-left: 1%;
-        padding-top: 0.7%;*/
-    }
-
-    #mid-left {
-        position: absolute;
-        border: 0px solid red;
-        width: 23.5%;
-        height: 16%;
-        top: 42.5%;
-        left: 3.4%;
-    }
-
-    /*#bottom-left {
-        position: absolute;
-        border: 1px solid red;
-        width: 68%;
-        height: 29.6%;
-        top: 66.4%;
-        left: 3.5%;
-    }*/
-
-    #top-mid {
-        position: absolute;
-        border: 0px solid red;
-        width: 40%;
-        height: 19.8%;
-        top: 14%;
-        left: 30%;
-    }
-
-    .top-mid-Text {
-        height: 26.5%;
-        width: 5%;
-        border: 0px solid black;
-        font-size: 16%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        text-align: justify;
-    }
-
-    #top-right {
-        position: absolute;
-        border: 0px solid red;
-        width: 23.5%;
-        height: 20%;
-        top: 14.85%;
-        left: 73%;
-    }
-
-    #mid-right {
-        position: absolute;
-        border: 0px solid red;
-        width: 23.5%;
-        height: 16%;
-        top: 42.5%;
-        left: 73%;
-    }
-
-    #bottom-right {
-        outline: #00a65a 0px solid;
-        border: 0px solid red;
-        position: absolute;
-        width: 23.5%;
-        height: 29.6%;
-        top: 66.4%;
-        left: 73%;
-    }
-
-
-    #bottom-mid {
-        position: absolute;
-        width: 43.3%;
-        height: 21%;
-        top: 74%;
-        left: 28.2%;
-    }
-
-
-    #oee {
-        position: absolute;
-        top: 14%;
-        left: 32.8%;
-        font-size: 22%;
-        color: #56B2F5;
-        text-shadow: 0 0 2px #56B2F5;
-        letter-spacing: 3px;
-    }
-
-    #production {
-        position: absolute;
-        top: 14%;
-        left: 54%;
-        font-size: 22%;
-        color: #57F4AD;
-        text-shadow: 0 0 2px #57F4AD;
-        letter-spacing: 3px;
-    }
-
-    #expected-pace {
-        position: absolute;
-        top: 26.6%;
-        left: 32.8%;
-        font-size: 22%;
-        color: #CCF456;
-        text-shadow: 0 0 2px #CCF456;
-        letter-spacing: 3px;
-    }
-
-    #actual-pace {
-        position: absolute;
-        top: 26.6%;
-        left: 54%;
-        font-size: 22%;
-        color: #F58756;
-        text-shadow: 0 0 2px #F58756;
-        letter-spacing: 3px;
-    }
-
-    .status-table * {
-
-    }
-
-    .status-table td {
-        padding: 1.6% 0;
-    }
-
-    .status-table_item {
-        color: #0E72BE;
-        letter-spacing: 2px;
-    }
-
-    .status-table_content {
-        color: #8DA9C1;
-        letter-spacing: 1px;
-    }
-
-    #energy-chart {
-        width: 100%;
-        height: 100%;
-    }
-
-    #relay-chart {
-        width: 100%;
-        height: 100%;
-    }
-
-    #power-chart {
-        width: 100%;
-        height: 100%;
-    }
-
-    #contactor-chart {
-        width: 100%;
-        height: 100%;
-    }
-
-    #bottom-left .autoscroll-table td {
-        padding-top: 0.3%;
-        padding-bottom: 0.3%;
-    }
-
-    #bottom-left-2 .autoscroll-table td {
-        padding-top: 0.3%;
-        padding-bottom: 0.3%;
-    }
-
-    .my-transition {
-        position: absolute;
-        border: 0px solid red;
-        width: 68%;
-        height: 29.6%;
-        top: 66.4%;
-        left: 3.5%;
-
-        transform: scale(0.5, 0.5);
-        opacity: 0;
-        transition: transform 0.5s linear, opacity 0.5s linear;
-    }
-
-    .my-transition2 {
-        position: absolute;
-        border: 0px solid red;
-        width: 68%;
-        height: 29.6%;
-        top: 66.4%;
-        left: 3.5%;
-        transform: scale(0.5, 0.5);
-        opacity: 0;
-        transition: transform 0.5s linear, opacity 0.5s linear;
-    }
-
-    .my-click-transiton {
-        opacity: 1;
-        transform: scale(1, 1);
-    }
-</style>
-<body class="Foamer2" style="display:flex;">
-
-<!--界面跳转-->
-<!--
-<div style="border: 0px solid red;width: 24%;height: 0.2rem;top: 0%;margin-left:38%;cursor: pointer;" onclick="window.location.href = 'http://10.100.71.101:8012/system/Foamer?id=0';return false"></div>
--->
-
-<!--订单执行-->
-<div id="top-left">
-</div>
-
-<!--型号汇总统计-->
-<div id="mid-left">
-</div>
-
-<!--生产统计数据-->
-
-
-<div class="my-transition">
-    <div id="bottom-left"></div>
-</div>
-
-<div class="my-transition2">
-    <div id="bottom-left-2"></div>
-</div>
-
-<!--中间数据-->
-<div id="top-mid">
-    <!--当时计划-->
-    <div class="top-mid-Text" style="position: absolute;top:2%;color: #6fd4ff;">
-        <span>-</span>
-    </div>
-
-    <div class="top-mid-Text" style="position: absolute;top:2%;left:7.7%;color: #6fd4ff;">
-        <span>-</span>
-    </div>
-
-    <div class="top-mid-Text" style="position: absolute;top:2%;left:14.9%;color: #6fd4ff;">
-        <span>-</span>
-    </div>
-
-    <div class="top-mid-Text" style="position: absolute;top:2%;left:22.3%;color: #6fd4ff;">
-        <span>-</span>
-    </div>
-
-    <!--当前计划-->
-    <div class="top-mid-Text" style="position: absolute;top:2%;left:36.5%; color: #6fff85;">
-        <span>-</span>
-    </div>
-
-    <div class="top-mid-Text" style="position: absolute;top:2%;left:43.8%; color: #6fff85;">
-        <span>-</span>
-    </div>
-
-    <div class="top-mid-Text" style="position: absolute;top:2%;left:51.1%; color: #6fff85;">
-        <span>-</span>
-    </div>
-
-    <div class="top-mid-Text" style="position: absolute;top:2%;left:58.4%; color: #6fff85;">
-        <span>-</span>
-    </div>
-
-    <!--实际产量-->
-    <div class="top-mid-Text" style="position: absolute;top:2%;left:72.3%; color: #ffff6d;">
-        <span>-</span>
-    </div>
-
-    <div class="top-mid-Text" style="position: absolute;top:2%;left:79.9%; color: #ffff6d;">
-        <span>-</span>
-    </div>
-
-    <div class="top-mid-Text" style="position: absolute;top:2%;left:87.3%; color: #ffff6d;">
-        <span>-</span>
-    </div>
-
-    <div class="top-mid-Text" style="position: absolute;top:2%;left:94.6%; color: #ffff6d;">
-        <span>-</span>
-    </div>
-
-    <!--当日计划-->
-
-</div>
-
-<!--运行状态-->
-<div class="top-mid-Text-status" style="transform: translate(-50%,-50%);left: 33%;">
-    <img alt="运行状态" id="status-a" src="../../static/img/runImg.png" style="width:2vw" th:src="@{/img/runImg.png}"/>
-</div>
-<div class="top-mid-Text-status" style="transform: translate(-50%,-50%);left:39%">
-    <img alt="运行状态" id="status-b" src="../../static/img/runImg.png" style="width:2vw" th:src="@{/img/runImg.png}"/>
-</div>
-
-<div class="top-mid-Text-status" style="transform: translate(-50%,-50%);left:44.5%">
-    <img alt="运行状态" id="status-c" src="../../static/img/runImg.png" style="width:2vw" th:src="@{/img/runImg.png}"/>
-</div>
-
-<div class="top-mid-Text-status" style="transform: translate(-50%,-50%);left:50.5%">
-    <img alt="运行状态" id="status-d" src="../../static/img/runImg.png" style="width:2vw" th:src="@{/img/runImg.png}"/>
-</div>
-
-<!--运行状态-->
-<div class="top-mid-Text-status" style="transform: translate(-50%,-50%);left:59.5%">
-    <img alt="运行状态" id="status-sys1" src="../../static/img/runImg.png" style="width:2vw" th:src="@{/img/runImg.png}"/>
-    <!--<img alt="运行状态" src="../../static/img/stopImg.png" th:src="@{/img/stopImg.png}"/>-->
-</div>
-<div class="top-mid-Text-status" style="transform: translate(-50%,-50%);left:67%">
-    <img alt="运行状态" id="status-sys2" src="../../static/img/runImg.png" style="width:2vw" th:src="@{/img/runImg.png}"/>
-    <!--<img alt="运行状态" src="../../static/img/stopImg.png" th:src="@{/img/stopImg.png}"/>-->
-</div>
-
-<!--发泡参数-->
-<div id="top-right">
-</div>
-
-<!--工程不良-->
-<div id="mid-right">
-    <div id="mid-right-left" style="border:none; width:33%;height:100%; float:left;"></div>
-
-    <div id="mid-right-right" style="position: absolute;left:33%;border:none;width:66%;height:100%; float:right;"></div>
-</div>
-
-<!--库存-->
-<div id="bottom-right">
-</div>
-
-</body>
-
-<script src="../../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
-<script src="../../static/js/update-split-blocks.js" th:src="@{/js/update-split-blocks.js}"></script>
-<th:block th:include="include :: footer"/>
-<th:block th:include="include :: echarts-js"/>
-<script src="../../static/js/date-time-common.js" th:src="@{/js/date-time-common.js}"></script>
-<script src="../../static/js/autoscroll-table.js" th:src="@{/js/autoscroll-table.js}"></script>
-
-<script src="../../static/js/auto-update.js" th:src="@{/js/auto-update.js}"></script>
-<script>
-
-
-    const orderInfColumns = [
-        "型号",
-        "计划数",
-        "完成数",
-        "差异数",
-        "执行进度"
-    ];
-    const orderInf = new AutoScrollTable(document.getElementById("top-left"), orderInfColumns, {
-        width: ['30%', '14.5%', '14.5%', '14.5%', '14.5%']
-    })
-
-    let selectors = []
-    let tmp = []
-
-    for (let i = 0; i < 12; i++) {
-        tmp.push(`#top-mid .top-mid-Text:nth-child(${i + 1}) span`)
-
-        if (tmp.length >= 4) {
-            selectors.push(tmp)
-            tmp = []
-        }
-    }
-
-    const planInfo = new AutoScrollTable(document.getElementById("bottom-left"), [], {
-        width: ["5%", null, "7%", "5%", "5%", "5%", "5%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%"],
-    })
-
-    const planInfo2 = new AutoScrollTable(document.getElementById("bottom-left-2"), [], {
-        width: ["5%", null, "7%", "5%", "5%", "5%", "5%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%"],
-    })
-
-    function updateStatus(id, status) {
-        const el = document.getElementById(id)
-        switch (status) {
-            case 0:
-                el.setAttribute("src", el.getAttribute("src").replace("runImg", "stopImg"))
-                break
-            case 1:
-                el.setAttribute("src", el.getAttribute("src").replace("stopImg", "runImg"))
-                break
-        }
-    }
-
-    $(() => {
-        autoUpdate('/system/FoamerMes/getOrderInfo2', INTERVAL, data => {
-            // orderInf.loadData(data, Object.keys(orderInfColumns))
-            orderInf.loadData(data.map(value => [getSC(value.orderType), value.plannedProduction, value.actualProduction, value.plannedProduction - value.actualProduction, `${orderAgv(value.plannedProduction, value.actualProduction)}%`]), Object.keys(orderInfColumns))
-        })
-
-        const orderAgv = function (plannedProduction, actualProduction) {
-            if (plannedProduction == 0) {
-                return 0;
-            }
-            if (actualProduction == 0) {
-                return 0;
-            }
-
-            return (actualProduction / plannedProduction * 100).toFixed(1)
-        }
-
-        autoUpdate('/system/FoamerMes/getHeader', INTERVAL, data => {
-            // let p = [data[1], data[0][2], data[0][3]]
-            let p = [data.plannedProduction, data.actualProduction, data.plannedProduction - data.actualProduction]
-
-            for (let i in p) {
-                updateSplitBlocks(p[i], selectors[i])
-            }
-        })
-
-        let filter = (arr, key, value, key2) => {
-            return arr.filter(e => e[key] === value)?.[0]?.[key2]
-        }
-        let totle = (arr, i) => {
-            return arr.map((e, index) => {
-                if (index !== 0) {
-                    return e[i + 1]
-                } else {
-                    return 0
-                }
-            }).reduce((a, b) => a + b)
-        }
-        let title = ['编号', '型号', '状态', '目标', '计划', '累计', '达成率', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00']
-        let dataA = []
-        let dataB = []
-        let dataC = []
-        let dataIndex = 0
-        let first = true
-        let planInfoTime = 0
-
-        function showalert() {
-            if (planInfoTime % 2 === 0) {
-                dataB = [title]
-                dataC = [title]
-                dataB.push(...([...dataA].splice(dataIndex, 6)))
-                dataB.push([' ', '合计', '', totle([...dataB], 2), totle([...dataB], 3), totle([...dataB], 4), totle([...dataB], 3) === 0 ? '0%' : ((totle([...dataB], 4) / totle([...dataB], 3)) * 100).toString().substr(0, 5) + '%', totle([...dataB], 6), totle([...dataB], 7), totle([...dataB], 8), totle([...dataB], 9), totle([...dataB], 10), totle([...dataB], 11), totle([...dataB], 12), totle([...dataB], 13), totle([...dataB], 14), totle([...dataB], 15), totle([...dataB], 16), totle([...dataB], 17)])
-                if (dataIndex + 6 > dataA.length) {
-                    dataIndex = 0
-                } else {
-                    dataIndex += 6
-                }
-                dataC.push(...([...dataA].splice(dataIndex, 6)))
-                dataC.push([' ', '合计', '', totle([...dataC], 2), totle([...dataC], 3), totle([...dataC], 4), totle([...dataC], 3) === 0 ? '0%' : ((totle([...dataC], 4) / totle([...dataC], 3)) * 100).toString().substr(0, 5) + '%', totle([...dataC], 6), totle([...dataC], 7), totle([...dataC], 8), totle([...dataC], 9), totle([...dataC], 10), totle([...dataC], 11), totle([...dataC], 12), totle([...dataC], 13), totle([...dataC], 14), totle([...dataC], 15), totle([...dataC], 16), totle([...dataC], 17)])
-                if (dataIndex + 6 > dataA.length) {
-                    dataIndex = 0
-                } else {
-                    dataIndex += 6
-                }
-                console.log(dataB)
-                console.log(dataC)
-                planInfo.loadData([...dataB], 19, {
-                    includeHead: true,
-                })
-                planInfo2.loadData([...dataC], 19, {
-                    includeHead: true,
-                })
-            }
-            var myTransition = $('.my-transition');
-            var myTransition2 = $('.my-transition2');
-            if (myTransition.hasClass('my-click-transiton')) {
-                myTransition.removeClass('my-click-transiton');
-                $('.my-transition2').addClass('my-click-transiton');
-            } else {
-                myTransition2.removeClass('my-click-transiton');
-                $('.my-transition').addClass('my-click-transiton');
-            }
-            planInfoTime++
-        }
-
-
-        window.setInterval(showalert, 1000*30 );
-
-        //夹具生产计划切换
-        autoUpdate('/system/FoamerMes/getPlanHourInfo', INTERVAL, data => {
-            let name = {}
-            let dataInit = []
-            let dataRes = []
-            data.forEach(e => {
-                if (!Object.keys(name).includes(e.orderType)) {
-                    name[e.orderType] = [e.deviceID]
-                } else {
-                    let arr = name[e.orderType]
-                    if (!arr.includes(e.deviceID)) {
-                        arr.push(e.deviceID)
-                        name[e.orderType] = arr
-                    }
-                }
-            })
-            Object.keys(name).forEach(e => {
-                name[e].forEach(val => {
-                    let arr = []
-                    data.forEach(item => {
-                        if (item.orderType === e && item.deviceID === val) {
-                            arr.push(item)
-                        }
-                    })
-                    dataInit.push(arr)
-                })
-            })
-            let i = []
-            dataInit.forEach((e, index) => {
-                if (e[0].orderType === '其他型号') {
-                    i.push(index)
-                }
-            })
-            i.forEach((e, index) => {
-                let a = dataInit.splice(e - index, 1)
-                dataInit.push(...a)
-            })
-            dataInit.forEach((val, index) => {
-                let arr = val
-                let plannedProduction = val[0].plannedProduction || 0
-                let actualProduction = arr.map(e => e.actualProduction).reduce((a, b) => a + b) || 0
-                dataRes.push([val[0].deviceID, val[0].orderType.split(',')[0], val[0].deviceState, arr[0].target, plannedProduction, actualProduction, plannedProduction === 0 ? '0%' : ((actualProduction / plannedProduction) * 100).toString().substr(0, 5) + '%', filter(arr, 'recordTime', 8, 'actualProduction') || 0, filter(arr, 'recordTime', 9, 'actualProduction') || 0, filter(arr, 'recordTime', 10, 'actualProduction') || 0, filter(arr, 'recordTime', 11, 'actualProduction') || 0, filter(arr, 'recordTime', 12, 'actualProduction') || 0, filter(arr, 'recordTime', 13, 'actualProduction') || 0, filter(arr, 'recordTime', 14, 'actualProduction') || 0, filter(arr, 'recordTime', 15, 'actualProduction') || 0, filter(arr, 'recordTime', 16, 'actualProduction') || 0, filter(arr, 'recordTime', 17, 'actualProduction') || 0, filter(arr, 'recordTime', 18, 'actualProduction') || 0, filter(arr, 'recordTime', 19, 'actualProduction') || 0])
-            })
-            dataA = dataRes
-
-            if (first) {
-                console.log(dataInit)
-                showalert();
-            }
-            first = false
-
-        })
-
-
-        autoUpdate('/system/FoamerMes/getProductPlanInfo', INTERVAL, data => {
-            modelChart.setOption({
-                xAxis: {
-                    data: data['xAxisInfo'].map(value => getSC(value)),
-                },
-                series: [
-                    {
-                        name: '数量',
-                        data: data['seriesInfo'],
-                    },
-                    // {
-                    //     name: '数量_',
-                    //     data: data['seriesInfo'],
-                    // }
-                ]
-            })
-        })
-
-        autoUpdate('/system/FoamerMes/getInventoryInfo', INTERVAL, data => {
-            repertoryChart.setOption({
-                xAxis: {
-                    data: data['xAxisInfo'],
-                    axisLabel: {
-                        rotate: -30,
-                    },
-                },
-                series: [
-                    {
-                        name: '数量',
-                        data: data['seriesInfo'],
-                    },
-                ]
-            })
-        })
-
-        autoUpdate('/system/FoamerMes/getDeviceInfo', INTERVAL, data => {
-            updateStatus("status-a", data.status)
-            updateStatus("status-b", data.status2)
-            updateStatus("status-c", data.status3)
-            updateStatus("status-d", data.status4)
-        })
-
-        autoUpdate('/system/FoamerMes/getFoamDeviceInfo?deviceId=' + "HF202009858", INTERVAL, data => {
-            updateStatus("status-sys1", data.status)
-            updateStatus("status-sys2", data.status2)
-        })
-
-        autoUpdate('/system/FoamerMes/getFoamTemp', INTERVAL, res => {
-
-
-            myEcharts(res, document.getElementById("top-right"));
-        })
-
-        autoUpdate("/system/FoamerMes/flawRate", INTERVAL, data => {
-            const total = data[0]
-            const flaw = data[1]
-            const rate = flaw / total
-            rejectRatioChart.setOption({
-                series: [
-                    {
-                        name: '不良率',
-                        data: [
-                            {value: flaw, name: rate.toFixed(2) + '%'},
-                            {value: total - flaw, name: ''},
-                        ],
-                    }
-                ]
-            })
-        })
-
-        autoUpdate("/system/FoamerMes/flawInfo", INTERVAL, data => {
-            let d = {}
-            for (let entry of data) {
-                if (!d[entry.itemName]) {
-                    d[entry.itemName] = 0
-                }
-
-                d[entry.itemName] += parseFloat(entry.count)
-            }
-
-            data = []
-            for (let entry of Object.entries(d)) {
-                data.push({
-                    name: entry[0],
-                    value: entry[1],
-                })
-            }
-
-            pieChart.setOption({
-                series: [
-                    {
-                        name: '数量',
-                        data: data,
-                        label: {
-                            normal: {
-                                show: true,
-                                position: 'top',
-                                color: '#02FEA9'
-                            }
-                        }
-                    }
-                ]
-            })
-        })
-    })
-
-    const modelChart = echarts.init(document.getElementById("mid-left"))
-    modelChart.setOption({
-        color: ['#4499CE'],
-        xAxis: {
-            type: 'category',
-            axisLabel: {
-                color: '#ffffff',
-                fontSize: '10',
-                rotate: -30,
-            },
-        },
-        yAxis: {
-            type: 'value',
-            axisLabel: {
-                color: '#ffffff'
-            },
-            splitLine: {
-                show: false,
-            },
-            interval: 90,
-        },
-        series: [
-            {
-                name: '数量',
-                type: 'bar',
-                barWidth: 16,
-                itemStyle: {
-                    normal: {
-                        color: new echarts.graphic.LinearGradient(
-                            0, 0, 0, 1,
-                            [
-                                {offset: 0, color: '#0F8EEF'},
-                                {offset: 1, color: '#0E35EF'}
-                            ]
-                        )
-                    },
-                    emphasis: {
-                        color: new echarts.graphic.LinearGradient(
-                            0, 0, 0, 1,
-                            [
-                                {offset: 0, color: '#0F8EEF'},
-                                {offset: 1, color: '#0E35EF'}
-                            ]
-                        )
-                    }
-                },
-                label: {
-                    normal: {
-                        show: true,
-                        position: 'top',
-                        color: '#0F8EEF'
-                    }
-                }
-            }],
-        grid: {
-            left: 10,
-            top: 20,
-            right: 10,
-            bottom: 2,
-            containLabel: true,
-        },
-        tooltip: {
-            trigger: 'axis',
-            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
-                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
-            },
-        },
-    })
-
-    const repertoryChart = echarts.init(document.getElementById("bottom-right"))
-    repertoryChart.setOption({
-        color: ['#4499CE'],
-        xAxis: {
-            type: 'category',
-            axisLabel: {
-                fontSize: '10px',
-                color: '#ffffff'
-            }
-        },
-        yAxis: {
-            type: 'value',
-            axisLabel: {
-                color: '#ffffff'
-            },
-            splitLine: {
-                show: false,
-            },
-            interval: 15,
-        },
-        series: [
-            {
-                name: '数量',
-                type: 'bar',
-                barWidth: 16,
-                itemStyle: {
-                    normal: {
-                        color: new echarts.graphic.LinearGradient(
-                            0, 0, 0, 1,
-                            [
-                                {offset: 0, color: '#2FDE80'},
-                                {offset: 1, color: '#2FDECA'}
-                            ]
-                        )
-                    },
-                    emphasis: {
-                        color: new echarts.graphic.LinearGradient(
-                            0, 0, 0, 1,
-                            [
-                                {offset: 0, color: '#2FDECA'},
-                                {offset: 1, color: '#2FDE80'}
-                            ]
-                        )
-                    }
-                },
-                label: {
-                    normal: {
-                        show: true,
-                        position: 'top',
-                        color: '#02FEA9'
-                    }
-                }
-            }],
-        grid: {
-            left: 10,
-            top: 20,
-            right: 15,
-            bottom: 2,
-            containLabel: true,
-        },
-        tooltip: {
-            trigger: 'axis',
-            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
-                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
-            },
-        },
-    })
-
-    const rejectRatioChart = echarts.init(document.getElementById("mid-right-left"))
-    rejectRatioChart.setOption({
-        title: {
-            text: '不良率',
-            left: 'center',
-            bottom: "-1%",
-            textStyle: {
-                color: '#ccc',
-                fontSize: "10%",
-            }
-        },
-        color: [
-            "#00EAFF",
-            "#063E63"
-        ],
-        series: [
-            {
-                name: '不良率',
-                type: 'pie',
-                radius: ['55%', '70%'],
-                avoidLabelOverlap: false,
-                label: {
-                    show: true,
-                    position: 'center',
-                    fontSize: "13%",
-                    color: '#00EAFF',
-                },
-                labelLine: {
-                    show: false
-                },
-            }
-        ]
-    })
-
-    const pieChart = echarts.init(document.getElementById("mid-right-right"))
-    pieChart.setOption({
-        tooltip: {
-            trigger: 'item'
-        },
-        color: [
-            "#FF5C5D",
-            "#1FD8F4",
-            "#5cff2d",
-            "#d858ff",
-            "#ffd326",
-            "#5698ff",
-        ],
-        series: [
-            {
-                name: '数量',
-                type: 'pie',
-                radius: ['55%', '70%'],
-                label: {
-                    show: true,
-                    formatter: '{b}\n{d}%',
-                    textStyle: {
-                        fontSize: '10px',
-                    },
-                    color: '#ddd'
-                },
-                labelLine: {
-                    show: true,
-                    length: 2,
-                    length2: 0,
-                    maxSurfaceAngle: 90,
-                },
-                labelLayout(params) {
-                    const isLeft = params.labelRect.x < myChart.getWidth() / 2;
-                    const points = params.labelLinePoints;
-                    points[2][0] = isLeft
-                        ? params.labelRect.x
-                        : params.labelRect.x + params.labelRect.width;
-                    return {
-                        labelLinePoints: points
-                    };
-                },
-                emphasis: {
-                    itemStyle: {
-                        shadowBlur: 10,
-                        shadowOffsetX: 0,
-                        shadowColor: 'rgba(0, 0, 0, 0.5)'
-                    }
-                }
-            }
-        ]
-    })
-
-    function resize() {
-        orderInf.resize()
-        planInfo.resize()
-        planInfo2.resize()
-        modelChart.resize()
-        repertoryChart.resize()
-        rejectRatioChart.resize()
-        pieChart.resize()
-    }
-
-    window.onresize = resize
-    $(() => {
-        resize()
-    })
-</script>
-
-<script type="text/javascript">
-    const myEcharts = (res, ids) => {
-        let charts = echarts.init(ids);
-
-        let option = {
-            tooltip: {
-                trigger: "axis",
-                axisPointer: {
-                    type: "shadow",
-                    textStyle: {
-                        color: "#fff",
-                    },
-                },
-            },
-            grid: {
-                left: "2%",
-                right: "5%",
-                bottom: "3%",
-                containLabel: true,
-            },
-            legend: {
-                icon: "rect",
-                itemWidth: 14,
-                itemHeight: 5,
-                itemGap: 13,
-                data: res.legend,
-                right: "4%",
-                textStyle: {
-                    fontSize: 12,
-                    color: "#F1F1F3",
-                },
-            },
-
-            calculable: true,
-            xAxis: [
-                {
-                    type: "category",
-                    axisLine: {
-                        lineStyle: {
-                            color: "#90979c",
-                        },
-                    },
-                    splitLine: {
-                        show: false,
-                    },
-                    axisLabel: {
-                        show: true,
-                    },
-                    axisTick: {
-                        show: true,
-                    },
-                    data: res.xAxis,
-                },
-            ],
-            yAxis: [
-                {
-                    type: "value",
-                    name: "℃",
-                    nameTextStyle: {
-                        color: 'rgba(219,225,255,1)'
-                    },
-                    axisLabel: {
-                        textStyle: {
-                            color: "rgba(219,225,255,1)",
-                            margin: 15
-                        },
-                    },
-                    axisTick: {
-                        show: false,
-                    },
-                    axisLine: {
-                        show: true,
-                        lineStyle: {
-                            color: "rgba(219,225,255,1)",
-                            width: 1,
-                            type: "solid"
-                        },
-                    },
-                    splitLine: {//分割线配置
-                        show: false,
-                        lineStyle: {
-                            color: "rgba(219,225,255,1)",
-                        }
-                    },
-                    interval: 20,
-                },
-            ],
-            series: res.series,
-        };
-        charts.setOption(option);
-        $(window).resize(charts.resize);
-    }
-</script>
-
+<!DOCTYPE html>
+<html lang="zh" xmlns:th="http://www.thymeleaf.org">
+<head>
+    <meta charset="UTF-8">
+    <meta content="width=device-width,initial-scale=1.0"
+          name="viewport">
+    <title>发泡SCADA数据平台</title>
+    <meta content="U壳钣金SCADA数据平台" name="description">
+    <link href="../../static/css/main-style.css" rel="stylesheet" th:href="@{/css/main-style.css}"/>
+    <!--    <link href="../../static/css/materialdesignicons.min.css" th:href="@{/css/materialdesignicons.min.css}" rel="stylesheet"/>-->
+    <!-- 360浏览器急速模式 -->
+    <meta content="webkit" name="renderer">
+    <!-- 避免IE使用兼容模式 -->
+    <meta content="IE=edge" http-equiv="X-UA-Compatible">
+    <link href="../../static/css/autoscroll-table.css" rel="stylesheet" th:href="@{/css/autoscroll-table.css}">
+
+</head>
+<style>
+    .top-mid-Text-status {
+        position: absolute;
+        top: 14%;
+        width: 0;
+        height: 0;
+    }
+
+    #top-left {
+        border: 0px solid red;
+        position: absolute;
+        width: 23.5%;
+        height: 20%;
+        top: 14.85%;
+        left: 3.4%;
+        /*font-size: 12%;*/
+        /*padding-left: 1%;
+        padding-top: 0.7%;*/
+    }
+
+    #mid-left {
+        position: absolute;
+        border: 0px solid red;
+        width: 23.5%;
+        height: 16%;
+        top: 42.5%;
+        left: 3.4%;
+    }
+
+    /*#bottom-left {
+        position: absolute;
+        border: 1px solid red;
+        width: 68%;
+        height: 29.6%;
+        top: 66.4%;
+        left: 3.5%;
+    }*/
+
+    #top-mid {
+        position: absolute;
+        border: 0px solid red;
+        width: 40%;
+        height: 19.8%;
+        top: 14%;
+        left: 30%;
+    }
+
+    .top-mid-Text {
+        height: 26.5%;
+        width: 5%;
+        border: 0px solid black;
+        font-size: 16%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: justify;
+    }
+
+    #top-right {
+        position: absolute;
+        border: 0px solid red;
+        width: 23.5%;
+        height: 20%;
+        top: 14.85%;
+        left: 73%;
+    }
+
+    #mid-right {
+        position: absolute;
+        border: 0px solid red;
+        width: 23.5%;
+        height: 16%;
+        top: 42.5%;
+        left: 73%;
+    }
+
+    #bottom-right {
+        outline: #00a65a 0px solid;
+        border: 0px solid red;
+        position: absolute;
+        width: 23.5%;
+        height: 29.6%;
+        top: 66.4%;
+        left: 73%;
+    }
+
+
+    #bottom-mid {
+        position: absolute;
+        width: 43.3%;
+        height: 21%;
+        top: 74%;
+        left: 28.2%;
+    }
+
+
+    #oee {
+        position: absolute;
+        top: 14%;
+        left: 32.8%;
+        font-size: 22%;
+        color: #56B2F5;
+        text-shadow: 0 0 2px #56B2F5;
+        letter-spacing: 3px;
+    }
+
+    #production {
+        position: absolute;
+        top: 14%;
+        left: 54%;
+        font-size: 22%;
+        color: #57F4AD;
+        text-shadow: 0 0 2px #57F4AD;
+        letter-spacing: 3px;
+    }
+
+    #expected-pace {
+        position: absolute;
+        top: 26.6%;
+        left: 32.8%;
+        font-size: 22%;
+        color: #CCF456;
+        text-shadow: 0 0 2px #CCF456;
+        letter-spacing: 3px;
+    }
+
+    #actual-pace {
+        position: absolute;
+        top: 26.6%;
+        left: 54%;
+        font-size: 22%;
+        color: #F58756;
+        text-shadow: 0 0 2px #F58756;
+        letter-spacing: 3px;
+    }
+
+    .status-table * {
+
+    }
+
+    .status-table td {
+        padding: 1.6% 0;
+    }
+
+    .status-table_item {
+        color: #0E72BE;
+        letter-spacing: 2px;
+    }
+
+    .status-table_content {
+        color: #8DA9C1;
+        letter-spacing: 1px;
+    }
+
+    #energy-chart {
+        width: 100%;
+        height: 100%;
+    }
+
+    #relay-chart {
+        width: 100%;
+        height: 100%;
+    }
+
+    #power-chart {
+        width: 100%;
+        height: 100%;
+    }
+
+    #contactor-chart {
+        width: 100%;
+        height: 100%;
+    }
+
+    #bottom-left .autoscroll-table td {
+        padding-top: 0.3%;
+        padding-bottom: 0.3%;
+    }
+
+    #bottom-left-2 .autoscroll-table td {
+        padding-top: 0.3%;
+        padding-bottom: 0.3%;
+    }
+
+    .my-transition {
+        position: absolute;
+        border: 0px solid red;
+        width: 68%;
+        height: 29.6%;
+        top: 66.4%;
+        left: 3.5%;
+
+        transform: scale(0.5, 0.5);
+        opacity: 0;
+        transition: transform 0.5s linear, opacity 0.5s linear;
+    }
+
+    .my-transition2 {
+        position: absolute;
+        border: 0px solid red;
+        width: 68%;
+        height: 29.6%;
+        top: 66.4%;
+        left: 3.5%;
+        transform: scale(0.5, 0.5);
+        opacity: 0;
+        transition: transform 0.5s linear, opacity 0.5s linear;
+    }
+
+    .my-click-transiton {
+        opacity: 1;
+        transform: scale(1, 1);
+    }
+</style>
+<body class="Foamer2" style="display:flex;">
+
+<!--界面跳转-->
+<!--
+<div style="border: 0px solid red;width: 24%;height: 0.2rem;top: 0%;margin-left:38%;cursor: pointer;" onclick="window.location.href = 'http://10.100.71.101:8012/system/Foamer?id=0';return false"></div>
+-->
+
+<!--订单执行-->
+<div id="top-left">
+</div>
+
+<!--型号汇总统计-->
+<div id="mid-left">
+</div>
+
+<!--生产统计数据-->
+
+
+<div class="my-transition">
+    <div id="bottom-left"></div>
+</div>
+
+<div class="my-transition2">
+    <div id="bottom-left-2"></div>
+</div>
+
+<!--中间数据-->
+<div id="top-mid">
+    <!--当时计划-->
+    <div class="top-mid-Text" style="position: absolute;top:2%;color: #6fd4ff;">
+        <span>-</span>
+    </div>
+
+    <div class="top-mid-Text" style="position: absolute;top:2%;left:7.7%;color: #6fd4ff;">
+        <span>-</span>
+    </div>
+
+    <div class="top-mid-Text" style="position: absolute;top:2%;left:14.9%;color: #6fd4ff;">
+        <span>-</span>
+    </div>
+
+    <div class="top-mid-Text" style="position: absolute;top:2%;left:22.3%;color: #6fd4ff;">
+        <span>-</span>
+    </div>
+
+    <!--当前计划-->
+    <div class="top-mid-Text" style="position: absolute;top:2%;left:36.5%; color: #6fff85;">
+        <span>-</span>
+    </div>
+
+    <div class="top-mid-Text" style="position: absolute;top:2%;left:43.8%; color: #6fff85;">
+        <span>-</span>
+    </div>
+
+    <div class="top-mid-Text" style="position: absolute;top:2%;left:51.1%; color: #6fff85;">
+        <span>-</span>
+    </div>
+
+    <div class="top-mid-Text" style="position: absolute;top:2%;left:58.4%; color: #6fff85;">
+        <span>-</span>
+    </div>
+
+    <!--实际产量-->
+    <div class="top-mid-Text" style="position: absolute;top:2%;left:72.3%; color: #ffff6d;">
+        <span>-</span>
+    </div>
+
+    <div class="top-mid-Text" style="position: absolute;top:2%;left:79.9%; color: #ffff6d;">
+        <span>-</span>
+    </div>
+
+    <div class="top-mid-Text" style="position: absolute;top:2%;left:87.3%; color: #ffff6d;">
+        <span>-</span>
+    </div>
+
+    <div class="top-mid-Text" style="position: absolute;top:2%;left:94.6%; color: #ffff6d;">
+        <span>-</span>
+    </div>
+
+    <!--当日计划-->
+
+</div>
+
+<!--运行状态-->
+<div class="top-mid-Text-status" style="transform: translate(-50%,-50%);left: 33%;">
+    <img alt="运行状态" id="status-a" src="../../static/img/runImg.png" style="width:2vw" th:src="@{/img/runImg.png}"/>
+</div>
+<div class="top-mid-Text-status" style="transform: translate(-50%,-50%);left:39%">
+    <img alt="运行状态" id="status-b" src="../../static/img/runImg.png" style="width:2vw" th:src="@{/img/runImg.png}"/>
+</div>
+
+<div class="top-mid-Text-status" style="transform: translate(-50%,-50%);left:44.5%">
+    <img alt="运行状态" id="status-c" src="../../static/img/runImg.png" style="width:2vw" th:src="@{/img/runImg.png}"/>
+</div>
+
+<div class="top-mid-Text-status" style="transform: translate(-50%,-50%);left:50.5%">
+    <img alt="运行状态" id="status-d" src="../../static/img/runImg.png" style="width:2vw" th:src="@{/img/runImg.png}"/>
+</div>
+
+<!--运行状态-->
+<div class="top-mid-Text-status" style="transform: translate(-50%,-50%);left:59.5%">
+    <img alt="运行状态" id="status-sys1" src="../../static/img/runImg.png" style="width:2vw" th:src="@{/img/runImg.png}"/>
+    <!--<img alt="运行状态" src="../../static/img/stopImg.png" th:src="@{/img/stopImg.png}"/>-->
+</div>
+<div class="top-mid-Text-status" style="transform: translate(-50%,-50%);left:67%">
+    <img alt="运行状态" id="status-sys2" src="../../static/img/runImg.png" style="width:2vw" th:src="@{/img/runImg.png}"/>
+    <!--<img alt="运行状态" src="../../static/img/stopImg.png" th:src="@{/img/stopImg.png}"/>-->
+</div>
+
+<!--发泡参数-->
+<div id="top-right">
+</div>
+
+<!--工程不良-->
+<div id="mid-right">
+    <div id="mid-right-left" style="border:none; width:33%;height:100%; float:left;"></div>
+
+    <div id="mid-right-right" style="position: absolute;left:33%;border:none;width:66%;height:100%; float:right;"></div>
+</div>
+
+<!--库存-->
+<div id="bottom-right">
+</div>
+
+</body>
+
+<script src="../../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
+<script src="../../static/js/update-split-blocks.js" th:src="@{/js/update-split-blocks.js}"></script>
+<th:block th:include="include :: footer"/>
+<th:block th:include="include :: echarts-js"/>
+<script src="../../static/js/date-time-common.js" th:src="@{/js/date-time-common.js}"></script>
+<script src="../../static/js/autoscroll-table.js" th:src="@{/js/autoscroll-table.js}"></script>
+
+<script src="../../static/js/auto-update.js" th:src="@{/js/auto-update.js}"></script>
+<script>
+
+
+    const orderInfColumns = [
+        "型号",
+        "计划数",
+        "完成数",
+        "差异数",
+        "执行进度"
+    ];
+    const orderInf = new AutoScrollTable(document.getElementById("top-left"), orderInfColumns, {
+        width: ['30%', '14.5%', '14.5%', '14.5%', '14.5%']
+    })
+
+    let selectors = []
+    let tmp = []
+
+    for (let i = 0; i < 12; i++) {
+        tmp.push(`#top-mid .top-mid-Text:nth-child(${i + 1}) span`)
+
+        if (tmp.length >= 4) {
+            selectors.push(tmp)
+            tmp = []
+        }
+    }
+
+    const planInfo = new AutoScrollTable(document.getElementById("bottom-left"), [], {
+        width: ["5%", null, "7%", "5%", "5%", "5%", "5%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%"],
+    })
+
+    const planInfo2 = new AutoScrollTable(document.getElementById("bottom-left-2"), [], {
+        width: ["5%", null, "7%", "5%", "5%", "5%", "5%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%", "4.2%"],
+    })
+
+    function updateStatus(id, status) {
+        const el = document.getElementById(id)
+        switch (status) {
+            case 0:
+                el.setAttribute("src", el.getAttribute("src").replace("runImg", "stopImg"))
+                break
+            case 1:
+                el.setAttribute("src", el.getAttribute("src").replace("stopImg", "runImg"))
+                break
+        }
+    }
+
+    $(() => {
+        autoUpdate('/system/FoamerMes/getOrderInfo2', INTERVAL, data => {
+            // orderInf.loadData(data, Object.keys(orderInfColumns))
+            orderInf.loadData(data.map(value => [getSC(value.orderType), value.plannedProduction, value.actualProduction, value.plannedProduction - value.actualProduction, `${orderAgv(value.plannedProduction, value.actualProduction)}%`]), Object.keys(orderInfColumns))
+        })
+
+        const orderAgv = function (plannedProduction, actualProduction) {
+            if (plannedProduction == 0) {
+                return 0;
+            }
+            if (actualProduction == 0) {
+                return 0;
+            }
+
+            return (actualProduction / plannedProduction * 100).toFixed(1)
+        }
+
+        autoUpdate('/system/FoamerMes/getHeader', INTERVAL, data => {
+            // let p = [data[1], data[0][2], data[0][3]]
+            let p = [data.plannedProduction, data.actualProduction, data.plannedProduction - data.actualProduction]
+
+            for (let i in p) {
+                updateSplitBlocks(p[i], selectors[i])
+            }
+        })
+
+        let filter = (arr, key, value, key2) => {
+            return arr.filter(e => e[key] === value)?.[0]?.[key2]
+        }
+        let totle = (arr, i) => {
+            return arr.map((e, index) => {
+                if (index !== 0) {
+                    return e[i + 1]
+                } else {
+                    return 0
+                }
+            }).reduce((a, b) => a + b)
+        }
+        let title = ['编号', '型号', '状态', '目标', '计划', '累计', '达成率', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00']
+        let dataA = []
+        let dataB = []
+        let dataC = []
+        let dataIndex = 0
+        let first = true
+        let planInfoTime = 0
+
+        function showalert() {
+            if (planInfoTime % 2 === 0) {
+                dataB = [title]
+                dataC = [title]
+                dataB.push(...([...dataA].splice(dataIndex, 6)))
+                dataB.push([' ', '合计', '', totle([...dataB], 2), totle([...dataB], 3), totle([...dataB], 4), totle([...dataB], 3) === 0 ? '0%' : ((totle([...dataB], 4) / totle([...dataB], 3)) * 100).toString().substr(0, 5) + '%', totle([...dataB], 6), totle([...dataB], 7), totle([...dataB], 8), totle([...dataB], 9), totle([...dataB], 10), totle([...dataB], 11), totle([...dataB], 12), totle([...dataB], 13), totle([...dataB], 14), totle([...dataB], 15), totle([...dataB], 16), totle([...dataB], 17)])
+                if (dataIndex + 6 > dataA.length) {
+                    dataIndex = 0
+                } else {
+                    dataIndex += 6
+                }
+                dataC.push(...([...dataA].splice(dataIndex, 6)))
+                dataC.push([' ', '合计', '', totle([...dataC], 2), totle([...dataC], 3), totle([...dataC], 4), totle([...dataC], 3) === 0 ? '0%' : ((totle([...dataC], 4) / totle([...dataC], 3)) * 100).toString().substr(0, 5) + '%', totle([...dataC], 6), totle([...dataC], 7), totle([...dataC], 8), totle([...dataC], 9), totle([...dataC], 10), totle([...dataC], 11), totle([...dataC], 12), totle([...dataC], 13), totle([...dataC], 14), totle([...dataC], 15), totle([...dataC], 16), totle([...dataC], 17)])
+                if (dataIndex + 6 > dataA.length) {
+                    dataIndex = 0
+                } else {
+                    dataIndex += 6
+                }
+                console.log(dataB)
+                console.log(dataC)
+                planInfo.loadData([...dataB], 19, {
+                    includeHead: true,
+                })
+                planInfo2.loadData([...dataC], 19, {
+                    includeHead: true,
+                })
+            }
+            var myTransition = $('.my-transition');
+            var myTransition2 = $('.my-transition2');
+            if (myTransition.hasClass('my-click-transiton')) {
+                myTransition.removeClass('my-click-transiton');
+                $('.my-transition2').addClass('my-click-transiton');
+            } else {
+                myTransition2.removeClass('my-click-transiton');
+                $('.my-transition').addClass('my-click-transiton');
+            }
+            planInfoTime++
+        }
+
+
+        window.setInterval(showalert, 1000*30 );
+
+        //夹具生产计划切换
+        autoUpdate('/system/FoamerMes/getPlanHourInfo', INTERVAL, data => {
+            let name = {}
+            let dataInit = []
+            let dataRes = []
+            data.forEach(e => {
+                if (!Object.keys(name).includes(e.deviceID)) {
+                    name[e.deviceID] = [e.orderType]
+                } else {
+                    let arr = name[e.deviceID]
+                    if (!arr.includes(e.orderType)) {
+                        arr.push(e.orderType)
+                        name[e.deviceID] = arr
+                    }
+                }
+            })
+            Object.keys(name).forEach(e => {
+                name[e].forEach(val => {
+                    let arr = []
+                    data.forEach(item => {
+                        if (item.deviceID === e && item.orderType === val) {
+                            arr.push(item)
+                        }
+                    })
+                    dataInit.push(arr)
+                })
+            }) 
+            let i = []
+            dataInit.forEach((e, index) => {
+                if (e[0].orderType === '其他型号') {
+                    i.push(index)
+                }
+            })
+            i.forEach((e, index) => {
+                let a = dataInit.splice(e - index, 1)
+                dataInit.push(...a)
+            })
+            dataInit.forEach((val, index) => {
+                let arr = val
+                let plannedProduction = val[0].plannedProduction || 0
+                let actualProduction = arr.map(e => e.actualProduction).reduce((a, b) => a + b) || 0
+                dataRes.push([val[0].deviceID, val[0].orderType.split(',')[0], val[0].deviceState, arr[0].target, plannedProduction, actualProduction, plannedProduction === 0 ? '0%' : ((actualProduction / plannedProduction) * 100).toString().substr(0, 5) + '%', filter(arr, 'recordTime', 8, 'actualProduction') || 0, filter(arr, 'recordTime', 9, 'actualProduction') || 0, filter(arr, 'recordTime', 10, 'actualProduction') || 0, filter(arr, 'recordTime', 11, 'actualProduction') || 0, filter(arr, 'recordTime', 12, 'actualProduction') || 0, filter(arr, 'recordTime', 13, 'actualProduction') || 0, filter(arr, 'recordTime', 14, 'actualProduction') || 0, filter(arr, 'recordTime', 15, 'actualProduction') || 0, filter(arr, 'recordTime', 16, 'actualProduction') || 0, filter(arr, 'recordTime', 17, 'actualProduction') || 0, filter(arr, 'recordTime', 18, 'actualProduction') || 0, filter(arr, 'recordTime', 19, 'actualProduction') || 0])
+            })
+            dataA = dataRes
+
+            if (first) {
+                console.log(dataInit)
+                showalert();
+            }
+            first = false
+
+        })
+
+
+        autoUpdate('/system/FoamerMes/getProductPlanInfo', INTERVAL, data => {
+            modelChart.setOption({
+                xAxis: {
+                    data: data['xAxisInfo'].map(value => getSC(value)),
+                },
+                series: [
+                    {
+                        name: '数量',
+                        data: data['seriesInfo'],
+                    },
+                    // {
+                    //     name: '数量_',
+                    //     data: data['seriesInfo'],
+                    // }
+                ]
+            })
+        })
+
+        autoUpdate('/system/FoamerMes/getInventoryInfo', INTERVAL, data => {
+            repertoryChart.setOption({
+                xAxis: {
+                    data: data['xAxisInfo'],
+                    axisLabel: {
+                        rotate: -30,
+                    },
+                },
+                series: [
+                    {
+                        name: '数量',
+                        data: data['seriesInfo'],
+                    },
+                ]
+            })
+        })
+
+        autoUpdate('/system/FoamerMes/getDeviceInfo', INTERVAL, data => {
+            updateStatus("status-a", data.status)
+            updateStatus("status-b", data.status2)
+            updateStatus("status-c", data.status3)
+            updateStatus("status-d", data.status4)
+        })
+
+        autoUpdate('/system/FoamerMes/getFoamDeviceInfo?deviceId=' + "HF202009858", INTERVAL, data => {
+            updateStatus("status-sys1", data.status)
+            updateStatus("status-sys2", data.status2)
+        })
+
+        autoUpdate('/system/FoamerMes/getFoamTemp', INTERVAL, res => {
+
+
+            myEcharts(res, document.getElementById("top-right"));
+        })
+
+        autoUpdate("/system/FoamerMes/flawRate", INTERVAL, data => {
+            const total = data[0]
+            const flaw = data[1]
+            const rate = flaw / total
+            rejectRatioChart.setOption({
+                series: [
+                    {
+                        name: '不良率',
+                        data: [
+                            {value: flaw, name: rate.toFixed(2) + '%'},
+                            {value: total - flaw, name: ''},
+                        ],
+                    }
+                ]
+            })
+        })
+
+        autoUpdate("/system/FoamerMes/flawInfo", INTERVAL, data => {
+            let d = {}
+            for (let entry of data) {
+                if (!d[entry.itemName]) {
+                    d[entry.itemName] = 0
+                }
+
+                d[entry.itemName] += parseFloat(entry.count)
+            }
+
+            data = []
+            for (let entry of Object.entries(d)) {
+                data.push({
+                    name: entry[0],
+                    value: entry[1],
+                })
+            }
+
+            pieChart.setOption({
+                series: [
+                    {
+                        name: '数量',
+                        data: data,
+                        label: {
+                            normal: {
+                                show: true,
+                                position: 'top',
+                                color: '#02FEA9'
+                            }
+                        }
+                    }
+                ]
+            })
+        })
+    })
+
+    const modelChart = echarts.init(document.getElementById("mid-left"))
+    modelChart.setOption({
+        color: ['#4499CE'],
+        xAxis: {
+            type: 'category',
+            axisLabel: {
+                color: '#ffffff',
+                fontSize: '10',
+                rotate: -30,
+            },
+        },
+        yAxis: {
+            type: 'value',
+            axisLabel: {
+                color: '#ffffff'
+            },
+            splitLine: {
+                show: false,
+            },
+            interval: 90,
+        },
+        series: [
+            {
+                name: '数量',
+                type: 'bar',
+                barWidth: 16,
+                itemStyle: {
+                    normal: {
+                        color: new echarts.graphic.LinearGradient(
+                            0, 0, 0, 1,
+                            [
+                                {offset: 0, color: '#0F8EEF'},
+                                {offset: 1, color: '#0E35EF'}
+                            ]
+                        )
+                    },
+                    emphasis: {
+                        color: new echarts.graphic.LinearGradient(
+                            0, 0, 0, 1,
+                            [
+                                {offset: 0, color: '#0F8EEF'},
+                                {offset: 1, color: '#0E35EF'}
+                            ]
+                        )
+                    }
+                },
+                label: {
+                    normal: {
+                        show: true,
+                        position: 'top',
+                        color: '#0F8EEF'
+                    }
+                }
+            }],
+        grid: {
+            left: 10,
+            top: 20,
+            right: 10,
+            bottom: 2,
+            containLabel: true,
+        },
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
+                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
+            },
+        },
+    })
+
+    const repertoryChart = echarts.init(document.getElementById("bottom-right"))
+    repertoryChart.setOption({
+        color: ['#4499CE'],
+        xAxis: {
+            type: 'category',
+            axisLabel: {
+                fontSize: '10px',
+                color: '#ffffff'
+            }
+        },
+        yAxis: {
+            type: 'value',
+            axisLabel: {
+                color: '#ffffff'
+            },
+            splitLine: {
+                show: false,
+            },
+            interval: 15,
+        },
+        series: [
+            {
+                name: '数量',
+                type: 'bar',
+                barWidth: 16,
+                itemStyle: {
+                    normal: {
+                        color: new echarts.graphic.LinearGradient(
+                            0, 0, 0, 1,
+                            [
+                                {offset: 0, color: '#2FDE80'},
+                                {offset: 1, color: '#2FDECA'}
+                            ]
+                        )
+                    },
+                    emphasis: {
+                        color: new echarts.graphic.LinearGradient(
+                            0, 0, 0, 1,
+                            [
+                                {offset: 0, color: '#2FDECA'},
+                                {offset: 1, color: '#2FDE80'}
+                            ]
+                        )
+                    }
+                },
+                label: {
+                    normal: {
+                        show: true,
+                        position: 'top',
+                        color: '#02FEA9'
+                    }
+                }
+            }],
+        grid: {
+            left: 10,
+            top: 20,
+            right: 15,
+            bottom: 2,
+            containLabel: true,
+        },
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
+                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
+            },
+        },
+    })
+
+    const rejectRatioChart = echarts.init(document.getElementById("mid-right-left"))
+    rejectRatioChart.setOption({
+        title: {
+            text: '不良率',
+            left: 'center',
+            bottom: "-1%",
+            textStyle: {
+                color: '#ccc',
+                fontSize: "10%",
+            }
+        },
+        color: [
+            "#00EAFF",
+            "#063E63"
+        ],
+        series: [
+            {
+                name: '不良率',
+                type: 'pie',
+                radius: ['55%', '70%'],
+                avoidLabelOverlap: false,
+                label: {
+                    show: true,
+                    position: 'center',
+                    fontSize: "13%",
+                    color: '#00EAFF',
+                },
+                labelLine: {
+                    show: false
+                },
+            }
+        ]
+    })
+
+    const pieChart = echarts.init(document.getElementById("mid-right-right"))
+    pieChart.setOption({
+        tooltip: {
+            trigger: 'item'
+        },
+        color: [
+            "#FF5C5D",
+            "#1FD8F4",
+            "#5cff2d",
+            "#d858ff",
+            "#ffd326",
+            "#5698ff",
+        ],
+        series: [
+            {
+                name: '数量',
+                type: 'pie',
+                radius: ['55%', '70%'],
+                label: {
+                    show: true,
+                    formatter: '{b}\n{d}%',
+                    textStyle: {
+                        fontSize: '10px',
+                    },
+                    color: '#ddd'
+                },
+                labelLine: {
+                    show: true,
+                    length: 2,
+                    length2: 0,
+                    maxSurfaceAngle: 90,
+                },
+                labelLayout(params) {
+                    const isLeft = params.labelRect.x < myChart.getWidth() / 2;
+                    const points = params.labelLinePoints;
+                    points[2][0] = isLeft
+                        ? params.labelRect.x
+                        : params.labelRect.x + params.labelRect.width;
+                    return {
+                        labelLinePoints: points
+                    };
+                },
+                emphasis: {
+                    itemStyle: {
+                        shadowBlur: 10,
+                        shadowOffsetX: 0,
+                        shadowColor: 'rgba(0, 0, 0, 0.5)'
+                    }
+                }
+            }
+        ]
+    })
+
+    function resize() {
+        orderInf.resize()
+        planInfo.resize()
+        planInfo2.resize()
+        modelChart.resize()
+        repertoryChart.resize()
+        rejectRatioChart.resize()
+        pieChart.resize()
+    }
+
+    window.onresize = resize
+    $(() => {
+        resize()
+    })
+</script>
+
+<script type="text/javascript">
+    const myEcharts = (res, ids) => {
+        let charts = echarts.init(ids);
+
+        let option = {
+            tooltip: {
+                trigger: "axis",
+                axisPointer: {
+                    type: "shadow",
+                    textStyle: {
+                        color: "#fff",
+                    },
+                },
+            },
+            grid: {
+                left: "2%",
+                right: "5%",
+                bottom: "3%",
+                containLabel: true,
+            },
+            legend: {
+                icon: "rect",
+                itemWidth: 14,
+                itemHeight: 5,
+                itemGap: 13,
+                data: res.legend,
+                right: "4%",
+                textStyle: {
+                    fontSize: 12,
+                    color: "#F1F1F3",
+                },
+            },
+
+            calculable: true,
+            xAxis: [
+                {
+                    type: "category",
+                    axisLine: {
+                        lineStyle: {
+                            color: "#90979c",
+                        },
+                    },
+                    splitLine: {
+                        show: false,
+                    },
+                    axisLabel: {
+                        show: true,
+                    },
+                    axisTick: {
+                        show: true,
+                    },
+                    data: res.xAxis,
+                },
+            ],
+            yAxis: [
+                {
+                    type: "value",
+                    name: "℃",
+                    nameTextStyle: {
+                        color: 'rgba(219,225,255,1)'
+                    },
+                    axisLabel: {
+                        textStyle: {
+                            color: "rgba(219,225,255,1)",
+                            margin: 15
+                        },
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: "rgba(219,225,255,1)",
+                            width: 1,
+                            type: "solid"
+                        },
+                    },
+                    splitLine: {//分割线配置
+                        show: false,
+                        lineStyle: {
+                            color: "rgba(219,225,255,1)",
+                        }
+                    },
+                    interval: 20,
+                },
+            ],
+            series: res.series,
+        };
+        charts.setOption(option);
+        $(window).resize(charts.resize);
+    }
+</script>
+
 </html>
\ No newline at end of file
