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 {
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 {
width: 320px;
height: 85%;
......
index.html
View file @ 04bf9251
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./layui-v2.6.8/layui/css/layui.css">
</head>
<style>
#webgl-output{
position: absolute;
top: 0px;
height: 100%;
left: 0px;
/* width: 1100px; */
<link rel="stylesheet" href="./layui-v2.6.8/layui/css/layui.css">
</head>
<style>
#webgl-output{
position: absolute;
top: 0px;
height: 100%;
left: 0px;
/* width: 1100px; */
}
.dg{
display: none;
.dg{
display: none;
}
body{
position: relative;
......@@ -240,15 +240,15 @@
display: none;
}
dd:hover{
background:rgb(183, 157, 113) !important;
background:rgb(183, 157, 113) !important;
}
.layui-this{
background:rgb(183, 157, 113) !important;
}
#i1{
}
</style>
}
</style>
<body>
<!-- <input type="" name="" id="i1" value="123213213" />
<input type="" name="" id="i2" value="123213213" /> -->
......@@ -282,7 +282,7 @@
</thead>
</table>
<div style="height: 270px;overflow: auto;">
<table style="">
<table>
<colgroup>
<col style="width: 110px;">
<col style="width: 150px;">
......@@ -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="header" >
<div>header 部分</div>
</div> -->
<div class="main" >
<div class="main_header" >实时生产预警和安全预警</div>
<div id="webgl-output"></div>
<!-- 左右两侧内容 -->
<div class="view view_left">
<div class="item">
<div class="item_header" >
<img class="item_img" src="./imgs/title@2x.png" alt="">
<span class="item_title" >数值显示</span>
</div>
<div class="item_wrap item_val_wrap">
<div class="item_wrap_content">
<div>
<div class="val" id="pro_eff">0</div>
<div class="name">生产效率</div>
</div>
</div>
<div class="item_wrap_content">
<div>
<div class="val" id="per_eff">0</div>
<div class="name">合格率</div>
</div>
</div>
<div class="item_wrap_content">
<div>
<div class="val" id="act_eff">0</div>
<div class="name">移动率</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="item_header" >
<img class="item_img" src="./imgs/title@2x.png" alt="">
<span class="item_title" >电机功率值</span>
</div>
<div class="item_wrap" id="act_torque"></div>
</div>
<div class="item">
<div class="item_header" >
<img class="item_img" src="./imgs/title@2x.png" alt="">
<span class="item_title" >功率趋势</span>
</div>
<div class="item_wrap" id="torque"></div>
</div>
</div>
<div class="view view_right">
<div class="item">
<div class="item_header" >
<img class="item_img" src="./imgs/title@2x.png" alt="">
<span class="item_title" >转矩趋势</span>
</div>
<div class="item_wrap" id="right1"></div>
</div>
<div class="item">
<div class="item_header" >
<img class="item_img" src="./imgs/title@2x.png" alt="">
<span class="item_title" >电机转矩值</span>
</div>
<div class="item_wrap" id="right2"></div>
</div>
<div class="item">
<div class="item_header item_alarm" >
<div class="item_title_alarm" >报警信息</div>
<div class="item_subTitle" >当前报警数：<span class="red" id="alarmData" ></span></div>
</div>
<div class="item_wrap item_alarm_wrap" id="alarm" >
<!-- 渲染报警信息 -->
<!-- <div class="list">
<span>2021-11-11 12:36:30 越限报警越限报警...</span>
</div>
<div class="list list_blue">
<span>2021-11-11 12:36:30 越限报警越限报警...</span>
</div>
<div class="list list_red">
<span>2021-11-11 12:36:30 越限报警越限报警...</span>
</div> -->
</div>
</div>
</div>
</div>
</div>
</body>
<script src="./js/jquery.min.js"></script>
<script src="./js/echarts.js"></script>
<script src="./js/day.js"></script>
<!-- <div class="header" >
<div>header 部分</div>
</div> -->
<div class="main" >
<div class="main_header" >实时生产预警和安全预警</div>
<div id="webgl-output"></div>
<!-- 左右两侧内容 -->
<div class="view-btn view-btn_left btn-active">
<div class="icon"></div>
</div>
<div class="view view_left">
<div class="item">
<div class="item_header" >
<img class="item_img" src="./imgs/title@2x.png" alt="">
<span class="item_title" >数值显示</span>
</div>
<div class="item_wrap item_val_wrap">
<div class="item_wrap_content">
<div>
<div class="val" id="pro_eff">0</div>
<div class="name">生产效率</div>
</div>
</div>
<div class="item_wrap_content">
<div>
<div class="val" id="per_eff">0</div>
<div class="name">合格率</div>
</div>
</div>
<div class="item_wrap_content">
<div>
<div class="val" id="act_eff">0</div>
<div class="name">移动率</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="item_header" >
<img class="item_img" src="./imgs/title@2x.png" alt="">
<span class="item_title" >电机功率值</span>
</div>
<div class="item_wrap" id="act_torque"></div>
</div>
<div class="item">
<div class="item_header" >
<img class="item_img" src="./imgs/title@2x.png" alt="">
<span class="item_title" >功率趋势</span>
</div>
<div class="item_wrap" id="torque"></div>
</div>
</div>
<div class="view-btn view-btn_right btn-active">
<div class="icon"></div>
</div>
<div class="view view_right">
<div class="item">
<div class="item_header" >
<img class="item_img" src="./imgs/title@2x.png" alt="">
<span class="item_title" >转矩趋势</span>
</div>
<div class="item_wrap" id="right1"></div>
</div>
<div class="item">
<div class="item_header" >
<img class="item_img" src="./imgs/title@2x.png" alt="">
<span class="item_title" >电机转矩值</span>
</div>
<div class="item_wrap" id="right2"></div>
</div>
<div class="item">
<div class="item_header item_alarm" >
<div class="item_title_alarm" >报警信息</div>
<div class="item_subTitle" >当前报警数：<span class="red" id="alarmData" ></span></div>
</div>
<div class="item_wrap item_alarm_wrap" id="alarm" >
<!-- 渲染报警信息 -->
<!-- <div class="list">
<span>2021-11-11 12:36:30 越限报警越限报警...</span>
</div>
<div class="list list_blue">
<span>2021-11-11 12:36:30 越限报警越限报警...</span>
</div>
<div class="list list_red">
<span>2021-11-11 12:36:30 越限报警越限报警...</span>
</div> -->
</div>
</div>
</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="./layui-v2.6.8/layui/layui.js"></script>
<script src="./ripple.js"></script>
......@@ -481,17 +487,27 @@
}]
var twotable = []
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 src="./new_file.js"></script>
<script> new Ripple({
opacity : 0.6, //水波纹透明度
speed : 1, //水波纹扩散速度
bgColor : "#fff", //水波纹颜色
cursor : true //是否显示手型指针
})</script>
<script src="./new_file.js"></script>
<script> new Ripple({
opacity : 0.6, //水波纹透明度
speed : 1, //水波纹扩散速度
bgColor : "#fff", //水波纹颜色
cursor : true //是否显示手型指针
})</script>
<script src="./js/index.js"></script>
<script type="module" src="./main.js">
</script>
</script>
</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