添加视频

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

@@ -24,4 +24,22 @@ public class BroadController {
     {
         return prefix + "/board2";
     }
+
+    @GetMapping("/monitoring")
+    public String monitoring()
+    {
+        return prefix + "/monitoring";
+    }
+
+    @GetMapping("/video")
+    public String video()
+    {
+        return prefix + "/video";
+    }
+
+    @GetMapping("/doc")
+    public String doc()
+    {
+        return prefix + "/doc";
+    }
 }

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

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

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

@@ -0,0 +1,142 @@
+body {
+    background-image: url("../../board/img/videoBg.jpg");
+    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: 6%;
+    line-height: 2.5vw;
+    font-size: 1.2vw;
+    text-align: center;
+    color: #aaa;
+}
+
+.topBtnClick {
+    background-image: url("../../board/img/click.png");
+    color: #fff;
+}
+
+.left {
+    position: absolute;
+    top: 18%;
+    left: 4%;
+    width: 15.5%;
+    height: calc(76% - 50px);
+}
+
+.left1 {
+    position: absolute;
+    top: calc(94% - 50px);
+    left: 4%;
+    width: 15.5%;
+    height: 100px;
+    text-align: center;
+}
+
+.right1 {
+    position: absolute;
+    top: calc(20% - 50px);
+    left: 86%;
+    width: 160px;
+    height: 100px;
+    text-align: center;
+}
+
+.right {
+    position: absolute;
+    top: 20%;
+    left: 22%;
+    width: 74%;
+    height: 75%;
+
+}
+.el-tree{
+    background-color: #0000;
+}
+
+[role="treeitem"]>.el-tree-node__content{
+    width: 100%;
+    height: 2.9vw;
+    line-height: 2.9vw;
+    color: #5db4ef;
+    display: inline-block;
+    background-image: url("../../board/img/longClick.png");
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    margin-top: 8px;
+}
+
+[role="treeitem"][class*='is-current']>.el-tree-node__content{
+    width: 100%;
+    height: 2.9vw;
+    line-height: 2.9vw;
+    color: #effafd;
+    display: inline-block;
+    background-image: url("../../board/img/longClick1.png");
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    margin-top: 8px;
+}
+
+[role="group"] .el-tree-node__content{
+    width: calc(100% - 18px);
+    height: 2.9vw;
+    line-height: 2.9vw;
+    margin-left: 18px;
+    color: #5db4ef;
+    display: inline-block;
+    background-image: url("../../board/img/shortClick.png");
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    margin-top: 8px;
+}
+
+[role="group"][class*='is-current'] .el-tree-node__content{
+    width: calc(100% - 18px);
+    height: 2.9vw;
+    line-height: 2.9vw;
+    margin-left: 18px;
+    color: #effafd;
+    display: inline-block;
+    background-image: url("../../board/img/shortClick1.png");
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    margin-top: 8px;
+}
+.el-table, .el-table__expanded-cell {
+    background-color: #fff0 !important;
+}
+.el-table tr {
+    background-color: #fff0;
+}
+.el-table thead {
+    background-color: #0b3194;
+    color:#f2f8fc;
+}
+.el-table th.el-table__cell {
+    background-color: #fff0;
+}
+.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
+     border-bottom: none;
+}
+.el-table--border::after, .el-table--group::after, .el-table::before {
+    content: '';
+    position: absolute;
+    height: 0;
+}
+.el-table{
+    color: #68bef9;
+}
+.el-table th.el-table__cell>.cell {
+    text-align: center;
+}
+.el-table td.el-table__cell div {
+    text-align: center;
+}

haiwei-admin/src/main/resources/static/board/doc.js

@@ -0,0 +1,72 @@
+new Vue({
+  el: '#app',
+  data() {
+    return {
+      treeData: [
+        {
+
+          label: '一级 1',
+          children: [
+            {
+              label: '二级 1-1',
+            }
+          ]
+        },
+        {
+          label: '一级 2',
+          children: [
+            {
+              label: '二级 2-1'
+            }
+          ]
+        },
+        {
+          label: '一级 3',
+          children: [
+            {
+              label: '二级 3-1',
+            }
+          ]
+        }
+      ],
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
+      tableData: [1, 2, 3, 4, 5, 6, 7].map((e, i) => {
+        return {
+          no: i,
+          name: `名称${i}`,
+          date: '' + new Date(1),
+          people: '张三'
+        }
+      })
+    };
+  },
+  methods: {
+    handleNodeClick(data) {
+      console.log(data);
+    },
+    handleEdit(index, row) {
+      console.log(index, row);
+    },
+    handleDelete(index, row) {
+      console.log(index, row);
+    },
+    handleSelectionChange(val) {
+      console.log(val);
+    },
+    addTree(){
+
+    },
+    delTree(){
+
+    },
+    addTable(){
+
+    },
+    delTable(){
+
+    }
+  }
+})

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

