添加看板

haiwei-admin/src/main/java/com/haiwei/web/controller/broad/BroadController.java

@@ -1,6 +1,7 @@
 package com.haiwei.web.controller.broad;
 
 import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.RequestMapping;
 
 /**
@@ -8,7 +9,13 @@ import org.springframework.web.bind.annotation.RequestMapping;
  * @date 2023/8/14  10:18
  */
 @Controller
-@RequestMapping("/broad")
+@RequestMapping("/board/board1")
 public class BroadController {
 
+    private String prefix = "board";
+    @GetMapping()
+    public String board1()
+    {
+        return prefix + "/board1";
+    }
 }

haiwei-admin/src/main/java/com/haiwei/web/controller/broad/BroadController2.java

@@ -0,0 +1,21 @@
+package com.haiwei.web.controller.broad;
+
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+
+/**
+ * @author wanghao
+ * @date 2023/8/14  10:18
+ */
+@Controller
+@RequestMapping("/board/board2")
+public class BroadController2 {
+
+    private String prefix = "board";
+    @GetMapping()
+    public String board1()
+    {
+        return prefix + "/board2";
+    }
+}

haiwei-admin/src/main/resources/static/board/board.css

@@ -0,0 +1,209 @@
+body {
+    background-image: url("../../board/img/bg1.png");
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+}
+
+.topBtn {
+    background-image: url("../../board/img/click1.png");
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    width: 7.5vw;
+    height: 2.5vw;
+    position: absolute;
+    top: 2.8vw;
+    line-height: 2.5vw;
+    font-size: 1.2vw;
+    text-align: center;
+    color: #aaa;
+}
+
+.topBtnClick {
+    background-image: url("../../board/img/click.png");
+    color: #fff;
+}
+
+.bottomBtn {
+    background-image: url("../../board/img/btnbg.png");
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    width: 15vw;
+    height: 3vw;
+    position: absolute;
+    bottom: 2.8vw;
+    line-height: 3vw;
+    font-size: 1.2vw;
+    text-align: center;
+    color: #aaa;
+}
+
+.bottomBtnClick {
+    background-image: url("../../board/img/btn1bg.png");
+    color: #fff;
+}
+
+.centerImg {
+    background-image: url("../../board/img/equipment.png");
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    position: absolute;
+    top: 53%;
+    left: 49%;
+    width: 57vw;
+    height: 19vw;
+    transform: translate(-50%, -50%);
+}
+
+.winDiv {
+    background-image: url("../../board/img/winBG.png");
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    position: absolute;
+    right: 9vw;
+    top: 13vh;
+    width: 16vw;
+    height: 22.9vw;
+}
+
+.winDiv p {
+    margin: 0;
+}
+
+.winDiv .title {
+    position: absolute;
+    font-size: 1vw;
+    left: 20%;
+    top: 4%;
+    color: #ddd;
+}
+
+.winDiv .title1 {
+    position: absolute;
+    font-size: 1vw;
+    left: 10%;
+    top: 15%;
+    color: #fff;
+}
+
+.winDiv .bg1 {
+    position: absolute;
+    font-size: 0.8vw;
+    left: 10%;
+    top: calc(15% + 1.5vw);
+    color: #4888bf;
+    width: 80%;
+    height: 40%;
+    border-radius: 3px;
+    border: 2px solid #3f65a1;
+    padding: 5%;
+}
+
+.winDiv .title2 {
+    position: absolute;
+    font-size: 1vw;
+    left: 10%;
+    top: 62%;
+    color: #fff;
+}
+
+.winDiv .bg2 {
+    position: absolute;
+    font-size: 0.8vw;
+    left: 10%;
+    top: calc(62% + 1.5vw);
+    color: #4888bf;
+    width: 80%;
+    height: 28%;
+    border-radius: 3px;
+    border: 2px solid #3f65a1;
+    padding: 5%;
+}
+
+.status {
+    background-image: url("../../board/img/warnBg.png");
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    position: absolute;
+    top: 63%;
+    right: 12%;
+    width: 10vw;
+    height: 4vw;
+}
+
+.status .icon {
+    background-image: url("../../board/img/green.png");
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    position: absolute;
+    transform: translate(-50%, -50%);
+    top: 50%;
+    left: 20%;
+    width: 30px;
+    height: 30px;
+}
+
+.status span {
+    width: 20vw;
+    font-size: 1vw;
+    color: #fff;
+    position: absolute;
+    transform: translateY(-50%);
+    top: 50%;
+    left: calc(20% + 35px);
+}
+
+.centerInfo {
+    position: absolute;
+    transform: translate(-10px, calc(-100% + 10px));
+    width: 10vw;
+    height: 10vw;
+}
+
+.centerInfo .win {
+    background-image: url("../../board/img/equipmentBg.png");
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    position: absolute;
+    top: 10%;
+    left: 10%;
+    width: 9vw;
+    height: 5.35vw;
+}
+
+.centerInfo .win .title {
+    position: absolute;
+    transform: translateY(-50%);
+    top: 16%;
+    left: 10%;
+    color: #fff;
+    font-size: 0.8vw;
+}
+
+.centerInfo .win .span1 {
+    position: absolute;
+    transform: translateY(-50%);
+    top: 50%;
+    left: 10%;
+    color: #fff;
+    font-size: 0.8vw;
+}
+
+.centerInfo .win .span2 {
+    position: absolute;
+    transform: translateY(-50%);
+    top: 80%;
+    left: 10%;
+    color: #fff;
+    font-size: 0.8vw;
+}
+
+.centerInfo .icon {
+    background-image: url("../../board/img/circle.png");
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    position: absolute;
+    bottom: 0%;
+    left: 0%;
+    width: 20px;
+    height: 20px;
+}

