修改界面

ruoyi-admin/src/main/resources/static/css/board/intelligentRefrigeratorInterconnectionFactory.css

@@ -11,29 +11,97 @@ body {
     overflow: hidden;
 }
 
-.btnOne {
+.btnOneLeft {
     background-image: url(../../img/board/intelligentRefrigeratorInterconnectionFactory/btnOneClick.png);
     background-size: 100% 100%;
     position: absolute;
-    width: 7.6%;
-    height: 8.5%;
-    top: 30.1%;
+    height: 10%;
+    aspect-ratio: 236/204;
+    top: 30%;
+    left: 0%;
+}
+.btnOneRight {
+    background-image: url(../../img/board/intelligentRefrigeratorInterconnectionFactory/btnOneClick.png);
+    background-size: 100% 100%;
+    position: absolute;
+    height: 10%;
+    aspect-ratio: 236/204;
+    top: 30%;
     right: 0%;
 }
-.btnTwo {
+.btnTwoLeft {
     background-image: url(../../img/board/intelligentRefrigeratorInterconnectionFactory/btnTwo.png);
     background-size: 100% 100%;
     position: absolute;
-    width: 7.6%;
-    height: 8.5%;
-    top: 45.1%;
+    height: 10%;
+    aspect-ratio: 236/204;
+    top: 43%;
+    left: 0%;
+}
+.btnTwoRight {
+    background-image: url(../../img/board/intelligentRefrigeratorInterconnectionFactory/btnTwo.png);
+    background-size: 100% 100%;
+    position: absolute;
+    height: 10%;
+    aspect-ratio: 236/204;
+    top: 43%;
     right: 0%;
 }
-.arrowsOne{
-    display: block;
-    /*display: none;*/
+.btnThreeLeft {
+    background-image: url(../../img/board/intelligentRefrigeratorInterconnectionFactory/btnThree.png);
+    background-size: 100% 100%;
+    position: absolute;
+    height: 10%;
+    aspect-ratio: 236/204;
+    top: 56%;
+    left: 0%;
 }
-.arrowsTwo{
+.btnThreeRight {
+    background-image: url(../../img/board/intelligentRefrigeratorInterconnectionFactory/btnThree.png);
+    background-size: 100% 100%;
+    position: absolute;
+    height: 10%;
+    aspect-ratio: 236/204;
+    top: 56%;
+    right: 0%;
+}
+.btnFourLeft {
+    background-image: url(../../img/board/intelligentRefrigeratorInterconnectionFactory/btnFour.png);
+    background-size: 100% 100%;
+    position: absolute;
+    height: 10%;
+    aspect-ratio: 236/204;
+    top: 69%;
+    left: 0%;
+}
+.btnFourRight {
+    background-image: url(../../img/board/intelligentRefrigeratorInterconnectionFactory/btnFour.png);
+    background-size: 100% 100%;
+    position: absolute;
+    height: 10%;
+    aspect-ratio: 236/204;
+    top: 69%;
+    right: 0%;
+}
+.btnFiveLeft {
+    background-image: url(../../img/board/intelligentRefrigeratorInterconnectionFactory/btnFive.png);
+    background-size: 100% 100%;
+    position: absolute;
+    height: 10%;
+    aspect-ratio: 236/204;
+    top: 82%;
+    left: 0%;
+}
+.btnFiveRight {
+    background-image: url(../../img/board/intelligentRefrigeratorInterconnectionFactory/btnFive.png);
+    background-size: 100% 100%;
+    position: absolute;
+    height: 10%;
+    aspect-ratio: 236/204;
+    top: 82%;
+    right: 0%;
+}
+.arrowsOne,.arrowsTwo,.deviceNameOne,.deviceNameTwo{
     display: none;
 }
 .layerOne{

ruoyi-admin/src/main/resources/static/js/board/intelligentRefrigeratorInterconnectionFactory.js

@@ -1,62 +1,144 @@
 $(() => {
-    moduleTitle()
-    infoOne()
-    infoTwo()
-    infoThree()
+    deviceNameOne('机器人生产车间', 13, 44)
+    deviceNameOne('门壳成型线', 18, 35)
+    deviceNameOne('26工位门体发泡线', 17, 50)
+    deviceNameOne('门体集存库', 18, 70)
+    deviceNameOne('澳柯玛直播间', 25, 25)
+    deviceNameOne('箱体发泡集存库', 26, 36)
+    deviceNameOne('28工位箱体发泡线', 37, 63)
+    deviceNameOne('箱壳自动成型线', 43, 51)
+    deviceNameOne('成品分垛入库', 37, 18)
+    deviceNameOne('内胆库生产线', 51, 47)
+    deviceNameOne('压合区', 57, 61)
+    deviceNameOne('展厅', 45, 80)
+    deviceNameOne('内胆预装线', 60, 50)
+    deviceNameOne('内胆壁生产线', 58, 84)
+
+    deviceNameTwo('发泡箱体集存库', 13, 72)
+    deviceNameTwo('总装线', 11, 62)
+    deviceNameTwo('抽空线', 11, 30)
+    deviceNameTwo('灌注机', 12, 43)
+    deviceNameTwo('安全检测', 13, 64)
+    deviceNameTwo('成品检漏', 13, 52)
+    deviceNameTwo('测温性能检测', 24, 55)
+    deviceNameTwo('终检', 25, 29)
+    deviceNameTwo('自动装箱', 29, 18)
+    deviceNameTwo('自动打包', 34, 17)
+    deviceNameTwo('成品库', 40, 17)
+    deviceNameTwo('壳箱组装', 37, 35)
+    deviceNameTwo('箱壳集存库', 35, 75)
+    deviceNameTwo('内胆集存库', 45, 60)
+    deviceNameTwo('内胆检漏',  47,  34)
     // 公共请求地址
     let url = '/broad/box'
-
-    const btnOne = $('#btnOne')
-    const btnTwo = $('#btnTwo')
-    const layerOne = $('#layerOne')
-    const layerTwo = $('#layerTwo')
-    const arrowsOne = $('#arrowsOne')
-    const arrowsTwo = $('#arrowsTwo')
     btnOne.click(() => {
+        data.now = 1
+    })
+    btnTwo.click(() => {
+        data.now = 2
+    })
+    btnThree.click(() => {
+        location.href='http://localhost:9090/broad/week'
+    })
+    btnFour.click(() => {
+        data.four = !(data.four)
+    })
+    btnFive.click(() => {
+        data.five = !(data.five)
+    })
+
+})
+
+const btnOne = $('#btnOneLeft')
+btnOne.push($('#btnOneRight')[0])
+const btnTwo = $('#btnTwoLeft')
+btnTwo.push($('#btnTwoRight')[0])
+const btnThree = $('#btnThreeLeft')
+btnThree.push($('#btnThreeRight')[0])
+const btnFour = $('#btnFourLeft')
+btnFour.push($('#btnFourRight')[0])
+const btnFive = $('#btnFiveLeft')
+btnFive.push($('#btnFiveRight')[0])
+const layerOne = $('#layerOne')
+const layerTwo = $('#layerTwo')
+const arrowsOne = $('#arrowsOne')
+const arrowsTwo = $('#arrowsTwo')
+const deviceNameOneDiv = $('#deviceNameOne')
+const deviceNameTwoDiv = $('#deviceNameTwo')
+
+const deviceNameOne = (val = '', top = 0, left = 0) => {
+    const html = `
+    <div style="position: absolute;top:${top}%;left:${left}%;width:6%;aspect-ratio: 300/166;background-image: url('../../img/board/intelligentRefrigeratorInterconnectionFactory/point.png');background-size: 100% 100%;">
+    <span style="position: absolute;top:10%;left:64%;transform: translateX(-50%);font-size: 0.5vw;white-space: nowrap">${val}</span>
+</div>
+    `
+    $('#deviceNameOne').append(html)
+}
+const deviceNameTwo = (val = '', top = 0, left = 0) => {
+    const html = `
+    <div style="position: absolute;top:${top}%;left:${left}%;width:6%;aspect-ratio: 300/166;background-image: url('../../img/board/intelligentRefrigeratorInterconnectionFactory/point.png');background-size: 100% 100%;">
+    <span style="position: absolute;top:10%;left:64%;transform: translateX(-50%);font-size: 0.5vw;white-space: nowrap">${val}</span>
+</div>
+    `
+    $('#deviceNameTwo').append(html)
+}
+
+let dataRaw = {
+    now: 1,
+    four: false,
+    five: false
+}
+let dataProxy={
+    get: function (obj, key) {
+        return obj[key];
+    },
+    set: function (obj, key, value) {
+        obj[key] = value;
+        flash()
+    }
+}
+let data = new Proxy(dataRaw,dataProxy)
+const flash = () => {
+    if (data.now === 1){
         btnOne.css({backgroundImage: 'url(../../img/board/intelligentRefrigeratorInterconnectionFactory/btnOneClick.png)'})
         btnTwo.css({backgroundImage: 'url(../../img/board/intelligentRefrigeratorInterconnectionFactory/btnTwo.png)'})
         layerOne.css({display: 'block'})
         layerTwo.css({display: 'none'})
-        arrowsOne.css({display: 'block'})
-        arrowsTwo.css({display: 'none'})
-    })
-    btnTwo.click(() => {
+    }
+    if (data.now === 2){
         btnOne.css({backgroundImage: 'url(../../img/board/intelligentRefrigeratorInterconnectionFactory/btnOne.png)'})
         btnTwo.css({backgroundImage: 'url(../../img/board/intelligentRefrigeratorInterconnectionFactory/btnTwoClick.png)'})
         layerOne.css({display: 'none'})
         layerTwo.css({display: 'block'})
+    }
+    if (data.four){
+        btnFour.css({backgroundImage: 'url(../../img/board/intelligentRefrigeratorInterconnectionFactory/btnFourClick.png)'})
+        if (data.now === 1){
+            arrowsOne.css({display: 'block'})
+            arrowsTwo.css({display: 'none'})
+        }
+        if (data.now === 2){
+            arrowsOne.css({display: 'none'})
+            arrowsTwo.css({display: 'block'})
+        }
+    }else{
+        btnFour.css({backgroundImage: 'url(../../img/board/intelligentRefrigeratorInterconnectionFactory/btnFour.png)'})
         arrowsOne.css({display: 'none'})
-        arrowsTwo.css({display: 'block'})
-    })
-
-})
-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>
-    `
-    $('body').append(html)
+        arrowsTwo.css({display: 'none'})
+    }
+    if (data.five){
+        btnFive.css({backgroundImage: 'url(../../img/board/intelligentRefrigeratorInterconnectionFactory/btnFiveClick.png)'})
+        if (data.now === 1){
+            deviceNameOneDiv.css({display: 'block'})
+            deviceNameTwoDiv.css({display: 'none'})
+        }
+        if (data.now === 2){
+            deviceNameOneDiv.css({display: 'none'})
+            deviceNameTwoDiv.css({display: 'block'})
+        }
+    }else{
+        btnFive.css({backgroundImage: 'url(../../img/board/intelligentRefrigeratorInterconnectionFactory/btnFive.png)'})
+        deviceNameOneDiv.css({display: 'none'})
+        deviceNameTwoDiv.css({display: 'none'})
+    }
 }
-const infoOne = () => {
-    const html = `
-<span style="position: absolute;top: 10%;left: 6%;width:90%;color: red;font-size: 0.9vw;font-weight: 600">智能制造</span>
-    <span style="line-height: 0.8vw;position: absolute;top: 25%;left: 6%;width:90%;color: rgba(255,255,255,1);font-size: 0.8vw;">8条智能化生产线，36台机器人，配备MES系统，实现8大系列208种产品的柔性化混流生产。 </span>
-    <span style="line-height: 0.8vw;position: absolute;top: 55%;left: 6%;width:90%;color: rgba(255,255,255,1);font-size: 0.8vw;">日产能4200台，单班定员162人，人均效率13台/天，提升2.2倍。</span>
-    <span style="line-height: 0.8vw;position: absolute;top: 75%;left: 6%;width:90%;color: rgba(255,255,255,1);font-size: 0.8vw;">打通O2O销售平台、TMS物流系统，实现用户的个性化定制。</span>
-    `
-    $('#infoOne').append(html)
-}
-const infoTwo = () => {
-    const html = `
-    <span style="transform: translateX(-50%);overflow: hidden;text-overflow: ellipsis;white-space:nowrap;position: absolute;top: 9%;left: 50% ;color: rgba(255,255,255,1);font-size: 1.25vw;">冷柜行业第一个国家级智能制造示范项目</span>
-    `
-    $('#infoTwo').append(html)
-}
-const infoThree = () => {
-    const html = `
-<span style=" overflow: hidden;text-overflow: ellipsis;white-space:nowrap;position: absolute;top: 10%;left: 6%;width:90%;color: red;font-size: 0.9vw;font-weight: 600">世界领先</span>
-    <span style="overflow: hidden;text-overflow: ellipsis;white-space:nowrap;position: absolute;top: 30%;left: 6%;width:90%;color: rgba(255,255,255,1);font-size: 0.9vw;">大规模个性化定制冷柜智能工厂</span>
-    <span style="overflow: hidden;text-overflow: ellipsis;white-space:nowrap;position: absolute;top: 50%;left: 6%;width:90%;color: rgba(255,255,255,1);font-size: 0.9vw;">使用机器人最多的冷柜智能工厂</span>
-    <span style="overflow: hidden;text-overflow: ellipsis;white-space:nowrap;position: absolute;top: 70%;left: 6%;width:90%;color: rgba(255,255,255,1);font-size: 0.9vw;">人均效率最高的冷柜智能化工厂</span>
-    `
-    $('#infoThree').append(html)
-}

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

@@ -27,21 +27,46 @@
 
 </head>
 <style>
-    img
+
 </style>
 <body style="display:flex;">
 
+<span style="position: absolute;top: 0.9%;left: 50%;color: #fff;font-size: 1.3vw;transform: translateX(-50%);letter-spacing: 0.3vw">澳柯玛冷柜智能互联工厂</span>
+
 <!--按钮一-->
-<div class="btnOne" id="btnOne"></div>
+<div class="btnOneLeft" id="btnOneLeft"></div>
+<div class="btnOneRight" id="btnOneRight"></div>
 <!--按钮二-->
-<div class="btnTwo" id="btnTwo"></div>
+<div class="btnTwoLeft" id="btnTwoLeft"></div>
+<div class="btnTwoRight" id="btnTwoRight"></div>
+<!--按钮三-->
+<div class="btnThreeLeft" id="btnThreeLeft"></div>
+<div class="btnThreeRight" id="btnThreeRight"></div>
+<!--按钮四-->
+<div class="btnFourLeft" id="btnFourLeft"></div>
+<div class="btnFourRight" id="btnFourRight"></div>
+<!--按钮五-->
+<div class="btnFiveLeft" id="btnFiveLeft"></div>
+<div class="btnFiveRight" id="btnFiveRight"></div>
 <!--工厂图-->
 <div class="layerOne" id="layerOne"></div>
 <div class="layerTwo" id="layerTwo"></div>
 <!--介绍窗口-->
-<div class='infoOne' id='infoOne'></div>
-<div class='infoTwo' id='infoTwo'></div>
-<div class='infoThree' id='infoThree'></div>
+<div class='infoOne' id='infoOne'>
+    <span style="position: absolute;top: 10%;left: 6%;width:90%;color: red;font-size: 0.9vw;font-weight: 600">智能制造</span>
+    <span style="line-height: 0.8vw;position: absolute;top: 25%;left: 6%;width:90%;color: rgba(255,255,255,1);font-size: 0.8vw;">8条智能化生产线，36台机器人，配备MES系统，实现8大系列208种产品的柔性化混流生产。 </span>
+    <span style="line-height: 0.8vw;position: absolute;top: 55%;left: 6%;width:90%;color: rgba(255,255,255,1);font-size: 0.8vw;">日产能4200台，单班定员162人，人均效率13台/天，提升2.2倍。</span>
+    <span style="line-height: 0.8vw;position: absolute;top: 75%;left: 6%;width:90%;color: rgba(255,255,255,1);font-size: 0.8vw;">打通O2O销售平台、TMS物流系统，实现用户的个性化定制。</span>
+</div>
+<div class='infoTwo' id='infoTwo'>
+    <span style="transform: translateX(-50%);overflow: hidden;text-overflow: ellipsis;white-space:nowrap;position: absolute;top: 9%;left: 50% ;color: rgba(255,255,255,1);font-size: 1.25vw;">冷柜行业第一个国家级智能制造示范项目</span>
+</div>
+<div class='infoThree' id='infoThree'>
+    <span style=" overflow: hidden;text-overflow: ellipsis;white-space:nowrap;position: absolute;top: 10%;left: 6%;width:90%;color: red;font-size: 0.9vw;font-weight: 600">世界领先</span>
+    <span style="overflow: hidden;text-overflow: ellipsis;white-space:nowrap;position: absolute;top: 30%;left: 6%;width:90%;color: rgba(255,255,255,1);font-size: 0.9vw;">大规模个性化定制冷柜智能工厂</span>
+    <span style="overflow: hidden;text-overflow: ellipsis;white-space:nowrap;position: absolute;top: 50%;left: 6%;width:90%;color: rgba(255,255,255,1);font-size: 0.9vw;">使用机器人最多的冷柜智能工厂</span>
+    <span style="overflow: hidden;text-overflow: ellipsis;white-space:nowrap;position: absolute;top: 70%;left: 6%;width:90%;color: rgba(255,255,255,1);font-size: 0.9vw;">人均效率最高的冷柜智能化工厂</span>
+</div>
 
 <!--箭头-->
 <div class="arrowsOne" id="arrowsOne">
@@ -150,6 +175,8 @@
     <img alt="" src="../img/board/intelligentRefrigeratorInterconnectionFactory/arrows.gif"
          style="width: 3vw;height: 1.4vh;position: absolute;top: 42.3%;left: 52.5%;object-fit: contain;transform: rotate(183deg);">
 </div>
+<div class="deviceNameOne" id="deviceNameOne"></div>
+<div class="deviceNameTwo" id="deviceNameTwo"></div>
 </body>
 <script src="../../static/js/board/intelligentRefrigeratorInterconnectionFactory.js"
         th:src="@{/js/board/intelligentRefrigeratorInterconnectionFactory.js}"></script>