@@ -0,0 +1,132 @@
+body {
+    background-image: url("../../board/img/video/bg.jpg");
+    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: 6%;
+    line-height: 2.5vw;
+    font-size: 1.2vw;
+    text-align: center;
+    color: #aaa;
+}
+
+.topBtnClick {
+    background-image: url("../../board/img/click.png");
+    color: #fff;
+}
+
+.left {
+    position: absolute;
+    width: 10.7%;
+    height: 76%;
+    top: 18%;
+    left: 4%;
+}
+
+.left .item {
+    background-image: url("../../board/img/video/click.png");
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    width: 100%;
+    height: 2.6vw;
+    margin-top: 12px;
+    position: relative;
+}
+
+.left .itemClick {
+    background-image: url("../../board/img/video/click2.png");
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    width: 100%;
+    height: 2.6vw;
+    margin-top: 12px;
+    position: relative;
+}
+.left .item .span{
+    position: absolute;
+    width: 80%;
+    height: 100%;
+    left: 15%;
+    color: #5fbcf8;
+    line-height: 2.6vw;
+    font-size: 1vw;
+    letter-spacing: 2px;
+    overflow: hidden;
+}
+.left .itemClick .span{
+    position: absolute;
+    width: 80%;
+    height: 100%;
+    left: 15%;
+    line-height: 2.6vw;
+    color: #d7e2f4;
+    letter-spacing: 2px;
+    font-size: 1vw;
+    overflow: hidden;
+}
+
+.leftVertical {
+    position: absolute;
+    top: 18%;
+    left: 15.5%;
+    width: 3px;
+    height: 76%;
+    background-color: #2b5a96;
+}
+
+.left1 {
+    position: absolute;
+    width: 10%;
+    height: 76%;
+    top: 18%;
+    left: calc(15.5% - 3px);
+}
+
+.left1 .item {
+    background-image: url("../../board/img/video/bgclick.png");
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    width: 100%;
+    height: 7.4vw;
+    margin-top: 12px;
+    position: relative;
+}
+
+.left1 .itemClick {
+    background-image: url("../../board/img/video/bgclick2.png");
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    width: 100%;
+    height: 7.4vw;
+    margin-top: 12px;
+    position: relative;
+}
+.left1 .item .video{
+    position: absolute;
+    width: 73%;
+    height: 82%;
+    top: 8%;
+    left: 25.5%;
+}
+.left1 .itemClick .video{
+    position: absolute;
+    width: 73%;
+    height: 82%;
+    top: 8%;
+    left: 25.5%;
+}
+.rightVideo{
+    position: absolute;
+    left: 29%;
+    top: 19%;
+    width: 67%;
+    height: 75%;
+}

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

@@ -125,8 +125,8 @@
   <div class="topBtn" onclick="routerSkip('board/board2')" style="left: 4vw;">首页</div>
   <div class="topBtn topBtnClick" onclick="routerSkip('board/board1')" style="left: 14.5vw;">60型脱水机</div>
   <div class="topBtn" style="left: 25vw;">60型一体机</div>
-  <div class="topBtn" style="left: 71vw;">视频展示</div>
+  <div class="topBtn" onclick="routerSkip('board/video')" style="left: 71vw;">视频展示</div>
-  <div class="topBtn" style="left: 83vw;">文档归档</div>
+  <div class="topBtn" onclick="routerSkip('board/doc')" style="left: 83vw;">文档归档</div>
   <div class="topBtn" id="toggleInfoBtn" onclick="toggleInfo()" style="left: 83vw;top:13%">设备介绍</div>
 
   <div class="bottomBtn" id="bottomBtn1" onclick="bottomBtnInfo(1,this)" style="left: 22.5vw;">历史趋势</div>

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

@@ -21,8 +21,8 @@
   <div class="topBtn topBtnClick" onclick="routerSkip('board/board2')" style="left: 4vw;">首页</div>
   <div class="topBtn" onclick="routerSkip('board/board1')" style="left: 14.5vw;">60型脱水机</div>
   <div class="topBtn" style="left: 25vw;">60型一体机</div>
-  <div class="topBtn" style="left: 71vw;">视频展示</div>
+  <div class="topBtn"  onclick="routerSkip('board/video')" style="left: 71vw;">视频展示</div>
-  <div class="topBtn" style="left: 83vw;">文档归档</div>
+  <div class="topBtn"  onclick="routerSkip('board/doc')" style="left: 83vw;">文档归档</div>
 
   <div class="title1">公司内容介绍</div>
   <div class="content">

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