haiwei-admin/src/main/resources/templates/board/board1.html

@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="zh" xmlns:th="http://www.thymeleaf.org">
+<head>
+  <th:block th:include="include :: header('看板1')"/>
+</head>
+<body class="white-bg">
+<link href="../../board/board.css" rel="stylesheet">
+<div>
+  <div class="topBtn" style="left: 4vw;">首页</div>
+  <div class="topBtn topBtnClick" style="left: 14.5vw;">60型脱水量</div>
+  <div class="topBtn" style="left: 25vw;">60型一体机</div>
+  <div class="topBtn" style="left: 71vw;">视频展示</div>
+  <div class="topBtn" style="left: 83vw;">文档归档</div>
+
+  <div class="bottomBtn bottomBtnClick" style="left: 22.5vw;">历史趋势</div>
+  <div class="bottomBtn" style="left: 42.5vw;">数据记录</div>
+  <div class="bottomBtn" style="left: 62.5vw;">实时监控</div>
+
+  <div class="centerImg">
+    <div>
+      <div class="centerInfo" style="top: 1%;left:15%">
+        <div class="win">
+          <div class="title">位置1</div>
+          <div class="span1">转速: 50n/s</div>
+          <div class="span2">电流: 45A</div>
+        </div>
+        <div class="icon"></div>
+      </div>
+
+      <div class="centerInfo" style="top: 35%;left:40%">
+        <div class="win">
+          <div class="title">位置1</div>
+          <div class="span1">转速: 50n/s</div>
+          <div class="span2">电流: 45A</div>
+        </div>
+        <div class="icon"></div>
+      </div>
+
+      <div class="centerInfo" style="top: 45%;left:71%">
+        <div class="win">
+          <div class="title">位置1</div>
+          <div class="span1">转速: 50n/s</div>
+          <div class="span2">电流: 45A</div>
+        </div>
+        <div class="icon"></div>
+      </div>
+    </div></div>
+
+  <div class="winDiv">
+    <div class="title">基本信息</div>
+    <div class="title1">设备描述:</div>
+    <div class="bg1">
+      <p>规格型号: PG -300</p>
+      <p>功能描述:利用膨化闪蒸原理，使胶料通过单螺杆的挤压输由高温高压到常温常压状态，利用胶料膨化闪蒸去除胶料内部的水分。</p>
+    </div>
+    <div class="title2">技术参数:</div>
+    <div class="bg2">
+      <p>功率:800kw</p>
+      <p>电压:10000V</p>
+      <p>转速: 1480rpm</p>
+      <p>转速: 0~276rpr</p>
+    </div>
+  </div>
+
+  <div class="status">
+    <div class="icon"></div>
+    <span>运行正常</span>
+  </div>
+</div>
+<th:block th:include="include :: footer"/>
+<script src="../../board/board.js"></script>
+</body>
+</html>

haiwei-admin/src/main/resources/templates/board/board2.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
+<head>
+  <th:block th:include="include :: header('新增参数')" />
+</head>
+<body class="white-bg">
+<div class="wrapper wrapper-content animated fadeInRight ibox-content">
+  123
+</div>
+<th:block th:include="include :: footer" />
+<script type="text/javascript">
+</script>
+</body>
+</html>