From 5fe4e659f0f94cca679109d4826e412292c8df4c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=9C=E7=AC=99=E6=AD=8C?= <2277317060@qq.com>
Date: Fri, 15 Jul 2022 16:22:33 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=95=B0=E6=8D=AE=E8=AF=B7?=
 =?UTF-8?q?=E6=B1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...gentRefrigeratorInterconnectionFactory.css |  28 +++-
 ...igentRefrigeratorInterconnectionFactory.js |  25 +++-
 .../main/resources/static/js/echartsCommon.js | 124 +++++++++++-------
 .../main/resources/templates/broad/box.html   |  27 ++--
 .../main/resources/templates/broad/fp.html    |  51 ++++++-
 ...entRefrigeratorInterconnectionFactory.html |   4 +-
 6 files changed, 186 insertions(+), 73 deletions(-)

diff --git a/ruoyi-admin/src/main/resources/static/css/board/intelligentRefrigeratorInterconnectionFactory.css b/ruoyi-admin/src/main/resources/static/css/board/intelligentRefrigeratorInterconnectionFactory.css
index c67e78d..daa9394 100644
--- a/ruoyi-admin/src/main/resources/static/css/board/intelligentRefrigeratorInterconnectionFactory.css
+++ b/ruoyi-admin/src/main/resources/static/css/board/intelligentRefrigeratorInterconnectionFactory.css
@@ -11,7 +11,7 @@ body {
 }
 
 .btnOne {
-    background-image: url(../../img/board/intelligentRefrigeratorInterconnectionFactory/btnOneClick.png);
+    background-image: url(../../img/board/intelligentRefrigeratorInterconnectionFactory/btnOne.png);
     background-size: 100% 100%;
     position: absolute;
     width: 7.6%;
@@ -20,7 +20,7 @@ body {
     left: 36.1%;
 }
 .btnTwo {
-    background-image: url(../../img/board/intelligentRefrigeratorInterconnectionFactory/btnTwo.png);
+    background-image: url(../../img/board/intelligentRefrigeratorInterconnectionFactory/btnTwoClick.png);
     background-size: 100% 100%;
     position: absolute;
     width: 7.6%;
@@ -36,7 +36,7 @@ body {
     height: 65.2%;
     top: 20.1%;
     left: 4.3%;
-    display: block;
+    display: none;
 }
 .layerTwo{
     background-image: url(../../img/board/intelligentRefrigeratorInterconnectionFactory/layerTwo.png);
@@ -46,9 +46,9 @@ body {
     height: 72.6%;
     top: 13%;
     left: 0.7%;
-    display: none;
+    display: block;
 }
-.info{
+.infoOne{
     background-image: url(../../img/board/intelligentRefrigeratorInterconnectionFactory/info.png);
     background-size: 100% 100%;
     position: absolute;
@@ -56,4 +56,22 @@ body {
     height: 15.2%;
     top: 8.6%;
     left: 80.7%;
+}
+.infoTwo{
+    background-image: url(../../img/board/intelligentRefrigeratorInterconnectionFactory/info.png);
+    background-size: 100% 100%;
+    position: absolute;
+    width: 35.6%;
+    height: 6.2%;
+    top: 6.6%;
+    left: 30.7%;
+}
+.infoThree{
+    background-image: url(../../img/board/intelligentRefrigeratorInterconnectionFactory/info.png);
+    background-size: 100% 100%;
+    position: absolute;
+    width: 14.8%;
+    height: 17%;
+    top: 5.2%;
+    left: 0.7%;
 }
\ No newline at end of file
diff --git a/ruoyi-admin/src/main/resources/static/js/board/intelligentRefrigeratorInterconnectionFactory.js b/ruoyi-admin/src/main/resources/static/js/board/intelligentRefrigeratorInterconnectionFactory.js
index 9d26faf..8be726d 100644
--- a/ruoyi-admin/src/main/resources/static/js/board/intelligentRefrigeratorInterconnectionFactory.js
+++ b/ruoyi-admin/src/main/resources/static/js/board/intelligentRefrigeratorInterconnectionFactory.js
@@ -1,6 +1,8 @@
 $(() => {
     moduleTitle()
-    info()
+    infoOne()
+    infoTwo()
+    infoThree()
     // 公共请求地址
     let url = '/broad/box'
 
@@ -28,10 +30,23 @@ const moduleTitle = () => {
     `
     $('body').append(html)
 }
-const info = () => {
+const infoOne = () => {
     const html = `
-    <span style="position: absolute;top: 12%;left: 6%;color: #CFD2D0;font-size: 0.9vw;">xxx名称</span>
-    <span style="display:-webkit-box;overflow: hidden;text-overflow: ellipsis;-webkit-box-orient:vertical;-webkit-line-clamp:5;position: absolute;top: 31%;left: 6%;width:90%;color: rgba(255,255,255,0.6);font-size: 0.5vw;">介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/介绍/</span>
+    <span style="overflow: hidden;text-overflow: ellipsis;white-space:nowrap;position: absolute;top: 21%;left: 6%;width:90%;color: rgba(255,255,255,1);font-size: 0.75vw;">世界领先的个性化大规模定制冷柜智能工厂</span>
+    <span style="overflow: hidden;text-overflow: ellipsis;white-space:nowrap;position: absolute;top: 41%;left: 6%;width:90%;color: rgba(255,255,255,1);font-size: 0.75vw;">世界领先的使用机器人最多的冷柜智能工厂</span>
+    <span style="overflow: hidden;text-overflow: ellipsis;white-space:nowrap;position: absolute;top: 61%;left: 6%;width:90%;color: rgba(255,255,255,1);font-size: 0.75vw;">世界领先的人均效率最高的冷柜智能化工厂</span>
     `
-    $('#info').append(html)
+    $('#infoOne').append(html)
+}
+const infoTwo = () => {
+    const html = `
+    <span style="overflow: hidden;text-overflow: ellipsis;white-space:nowrap;position: absolute;top: calc(50% - 0.5vw);left: calc(50% - 9vw);width:90%;color: rgba(255,255,255,1);font-size: 1vw;">冷柜行业第一个国家级智能制造示范项目</span>
+    `
+    $('#infoTwo').append(html)
+}
+const infoThree = () => {
+    const html = `
+    <span style="position: absolute;top: 10%;left: 6%;width:90%;color: rgba(255,255,255,1);font-size: 0.75vw;">工厂拥有8条智能化生产线、36台机器人，采用MES系统，可同时实现8个系列208种产品的自动混合生产，单班定员162人，日产能4200台，人均每日13台，人均效率是原工厂的2.2倍。通过与O2O销售平台、TMS系统的连接实现用户的个性化定制</span>
+    `
+    $('#infoThree').append(html)
 }
\ No newline at end of file
diff --git a/ruoyi-admin/src/main/resources/static/js/echartsCommon.js b/ruoyi-admin/src/main/resources/static/js/echartsCommon.js
index 941f7ac..b16d586 100644
--- a/ruoyi-admin/src/main/resources/static/js/echartsCommon.js
+++ b/ruoyi-admin/src/main/resources/static/js/echartsCommon.js
@@ -32,9 +32,9 @@ const horizontalRoundedBarChartWithBackground = function (data, id) {
             axisPointer: {
                 type: "none",
             },
-                textStyle:{
-                    fontSize:0.8*vw
-                },
+            textStyle: {
+                fontSize: 0.8 * vw
+            },
             formatter: function (params) {
                 return (
                     params[0].name +
@@ -102,7 +102,7 @@ const horizontalRoundedBarChartWithBackground = function (data, id) {
                         color: "#fff",
                         fontSize: 0.75 * vw
                     },
-                    formatter:'{c}%'
+                    formatter: '{c}%'
                 },
             },
             {
@@ -152,8 +152,8 @@ const barChartAndLineChart = function (data, id) {
     }
     let option = {
         tooltip: {
-            textStyle:{
-                fontSize:0.8*vw
+            textStyle: {
+                fontSize: 0.8 * vw
             }
         },
         grid: {
@@ -368,8 +368,8 @@ const pieChart = function (data, id) {
         tooltip: {
             trigger: "item",
             formatter: "{b} : {c} ({d}%)",
-            textStyle:{
-                fontSize:0.8*vw
+            textStyle: {
+                fontSize: 0.8 * vw
             }
         },
 
@@ -396,14 +396,14 @@ const pieChart = function (data, id) {
                             b: {
                                 color: "rgb(98,137,169)",
                                 fontSize: 0.75 * vw,
-                                height: 1.5*vw,
+                                height: 1.5 * vw,
                             },
                         },
                     },
                 },
-                emphasis:{
-                    label:{
-                        fontSize:0.75 * vw
+                emphasis: {
+                    label: {
+                        fontSize: 0.75 * vw
                     }
                 },
                 labelLine: {
@@ -449,8 +449,8 @@ const verticalBarChart = function (data, id) {
     }
     let option = {
         tooltip: {
-            textStyle:{
-                fontSize:0.8*vw
+            textStyle: {
+                fontSize: 0.8 * vw
             }
         },
         grid: {
@@ -473,14 +473,14 @@ const verticalBarChart = function (data, id) {
             },
             axisLabel: {
                 color: "#fff",
-                fontSize: 0.8* vw,
+                fontSize: 0.8 * vw,
                 interval: 0,
             },
         },
         yAxis: {
             nameTextStyle: {
                 color: "#fff",
-                fontSize: 0.8*vw,
+                fontSize: 0.8 * vw,
             },
             axisLine: {
                 lineStyle: {
@@ -489,7 +489,7 @@ const verticalBarChart = function (data, id) {
             },
             axisLabel: {
                 color: "#fff",
-                fontSize: 0.8*vw,
+                fontSize: 0.8 * vw,
             },
             splitLine: {
                 show: false,
@@ -1851,31 +1851,29 @@ const multipleVerticalBarChart = function (data, id) {
                 },
             },
         ],
-        yAxis: [
-            {
-                type: "value",
-                splitNumber: 5,
-                max:50,
-                axisLabel: {
-                    show: true,
-                    color: '#fff'
-                },
-                axisLine: {
-                    show: false,
-                },
-                axisTick: {
-                    show: false,
-                },
-                splitLine: {
-                    show: true,
-                    lineStyle: {
-                        type: 'dashed',
-                        color: '#777777',
-                        opacity: 0.3,
-                    },
+        yAxis: {
+            type: "value",
+            splitNumber: 5,
+            max: 15,
+            axisLabel: {
+                show: true,
+                color: '#fff'
+            },
+            axisLine: {
+                show: false,
+            },
+            axisTick: {
+                show: false,
+            },
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    type: 'dashed',
+                    color: '#777777',
+                    opacity: 0.3,
                 },
             },
-        ],
+        },
         series: [
             {
                 name: data.yDataOneName,
@@ -1889,7 +1887,24 @@ const multipleVerticalBarChart = function (data, id) {
                         show: true,
                         position: "top",
                         textStyle: {
-                            color: "#a8aab0",
+                            color: {
+                                x: 0,
+                                y: 0,
+                                x2: 0,
+                                y2: 1,
+                                type: 'linear',
+                                global: false,
+                                colorStops: [
+                                    {
+                                        offset: 0,
+                                        color: 'rgb(21, 148, 244)',
+                                    },
+                                    {
+                                        offset: 1,
+                                        color: 'rgb(13, 48, 243)',
+                                    },
+                                ],
+                            },
                             fontStyle: "normal",
                             fontFamily: "微软雅黑",
                             fontSize: 0.75 * vw,
@@ -1916,7 +1931,24 @@ const multipleVerticalBarChart = function (data, id) {
                         show: true,
                         position: "top",
                         textStyle: {
-                            color: "#a8aab0",
+                            color: {
+                                x: 0,
+                                y: 0,
+                                x2: 0,
+                                y2: 1,
+                                type: 'linear',
+                                global: false,
+                                colorStops: [
+                                    {
+                                        offset: 0,
+                                        color: '#0DCEB1',
+                                    },
+                                    {
+                                        offset: 1,
+                                        color: '#14A15A',
+                                    },
+                                ],
+                            },
                             fontStyle: "normal",
                             fontFamily: "微软雅黑",
                             fontSize: 0.75 * vw,
@@ -1961,18 +1993,18 @@ const multipleVerticalBarChart = function (data, id) {
         ],
     };
 
-    if (data?.xName?.length >= 6) {
+    if (data?.xName?.length >= 4) {
         option.dataZoom.push({
             show: true,
             type: 'slider',
-            bottom : '0%',
+            bottom: '0%',
             xAxisIndex: 0,
             height: 12,
             start: 0,
-            end: 1 / (data.xName.length / 6) * 100,
+            end: 1 / (data.xName.length / 4) * 100,
             textStyle: {
                 fontSize: 0,
-                color:'rgba(0,0,0,0)'
+                color: 'rgba(0,0,0,0)'
             }
         })
         option.grid.bottom = '7%'
diff --git a/ruoyi-admin/src/main/resources/templates/broad/box.html b/ruoyi-admin/src/main/resources/templates/broad/box.html
index 28e707c..9e50764 100644
--- a/ruoyi-admin/src/main/resources/templates/broad/box.html
+++ b/ruoyi-admin/src/main/resources/templates/broad/box.html
@@ -164,11 +164,18 @@
         }
 
         #info-2 {
-            width: 13%;
+            /*width: 13%;*/
+            /*height: 5.6%;*/
+            /*position: absolute;*/
+            /*top: 10.5%;*/
+            /*left: 10%;*/
+            /*letter-spacing: 1px;*/
+            /*font-size: 12%;*/
+            width: 15%;
             height: 5.6%;
             position: absolute;
             top: 10.5%;
-            left: 10%;
+            left: 9.6%;
             letter-spacing: 1px;
             font-size: 12%;
         }
@@ -308,10 +315,10 @@
 
 <!--<div id="info-1">朱峰</div>-->
 <div class="display-blocks" id="info-2">
-    <span>-</span>
-    <span>-</span>
-    <span>-</span>
-    <span>-</span>
+    <span style="margin-right: 9%;">箱</span>
+    <span style="margin-right: 9%;">壳</span>
+    <span style="margin-right: 9%;">成</span>
+    <span style="margin-right: 9%;">型</span>
 </div>
 <!--<div id="info-3"></div>-->
 <div class="display-blocks" id="info-4">
@@ -346,9 +353,9 @@
 <script src="../../static/js/data-merger.js" th:src="@{/js/data-merger.js}"></script>
 <script>
     const planWorkOrderColumns = [
-        "编号", "计划数量", "完成数量", "差异值", "时间",
+        "序号", "型号","计划数量", "完成数量", "完成率", "时间",
     ]
-    const planWorkOrderTable = new AutoScrollTable(document.getElementById("plan-work-order"), planWorkOrderColumns, {width: ['30%', null, null, null, '17%']})
+    const planWorkOrderTable = new AutoScrollTable(document.getElementById("plan-work-order"), planWorkOrderColumns, {width: ['10%','30%', null, null, null, '17%']})
     // const planTable = new AutoScrollTable(document.getElementById("plan-table"), [], {
     //     width: ['15%', '5%', null, null, null, null, null, null, null, null, null, null, null, null, null, null, "5%", "5%", "5%"],
     //     caption: "生产计划统计",
@@ -383,7 +390,7 @@
         let url = '/broad/box'
         //生产计划工单
         autoUpdate(url+"/getProductPlanInfo ", INTERVAL, data => {
-              planWorkOrderTable.loadData(data.map(value => [value.plan_code, value.plan_number, value.actual_number, value.plan_number-value.actual_number, value.day]), Object.keys(planWorkOrderColumns))
+              planWorkOrderTable.loadData(data.map((value,index) => [index,value.plan_code, value.plan_number, value.actual_number, value.rate, value.day]), Object.keys(planWorkOrderColumns))
           })
 
         autoUpdate(url + '/selectStock/S001', INTERVAL, data => {
@@ -459,7 +466,7 @@
     const deltaBlocks = []
 
     for (let i = 1; i <= 4; i++) {
-        shiftBlocks.push(`#info-2 :nth-child(${i})`)
+        // shiftBlocks.push(`#info-2 :nth-child(${i})`)
         planBlocks.push(`#info-4 :nth-child(${i})`)
         actualBlocks.push(`#info-5 :nth-child(${i})`)
         deltaBlocks.push(`#info-6 :nth-child(${i})`)
diff --git a/ruoyi-admin/src/main/resources/templates/broad/fp.html b/ruoyi-admin/src/main/resources/templates/broad/fp.html
index fb8b6b1..8ecd65b 100644
--- a/ruoyi-admin/src/main/resources/templates/broad/fp.html
+++ b/ruoyi-admin/src/main/resources/templates/broad/fp.html
@@ -42,11 +42,23 @@
         position: absolute;
         border: 0px solid red;
         width: 68%;
-        height: 29.6%;
+        height: 25%;
         top: 66.4%;
         left: 3.5%;
         font-size: 1vw;
     }
+    .total{
+        flex-wrap: nowrap;
+        justify-content: space-around;
+        display: flex;
+        position: absolute;
+        border: 1px solid red;
+        width: 68%;
+        height: 3.9%;
+        top: 91.4%;
+        left: 3.5%;
+        font-size: 1vw;
+    }
 
     #top-mid {
         position: absolute;
@@ -232,6 +244,7 @@
 
 <div class="my-transition">
     <div id="bottom-left"></div>
+    <div class="total" id="total"></div>
 </div>
 
 <!--<div class="my-transition2">-->
@@ -409,6 +422,7 @@
 
     $(() => {
         area()
+        total()
         // 订单执行 + 生产统计
         autoUpdate('/broad/fp/selectOrderExecution', INTERVAL, data => {
             orderInf.loadData(data.map(value => [value.name, value.plan_number, value.actual_number, value.plan_number - value.actual_number, value.rate]), Object.keys(orderInfColumns))
@@ -455,7 +469,7 @@
                 el: '#bottom-left',
                 rowNum: 5,
                 timeout: 0,
-                header: ['工位', '型号', '状态', '目标', '计划','累计','达成率','8:00','9:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00'],
+                header: ['工位', '型号', '状态', '目标', '计划','累计','达成率','8:30','9:30','10:30','11:30','12:30','13:30','14:30','15:30','16:30','17:30','18:30','19:00'],
                 data: data.map(value => [value.station_no, value.name, '正常', '0', 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]),
                 index: false,
                 fontColor: '#B4B7BF ',
@@ -887,18 +901,43 @@
         <span style="position: absolute;top:30%;left:31%;font-size: 1vw;"> A1</span>
         <span style="position: absolute;top:30%;left:37%;font-size: 1vw;"> A2</span>
         <span style="position: absolute;top:30%;left:43%;font-size: 1vw;"> B1</span>
-        <span style="position: absolute;top:30%;left:50%;font-size: 1vw;"> B1</span>
+        <span style="position: absolute;top:30%;left:50%;font-size: 1vw;"> B2</span>
         <span style="position: absolute;top:30%;left:56%;font-size: 1vw;"> 发泡机1</span>
         <span style="position: absolute;top:30%;left:63%;font-size: 1vw;"> 发泡机2</span>
         <span style="position: absolute;top:38.6%;left:33.2%;font-size: 1vw;"> A1</span>
-        <span style="position: absolute;top:37.6%;left:56%;font-size: 1vw;"> A2</span>
-        <span style="position: absolute;top:46%;left:51%;font-size: 1vw;"> A3</span>
-        <span style="position: absolute;top:40.7%;left:65%;font-size: 1vw;"> A4</span>
+        <span style="position: absolute;top:37.6%;left:56%;font-size: 1vw;"> B1</span>
+        <span style="position: absolute;top:46%;left:51%;font-size: 1vw;"> A2</span>
+        <span style="position: absolute;top:40.7%;left:65%;font-size: 1vw;"> B2</span>
     <span style="position: absolute;top: 10.3%;left: 75%;color: #CFD2D0;font-size: 1.0vw">压力统计</span>
     <span style="position: absolute;top: 38.3%;left: 75%;color: #CFD2D0;font-size: 1.0vw">温度统计</span>
         `
         $("body").append(html)
     }
+    const total = () => {
+        const html = `
+<!--        ["5%", '10%', "7%", "5%", "5%", "5%", "8%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%", "4%"]-->
+        <span style="margin: auto 0px;text-align:center;width:5%;font-size: 1vw;">-</span>
+        <span style="margin: auto 0px;text-align:center;width:10%;font-size: 1vw;">-</span>
+        <span style="margin: auto 0px;text-align:center;width:7%;font-size: 1vw;">-</span>
+        <span style="margin: auto 0px;text-align:center;width:5%;font-size: 1vw;">-</span>
+        <span style="margin: auto 0px;text-align:center;width:5%;font-size: 1vw;">-</span>
+        <span style="margin: auto 0px;text-align:center;width:5%;font-size: 1vw;">-</span>
+        <span style="margin: auto 0px;text-align:center;width:8%;font-size: 1vw;">-</span>
+        <span style="margin: auto 0px;text-align:center;width:4%;font-size: 1vw;">-</span>
+        <span style="margin: auto 0px;text-align:center;width:4%;font-size: 1vw;">-</span>
+        <span style="margin: auto 0px;text-align:center;width:4%;font-size: 1vw;">-</span>
+        <span style="margin: auto 0px;text-align:center;width:4%;font-size: 1vw;">-</span>
+        <span style="margin: auto 0px;text-align:center;width:4%;font-size: 1vw;">-</span>
+        <span style="margin: auto 0px;text-align:center;width:4%;font-size: 1vw;">-</span>
+        <span style="margin: auto 0px;text-align:center;width:4%;font-size: 1vw;">-</span>
+        <span style="margin: auto 0px;text-align:center;width:4%;font-size: 1vw;">-</span>
+        <span style="margin: auto 0px;text-align:center;width:4%;font-size: 1vw;">-</span>
+        <span style="margin: auto 0px;text-align:center;width:4%;font-size: 1vw;">-</span>
+        <span style="margin: auto 0px;text-align:center;width:4%;font-size: 1vw;">-</span>
+        <span style="margin: auto 0px;text-align:center;width:4%;font-size: 1vw;">-</span>
+        `
+        $("#total").append(html)
+    }
 </script>
 
 </html>
\ No newline at end of file
diff --git a/ruoyi-admin/src/main/resources/templates/broad/intelligentRefrigeratorInterconnectionFactory.html b/ruoyi-admin/src/main/resources/templates/broad/intelligentRefrigeratorInterconnectionFactory.html
index 8d52f52..f0a505e 100644
--- a/ruoyi-admin/src/main/resources/templates/broad/intelligentRefrigeratorInterconnectionFactory.html
+++ b/ruoyi-admin/src/main/resources/templates/broad/intelligentRefrigeratorInterconnectionFactory.html
@@ -35,7 +35,9 @@
 <div class="layerOne" id="layerOne"></div>
 <div class="layerTwo" id="layerTwo"></div>
 <!--介绍窗口-->
-<div class=info id=info></div>
+<div class='infoOne' id='infoOne'></div>
+<div class='infoTwo' id='infoTwo'></div>
+<div class='infoThree' id='infoThree'></div>
 </body>
 <script src="../../static/js/board/intelligentRefrigeratorInterconnectionFactory.jsx" th:src="@{/js/board/intelligentRefrigeratorInterconnectionFactory.js}"></script>
 <script>