@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html lang="zh" xmlns:th="http://www.thymeleaf.org">
+<head>
+  <th:block th:include="include :: header('设备智能驾驶舱')"/>
+</head>
+<body class="white-bg">
+<link href="../../element/element.css" rel="stylesheet">
+<link href="../../board/doc.css" rel="stylesheet">
+<script src="../../element/vue.js"></script>
+<script src="../../element/element.js"></script>
+<script>
+  const routerSkip = (e) => {
+    try {
+      $.modal.openTab('设备智能驾驶舱', ctx + e);
+    } catch (val) {
+      location.href = ctx + e
+    }
+  }
+</script>
+<div>
+  <div class="topBtn" onclick="routerSkip('board/board2')" style="left: 4vw;">首页</div>
+  <div class="topBtn" onclick="routerSkip('board/board1')" style="left: 14.5vw;">60型脱水机</div>
+  <div class="topBtn" style="left: 25vw;">60型一体机</div>
+  <div class="topBtn " onclick="routerSkip('board/video')" style="left: 71vw;">视频展示</div>
+  <div class="topBtn topBtnClick" onclick="routerSkip('board/doc')" style="left: 83vw;">文档归档</div>
+
+  <div class="centerImg" id="app">
+    <div class="left">
+      <el-tree :data="treeData" :highlight-current="true" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
+    </div>
+    <div class="left1">
+      <el-button
+              @click="addTree()"
+      >添加
+      </el-button>
+      <el-button
+              @click="delTree()"
+              type="danger"
+      >删除
+      </el-button>
+    </div>
+    <div class="right1">
+      <el-button
+              @click="addTable()"
+      >添加
+      </el-button>
+      <el-button
+              @click="delTable()"
+              type="danger"
+      >删除
+      </el-button>
+    </div>
+    <div class="right">
+      <el-table
+              :data="tableData"
+              @selection-change="handleSelectionChange"
+              style="width: 100%">
+        <el-table-column
+                fixed="left"
+                width="1">
+        </el-table-column>
+        <el-table-column
+                type="selection"
+                width="50">
+        </el-table-column>
+        <el-table-column
+                label="序号"
+                prop="no"
+                width="50">
+        </el-table-column>
+        <el-table-column
+                label="名称"
+                prop="name"
+                width="200">
+        </el-table-column>
+        <el-table-column
+                label="日期"
+                prop="date"
+        >
+        </el-table-column>
+        <el-table-column
+                label="创建人"
+                prop="people"
+                width="200">
+        </el-table-column>
+        <el-table-column label="操作" width="200">
+          <template slot-scope="scope">
+            <el-button
+                    @click="handleEdit(scope.$index, scope.row)"
+                    size="mini">编辑
+            </el-button>
+            <el-button
+                    @click="handleDelete(scope.$index, scope.row)"
+                    size="mini"
+                    type="danger">删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+
+</div>
+<th:block th:include="include :: footer"/>
+<script src="../../board/doc.js"></script>
+</body>
+</html>

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

@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="zh" xmlns:th="http://www.thymeleaf.org">
+<head>
+  <th:block th:include="include :: header('设备智能驾驶舱')"/>
+</head>
+<body class="white-bg">
+<link href="../../board/video.css" rel="stylesheet">
+<script src="../../js/echarts.js"></script>
+<script src="../../js/scrollTable.js"></script>
+<script src="../../js/tableAnimation.js"></script>
+<script>
+
+  const routerSkip = (e) => {
+    try {
+      $.modal.openTab('设备智能驾驶舱', ctx + e);
+    } catch (val) {
+      location.href = ctx + e
+    }
+  }
+</script>
+<div>
+  <div class="topBtn" onclick="routerSkip('board/board2')" style="left: 4vw;">首页</div>
+  <div class="topBtn " onclick="routerSkip('board/board1')" style="left: 14.5vw;">60型脱水机</div>
+  <div class="topBtn" style="left: 25vw;">60型一体机</div>
+  <div class="topBtn topBtnClick" onclick="routerSkip('board/video')" style="left: 71vw;">视频展示</div>
+  <div class="topBtn" onclick="routerSkip('board/doc')" style="left: 83vw;">文档归档</div>
+
+  <div class="centerImg">
+    <div id="centerInfoDiv">
+      <div class="left" id="left">
+        <div class="item">
+          <div class="span">一体机1</div>
+        </div>
+        <div class="itemClick">
+          <div class="span">一体机1</div>
+        </div>
+        <div class="item">
+          <div class="span">一体机1</div>
+        </div>
+      </div>
+      <div class="leftVertical"></div>
+      <div class="left1" id="left1">
+        <div class="item">
+          <div class="video">
+            <video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
+                   style="width:100%!important; height:100%!important;"></video>
+          </div>
+        </div>
+        <div class="itemClick">
+          <div class="video">
+            <video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
+                   style="width:100%!important; height:100%!important;"></video>
+          </div>
+        </div>
+      </div>
+      <div class="rightVideo">
+        <video controls preload="auto" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
+               style="width:100%!important; height:100%!important;"></video>
+      </div>
+    </div>
+  </div>
+</div>
+<th:block th:include="include :: footer"/>
+<script src="../../board/video.js"></script>
+</body>
+</html>