Skip to content

3
3DWeb
Commit 04bf9251 authored by lixiaoyi's avatar lixiaoyi
Browse files
Options

add隐藏看板

parent 231752e3
Hide whitespace changes
Inline Side-by-side
Showing with 173 additions and 128 deletions
css/index.css
View file @ 04bf9251
...@@ -55,6 +55,34 @@ body { ...@@ -55,6 +55,34 @@ body {
box-sizing: border-box; box-sizing: border-box;
} }
.view-btn {
position: absolute;
top: 80px;
background-color: #283963;
width: 30px;
height: 30px;
border: 2px solid #4270e4;
cursor: pointer;
border-radius: 4px;
}
.view-btn>.icon{
width: 20px;
height: 20px;
margin: 5px;
background: url(../imgs/hide.png) no-repeat;
background-size: 100%;
}
.view-btn.btn-active>.icon{
background: url(../imgs/show.png) no-repeat;
background-size: 100%;
}
.view-btn.view-btn_left{
left: 5px;
}
.view-btn.view-btn_right{
right: 5px;
}
.view { .view {
width: 320px; width: 320px;
height: 85%; height: 85%;
......
index.html
View file @ 04bf9251
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> <title>Document</title>
<link rel="stylesheet" href="./css/index.css"> <link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./layui-v2.6.8/layui/css/layui.css"> <link rel="stylesheet" href="./layui-v2.6.8/layui/css/layui.css">
</head> </head>
<style> <style>
#webgl-output{ #webgl-output{
position: absolute; position: absolute;
top: 0px; top: 0px;
height: 100%; height: 100%;
left: 0px; left: 0px;
/* width: 1100px; */ /* width: 1100px; */
} }
.dg{ .dg{
display: none; display: none;
} }
body{ body{
position: relative; position: relative;
...@@ -240,15 +240,15 @@ ...@@ -240,15 +240,15 @@
display: none; display: none;
} }
dd:hover{ dd:hover{
background:rgb(183, 157, 113) !important; background:rgb(183, 157, 113) !important;
} }
.layui-this{ .layui-this{
background:rgb(183, 157, 113) !important; background:rgb(183, 157, 113) !important;
} }
#i1{ #i1{
} }
</style> </style>
<body> <body>
<!-- <input type="" name="" id="i1" value="123213213" /> <!-- <input type="" name="" id="i1" value="123213213" />
<input type="" name="" id="i2" value="123213213" /> --> <input type="" name="" id="i2" value="123213213" /> -->
...@@ -282,7 +282,7 @@ ...@@ -282,7 +282,7 @@
</thead> </thead>
</table> </table>
<div style="height: 270px;overflow: auto;"> <div style="height: 270px;overflow: auto;">
<table style=""> <table>
<colgroup> <colgroup>
<col style="width: 110px;"> <col style="width: 110px;">
<col style="width: 150px;"> <col style="width: 150px;">
...@@ -362,103 +362,109 @@ ...@@ -362,103 +362,109 @@
<div id="fileDragArea" class="fileDragArea1" style="position: absolute;z-index: 1000;" class="upload-default">拖拽文件夹导入模型</div> <div id="fileDragArea" class="fileDragArea1" style="position: absolute;z-index: 1000;" class="upload-default">拖拽文件夹导入模型</div>
<div class="container"> <div class="container">
<!-- <div class="header" > <!-- <div class="header" >
<div>header 部分</div> <div>header 部分</div>
</div> --> </div> -->
<div class="main" > <div class="main" >
<div class="main_header" >实时生产预警和安全预警</div> <div class="main_header" >实时生产预警和安全预警</div>
<div id="webgl-output"></div> <div id="webgl-output"></div>
<!-- 左右两侧内容 --> <!-- 左右两侧内容 -->
<div class="view view_left"> <div class="view-btn view-btn_left btn-active">
<div class="item"> <div class="icon"></div>
<div class="item_header" > </div>
<img class="item_img" src="./imgs/title@2x.png" alt=""> <div class="view view_left">
<span class="item_title" >数值显示</span> <div class="item">
</div> <div class="item_header" >
<div class="item_wrap item_val_wrap"> <img class="item_img" src="./imgs/title@2x.png" alt="">
<div class="item_wrap_content"> <span class="item_title" >数值显示</span>
<div> </div>
<div class="val" id="pro_eff">0</div> <div class="item_wrap item_val_wrap">
<div class="name">生产效率</div> <div class="item_wrap_content">
</div> <div>
</div> <div class="val" id="pro_eff">0</div>
<div class="item_wrap_content"> <div class="name">生产效率</div>
<div> </div>
<div class="val" id="per_eff">0</div> </div>
<div class="name">合格率</div> <div class="item_wrap_content">
</div> <div>
</div> <div class="val" id="per_eff">0</div>
<div class="item_wrap_content"> <div class="name">合格率</div>
<div> </div>
<div class="val" id="act_eff">0</div> </div>
<div class="name">移动率</div> <div class="item_wrap_content">
</div> <div>
</div> <div class="val" id="act_eff">0</div>
</div> <div class="name">移动率</div>
</div> </div>
<div class="item"> </div>
<div class="item_header" > </div>
<img class="item_img" src="./imgs/title@2x.png" alt=""> </div>
<span class="item_title" >电机功率值</span> <div class="item">
</div> <div class="item_header" >
<div class="item_wrap" id="act_torque"></div> <img class="item_img" src="./imgs/title@2x.png" alt="">
</div> <span class="item_title" >电机功率值</span>
</div>
<div class="item"> <div class="item_wrap" id="act_torque"></div>
<div class="item_header" > </div>
<img class="item_img" src="./imgs/title@2x.png" alt="">
<span class="item_title" >功率趋势</span> <div class="item">
</div> <div class="item_header" >
<div class="item_wrap" id="torque"></div> <img class="item_img" src="./imgs/title@2x.png" alt="">
</div> <span class="item_title" >功率趋势</span>
</div> </div>
<div class="view view_right"> <div class="item_wrap" id="torque"></div>
<div class="item"> </div>
<div class="item_header" > </div>
<img class="item_img" src="./imgs/title@2x.png" alt=""> <div class="view-btn view-btn_right btn-active">
<span class="item_title" >转矩趋势</span> <div class="icon"></div>
</div> </div>
<div class="item_wrap" id="right1"></div> <div class="view view_right">
</div> <div class="item">
<div class="item_header" >
<div class="item"> <img class="item_img" src="./imgs/title@2x.png" alt="">
<div class="item_header" > <span class="item_title" >转矩趋势</span>
<img class="item_img" src="./imgs/title@2x.png" alt=""> </div>
<span class="item_title" >电机转矩值</span> <div class="item_wrap" id="right1"></div>
</div> </div>
<div class="item_wrap" id="right2"></div>
</div> <div class="item">
<div class="item_header" >
<div class="item"> <img class="item_img" src="./imgs/title@2x.png" alt="">
<div class="item_header item_alarm" > <span class="item_title" >电机转矩值</span>
<div class="item_title_alarm" >报警信息</div> </div>
<div class="item_subTitle" >当前报警数：<span class="red" id="alarmData" ></span></div> <div class="item_wrap" id="right2"></div>
</div> </div>
<div class="item_wrap item_alarm_wrap" id="alarm" >
<!-- 渲染报警信息 --> <div class="item">
<!-- <div class="list"> <div class="item_header item_alarm" >
<span>2021-11-11 12:36:30 越限报警越限报警...</span> <div class="item_title_alarm" >报警信息</div>
</div> <div class="item_subTitle" >当前报警数：<span class="red" id="alarmData" ></span></div>
<div class="list list_blue"> </div>
<span>2021-11-11 12:36:30 越限报警越限报警...</span> <div class="item_wrap item_alarm_wrap" id="alarm" >
</div> <!-- 渲染报警信息 -->
<!-- <div class="list">
<div class="list list_red"> <span>2021-11-11 12:36:30 越限报警越限报警...</span>
<span>2021-11-11 12:36:30 越限报警越限报警...</span> </div>
</div> --> <div class="list list_blue">
<span>2021-11-11 12:36:30 越限报警越限报警...</span>
</div> </div>
</div>
</div> <div class="list list_red">
</div> <span>2021-11-11 12:36:30 越限报警越限报警...</span>
</div> </div> -->
</body>
<script src="./js/jquery.min.js"></script> </div>
<script src="./js/echarts.js"></script> </div>
<script src="./js/day.js"></script> </div>
</div>
</div>
</body>
<script src="./js/jquery.min.js"></script>
<script src="./js/echarts.js"></script>
<script src="./js/day.js"></script>
<script src="./js/layerjs/layer.js"></script> <script src="./js/layerjs/layer.js"></script>
<script src="./layui-v2.6.8/layui/layui.js"></script> <script src="./layui-v2.6.8/layui/layui.js"></script>
<script src="./ripple.js"></script> <script src="./ripple.js"></script>
...@@ -481,17 +487,27 @@ ...@@ -481,17 +487,27 @@
}] }]
var twotable = [] var twotable = []
var oldvararr = [] var oldvararr = []
$(".view-btn_left").click(function(){
let viewDis = $(".view_left").css('display')
$(".view_left").css('display', viewDis === 'none' ? 'flex' : 'none')
$(".view-btn_left").toggleClass('btn-active')
})
$(".view-btn_right").click(function(){
let viewDis = $(".view_right").css('display')
$(".view_right").css('display', viewDis === 'none' ? 'flex' : 'none')
$(".view-btn_right").toggleClass('btn-active')
})
</script> </script>
<script src="./new_file.js"></script> <script src="./new_file.js"></script>
<script> new Ripple({ <script> new Ripple({
opacity : 0.6, //水波纹透明度 opacity : 0.6, //水波纹透明度
speed : 1, //水波纹扩散速度 speed : 1, //水波纹扩散速度
bgColor : "#fff", //水波纹颜色 bgColor : "#fff", //水波纹颜色
cursor : true //是否显示手型指针 cursor : true //是否显示手型指针
})</script> })</script>
<script src="./js/index.js"></script> <script src="./js/index.js"></script>
<script type="module" src="./main.js"> <script type="module" src="./main.js">
</script> </script>
</html> </html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment