Skip to content

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

fix 模型重叠

parent 04bf9251
Hide whitespace changes
Inline Side-by-side
Showing with 869 additions and 731 deletions
index.html
View file @ ccc4783e
<!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{
position: relative; body {
} position: relative;
.fileDragArea1{ }
top: 0;
bottom: 0; .fileDragArea1 {
right: 0; top: 0;
left: 0; bottom: 0;
margin: auto; right: 0;
color: #5BFCF4; left: 0;
width: 150px; margin: auto;
height: 40px; color: #5bfcf4;
} width: 150px;
.cyxPopup{ height: 40px;
z-index: 300; }
position: fixed;
display: none; .cyxPopup {
width: 1280px; z-index: 300;
height: 710px; position: fixed;
background: #191A1A; display: none;
border-radius: 3px; width: 1280px;
top: calc(50% - 350px); height: 710px;
left: calc(50% - 640px); background: #191a1a;
} border-radius: 3px;
.cyxPopup_head{ top: calc(50% - 350px);
width: calc(100% - 20px); left: calc(50% - 640px);
padding-left: 20px; }
line-height: 36px;
height: 36px; .cyxPopup_head {
background: #292A2A; width: calc(100% - 20px);
color: #c9c9c9; padding-left: 20px;
} line-height: 36px;
.Popupbody{ height: 36px;
width: 600px; background: #292a2a;
padding: 0px 0; color: #c9c9c9;
height: calc(100% - 86px); }
float: left;
} .Popupbody {
.Popupbodyright{ width: 600px;
float: left; padding: 0px 0;
height: calc(100% - 76px); height: calc(100% - 86px);
width: calc(100% - 610px); float: left;
background: #000; }
margin-left: 10px;
position: relative; .Popupbodyright {
top: 35px; float: left;
} height: calc(100% - 76px);
.toptable{ width: calc(100% - 610px);
padding: 0 10px; background: #000;
} margin-left: 10px;
.th{ position: relative;
top: 35px;
}
.toptable {
padding: 0 10px;
}
.th {
border: none !important; border: none !important;
background: #383a3a !important; background: #383a3a !important;
color: #D7DDE0 !important; color: #d7dde0 !important;
border-bottom:1px solid #000 !important; border-bottom: 1px solid #000 !important;
} }
table{
table {
background: #252727 !important; background: #252727 !important;
color: #949494 !important; color: #949494 !important;
} }
tbody{
tbody {
background: #252727 !important; background: #252727 !important;
color: #949494 !important; color: #949494 !important;
overflow: auto; overflow: auto;
} }
.select_tr{
.select_tr {
background: #3c3529; background: #3c3529;
color: #fff; color: #fff;
border-bottom: 1px solid rgb(183, 157, 113); border-bottom: 1px solid rgb(183, 157, 113);
} }
.layui-select-title>input{
.layui-select-title>input {
background-color: #343434 !important; background-color: #343434 !important;
} }
.select_tr>td>input{
.select_tr>td>input {
background-color: #000000; background-color: #000000;
} }
input{
input {
width: 160px !important; width: 160px !important;
height: 25px !important; height: 25px !important;
background-color: #343434; background-color: #343434;
...@@ -104,151 +119,179 @@ ...@@ -104,151 +119,179 @@
border: 1px solid #343434 !important; border: 1px solid #343434 !important;
text-indent: 0.5em; text-indent: 0.5em;
} }
.select_tr>input{
.select_tr>input {
background-color: #000 !important; background-color: #000 !important;
} }
.layui-unselect,.layui-select-title{
.layui-unselect,
.layui-select-title {
width: 160px !important; width: 160px !important;
} }
.bottomtable{
padding: 0 10px; .bottomtable {
} padding: 0 10px;
.layui-anim{ }
.layui-anim {
background-color: #343434 !important; background-color: #343434 !important;
border: 1px solid #343434 !important; border: 1px solid #343434 !important;
color: #fff; color: #fff;
}
.b {
position: absolute;
z-index: 99;
width: 90px;
height: 30px;
color: #8fe4e9;
border-radius: 5px;
background-color: #0c1c38;
background: #007eaf;
background: linear-gradient(-45deg,
#2284fb 50%,
#0a0e92 60%,
#2e59d4 70%);
background-size: 600% 100%;
-webkit-animation: shine 20s infinite;
animation: shine 20s infinite;
-webkit-animation-delay: 0s;
animation-delay: 0s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
border: none;
cursor: pointer;
}
@-webkit-keyframes shine {
0% {
background-position-x: 400%;
} }
.b{
position: absolute; 50% {
z-index: 99; background-position-x: 0%;
width: 90px;
height: 30px;
color: #8FE4E9;
border-radius: 5px;
background-color: #0C1C38;
background: #007eaf;
background: linear-gradient(-45deg, #2284fb 50%, #0a0e92 60%, #2e59d4 70%);
background-size: 600% 100%;
-webkit-animation: shine 20s infinite;
animation: shine 20s infinite;
-webkit-animation-delay: 0s;
animation-delay: 0s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
border: none;
cursor: pointer;
} }
@-webkit-keyframes shine {
0% { 100% {
background-position-x: 400%; background-position-x: -400%;
}
50% {
background-position-x: 0%;
}
100% {
background-position-x: -400%;
}
} }
}
@keyframes shine {
0% { @keyframes shine {
background-position-x: 400%; 0% {
} background-position-x: 400%;
50% {
background-position-x: 0%;
}
100% {
background-position-x: -400%;
}
} }
.b1{
right: 10px;
top:10px;
position: absolute !important;
50% {
background-position-x: 0%;
} }
.b2{
right: 120px; 100% {
top:10px; background-position-x: -400%;
position: absolute !important;
} }
.rad1{ }
width: 50px !important;
height: 15px !important; .b1 {
position: relative; right: 10px;
top: 3px; top: 10px;
} position: absolute !important;
.b3{ }
/* width: 50px !important;
.b2 {
right: 120px;
top: 10px;
position: absolute !important;
}
.rad1 {
width: 50px !important;
height: 15px !important;
position: relative;
top: 3px;
}
.b3 {
/* width: 50px !important;
height: 15px !important; */ height: 15px !important; */
position: absolute !important; position: absolute !important;
top: 10px; top: 10px;
right: 230px; right: 230px;
} }
#canvas{
position: absolute; #canvas {
z-index:999999; position: absolute;
top:180px; z-index: 999999;
left: 0; top: 180px;
/* display: none; */ left: 0;
} /* display: none; */
#cover{ }
position: fixed;
width: 100%; #cover {
height: 100%; position: fixed;
top: 0; width: 100%;
display: none; height: 100%;
background-color: rgba(0,0,0,0.3); top: 0;
/* opacity: 0.3; */ display: none;
z-index:99999999999999999999999999999999999999999; background-color: rgba(0, 0, 0, 0.3);
} /* opacity: 0.3; */
td{ z-index: 99999999999999999999999999999999999999999;
padding: 9px 15px; }
} td {
tr{ padding: 9px 15px;
border-bottom: 1px solid #000; }
}
.select_td{ tr {
border-bottom: 1px solid rgba(255,165,0,0.1); border-bottom: 1px solid #000;
background: rgba(255,165,0,0.1); }
}
/*滚动条整体样式*/ .select_td {
::-webkit-scrollbar { border-bottom: 1px solid rgba(255, 165, 0, 0.1);
/*高宽分别对应横竖滚动条的尺寸*/ background: rgba(255, 165, 0, 0.1);
width: 16px; }
background-color: rgba(255, 255, 255, 0.1);
} /*滚动条整体样式*/
/*滚动条里面滑块*/ ::-webkit-scrollbar {
::-webkit-scrollbar-thumb { /*高宽分别对应横竖滚动条的尺寸*/
background: #465880; width: 16px;
} background-color: rgba(255, 255, 255, 0.1);
}
// 上箭头
::-webkit-scrollbar-button:vertical:single-button:start { /*滚动条里面滑块*/
background-image: url("~@/static/images/AllData/up.png"); ::-webkit-scrollbar-thumb {
background-size: 100%; background: #465880;
cursor: pointer; }
}
// 下箭头 /* // 上箭头 */
::-webkit-scrollbar-button:vertical:single-button:end { ::-webkit-scrollbar-button:vertical:single-button:start {
background-image: url("~@/static/images/AllData/down.png"); background-image: url("~@/static/images/AllData/up.png");
background-size: 100%; background-size: 100%;
cursor: pointer; cursor: pointer;
} }
#radio1,#radio2,.w,.w1{
display: none; /* // 下箭头 */
} ::-webkit-scrollbar-button:vertical:single-button:end {
dd:hover{ background-image: url("~@/static/images/AllData/down.png");
background:rgb(183, 157, 113) !important; background-size: 100%;
} cursor: pointer;
.layui-this{ }
background:rgb(183, 157, 113) !important;
} #radio1,
#i1{ #radio2,
.w,
} .w1 {
display: none;
}
dd:hover {
background: rgb(183, 157, 113) !important;
}
.layui-this {
background: rgb(183, 157, 113) !important;
}
</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" /> -->
...@@ -257,195 +300,233 @@ ...@@ -257,195 +300,233 @@
<button class="b b1" data-ripple="ripple">变量运行</button> <button class="b b1" data-ripple="ripple">变量运行</button>
<button class="b b3" data-ripple="ripple">清空模型</button> <button class="b b3" data-ripple="ripple">清空模型</button>
<div class="cyxPopup"> <div class="cyxPopup">
<div class="cyxPopup_head"> <div class="cyxPopup_head">模型配置</div>
模型配置 <div class="Popupcontent" style="position: relative; width: 100%; height: 670px">
</div>
<div class="Popupcontent" style="position: relative;width: 100%;height: 670px">
<div class="Popupbodyright"></div> <div class="Popupbodyright"></div>
<div class="Popupbody"> <div class="Popupbody">
<div style="padding-top:5px !important;color: white;padding:0 10px">模型组:<input checked="" value='rad1' name="sex1" id='radio1' class="rad1" type="radio"/><span class="w">打簧机</span><input value="rad2" name="sex1" id='radio2' class="rad1" type="radio" checked=""/><span class="w1">绕线机</span></div> <div style="padding-top: 5px !important; color: white; padding: 0 10px">
<div class="toptable"> 模型组:<input checked="" value="rad1" name="sex1" id="radio1" class="rad1" type="radio" /><span
<table class="layui-table" style="height: 300px;margin: 0;height: 30px;margin-top:10px;"> class="w">打簧机</span><input value="rad2" name="sex1" id="radio2" class="rad1" type="radio" checked="" /><span
<colgroup> class="w1">绕线机</span>
<col style="width: 100px;">
<col style="width: 130px;">
<col style="width: 150px;">
<col>
</colgroup>
<thead>
<tr>
<th class="th">模型</th>
<th class="th">动画</th>
<th class="th">变量</th>
<th class="th">值</th>
</tr>
</thead>
</table>
<div style="height: 270px;overflow: auto;">
<table>
<colgroup>
<col style="width: 110px;">
<col style="width: 150px;">
<col style="width: 170px;">
<col>
</colgroup>
<tbody class="ontablebody">
</tbody>
</table>
</div>
</div>
<div class="searchlist" style="padding: 10px;height: 25px;line-height: 25px;">
<span style="float: left;color: #fff;margin-right:10px ;">变量类型</span>
<div class="variabletype" style="width: 100px;float: left;height: 25px;margin-right: 70px;">
<div class='layui-form'>
<select name="city" lay-verify="" lay-filrer="test" id='select' value="">
<option value="不限" selected>不限</option>
<option value="二进制变量">二进制变量</option>
<option value="有符号8位整型" >有符号8位整型</option>
<option value="无符号8位整型">无符号8位整型</option>
<option value="有符号16位整型" >有符号16位整型</option>
<option value="无符号16位整型">无符号16位整型</option>
<option value="有符号32位整型" >有符号32位整型</option>
<option value="无符号32位整型">无符号32位整型</option>
<option value="有符号64位整型">有符号64位整型</option>
<option value="无符号64位整型">无符号64位整型</option>
<option value="F32位浮点数IEEE754">F32位浮点数IEEE754</option>
<option value="F64位浮点数IEEE754">F64位浮点数IEEE754</option>
<option value="日期">日期</option>
<option value="时间">时间</option>
<option value="字符串">字符串</option>
</select>
</div>
</div>
<span style="color: #fff;float: left;margin-right: 10px;">变量名称</span>
<div class="variable" style="width: 100px;float: left;">
<div class='layui-form'>
<input class="searchinput" value='' placeholder="请输入变量名" style="text-indent: 0.5em;"/>
</div>
</div>
<button class="search" style="cursor: pointer;border: 1px solid #3c3529;background-color: #3c3529;width:60px;color: rgb(183, 157, 113);float: right;height: 25px;">查询</button>
</div>
<div class="bottomtable">
<table class="layui-table" style="height: 300px;margin: 0;height: 30px;margin-top:10px;">
<colgroup>
<col style="width: 300px;">
<col style="width: 300px;">
</colgroup>
<thead>
<tr>
<th class="th">变量名称</th>
<th class="th">变量类型</th>
</tr>
</thead>
</table>
<div style="height: 190px;overflow: auto;">
<table style="">
<colgroup>
<col style="width: 340px;">
<col style="width: 310px;">
</colgroup>
<tbody class="twotablebody">
</tbody>
</table>
</div> </div>
</div> <div class="toptable">
<button class="cancel" style="cursor: pointer;position: absolute;bottom: 10px;border-radius: 5px;right: 130px;width:100px;height:26px;background-color: #2c2d2d;border: 1px solid rgb(86,87,87);color:#fff">取消</button> <table class="layui-table" style="height: 300px; margin: 0; height: 30px; margin-top: 10px">
<button class="confim" style="cursor: pointer;position: absolute;bottom: 10px;border-radius: 5px;right: 20px;width:100px;height:26px;background-color: #3c3529;color:rgb(183,157,113);border: 1px solid rgb(183,157,113);">确定</button> <colgroup>
<col style="width: 100px" />
<col style="width: 130px" />
<col style="width: 150px" />
<col />
</colgroup>
<thead>
<tr>
<th class="th">模型</th>
<th class="th">动画</th>
<th class="th">变量</th>
<th class="th">值</th>
</tr>
</thead>
</table>
<div style="height: 270px; overflow: auto">
<table>
<colgroup>
<col style="width: 110px" />
<col style="width: 150px" />
<col style="width: 170px" />
<col />
</colgroup>
<tbody class="ontablebody"></tbody>
</table>
</div>
</div>
<div class="searchlist" style="padding: 10px; height: 25px; line-height: 25px">
<span style="float: left; color: #fff; margin-right: 10px">变量类型</span>
<div class="variabletype" style="
width: 100px;
float: left;
height: 25px;
margin-right: 70px;
">
<div class="layui-form">
<select name="city" lay-verify="" lay-filrer="test" id="select" value="">
<option value="不限" selected>不限</option>
<option value="二进制变量">二进制变量</option>
<option value="有符号8位整型">有符号8位整型</option>
<option value="无符号8位整型">无符号8位整型</option>
<option value="有符号16位整型">有符号16位整型</option>
<option value="无符号16位整型">无符号16位整型</option>
<option value="有符号32位整型">有符号32位整型</option>
<option value="无符号32位整型">无符号32位整型</option>
<option value="有符号64位整型">有符号64位整型</option>
<option value="无符号64位整型">无符号64位整型</option>
<option value="F32位浮点数IEEE754">F32位浮点数IEEE754</option>
<option value="F64位浮点数IEEE754">F64位浮点数IEEE754</option>
<option value="日期">日期</option>
<option value="时间">时间</option>
<option value="字符串">字符串</option>
</select>
</div>
</div>
<span style="color: #fff; float: left; margin-right: 10px">变量名称</span>
<div class="variable" style="width: 100px; float: left">
<div class="layui-form">
<input class="searchinput" value="" placeholder="请输入变量名" style="text-indent: 0.5em" />
</div>
</div>
<button class="search" style="
cursor: pointer;
border: 1px solid #3c3529;
background-color: #3c3529;
width: 60px;
color: rgb(183, 157, 113);
float: right;
height: 25px;
">
查询
</button>
</div>
<div class="bottomtable">
<table class="layui-table" style="height: 300px; margin: 0; height: 30px; margin-top: 10px">
<colgroup>
<col style="width: 300px" />
<col style="width: 300px" />
</colgroup>
<thead>
<tr>
<th class="th">变量名称</th>
<th class="th">变量类型</th>
</tr>
</thead>
</table>
<div style="height: 190px; overflow: auto">
<table>
<colgroup>
<col style="width: 340px" />
<col style="width: 310px" />
</colgroup>
<tbody class="twotablebody"></tbody>
</table>
</div>
</div>
<button class="cancel" style="
cursor: pointer;
position: absolute;
bottom: 10px;
border-radius: 5px;
right: 130px;
width: 100px;
height: 26px;
background-color: #2c2d2d;
border: 1px solid rgb(86, 87, 87);
color: #fff;
">
取消
</button>
<button class="confim" style="
cursor: pointer;
position: absolute;
bottom: 10px;
border-radius: 5px;
right: 20px;
width: 100px;
height: 26px;
background-color: #3c3529;
color: rgb(183, 157, 113);
border: 1px solid rgb(183, 157, 113);
">
确定
</button>
</div> </div>
<canvas id="canvas" width="700px" height="300px">浏览器不支持canvas</canvas> <canvas id="canvas" width="700px" height="300px" style="display: none">浏览器不支持canvas</canvas>
</div> </div>
</div> </div>
<div id="fileDragArea" class="fileDragArea1" style="position: absolute; z-index: 1000" class="upload-default">
<div id="fileDragArea" class="fileDragArea1" style="position: absolute;z-index: 1000;" class="upload-default">拖拽文件夹导入模型</div> 拖拽文件夹导入模型
<div class="container"> </div>
<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-btn view-btn_left btn-active"> <div class="view-btn view-btn_left btn-active">
<div class="icon"></div> <div class="icon"></div>
</div> </div>
<div class="view view_left"> <div class="view view_left">
<div class="item"> <div class="item">
<div class="item_header" > <div class="item_header">
<img class="item_img" src="./imgs/title@2x.png" alt=""> <img class="item_img" src="./imgs/title@2x.png" alt="" />
<span class="item_title" >数值显示</span> <span class="item_title">数值显示</span>
</div> </div>
<div class="item_wrap item_val_wrap"> <div class="item_wrap item_val_wrap">
<div class="item_wrap_content"> <div class="item_wrap_content">
<div> <div>
<div class="val" id="pro_eff">0</div> <div class="val" id="pro_eff">0</div>
<div class="name">生产效率</div> <div class="name">生产效率</div>
</div> </div>
</div> </div>
<div class="item_wrap_content"> <div class="item_wrap_content">
<div> <div>
<div class="val" id="per_eff">0</div> <div class="val" id="per_eff">0</div>
<div class="name">合格率</div> <div class="name">合格率</div>
</div> </div>
</div> </div>
<div class="item_wrap_content"> <div class="item_wrap_content">
<div> <div>
<div class="val" id="act_eff">0</div> <div class="val" id="act_eff">0</div>
<div class="name">移动率</div> <div class="name">移动率</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="item"> <div class="item">
<div class="item_header" > <div class="item_header">
<img class="item_img" src="./imgs/title@2x.png" alt=""> <img class="item_img" src="./imgs/title@2x.png" alt="" />
<span class="item_title" >电机功率值</span> <span class="item_title">电机功率值</span>
</div> </div>
<div class="item_wrap" id="act_torque"></div> <div class="item_wrap" id="act_torque"></div>
</div> </div>
<div class="item"> <div class="item">
<div class="item_header" > <div class="item_header">
<img class="item_img" src="./imgs/title@2x.png" alt=""> <img class="item_img" src="./imgs/title@2x.png" alt="" />
<span class="item_title" >功率趋势</span> <span class="item_title">功率趋势</span>
</div> </div>
<div class="item_wrap" id="torque"></div> <div class="item_wrap" id="torque"></div>
</div> </div>
</div> </div>
<div class="view-btn view-btn_right btn-active"> <div class="view-btn view-btn_right btn-active">
<div class="icon"></div> <div class="icon"></div>
</div> </div>
<div class="view view_right"> <div class="view view_right">
<div class="item"> <div class="item">
<div class="item_header" > <div class="item_header">
<img class="item_img" src="./imgs/title@2x.png" alt=""> <img class="item_img" src="./imgs/title@2x.png" alt="" />
<span class="item_title" >转矩趋势</span> <span class="item_title">转矩趋势</span>
</div> </div>
<div class="item_wrap" id="right1"></div> <div class="item_wrap" id="right1"></div>
</div> </div>
<div class="item"> <div class="item">
<div class="item_header" > <div class="item_header">
<img class="item_img" src="./imgs/title@2x.png" alt=""> <img class="item_img" src="./imgs/title@2x.png" alt="" />
<span class="item_title" >电机转矩值</span> <span class="item_title">电机转矩值</span>
</div> </div>
<div class="item_wrap" id="right2"></div> <div class="item_wrap" id="right2"></div>
</div> </div>
<div class="item"> <div class="item">
<div class="item_header item_alarm" > <div class="item_header item_alarm">
<div class="item_title_alarm" >报警信息</div> <div class="item_title_alarm">报警信息</div>
<div class="item_subTitle" >当前报警数：<span class="red" id="alarmData" ></span></div> <div class="item_subTitle">
</div> 当前报警数：<span class="red" id="alarmData"></span>
<div class="item_wrap item_alarm_wrap" id="alarm" > </div>
<!-- 渲染报警信息 --> </div>
<!-- <div class="list"> <div class="item_wrap item_alarm_wrap" id="alarm">
<!-- 渲染报警信息 -->
<!-- <div class="list">
<span>2021-11-11 12:36:30 越限报警越限报警...</span> <span>2021-11-11 12:36:30 越限报警越限报警...</span>
</div> </div>
<div class="list list_blue"> <div class="list list_blue">
...@@ -455,12 +536,11 @@ ...@@ -455,12 +536,11 @@
<div class="list list_red"> <div class="list list_red">
<span>2021-11-11 12:36:30 越限报警越限报警...</span> <span>2021-11-11 12:36:30 越限报警越限报警...</span>
</div> --> </div> -->
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
</body> </body>
<script src="./js/jquery.min.js"></script> <script src="./js/jquery.min.js"></script>
<script src="./js/echarts.js"></script> <script src="./js/echarts.js"></script>
...@@ -468,46 +548,48 @@ ...@@ -468,46 +548,48 @@
<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>
<script > <script>
layui.use('form', function(){ layui.use("form", function () {
var form = layui.form; var form = layui.form;
//监听提交 //监听提交
form.on('submit(formDemo)', function(data){ form.on("submit(formDemo)", function (data) {
layer.msg(JSON.stringify(data.field)); layer.msg(JSON.stringify(data.field));
return false; return false;
}); });
}); });
var onetable = [{ var onetable = [
clipAction:'', {
variable:'配置变量', clipAction: "",
value:'', variable: "配置变量",
oldvalue:'', value: "",
animation:'图片数量', oldvalue: "",
name:'图片' animation: "图片数量",
}] name: "图片",
var twotable = [] },
var oldvararr = [] ];
$(".view-btn_left").click(function(){ var twotable = [];
let viewDis = $(".view_left").css('display') var oldvararr = [];
$(".view_left").css('display', viewDis === 'none' ? 'flex' : 'none') $(".view-btn_left").click(function () {
$(".view-btn_left").toggleClass('btn-active') let viewDis = $(".view_left").css("display");
}) $(".view_left").css("display", viewDis === "none" ? "flex" : "none");
$(".view-btn_right").click(function(){ $(".view-btn_left").toggleClass("btn-active");
let viewDis = $(".view_right").css('display') });
$(".view_right").css('display', viewDis === 'none' ? 'flex' : 'none') $(".view-btn_right").click(function () {
$(".view-btn_right").toggleClass('btn-active') let viewDis = $(".view_right").css("display");
}) $(".view_right").css("display", viewDis === "none" ? "flex" : "none");
</script> $(".view-btn_right").toggleClass("btn-active");
});
</script>
<script src="./new_file.js"></script> <script src="./new_file.js"></script>
<script> new Ripple({ <script>
opacity : 0.6, //水波纹透明度 new Ripple({
speed : 1, //水波纹扩散速度 opacity: 0.6, //水波纹透明度
bgColor : "#fff", //水波纹颜色 speed: 1, //水波纹扩散速度
cursor : true //是否显示手型指针 bgColor: "#fff", //水波纹颜色
})</script> cursor: true, //是否显示手型指针
});
</script>
<script src="./js/index.js"></script> <script src="./js/index.js"></script>
<script type="module" src="./main.js"></script>
<script type="module" src="./main.js">
</script>
</html> </html>
\ No newline at end of file
main.js
View file @ ccc4783e
...@@ -32,6 +32,7 @@ renderer.outputEncoding = THREE.sRGBEncoding; ...@@ -32,6 +32,7 @@ renderer.outputEncoding = THREE.sRGBEncoding;
container.appendChild(renderer.domElement); container.appendChild(renderer.domElement);
const pmremGenerator = new THREE.PMREMGenerator(renderer); const pmremGenerator = new THREE.PMREMGenerator(renderer);
const scene = new THREE.Scene(); const scene = new THREE.Scene();
window.scene = scene
scene.background = new THREE.Color(0x0C1C38); scene.background = new THREE.Color(0x0C1C38);
scene.environment = pmremGenerator.fromScene(new RoomEnvironment(), 0.04).texture; scene.environment = pmremGenerator.fromScene(new RoomEnvironment(), 0.04).texture;
var select = '没有选中' //判断table有没有选中变量 var select = '没有选中' //判断table有没有选中变量
...@@ -47,12 +48,13 @@ const controls = new OrbitControls(camera, renderer.domElement); ...@@ -47,12 +48,13 @@ const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 0.5, 0); controls.target.set(0, 0.5, 0);
controls.update(); controls.update();
controls.enablePan = true; controls.enablePan = true;
controls.enableDamping = true; // controls.enableDamping = true;
const dracoLoader = new DRACOLoader(); const dracoLoader = new DRACOLoader();
var mixerarr = [] var mixerarr = []
dracoLoader.setDecoderPath('js/libs/draco/gltf/'); dracoLoader.setDecoderPath('js/libs/draco/gltf/');
var variablearr = [] //选中变量的组合 var variablearr = [] //选中变量的组合
var oldvariablearr = [] //变量旧值的组合 var oldvariablearr = [] //变量旧值的组合
let needUpdateModel = false; // 是否需要更新模型
// 打簧机动画下标 // 打簧机动画下标
var numarr = { var numarr = {
num0: 0, num0: 0,
...@@ -94,10 +96,7 @@ function updateEnvironment() { ...@@ -94,10 +96,7 @@ function updateEnvironment() {
scene.environment = envMap; scene.environment = envMap;
}); });
} }
if (localStorage.getItem('moxi1') || localStorage.getItem('moxi2')) { if (localStorage.getItem('moxi1') || localStorage.getItem('moxi2') || $('.b1')[0].innerText == '变量运行') {
document.getElementById('fileDragArea').innerText = '模型载入中。。。'
}
if ($('.b1')[0].innerText == '变量运行') {
document.getElementById('fileDragArea').innerText = '模型载入中。。。' document.getElementById('fileDragArea').innerText = '模型载入中。。。'
} }
//清空模型 //清空模型
...@@ -113,7 +112,7 @@ $('.b3')[0].onclick = function() { ...@@ -113,7 +112,7 @@ $('.b3')[0].onclick = function() {
} }
// 运行按钮 // 运行按钮
$('.b1')[0].onclick = function() { $('.b1')[0].onclick = function() {
if (localStorage.getItem('moxi1') || localStorage.getItem('moxi2')) { if (localStorage.getItem('moxi1') || localStorage.getItem('moxi2')) {
if (document.getElementById('fileDragArea').innerText == '模型载入中。。。') { if (document.getElementById('fileDragArea').innerText == '模型载入中。。。') {
...@@ -130,13 +129,13 @@ $('.b1')[0].onclick = function() { ...@@ -130,13 +129,13 @@ $('.b1')[0].onclick = function() {
group3.visible = false group3.visible = false
group2.visible = false group2.visible = false
$('.b1')[0].innerText = '整体运行' $('.b1')[0].innerText = '整体运行'
}
if (localStorage.getItem('moxi2')) { if (localStorage.getItem('moxi2')) {
group1.visible = true group1.visible = true
} }
if (localStorage.getItem('moxi1')) { if (localStorage.getItem('moxi1')) {
group.visible = true group.visible = true
}
} }
if (group1.visible !== true && group.visible !== true) { if (group1.visible !== true && group.visible !== true) {
document.getElementById('fileDragArea').innerText == '拖拽文件夹导入模型' document.getElementById('fileDragArea').innerText == '拖拽文件夹导入模型'
...@@ -154,7 +153,6 @@ $('.b1')[0].onclick = function() { ...@@ -154,7 +153,6 @@ $('.b1')[0].onclick = function() {
group.visible = false group.visible = false
} else { } else {
console.log("asdsadas")
group3.visible = false group3.visible = false
group2.visible = false group2.visible = false
$('.b1')[0].innerText = '整体运行' $('.b1')[0].innerText = '整体运行'
...@@ -170,24 +168,24 @@ $('.b1')[0].onclick = function() { ...@@ -170,24 +168,24 @@ $('.b1')[0].onclick = function() {
} }
//模型配置 //模型配置
$('.b2')[0].onclick = function() { $('.b2')[0].onclick = function() {
needUpdateModel = true
scene1.clear()
$('.twotablebody').empty()
$.ajax({ $.ajax({
type: "POST", type: "POST",
url: baseUrl + "/Base/GetSCMSTags", url: baseUrl + "/Base/GetSCMSTags",
dataType: "json", dataType: "json",
contentType: "application/json", contentType: "application/json",
success: function(res) { success: function(res) {
console.log(res.data)
threetable = res.data threetable = res.data
threetable.forEach((item) => { threetable.forEach((item) => {
let tr = `<tr TagName='${item.TagName}'><td>${item.TagName}</td><td>${item.TagType}</td></tr>` let tr = `<tr TagName='${item.TagName}'><td>${item.TagName}</td><td>${item.TagType}</td></tr>`
$('.twotablebody').append(tr) $('.twotablebody').append(tr)
}) })
console.log("select", select)
$('.twotablebody tr').click(async function() { $('.twotablebody tr').click(async function() {
console.log("select", select)
if (select !== '没有选中') { if (select !== '没有选中') {
if ($('#radio2').prop('checked')) { if ($('#radio2').prop('checked')) {
console.log("asdasdasdsadsadasdsadsad")
twotable[select].variable = $(this).attr('TagName') twotable[select].variable = $(this).attr('TagName')
$($('.ontablebody').find('tr')[select]).find('td')[2].innerText = $(this).attr('TagName') $($('.ontablebody').find('tr')[select]).find('td')[2].innerText = $(this).attr('TagName')
} else { } else {
...@@ -201,7 +199,7 @@ $('.b2')[0].onclick = function() { ...@@ -201,7 +199,7 @@ $('.b2')[0].onclick = function() {
}, },
}) })
if (localStorage.getItem('moxi1') || localStorage.getItem('moxi2')) { if (localStorage.getItem('moxi1') || localStorage.getItem('moxi2')) {
console.log("开始时零零商量商量商量商量")
if (document.getElementById('fileDragArea').innerText == '模型载入中。。。') { if (document.getElementById('fileDragArea').innerText == '模型载入中。。。') {
alert('请导入模型') alert('请导入模型')
$('.w1').hide() $('.w1').hide()
...@@ -211,6 +209,7 @@ $('.b2')[0].onclick = function() { ...@@ -211,6 +209,7 @@ $('.b2')[0].onclick = function() {
return return
} }
$('.cyxPopup')[0].style.display = 'block' $('.cyxPopup')[0].style.display = 'block'
scene1.clear()
clearInterval(mxtime1) clearInterval(mxtime1)
scene1.traverse((child) => { scene1.traverse((child) => {
if (child.material) { if (child.material) {
...@@ -248,13 +247,15 @@ $('.b2')[0].onclick = function() { ...@@ -248,13 +247,15 @@ $('.b2')[0].onclick = function() {
onetable[$(this).attr('index')].value = $(this).val() onetable[$(this).attr('index')].value = $(this).val()
}) })
$('.ontablebody tr').click(async function() { $('.ontablebody tr').click(async function() {
if($(this).hasClass('select_tr')){
return
}
select = $(this).attr('index') select = $(this).attr('index')
$(this).parent().children().removeClass("select_tr") $(this).parent().children().removeClass("select_tr")
$(this).addClass('select_tr') $(this).addClass('select_tr')
// console.log($(this).children())
let that = this let that = this
initvalue = 0 initvalue = 0
$('#canvas').show() // $('#canvas').show()
for (let i1 in arr) { for (let i1 in arr) {
await promise1(arr[i1], $(this).attr('key'), $(this).attr('index'), i1) await promise1(arr[i1], $(this).attr('key'), $(this).attr('index'), i1)
} }
...@@ -282,13 +283,16 @@ $('.b2')[0].onclick = function() { ...@@ -282,13 +283,16 @@ $('.b2')[0].onclick = function() {
onetable[$(this).attr('index')].value = $(this).val() onetable[$(this).attr('index')].value = $(this).val()
}) })
$('.ontablebody tr').click(async function() { $('.ontablebody tr').click(async function() {
if($(this).hasClass('select_tr')){
return
}
select = $(this).attr('index') select = $(this).attr('index')
$(this).parent().children().removeClass("select_tr") $(this).parent().children().removeClass("select_tr")
$(this).addClass('select_tr') $(this).addClass('select_tr')
// console.log($(this).children()) // console.log($(this).children())
let that = this let that = this
initvalue = 0 initvalue = 0
$('#canvas').show() // $('#canvas').show()
for (let i1 in arr) { for (let i1 in arr) {
await promise1(arr[i1], $(this).attr('key'), $(this).attr('index'), i1) await promise1(arr[i1], $(this).attr('key'), $(this).attr('index'), i1)
} }
...@@ -314,13 +318,16 @@ $('.b2')[0].onclick = function() { ...@@ -314,13 +318,16 @@ $('.b2')[0].onclick = function() {
twotable[$(this).attr('index')].value = $(this).val() twotable[$(this).attr('index')].value = $(this).val()
}) })
$('.ontablebody tr').click(async function() { $('.ontablebody tr').click(async function() {
if($(this).hasClass('select_tr')){
return
}
select = $(this).attr('index') select = $(this).attr('index')
$(this).parent().children().removeClass("select_tr") $(this).parent().children().removeClass("select_tr")
$(this).addClass('select_tr') $(this).addClass('select_tr')
// console.log($(this).children()) // console.log($(this).children())
let that = this let that = this
initvalue = 0 initvalue = 0
$('#canvas').show() // $('#canvas').show()
for (let i1 in arr1) { for (let i1 in arr1) {
await promise3(arr1[i1], $(this).attr('key'), $(this).attr('index'), i1) await promise3(arr1[i1], $(this).attr('key'), $(this).attr('index'), i1)
...@@ -542,6 +549,7 @@ function animate() { ...@@ -542,6 +549,7 @@ function animate() {
}) })
} else { } else {
console.log("111")
mixerarr.forEach((item) => { mixerarr.forEach((item) => {
item.mixer1.update(delta) item.mixer1.update(delta)
}) })
...@@ -573,7 +581,6 @@ function mxtime() { ...@@ -573,7 +581,6 @@ function mxtime() {
contentType: "application/json", contentType: "application/json",
data: JSON.stringify(variablearr), data: JSON.stringify(variablearr),
success: function(res) { success: function(res) {
console.log(oldvariablearr)
if (res.data.length !== 0) { if (res.data.length !== 0) {
res.data.forEach((item) => { res.data.forEach((item) => {
onetable.forEach((item1) => { onetable.forEach((item1) => {
...@@ -643,6 +650,9 @@ dragDrop.addEventListener("drop", function(e) { ...@@ -643,6 +650,9 @@ dragDrop.addEventListener("drop", function(e) {
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
//取消鼠标经过样式 //取消鼠标经过样式
if($('.b1')[0].innerText === '变量运行'){
return
}
$(this).removeClass("upload_drag_hover"); $(this).removeClass("upload_drag_hover");
//获取文件列表对象和文件相对路径 //获取文件列表对象和文件相对路径
var files = e.target.files || e.dataTransfer.files; var files = e.target.files || e.dataTransfer.files;
...@@ -713,25 +723,31 @@ function animate1() { ...@@ -713,25 +723,31 @@ function animate1() {
function promise1(a, b, c, d) { function promise1(a, b, c, d) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
loader.load('models/gltf/打簧机/打簧机分模型/' + a + '.glb', function(gltf) { loader.load('models/gltf/打簧机/打簧机分模型/' + a + '.glb', function(gltf) {
if (a == 'a') { if(scene1.children.length !== arr.length){
scene1.traverse((child) => { if (a == 'a') {
if (child.material) { scene1.traverse((child) => {
child.material.dispose(); if (child.material) {
} child.material.dispose();
if (child.geometry) { }
child.geometry.dispose(); if (child.geometry) {
} child.geometry.dispose();
child = null; }
}); child = null;
});
scene1.clear()
// cancelAnimationFrame(animate1); scene1.clear()
// cancelAnimationFrame(animate1);
}
const model1 = gltf.scene
model1.scale.set(2.6, 1.3, 2.6)
scene1.add(model1)
} }
const model1 = gltf.scene // const model1 = gltf.scene
model1.scale.set(2.6, 1.3, 2.6) // model1.scale.set(2.6, 1.3, 2.6)
scene1.add(model1) // scene1.add(model1)
if (a == onetable[c].name) { if (a == onetable[c].name) {
mixer1 = new THREE.AnimationMixer(model1); mixer1 = new THREE.AnimationMixer(scene1.children[d]);
// mixer1 = new THREE.AnimationMixer(model1);
mixer1.clipAction(gltf.animations[b]).play() mixer1.clipAction(gltf.animations[b]).play()
animate1() animate1()
} }
...@@ -739,7 +755,7 @@ function promise1(a, b, c, d) { ...@@ -739,7 +755,7 @@ function promise1(a, b, c, d) {
}, async (xhr) => { }, async (xhr) => {
if ((xhr.loaded / xhr.total * 100) * (d / (arr.length - 1)) > initvalue) { if ((xhr.loaded / xhr.total * 100) * (d / (arr.length - 1)) > initvalue) {
initvalue = (xhr.loaded / xhr.total * 100) * (d / (arr.length - 1)) initvalue = (xhr.loaded / xhr.total * 100) * (d / (arr.length - 1))
await init(initvalue) await init(initvalue, scene1.children.length !== arr.length)
} }
}) })
}) })
...@@ -748,23 +764,25 @@ function promise1(a, b, c, d) { ...@@ -748,23 +764,25 @@ function promise1(a, b, c, d) {
function promise3(a, b, c, d) { function promise3(a, b, c, d) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
loader.load('models/gltf/绕线机/绕线机分模型/' + a + '.glb', function(gltf) { loader.load('models/gltf/绕线机/绕线机分模型/' + a + '.glb', function(gltf) {
if (a == 'aa') { if(scene1.children.length !== arr1.length){
scene1.traverse((child) => { if (a == 'aa') {
if (child.material) { scene1.traverse((child) => {
child.material.dispose(); if (child.material) {
} child.material.dispose();
if (child.geometry) { }
child.geometry.dispose(); if (child.geometry) {
} child.geometry.dispose();
child = null; }
}); child = null;
scene1.clear() });
scene1.clear()
}
const model1 = gltf.scene
model1.scale.set(2.6, 1.3, 2.6)
scene1.add(model1)
} }
const model1 = gltf.scene
model1.scale.set(2.6, 1.3, 2.6)
scene1.add(model1)
if (a == twotable[c].name) { if (a == twotable[c].name) {
mixer1 = new THREE.AnimationMixer(model1); mixer1 = new THREE.AnimationMixer(scene1.children[d]);
mixer1.clipAction(gltf.animations[b]).play() mixer1.clipAction(gltf.animations[b]).play()
animate1() animate1()
} }
...@@ -772,7 +790,7 @@ function promise3(a, b, c, d) { ...@@ -772,7 +790,7 @@ function promise3(a, b, c, d) {
}, async (xhr) => { }, async (xhr) => {
if ((xhr.loaded / xhr.total * 100) * (d / (arr1.length - 1)) > initvalue) { if ((xhr.loaded / xhr.total * 100) * (d / (arr1.length - 1)) > initvalue) {
initvalue = (xhr.loaded / xhr.total * 100) * (d / (arr1.length - 1)) initvalue = (xhr.loaded / xhr.total * 100) * (d / (arr1.length - 1))
await init(initvalue) await init(initvalue, scene1.children.length !== arr1.length)
} }
}) })
}) })
...@@ -799,7 +817,7 @@ function allpromise(a, c) { ...@@ -799,7 +817,7 @@ function allpromise(a, c) {
animations animations
}) })
group2.add(model) group2.add(model)
if (localStorage.getItem('moxi1')) { if (localStorage.getItem('moxi1') && localStorage.getItem('b1') == '整体运行') {
group2.visible = false group2.visible = false
} else if ($('.b1')[0].innerText == '变量运行') { } else if ($('.b1')[0].innerText == '变量运行') {
group2.visible = true group2.visible = true
...@@ -921,7 +939,7 @@ function promise(a, c) { ...@@ -921,7 +939,7 @@ function promise(a, c) {
}) })
} }
group.add(model) group.add(model)
if (localStorage.getItem('moxi1')) { if (localStorage.getItem('moxi1') && localStorage.getItem('b1') === '整体运行') {
group.visible = true group.visible = true
} else { } else {
group.visible = false group.visible = false
...@@ -1008,12 +1026,15 @@ function promise2(a, c) { ...@@ -1008,12 +1026,15 @@ function promise2(a, c) {
twotable[$(this).attr('index')].value = $(this).val() twotable[$(this).attr('index')].value = $(this).val()
}) })
$('.ontablebody tr').click(async function() { $('.ontablebody tr').click(async function() {
if($(this).hasClass('select_tr')){
return
}
select = $(this).attr('index') select = $(this).attr('index')
$(this).parent().children().removeClass("select_tr") $(this).parent().children().removeClass("select_tr")
$(this).addClass('select_tr') $(this).addClass('select_tr')
let that = this let that = this
initvalue = 0 initvalue = 0
$('#canvas').show() // $('#canvas').show()
}) })
group1.add(model) group1.add(model)
if (localStorage.getItem('moxi2')) { if (localStorage.getItem('moxi2')) {
...@@ -1052,12 +1073,15 @@ $('input[type=radio][name=sex1]').change(function() { ...@@ -1052,12 +1073,15 @@ $('input[type=radio][name=sex1]').change(function() {
onetable[$(this).attr('index')].value = $(this).val() onetable[$(this).attr('index')].value = $(this).val()
}) })
$('.ontablebody tr').click(async function() { $('.ontablebody tr').click(async function() {
if($(this).hasClass('select_tr')){
return
}
select = $(this).attr('index') select = $(this).attr('index')
$(this).parent().children().removeClass("select_tr") $(this).parent().children().removeClass("select_tr")
$(this).addClass('select_tr') $(this).addClass('select_tr')
let that = this let that = this
initvalue = 0 initvalue = 0
$('#canvas').show() // $('#canvas').show()
for (let i1 in arr) { for (let i1 in arr) {
await promise1(arr[i1], $(this).attr('key'), $(this).attr('index'), i1) await promise1(arr[i1], $(this).attr('key'), $(this).attr('index'), i1)
} }
...@@ -1078,12 +1102,15 @@ $('input[type=radio][name=sex1]').change(function() { ...@@ -1078,12 +1102,15 @@ $('input[type=radio][name=sex1]').change(function() {
twotable[$(this).attr('index')].value = $(this).val() twotable[$(this).attr('index')].value = $(this).val()
}) })
$('.ontablebody tr').click(async function() { $('.ontablebody tr').click(async function() {
if($(this).hasClass('select_tr')){
return
}
select = $(this).attr('index') select = $(this).attr('index')
$(this).parent().children().removeClass("select_tr") $(this).parent().children().removeClass("select_tr")
$(this).addClass('select_tr') $(this).addClass('select_tr')
let that = this let that = this
initvalue = 0 initvalue = 0
$('#canvas').show() // $('#canvas').show()
for (let i1 in arr1) { for (let i1 in arr1) {
await promise3(arr1[i1], $(this).attr('key'), $(this).attr('index'), i1) await promise3(arr1[i1], $(this).attr('key'), $(this).attr('index'), i1)
...@@ -1103,6 +1130,7 @@ renderer1.outputEncoding = THREE.sRGBEncoding; ...@@ -1103,6 +1130,7 @@ renderer1.outputEncoding = THREE.sRGBEncoding;
container1.appendChild(renderer1.domElement); container1.appendChild(renderer1.domElement);
const pmremGenerator1 = new THREE.PMREMGenerator(renderer1); const pmremGenerator1 = new THREE.PMREMGenerator(renderer1);
const scene1 = new THREE.Scene(); const scene1 = new THREE.Scene();
window.scenen1 = scene1
scene1.background = new THREE.Color(0x0C1C38); scene1.background = new THREE.Color(0x0C1C38);
scene1.environment = pmremGenerator1.fromScene(new RoomEnvironment(), 0.04).texture; scene1.environment = pmremGenerator1.fromScene(new RoomEnvironment(), 0.04).texture;
const camera1 = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 100); const camera1 = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 100);
...@@ -1111,7 +1139,7 @@ const controls1 = new OrbitControls(camera1, renderer1.domElement); ...@@ -1111,7 +1139,7 @@ const controls1 = new OrbitControls(camera1, renderer1.domElement);
controls1.target.set(0, 0.5, 0); controls1.target.set(0, 0.5, 0);
controls1.update(); controls1.update();
controls1.enablePan = true; controls1.enablePan = true;
controls1.enableDamping = true; // controls1.enableDamping = true;
$('.cancel')[0].onclick = function() { $('.cancel')[0].onclick = function() {
$('.cyxPopup').hide() $('.cyxPopup').hide()
mxtime() mxtime()
...@@ -1163,6 +1191,7 @@ $('.search')[0].onclick = function() { ...@@ -1163,6 +1191,7 @@ $('.search')[0].onclick = function() {
}) })
console.log(select)
$('.twotablebody tr').click(async function() { $('.twotablebody tr').click(async function() {
if (select !== '没有选中') { if (select !== '没有选中') {
if ($('#radio2').prop('checked')) { if ($('#radio2').prop('checked')) {
...@@ -1223,6 +1252,7 @@ function getold() { ...@@ -1223,6 +1252,7 @@ function getold() {
} }
function tb(a, b) { function tb(a, b) {
console.log(a, b)
a.forEach((item) => { a.forEach((item) => {
if (item.name == '图片' && item.variable !== '配置变量') { if (item.name == '图片' && item.variable !== '配置变量') {
variablearr.push(item.variable) variablearr.push(item.variable)
......
new_file.js
View file @ ccc4783e
//判断是否支持canvaas
function isSupportCanvas(canvas) {
return !!(canvas.getContext && canvas.getContext("2d"));
}
//判断是否支持canvaas //requestAnimationFrame会自动使用最优的帧率进行渲染
function isSupportCanvas(canvas) { function setupRAF() {
return !!(canvas.getContext && canvas.getContext("2d")); window.lastTime = 0;
}
//requestAnimationFrame会自动使用最优的帧率进行渲染 //兼容各个浏览器，Internet Explorer11、Google Chrome(Microsoft Edge)、Mozilla Firefox、Opera
function setupRAF() { var vendors = ["ms", "moz", "webkit", "o"];
window.lastTime = 0; for (var i = 0; i < vendors.length; i++) {
window.requestAnimationFrame = window[vendors[i] + "RequestAnimationFrame"];
//兼容各个浏览器，Internet Explorer11、Google Chrome(Microsoft Edge)、Mozilla Firefox、Opera window.cancelAnimationFrame =
var vendors = ["ms", "moz", "webkit", "o"]; window[vendors[i] + "CancelAnimationFrame"] ||
for(var i=0; i<vendors.length; i++) { window[vendors[i] + "CancelRequestAnimationFrame"];
window.requestAnimationFrame = window[vendors[i] + "RequestAnimationFrame"];
window.cancelAnimationFrame = window[vendors[i] + "CancelAnimationFrame"] || window[vendors[i] + "CancelRequestAnimationFrame"];
//测试浏览器支持哪一张
if(window.requestAnimationFrame) {
console.log(vendors[i] + "requestAnimationFrame");
}
if(window[vendors[i] + "CancelAnimationFrame"]) {
console.log(vendors[i] + "CancelAnimationFrame");
}
if(window[vendors[i] + "CancelRequestAnimationFrame"]) {
console.log(vendors[i] + "CancelRequestAnimationFrame");
}
}
//回退机制
if(!window.requestAnimationFrame) {
window.requestAnimationFrame = function(callback, element) {
var currentTime = new Date().getTime();
var timeToCall = Math.max(0, 16-(currentTime-window.lastTime));
var callTime = currentTime + timeToCall;
var id = window.setTimeout(function() {
callback(callTime);
}, timeToCall);
window.lastTime = callTime;
return id;
};
}
//回退机制
if(!window.cancelAnimationFrame) {
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
}
}
}
//在[min, max]中随机取一个数 //测试浏览器支持哪一张
function rand(min, max) { if (window.requestAnimationFrame) {
return Math.random() * (max - min + 1) + min; console.log(vendors[i] + "requestAnimationFrame");
} }
if (window[vendors[i] + "CancelAnimationFrame"]) {
console.log(vendors[i] + "CancelAnimationFrame");
}
if (window[vendors[i] + "CancelRequestAnimationFrame"]) {
console.log(vendors[i] + "CancelRequestAnimationFrame");
}
}
//判断两碰撞盒是否相交 //回退机制
function isHit(x1, y1, w1, h1, x2, y2, w2, h2) { if (!window.requestAnimationFrame) {
return !( x1 + w1 < x2 || x2 + w2 < x1 || y1 + h1 < h2 || y2 + h2 < h1); window.requestAnimationFrame = function (callback, element) {
} var currentTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currentTime - window.lastTime));
var callTime = currentTime + timeToCall;
var id = window.setTimeout(function () {
callback(callTime);
}, timeToCall);
window.lastTime = callTime;
return id;
};
}
//判断点是否在指定区域内 //回退机制
function isInRect(x, y, rx, ry, rw, rh) { if (!window.cancelAnimationFrame) {
return !(x < rx || x > rx + rw || y < ry || y > ry + rh); window.cancelAnimationFrame = function (id) {
} clearTimeout(id);
};
}
}
//将数限制在某个范围之内 //在[min, max]中随机取一个数
function limit(value, min, max) { function rand(min, max) {
if(value < min) { return Math.random() * (max - min + 1) + min;
return min; }
} else if(value > max) {
return max;
}
return value;
}
var CanvasController = function(canvas) { //判断两碰撞盒是否相交
var ctx = canvas.getContext("2d"); function isHit(x1, y1, w1, h1, x2, y2, w2, h2) {
//进度条对象 return !(x1 + w1 < x2 || x2 + w2 < x1 || y1 + h1 < h2 || y2 + h2 < h1);
var Loader = function(data=0,max=30) { }
//进度条宽度
this.width = canvas.width - 80; //判断点是否在指定区域内
//进度条高度 function isInRect(x, y, rx, ry, rw, rh) {
this.height = 20; return !(x < rx || x > rx + rw || y < ry || y > ry + rh);
//进度条X坐标 }
this.x = (canvas.width - this.width) / 2;
//进度条Y坐标 //将数限制在某个范围之内
this.y = (canvas.height - this.height) / 2; function limit(value, min, max) {
//进度条当前值 if (value < min) {
this.value = Number(localStorage.getItem("value"))>Number(localStorage.getItem("value1"))?Number(localStorage.getItem("value")):Number(localStorage.getItem("value1")); return min;
//进度条最大值 } else if (value > max) {
this.maxValue = max; return max;
//进度条更新速度 }
this.speed = 1; return value;
//加深的颜色 }
this.lighterColor = "#222";
var CanvasController = function (canvas) {
//HSL(Hue:色相，Saturation:饱和度，Lightness：饱和度) var ctx = canvas.getContext("2d");
this.hue = 0; //进度条对象
this.hueStart = 0; var Loader = function (data = 0, max = 30) {
this.hueEnd = 360; //进度条宽度
this.width = canvas.width - 80;
//获取当前值对应的X坐标 //进度条高度
this.currentPosX = function() { this.height = 20;
return this.x + this.width * this.value / 100; //进度条X坐标
} this.x = (canvas.width - this.width) / 2;
console.log('asdsad') //进度条Y坐标
//更新进度条 this.y = (canvas.height - this.height) / 2;
this.update = function(a,b,c) { //进度条当前值
$('#canvas').show() this.value =
$('#cover').show() Number(localStorage.getItem("value")) >
this.value += this.speed; Number(localStorage.getItem("value1"))
localStorage.setItem('value1',this.value) ? Number(localStorage.getItem("value"))
if(this.value >= 100){ : Number(localStorage.getItem("value1"));
this.value = 100 //进度条最大值
c() this.maxValue = max;
$('#canvas').hide() //进度条更新速度
$('#cover').hide() this.speed = 1;
localStorage.setItem('value',0) //加深的颜色
localStorage.setItem('value1',0) this.lighterColor = "#222";
}else if(this.value > this.maxValue) {
this.value = this.maxValue; //HSL(Hue:色相，Saturation:饱和度，Lightness：饱和度)
localStorage.setItem('value',this.maxValue) this.hue = 0;
c() this.hueStart = 0;
} this.hueEnd = 360;
}
//渲染进度条
this.render = function() {
ctx.globalCompositeOperation = "source-over";
var currentWidth = this.width * this.value / 100;
this.hue = this.hueStart + (this.hueEnd - this.hueStart) * this.value / 100;
//ctx.fillStyle = "hsl(" + this.hue + ", 100%, 40%)";
var linearGradient = ctx.createLinearGradient(this.x, this.y, this.x + currentWidth, this.y);
linearGradient.addColorStop(0, "hsl(" + this.hueStart + ", 100%, 40%)");
linearGradient.addColorStop(1, "hsl(" + this.hue + ", 100%, 40%)");
ctx.fillStyle = linearGradient;
ctx.fillRect(this.x, this.y, currentWidth, this.height);
ctx.fillStyle = this.lighterColor;
ctx.globalCompositeOperation = "lighter";
ctx.fillRect(this.x, this.y, currentWidth, this.height/2);
}
}
//单个粒子对象
var Particle = function(x, y, hue, minX, maxX) {
//粒子的X坐标
this.x = x;
//粒子的Y坐标
this.y = y;
//粒子的宽度
this.width = rand(1,3);
//粒子的高度
this.height = rand(1,2);
//粒子的HSL颜色的hue分量
this.hue = limit(hue + rand(-15,15), 0, 360);
//粒子在X方向上的速度
this.velocityX = rand(-1,1);
//粒子在Y方向上的速度
this.velocityY = rand(-30,-20);
//粒子在X方向上的加速度
this.accelerationX = -.5;
//粒子在Y方向上的加速度
this.accelerationY = 4;
//单位时间
this.unitTime = .2;
//更新粒子位置
this.update = function() {
this.x += (this.velocityX * this.unitTime);
this.y += (this.velocityY * this.unitTime);
this.velocityX += (this.accelerationX * this.unitTime * rand(-1,1));
this.velocityY += (this.accelerationY * this.unitTime);
}
//渲染粒子
this.render = function() {
ctx.fillStyle = "hsl(" + this.hue + ", 100%, 40%)"
ctx.globalCompositeOperation = "source-over";
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
//所有粒子效果的对象
var Particles = function(minX, maxX) {
//存放生成的所有粒子对象
this.values = [];
//粒子生成速率
this.rate = 3;
//生成粒子
this.generate = function(x, y, hue) {
for(var i=0; i<this.rate; i++) {
this.values.push(new Particle(x, y, hue, minX, maxX));
}
}
//更新进度值
this.update = function() {
for(var i = this.values.length-1; i >= 0; i--) {
this.values[i].update();
if(!isInRect(this.values[i].x, this.values[i].y, 0, 0, canvas.width, canvas.height)) {
this.values.splice(i, 1);
}
}
}
//渲染进度条
this.render = function() {
for(var i =0; i<this.values.length; i++) {
this.values[i].render();
}
}
}
//清空画布
function clearCanvas() {
//默认值，表示图形将绘制在现有画布之上
ctx.globalCompositeOperation = "source-over";
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
//初始化函数
this.init = function(data=0,max,resolve) {
var loader = new Loader();
console.log(loader.x)
console.log(loader.currentPosX()-3, loader.y + loader.height/2, loader.hue)
var particles = new Particles(loader.x, loader.x + loader.width);
loader.maxValue = data
var loop = function(data,max) {
requestAnimationFrame(loop, canvas);
clearCanvas();
loader.update(data,max,resolve);
loader.render();
particles.generate(loader.currentPosX()-3, loader.y + loader.height/2, loader.hue);
particles.update();
particles.render();
}
loop();
}
}
var canvas = document.getElementById("canvas");
var canvasController = new CanvasController(canvas);
localStorage.setItem("value",0)
function init(data,max) {
return new Promise((resolve, reject) => {
canvasController.init(data,max,resolve);
})
}
//获取当前值对应的X坐标
\ No newline at end of file this.currentPosX = function () {
return this.x + (this.width * this.value) / 100;
};
console.log("asdsad");
//更新进度条
this.update = function (a, b, c) {
$("#canvas").show();
$("#cover").show();
this.value += this.speed;
localStorage.setItem("value1", this.value);
if (this.value >= 100) {
this.value = 100;
c();
$("#canvas").hide();
$("#cover").hide();
localStorage.setItem("value", 0);
localStorage.setItem("value1", 0);
} else if (this.value > this.maxValue) {
this.value = this.maxValue;
localStorage.setItem("value", this.maxValue);
c();
}
};
//渲染进度条
this.render = function () {
ctx.globalCompositeOperation = "source-over";
var currentWidth = (this.width * this.value) / 100;
this.hue =
this.hueStart + ((this.hueEnd - this.hueStart) * this.value) / 100;
//ctx.fillStyle = "hsl(" + this.hue + ", 100%, 40%)";
var linearGradient = ctx.createLinearGradient(
this.x,
this.y,
this.x + currentWidth,
this.y
);
linearGradient.addColorStop(0, "hsl(" + this.hueStart + ", 100%, 40%)");
linearGradient.addColorStop(1, "hsl(" + this.hue + ", 100%, 40%)");
ctx.fillStyle = linearGradient;
ctx.fillRect(this.x, this.y, currentWidth, this.height);
ctx.fillStyle = this.lighterColor;
ctx.globalCompositeOperation = "lighter";
ctx.fillRect(this.x, this.y, currentWidth, this.height / 2);
};
};
//单个粒子对象
var Particle = function (x, y, hue, minX, maxX) {
//粒子的X坐标
this.x = x;
//粒子的Y坐标
this.y = y;
//粒子的宽度
this.width = rand(1, 3);
//粒子的高度
this.height = rand(1, 2);
//粒子的HSL颜色的hue分量
this.hue = limit(hue + rand(-15, 15), 0, 360);
//粒子在X方向上的速度
this.velocityX = rand(-1, 1);
//粒子在Y方向上的速度
this.velocityY = rand(-30, -20);
//粒子在X方向上的加速度
this.accelerationX = -0.5;
//粒子在Y方向上的加速度
this.accelerationY = 4;
//单位时间
this.unitTime = 0.2;
//更新粒子位置
this.update = function () {
this.x += this.velocityX * this.unitTime;
this.y += this.velocityY * this.unitTime;
this.velocityX += this.accelerationX * this.unitTime * rand(-1, 1);
this.velocityY += this.accelerationY * this.unitTime;
};
//渲染粒子
this.render = function () {
ctx.fillStyle = "hsl(" + this.hue + ", 100%, 40%)";
ctx.globalCompositeOperation = "source-over";
ctx.fillRect(this.x, this.y, this.width, this.height);
};
};
//所有粒子效果的对象
var Particles = function (minX, maxX) {
//存放生成的所有粒子对象
this.values = [];
//粒子生成速率
this.rate = 3;
//生成粒子
this.generate = function (x, y, hue) {
for (var i = 0; i < this.rate; i++) {
this.values.push(new Particle(x, y, hue, minX, maxX));
}
};
// 更新进度值
this.update = function () {
for (var i = this.values.length - 1; i >= 0; i--) {
this.values[i].update();
if (
!isInRect(
this.values[i].x,
this.values[i].y,
0,
0,
canvas.width,
canvas.height
)
) {
this.values.splice(i, 1);
}
}
};
//渲染进度条
this.render = function () {
for (var i = 0; i < this.values.length; i++) {
this.values[i].render();
}
};
};
//清空画布
function clearCanvas() {
//默认值，表示图形将绘制在现有画布之上
ctx.globalCompositeOperation = "source-over";
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
//初始化函数
this.init = function (data = 0, needLoad, max, resolve) {
console.log("----------------------------------------",data, needLoad, max)
var loader = new Loader();
console.log(loader.x);
console.log(
loader.currentPosX() - 3,
loader.y + loader.height / 2,
loader.hue
);
var particles = new Particles(loader.x, loader.x + loader.width);
loader.maxValue = data;
var loop = function (data, max) {
requestAnimationFrame(loop, canvas);
clearCanvas();
if(needLoad){
loader.update(data, max, resolve);
loader.render();
particles.generate(
loader.currentPosX() - 3,
loader.y + loader.height / 2,
loader.hue
);
particles.update();
particles.render();
}
};
loop();
};
};
var canvas = document.getElementById("canvas");
var canvasController = new CanvasController(canvas);
localStorage.setItem("value", 0);
function init(data, needLoad, max) {
return new Promise((resolve, reject) => {
canvasController.init(data, needLoad, max, resolve);
});
}
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