@@ -6,6 +6,6 @@ | |||
</head> | |||
<body> | |||
<div id="root"></div> | |||
<script src="/umi.a030a2db.js"></script> | |||
<script src="/umi.b1be2adf.js"></script> | |||
</body></html> |
@@ -1 +0,0 @@ | |||
.tab_navbar_card___TM3Di{display:flex;align-items:center;box-shadow:0 4px 8px 1px #07111b26;height:100px;border-radius:5px;background-color:#fff}.tab_navbar_active___PLvNu{position:relative;color:#546bf0}.tab_navbar_active___PLvNu:after{position:absolute;content:"";bottom:-10px;left:0;width:70px;height:2px;background-color:#546bf0}.tab_navbar_item___FaQZn{cursor:pointer;margin:0 20px;font-size:18px}.tab_navbar_item___FaQZn:hover{transition:all .3s;color:#546bf0;transform:scale(1.1)}.log_head_card___e4OFg{padding:20px;box-shadow:0 4px 8px 1px #07111b26}.log_head_card_text____MQ82{font-size:18px;font-weight:700;margin-bottom:30px}.log_card_data___Uhh4q{padding:0 40px;display:flex;flex-wrap:wrap;justify-content:space-between}.log_data_pos___M3M6A{text-align:center;margin-bottom:20px}.log_data_number___Fh2Z2{color:#546bf0;font-size:20px;margin-bottom:5px}.log_data_text___ApoMe{font-size:16px;color:#222}.log_list_title___l0YtY{font-size:18px;font-weight:700;margin:20px 0;color:#222}.log_detail_row___B6WKE{display:flex;align-items:center;justify-content:space-between}.log_detail_item___JgTlO{display:flex;align-items:center;flex-grow:1;flex-shrink:0;border:1px solid #dedede;border-bottom:none;height:50px;box-sizing:border-box;font-size:16px}.log_detail_half___bh7yF{width:50%}.log_detail_item___JgTlO:nth-child(2){border-left:none}.log_detail_item_last___w0ouH{border-bottom:1px solid #dedede}.log_detail_title____90Pu{display:flex;align-items:center;flex-shrink:0;background-color:#fafafa;width:100px;color:#222;height:100%;border-right:1px solid #dedede;padding-left:10px}.log_detail_content___nhonA{display:flex;align-items:center;padding-left:10px}.tab_navbar_btn___yQEXt{margin-left:auto;margin-right:50px}.person_list___ZO8Fs{display:flex;flex-wrap:wrap;justify-content:space-between;padding:20px 0}.person_list_item___HkHZR{position:relative;height:300px;width:200px;display:flex;flex-direction:column;justify-content:space-around;align-items:center;box-shadow:0 2px 8px #07111b26;background-color:#fff}.person_list_btn___ZGGz9{position:absolute;bottom:10px;right:10px}.person_list_item___HkHZR .item_content___btVdX{width:150px;display:flex;align-items:center;justify-content:flex-start} |
@@ -0,0 +1,196 @@ | |||
@charset "utf-8"; | |||
/* CSS Document */ | |||
*{ | |||
-webkit-box-sizing: border-box; | |||
-moz-box-sizing: border-box; | |||
box-sizing: border-box} | |||
*,body{padding:0px; margin:0px;color: #fff;;font-family: "微软雅黑";} | |||
body{ background: linear-gradient(25deg, #0f2249,#182e5a 20%,#0f2249 40%,#182e5a 60%,#0f2249 80%,#182e5a 100%);color:#fff;font-size: .1rem;} | |||
li{ list-style-type:none;} | |||
table{} | |||
i{ margin:0px; padding:0px; text-indent:0px;} | |||
img{ border:none; max-width: 100%;} | |||
a{ text-decoration:none; color:#399bff;} | |||
a.active,a:focus{ outline:none!important; text-decoration:none;} | |||
ol,ul,p,h1,h2,h3,h4,h5,h6{ padding:0; margin:0} | |||
a:hover{ color:#06c; text-decoration: none!important} | |||
i,em{font-style: normal;} | |||
.clearfix:after, .clearfix:before { | |||
display: table; | |||
content: " " | |||
} | |||
.clearfix:after { | |||
clear: both | |||
} | |||
.pulll_left{float:left;} | |||
.pulll_right{float:right;} | |||
/*谷哥滚动条样式*/ | |||
::-webkit-scrollbar {width:5px;height:5px;position:absolute} | |||
::-webkit-scrollbar-thumb {background-color:#5bc0de} | |||
::-webkit-scrollbar-track {background-color:#ddd} | |||
/***/ | |||
.loading{position:fixed; left:0; top:0; font-size:.3rem; z-index:100000000;width:100%; height:100%; background:#1a1a1c; text-align:center;} | |||
.loadbox{position:absolute; width:160px;height:150px; color: #324e93; left:50%; top:50%; margin-top:-100px; margin-left:-75px;} | |||
.loadbox img{ margin:10px auto; display:block; width:40px;} | |||
.head{ height:1.05rem; background: url(../images/head_bg.png) no-repeat center center; background-size: 100% 100%; position: relative} | |||
.head h1{ color:#bde4ff; text-align: center; font-size: .4rem; line-height:1.05rem; letter-spacing: .06rem;} | |||
.head h1 img{ width:1.5rem; display: inline-block; vertical-align: middle; margin-right: .2rem} | |||
html,body{height: 100%;} | |||
.mainbox{ padding:.4rem 0rem 0rem 0rem; height:calc(100% - 1.05rem); } | |||
.mainbox>ul{ margin-left:.1rem; margin-right:.1rem; height: 100%;} | |||
.mainbox>ul>li{ float: left; padding: 0 .13rem;height: 100%;} | |||
.mainbox>ul>li{ width: 25%} | |||
.mainbox>ul>li:nth-child(2){ width: 50%} | |||
.boxall{ border: 1px solid #3486da; background: rgba(0,70,190,.1); padding:.15rem; position: relative; margin-bottom: .25rem; z-index: 10;} | |||
.boxall:before, | |||
.boxall:after{ position:absolute; width: .15rem; height: .15rem; content: ""; border-top: 3px solid #3486da; top: -2px;} | |||
.boxall:before,.boxfoot:before{border-left: 3px solid #3486da;left:-2px;} | |||
.boxall:after,.boxfoot:after{border-right: 3px solid #3486da; right: -2px;} | |||
.boxfoot{ position:absolute; bottom: 0; width: 100%; left:0;} | |||
.boxfoot:before, | |||
.boxfoot:after{ position:absolute; width: .15rem; height: .15rem; content: "";border-bottom:3px solid #3486da; bottom:-2px;} | |||
.tit01{background: linear-gradient(to right,rgba(48,82,174,1),rgba(48,82,174,0)); color: #fff; font-size: .17rem; padding: .03rem .1rem;} | |||
.tit02{ background: #3aafe8; color: #021132; position: absolute; font-size: .25rem; padding: .02rem 0; text-align: center; width: 2.4rem; left: 50%; margin-left: -1.2rem; margin-top: -.35rem; letter-spacing: .05rem;} | |||
.tit03{text-align: center; color: #fff;font-size: .25rem; line-height: .5rem; letter-spacing: .05rem;} | |||
.tit04{text-align: center; background: #0c2854; color: #fff;font-size: .25rem; line-height: .6rem; letter-spacing: .05rem;} | |||
.wrap{ height:2.54rem; overflow: hidden;} | |||
.wrap li{ line-height:.42rem; height:.42rem; font-size: .18rem; text-indent: .24rem; margin-bottom: .1rem; } | |||
.wrap li p{border: 1px solid rgba(25,186,139,.17);color: rgba(255,255,255,.6); } | |||
.boxnav{} | |||
.nav01{ height: calc(100% - .3rem); padding-top: .2rem;} | |||
.nav02{ height: calc(100%); display: flex; align-items: center;} | |||
.nav03{ height: calc(100% - .47rem); padding-top: .2rem;} | |||
.nav04{ height: calc(100% - .7rem);} | |||
.nav02>div{width: 100%;} | |||
.nav02 p{text-align: center; color: #fff;} | |||
.nav02 .p1{font-size: .3rem; letter-spacing: .02rem;} | |||
.p2{font-size: .6rem; letter-spacing: .05rem; padding: .1rem 0; width: 100%; text-align: center;} | |||
.nav02 .p3 span{text-align: center; color: #fff; display: inline-block; width: 45%;font-size: .3rem;} | |||
.dot{width: .2rem;height: .2rem; display: inline-block; border-radius: 1rem; position: relative; top: .04rem; margin-right: .1rem; } | |||
.dot1{background: #ff0006} | |||
.dot2{background: #00ea37} | |||
.text-green{ color: #00ea37} | |||
.text-red{ color: #ff0006;} | |||
.listhead{height: .55rem; display: flex; justify-content: space-between; } | |||
.listnav{height:calc(100% - .55rem); } | |||
.listnav ul li{height: 100%; display: flex; justify-content: flex-start; } | |||
.listhead span,.listnavstatus li span{width: 100%; align-items: center; justify-content: center; display: flex;height: .55rem;} | |||
.listhead1 span,.listnav1 li span{border: 1px solid #3486da;} | |||
.listnav ul li span{ font-size:.18rem;width: 20%; margin-left: 1%;} | |||
.listnav2 ul li:nth-child(odd){ background: #0c2854;} | |||
.listhead1 span{background: #0c2854; font-size: .2rem; color: #3486da; font-weight: bold;} | |||
.listhead2 span{ font-size: .2rem; color: #3486da; border-bottom: 1px solid #0c2854; font-weight: bold;} | |||
.listnav li span{width: 100%; align-items: center; justify-content: center; display: flex;height: .55rem;} | |||
.listnavstatus{height:calc(100% - .55rem); } | |||
.listnavstatus ul li{height: 100%; display: flex; justify-content: space-between;} | |||
.listnavstatus ul li span{ font-size:.18rem;} | |||
/* .listhead{height: .55rem; display: flex; justify-content: space-between; } | |||
.listnav{height:calc(100% - .55rem); } | |||
.listnav ul li{height: 100%; display: flex; justify-content: space-between;} | |||
.listhead span,.listnav li span{width: 100%; align-items: center; justify-content: center; display: flex;height: .55rem;} | |||
.listhead1 span,.listnav1 li span{border: 1px solid #3486da;} | |||
.listnav ul li span{ font-size:.18rem;} | |||
.listnav2 ul li:nth-child(odd){ background: #0c2854;} | |||
.listhead1 span{background: #0c2854; font-size: .2rem; color: #3486da; font-weight: bold;} | |||
.listhead2 span{ font-size: .2rem; color: #3486da; border-bottom: 1px solid #0c2854; font-weight: bold;} */ | |||
.flexbox { | |||
display: flex; | |||
flex-direction: row; | |||
justify-content: flex-start; | |||
width: 100%; | |||
height: .55rem; | |||
} | |||
.flexbox span{ font-size: .2rem; color: #3486da; border-bottom: 1px solid #0c2854; font-weight: bold;width: 20%; margin-left: 1.5%;} | |||
.clearfix:after, .clearfix:before {display: table;content: " "} | |||
.clearfix:after {clear: both} | |||
.yqlist li{float: left; width: 25%; padding:0 0; text-align: center;} | |||
.yq{width:170px; height: 170px; margin: 0 auto 5px auto; position: relative; display: flex; justify-content: center;align-items: center; font-size: 30px;font-family:electronicFont;color: #fff32b;} | |||
.yqlist li span{ font-size: 18px;} | |||
.yq:before{position: absolute; width: 100%; height: 100%; content: ""; background: url(../images/img1.png) center center; border-radius: 100px; background-size: 100% 100%; opacity:.3; | |||
left:0; top: 0; animation: myfirst2 15s infinite linear;} | |||
.yq:after{position: absolute; width: 86%; background: url(../images/img2.png) center center; border-radius: 100px; background-size: 100% 100%; opacity:.3; | |||
height: 86%; content: ""; left:7%; top: 7%; animation: myfirst 15s infinite linear;} | |||
@keyframes myfirst | |||
{ | |||
to { transform: rotate(-360deg)} | |||
} | |||
@keyframes myfirst2 | |||
{ | |||
to { transform: rotate(360deg)} | |||
} | |||
/*Plugin CSS*/ | |||
.str_wrap { | |||
overflow:hidden; | |||
width:100%; | |||
position:relative; | |||
-moz-user-select: none; | |||
-khtml-user-select: none; | |||
user-select: none; | |||
white-space:nowrap; | |||
} | |||
.str_move { | |||
white-space:nowrap; | |||
position:absolute; | |||
top:0; | |||
left:0; | |||
cursor:move; | |||
} | |||
.str_move_clone { | |||
display:inline-block; | |||
vertical-align:top; | |||
position:absolute; | |||
left:100%; | |||
top:0; | |||
} | |||
.str_vertical .str_move_clone { | |||
left:0; | |||
top:100%; | |||
} | |||
.str_down .str_move_clone { | |||
left:0; | |||
bottom:100%; | |||
} | |||
.str_vertical .str_move, | |||
.str_down .str_move { | |||
white-space:normal; | |||
width:100%; | |||
} | |||
.str_static .str_move, | |||
.no_drag .str_move, | |||
.noStop .str_move{ | |||
cursor:inherit; | |||
} | |||
.str_wrap img { | |||
max-width:none !important; | |||
} | |||
.payment-time{ | |||
padding-right: 10px; | |||
} |
@@ -0,0 +1,298 @@ | |||
<!doctype html> | |||
<html> | |||
<head> | |||
<meta charset="utf-8"> | |||
<title>申唐工厂监控大屏</title> | |||
<script type="text/javascript" src="js/jquery.js"></script> | |||
<link rel="stylesheet" href="css/comon0.css"> | |||
</head> | |||
<body> | |||
<div class="loading"> | |||
<div class="loadbox"> <img src="images/loading.gif"> 页面加载中... </div> | |||
</div> | |||
<div class="head"> | |||
<h1>申唐工厂监控大屏</h1> | |||
</div> | |||
<div class="mainbox"> | |||
<ul class="clearfix"> | |||
<li> | |||
<div class="boxall" style="height:calc(33.3333% - .25rem)"> | |||
<div class="tit01">告警统计</div> | |||
<div class="boxnav nav01" id="echart1"></div> | |||
<div class="boxfoot"></div> | |||
</div> | |||
<div class="boxall" style="height:calc(33.3333% - .25rem); margin-bottom: .25rem;"> | |||
<div class=" tit01">原料用量统计</div> | |||
<div class="boxnav nav01" id="echart2"></div> | |||
<div class="boxfoot"></div> | |||
</div> | |||
<div class="boxall" style="height:calc(33.3333% - .25rem)"> | |||
<div class="tit01">产量统计</div> | |||
<div class="boxnav nav01" id="echart3"></div> | |||
<div class="boxfoot"></div> | |||
</div> | |||
</li> | |||
<li> | |||
<div class="boxall" style="height:calc(33.33333% - .25rem)"> | |||
<div class="tit02">本月计划</div> | |||
<div class="boxnav nav02"> | |||
<div class="yqlist"> | |||
<ul class="clearfix"> | |||
<li> | |||
<div class="yq" style="color: #00ea37;" id="yq">77.1%</div> | |||
<span style="color: #00ea37;">完成率</span> | |||
</li> | |||
<li> | |||
<div class="yq">52367</div> | |||
<span style="color: yellow;">未完成数量</span> | |||
</li> | |||
<li> | |||
<div class="yq" style="color: deepskyblue;">68000</div> | |||
<span style="color: deepskyblue;">计划产量</span> | |||
</li> | |||
<li> | |||
<div class="yq" style="color: #ff0006;">120</div> | |||
<span style="color: #ff0006;">报废数量</span> | |||
</li> | |||
</ul> | |||
</div> | |||
</div> | |||
<div class="boxfoot"></div> | |||
</div> | |||
<div class="boxall" style="height:calc(66.666666% - .25rem)"> | |||
<div class="tit03">炒锅炒制进度</div> | |||
<div class="boxnav nav03"> | |||
<div class="listhead listhead1"> | |||
<span>炒锅名称</span> | |||
<span>成品名称</span> | |||
<span>开始时间</span> | |||
<span>结束时间</span> | |||
<span>总耗时时间</span> | |||
<span>完成进度</span> | |||
</div> | |||
<div class="listnavstatus listnav1 scrollDiv"> | |||
<ul> | |||
<li> <span class="text-green">炒锅1</span> <span class="text-green">麻辣火锅</span> <span | |||
class="text-green">11:15:43</span> | |||
<span class="text-green">14:15:43</span> <span class="text-green">180 min</span> | |||
<span class="text-green">100%</span> | |||
</li> | |||
<li> <span>炒锅2</span> <span>麻辣火锅</span> <span>11:15:43</span> | |||
<span>13:15:43</span> <span>120 min</span> <span class="text-wite">66%</span> | |||
</li> | |||
<li> <span class="text-green">炒锅3</span> <span class="text-green">麻辣火锅</span> <span | |||
class="text-green">11:15:43</span> | |||
<span class="text-green">14:15:43</span> <span class="text-green">180 min</span> | |||
<span class="text-green">100%</span> | |||
</li> | |||
<li> <span>炒锅4</span> <span>麻辣火锅</span> <span>11:15:43</span> | |||
<span>13:15:43</span> <span>120 min</span> <span class="text-wite">66%</span> | |||
</li> | |||
<li> <span class="text-green">炒锅5</span> <span class="text-green">麻辣火锅</span> <span | |||
class="text-green">11:15:43</span> | |||
<span class="text-green">14:15:43</span> <span class="text-green">180 min</span> | |||
<span class="text-green">100%</span> | |||
</li> | |||
<li> <span>炒锅6</span> <span>麻辣火锅</span> <span>11:15:43</span> | |||
<span>13:15:43</span> <span>120 min</span> <span class="text-wite">66%</span> | |||
</li> | |||
<li> <span class="text-green">炒锅7</span> <span class="text-green">麻辣火锅</span> <span | |||
class="text-green">11:15:43</span> | |||
<span class="text-green">14:15:43</span> <span class="text-green">180 min</span> | |||
<span class="text-green">100%</span> | |||
</li> | |||
<li> <span>炒锅8</span> <span>麻辣火锅</span> <span>11:15:43</span> | |||
<span>13:15:43</span> <span>120 min</span> <span class="text-wite">66%</span> | |||
</li> | |||
<li> <span class="text-green">炒锅9</span> <span class="text-green">麻辣火锅</span> <span | |||
class="text-green">11:15:43</span> | |||
<span class="text-green">14:15:43</span> <span class="text-green">180 min</span> | |||
<span class="text-green">100%</span> | |||
</li> | |||
<li> <span>炒锅10</span> <span>麻辣火锅</span> <span>11:15:43</span> | |||
<span>13:15:43</span> <span>120 min</span> <span class="text-wite">66%</span> | |||
</li> | |||
</ul> | |||
</div> | |||
</div> | |||
<div class="boxfoot"></div> | |||
</div> | |||
</li> | |||
<li> | |||
<div class="boxall" style="height:calc(100% - .25rem); padding: 0;"> | |||
<div class="tit04">设备告警信息</div> | |||
<div class="boxnav nav04"> | |||
<div class="flexbox"> | |||
<span>报警日期</span> | |||
<span>报警时间</span> | |||
<span>报警信息</span> | |||
</div> | |||
<div class="listnav listnav2 scrollDiv"> | |||
<ul class="smjl"> | |||
<li> | |||
<span class="text-red">2023-8-22</span> | |||
<span class="text-red">11:32:21</span> | |||
<span style="width: auto;" class="text-red"> 1号炒锅温度过高 </span> | |||
</li> | |||
<li> | |||
<span class="text-red">2023-8-22</span> | |||
<span class="text-red">11:32:21</span> | |||
<span style="width: auto;" class="text-red"> 1号炒锅急停 </span> | |||
</li> | |||
<li> | |||
<span class="text-red">2023-8-22</span> | |||
<span class="text-red">11:32:21</span> | |||
<span style="width: auto;" class="text-red"> 2号输送线伺服报警 </span> | |||
</li> | |||
<li> | |||
<span class="text-red">2023-8-22</span> | |||
<span class="text-red">11:32:21</span> | |||
<span style="width: auto;" class="text-red"> 2号输送线气缸未打开 </span> | |||
</li> | |||
<li> | |||
<span class="text-red">2023-8-22</span> | |||
<span class="text-red">11:32:21</span> | |||
<span style="width: auto;" class="text-red"> 2号炒锅离线 </span> | |||
</li> | |||
<li> | |||
<span class="text-red">2023-8-22</span> | |||
<span class="text-red">11:32:21</span> | |||
<span style="width: auto;" class="text-red"> 1号机器人异常 </span> | |||
</li> | |||
<li> | |||
<span class="text-red">2023-8-22</span> | |||
<span class="text-red">11:32:21</span> | |||
<span style="width: auto;" class="text-red"> 2号油罐漏油 </span> | |||
</li> | |||
<li> | |||
<span class="text-red">2023-8-22</span> | |||
<span class="text-red">11:32:21</span> | |||
<span style="width: auto;" class="text-red"> 5号炒锅开盖异常 </span> | |||
</li> | |||
<li> | |||
<span class="text-red">2023-8-22</span> | |||
<span class="text-red">11:32:21</span> | |||
<span style="width: auto;" class="text-red"> 反应釜压力过高 </span> | |||
</li> | |||
<li> | |||
<span class="text-red">2023-8-22</span> | |||
<span class="text-red">11:32:21</span> | |||
<span style="width: auto;" class="text-red"> 原油管道流量过低 </span> | |||
</li> | |||
<li> | |||
<span class="text-red">2023-8-22</span> | |||
<span class="text-red">11:32:21</span> | |||
<span style="width: auto;" class="text-red"> 6号炒锅投料超时 </span> | |||
</li> | |||
<li> | |||
<span class="text-red">2023-8-22</span> | |||
<span class="text-red">11:32:21</span> | |||
<span style="width: auto;" class="text-red"> 5号输送线启动超时 </span> | |||
</li> | |||
<li> | |||
<span class="text-red">2023-8-22</span> | |||
<span class="text-red">11:32:21</span> | |||
<span style="width: auto;" class="text-red"> 3号输送线异常停机 </span> | |||
</li> | |||
<li> | |||
<span class="text-red">2023-8-22</span> | |||
<span class="text-red">11:32:21</span> | |||
<span style="width: auto;" class="text-red"> 8号炒锅投料错误 </span> | |||
</li> | |||
<li> | |||
<span class="text-red">2023-8-22</span> | |||
<span class="text-red">11:32:21</span> | |||
<span style="width: auto;" class="text-red"> 1号包装机故障 </span> | |||
</li> | |||
<li> | |||
<span class="text-red">2023-8-22</span> | |||
<span class="text-red">11:32:21</span> | |||
<span style="width: auto;" class="text-red"> 2号包装机故障 </span> | |||
</li> | |||
<li> | |||
<span class="text-red">2023-8-22</span> | |||
<span class="text-red">11:32:21</span> | |||
<span style="width: auto;" class="text-red"> 3号包装机故障 </span> | |||
</li> | |||
<li> | |||
<span class="text-red">2023-8-22</span> | |||
<span class="text-red">11:32:21</span> | |||
<span style="width: auto;" class="text-red"> 1号灌装机故障 </span> | |||
</li> | |||
<li> | |||
<span class="text-red">2023-8-22</span> | |||
<span class="text-red">11:32:21</span> | |||
<span style="width: auto;" class="text-red"> 2号灌装机故障 </span> | |||
</li> | |||
<li> | |||
<span class="text-red">2023-8-22</span> | |||
<span class="text-red">11:32:21</span> | |||
<span style="width: auto;" class="text-red"> 3号灌装机故障 </span> | |||
</li> | |||
<li> | |||
<span class="text-red">2023-8-22</span> | |||
<span class="text-red">11:32:21</span> | |||
<span style="width: auto;" class="text-red"> 4号灌装机故障 </span> | |||
</li> | |||
</ul> | |||
</div> | |||
</div> | |||
<div class="boxfoot"></div> | |||
</div> | |||
</li> | |||
</ul> | |||
</div> | |||
<script type="text/javascript" src="js/echarts.min.js"></script> | |||
<script src="js/jquery.liMarquee.js"></script> | |||
<script language="JavaScript" src="js/js.js"></script> | |||
<script type="text/javascript" src="js/jquery.countup.min.js"></script> | |||
<script type="text/javascript" src="js/jquery.waypoints.min.js"></script> | |||
<script type="text/javascript"> | |||
$('.counter').countUp(); | |||
$(function () { | |||
$('.scrollDiv').liMarquee({ | |||
direction: 'up',//身上滚动 | |||
runshort: false,//内容不足时不滚动 | |||
scrollamount: 20//速度 | |||
}); | |||
}); | |||
</script> | |||
<script src="js/countDown.js"></script> | |||
<script type="text/javascript"> | |||
$("input[name='countDown']").each(function () { | |||
var time_end = this.value; | |||
var con = $(this).next("span"); | |||
var _ = this.dataset; | |||
countDown(con, { | |||
time_end: time_end//开始时间 | |||
}) | |||
//提供3个事件分别为:启动,重启,停止 | |||
.on("countDownStarted countDownRestarted countDownEnded ", function (arguments) { | |||
console.info(arguments); | |||
}); | |||
}); | |||
</script> | |||
</body> | |||
</html> |
@@ -0,0 +1,169 @@ | |||
/* | |||
* 倒计时 小插件 | |||
* @since 2018/11/7 12:39 | |||
* @author FlyTiger | |||
* */ | |||
(function (global, factory) { | |||
typeof exports === "object" && typeof module !== "undefined" ? module.exports = factory() : typeof define === "function" && define.amd ? (function(){ define(["jquery"],factory);global.countDown = factory();})() : (global.countDown = factory()); | |||
})(this, function () { | |||
var ___=window; | |||
//模板 | |||
var $defaultTitle=["距离","开始","还有"]; | |||
var $template="<span class=\"active-time pull-right\"><em class=\"time_d sd\"></em><span class=\"sd\">天</span><em class=\"time_h sh\"></em><span class=\"sh\">时</span><em class=\"time_m sm\"></em><span class=\"sm\">分</span><em class=\"time_s\"></em>秒"; | |||
//事件 | |||
var events={ | |||
started:"countDownStarted",//开启 | |||
ended:"countDownEnded",//结束 | |||
restarted:"countDownRestarted"//重启 | |||
}; | |||
//方法 | |||
var fns={ | |||
//标题处理 | |||
_title:function(){ | |||
var _opts=this.opts; | |||
var $prefix=this.$timeEms_.$prefix,$suffix=this.$timeEms_.$suffix; | |||
if((_opts.title&&_opts.title.length)||(!_opts.prefix&&!_opts.suffix)){ | |||
var _1= [].concat($defaultTitle); | |||
_1.splice(1,1,_opts.title||$defaultTitle[1]); | |||
$prefix.html(_1.join("")); | |||
}else{ | |||
$prefix.html(_opts.prefix||""); | |||
$suffix.html(_opts.suffix||""); | |||
} | |||
}, | |||
//初始化 | |||
prepare:function(){ | |||
fns._title.call(this); | |||
fns._f.call(this); | |||
}, | |||
_f:function () { | |||
var _this=this; | |||
var time_end=this.opts.time_end||new Date().getTime(); | |||
var _ems=this.$timeEms_; | |||
var f_=function _f(_time_end){ | |||
var time_start = new Date().getTime(); //设定当前时间 | |||
var time_end = new Date(_time_end).getTime(); //设定目标时间 | |||
// 计算时间差 | |||
var time_distance = time_start - time_end; | |||
/***** | |||
if(time_distance<86400000){ | |||
$("title").text(time_distance) | |||
$(".sd").hide() | |||
} | |||
if(time_distance<3600000){ | |||
$(".sh").hide() | |||
} | |||
if(time_distance<60000){ | |||
$(".sm").hide() | |||
} | |||
***/ | |||
if(time_distance<1){ | |||
if(_this._timestamp_){ | |||
clearTimeout(_this._timestamp_); | |||
} | |||
_this._runing++; | |||
_this.$container_.hide().triggerHandler(events.ended,[_this._runing,time_start]); | |||
return false; | |||
} | |||
// 天 | |||
var int_day = Math.floor(time_distance/86400000) | |||
time_distance -= int_day * 86400000; | |||
// 时 | |||
var int_hour = Math.floor(time_distance/3600000) | |||
time_distance -= int_hour * 3600000; | |||
// 分 | |||
var int_minute = Math.floor(time_distance/60000) | |||
time_distance -= int_minute * 60000; | |||
// 秒 | |||
var int_second = Math.floor(time_distance/1000) | |||
/****时分秒为单数时、前面加零 | |||
if(int_day < 10){ | |||
int_day = "0" + int_day; | |||
} | |||
if(int_hour < 10){ | |||
int_hour = "0" + int_hour; | |||
} | |||
if(int_minute < 10){ | |||
int_minute = "0" + int_minute; | |||
} | |||
if(int_second < 10){ | |||
int_second = "0" + int_second; | |||
}****/ | |||
// 显示时间 | |||
_ems.$d.html(int_day); | |||
_ems.$h.html(int_hour); | |||
_ems.$m.html(int_minute); | |||
_ems.$s.html(int_second); | |||
// 设置定时器 | |||
if(_this._timestamp_){ | |||
clearTimeout(_this._timestamp_); | |||
} | |||
_this._timestamp_=setTimeout(function (_) { | |||
_f(_); | |||
},1000,_time_end); | |||
}; | |||
if(this._runing){ | |||
this.$container_.triggerHandler(events.restarted,[this._runing]); | |||
}else{ | |||
this.$container_.triggerHandler(events.started,[this._runing]); | |||
} | |||
this.$container_.show(); | |||
f_(time_end); | |||
} | |||
}; | |||
/* | |||
* @param $container 倒计时容器 | |||
* @param $opts 参数{title,prefix,suffix,time_end},title优先级最高 | |||
* */ | |||
var CountDown=function ($container,$opts) { | |||
var $container=$container.empty().html($template).addClass("payment-time"); | |||
// 显示时间 | |||
this.$timeEms_={ | |||
$d:$(".time_d",$container), | |||
$h:$(".time_h",$container), | |||
$m:$(".time_m",$container), | |||
$s:$(".time_s",$container), | |||
$prefix:$(".time_prefix",$container), | |||
$suffix:$(".time_suffix",$container), | |||
}; | |||
this.$container_=$container; | |||
this.opts=$opts||{}; | |||
this._runing=0;//初始执行 | |||
//初始化 | |||
fns.prepare.call(this); | |||
}; | |||
//重新设置参数 | |||
CountDown.prototype.setOpts=function($opts){ | |||
this.opts=$.extend(this.opts, $opts||{}); | |||
this._runing++; | |||
fns.prepare.call(this); | |||
}; | |||
//绑定事件 | |||
CountDown.prototype.on=function () { | |||
___.jQuery.fn.on.apply(this.$container_,arguments); | |||
if(this._runing<1){ | |||
this.$container_.triggerHandler(events.started,[this._runing]); | |||
} | |||
return this; | |||
}; | |||
//解除事件 | |||
CountDown.prototype.off=function () { | |||
___.jQuery.fn.off.apply(this.$container_,arguments); | |||
return this; | |||
}; | |||
return function($container,$opts){ | |||
if(!___.jQuery){ | |||
throw new Error("jQuery is required for this plugin"); | |||
} | |||
if(!$container||!$container.length){ | |||
throw new Error("The container you given is not useful!"); | |||
} | |||
return new CountDown($container,$opts); | |||
} | |||
}); |
@@ -0,0 +1 @@ | |||
!function(t){"use strict";t.fn.countUp=function(e){var a=t.extend({time:2e3,delay:10},e);return this.each(function(){var e=t(this),n=a,u=function(){e.data("counterupTo")||e.data("counterupTo",e.text());var t=parseInt(e.data("counter-time"))>0?parseInt(e.data("counter-time")):n.time,a=parseInt(e.data("counter-delay"))>0?parseInt(e.data("counter-delay")):n.delay,u=t/a,r=e.data("counterupTo"),o=[r],c=/[0-9]+,[0-9]+/.test(r);r=r.replace(/,/g,"");for(var d=(/^[0-9]+$/.test(r),/^[0-9]+\.[0-9]+$/.test(r)),s=d?(r.split(".")[1]||[]).length:0,i=u;i>=1;i--){var p=parseInt(Math.round(r/u*i));if(d&&(p=parseFloat(r/u*i).toFixed(s)),c)for(;/(\d+)(\d{3})/.test(p.toString());)p=p.toString().replace(/(\d+)(\d{3})/,"$1,$2");o.unshift(p)}e.data("counterup-nums",o),e.text("0");var f=function(){e.text(e.data("counterup-nums").shift()),e.data("counterup-nums").length?setTimeout(e.data("counterup-func"),a):(delete e.data("counterup-nums"),e.data("counterup-nums",null),e.data("counterup-func",null))};e.data("counterup-func",f),setTimeout(e.data("counterup-func"),a)};e.waypoint(u,{offset:"100%",triggerOnce:!0})})}}(jQuery); |
@@ -0,0 +1,300 @@ | |||
$(window).load(function(){ | |||
$(".loading").fadeOut() | |||
}) | |||
/****/ | |||
/****/ | |||
$(document).ready(function(){ | |||
var whei=$(window).width() | |||
$("html").css({fontSize:whei/20}) | |||
$(window).resize(function(){ | |||
var whei=$(window).width() | |||
$("html").css({fontSize:whei/20}) | |||
}); | |||
}); | |||
$(function () { | |||
echarts_1(); | |||
echarts_2(); | |||
echarts_3(); | |||
function echarts_1() { | |||
var myChart = echarts.init(document.getElementById('echart1')); | |||
var salvProName =['炒制区', '内包装区', '前处理区', '外包装区', '配料区']; | |||
var salvProValue =[683, 523, 345,234, 234]; | |||
var salvProMax =[];//背景按最大值 | |||
for (let i = 0; i < salvProValue.length; i++) { | |||
salvProMax.push(salvProValue[0]) | |||
} | |||
option = { | |||
grid: { | |||
left: '2%', | |||
right: '2%', | |||
bottom: '-6%', | |||
top: '8%', | |||
containLabel: true | |||
}, | |||
tooltip: { | |||
trigger: 'axis', | |||
axisPointer: { | |||
type: 'none' | |||
}, | |||
formatter: function(params) { | |||
return params[0].name + ' : ' + params[0].value | |||
} | |||
}, | |||
xAxis: { | |||
show: false, | |||
type: 'value' | |||
}, | |||
yAxis: [{ | |||
type: 'category', | |||
inverse: true, | |||
axisLabel: { | |||
show: true, | |||
textStyle: { | |||
color: '#fff' | |||
}, | |||
}, | |||
splitLine: { | |||
show: false | |||
}, | |||
axisTick: { | |||
show: false | |||
}, | |||
axisLine: { | |||
show: false | |||
}, | |||
data: salvProName | |||
}, { | |||
type: 'category', | |||
inverse: true, | |||
axisTick: 'none', | |||
axisLine: 'none', | |||
show: true, | |||
axisLabel: { | |||
textStyle: { | |||
color: '#ffffff', | |||
fontSize: '12' | |||
}, | |||
}, | |||
data:salvProValue | |||
}], | |||
series: [{ | |||
name: '值', | |||
type: 'bar', | |||
zlevel: 1, | |||
itemStyle: { | |||
normal: { | |||
barBorderRadius: 30, | |||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ | |||
offset: 0, | |||
color: 'rgb(57,89,255,1)' | |||
}, { | |||
offset: 1, | |||
color: 'rgb(46,200,207,1)' | |||
}]), | |||
}, | |||
}, | |||
barWidth: 10, | |||
data: salvProValue | |||
}, | |||
{ | |||
name: '背景', | |||
type: 'bar', | |||
barWidth: 10, | |||
barGap: '-100%', | |||
data: salvProMax, | |||
itemStyle: { | |||
normal: { | |||
color: 'rgba(24,31,68,1)', | |||
barBorderRadius: 30, | |||
} | |||
}, | |||
}, | |||
] | |||
}; | |||
// 使用刚指定的配置项和数据显示图表。 | |||
myChart.setOption(option); | |||
window.addEventListener("resize", function () { | |||
myChart.resize(); | |||
}); | |||
} | |||
function echarts_2() { | |||
// 基于准备好的dom,初始化echarts实例 | |||
var myChart = echarts.init(document.getElementById('echart2')); | |||
option = { | |||
tooltip: { | |||
trigger: 'axis', | |||
axisPointer: { | |||
type: 'shadow' | |||
} | |||
}, | |||
grid: { | |||
left: '0%', | |||
top:'15px', | |||
right: '0%', | |||
bottom: '0%', | |||
containLabel: true | |||
}, | |||
xAxis: { | |||
data: ['色拉油', '清花椒', '豆瓣', '红花椒', '白酒', '生姜', '洋葱', '盐'], | |||
axisLine: {show:false,}, | |||
axisLabel: { | |||
color: '#fff', | |||
fontSize: 12 | |||
} | |||
}, | |||
yAxis: { | |||
name: "(人)", | |||
nameTextStyle: { | |||
color: '#fff', | |||
fontSize: 14 | |||
}, | |||
axisLine: { show:false, }, | |||
axisLabel: { | |||
color: '#fff', | |||
fontSize: 12 | |||
}, | |||
splitLine: {show:false, }, | |||
interval:100, | |||
max:500 | |||
}, | |||
series: [{ | |||
type: 'bar', | |||
barWidth: '30%', | |||
itemStyle:{ | |||
normal:{ | |||
barBorderRadius: 50, | |||
color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ | |||
offset: 0, | |||
color: '#01fdcc' | |||
}, { | |||
offset: 0.8, | |||
color: '#11a1d8' | |||
}], false) | |||
} | |||
}, | |||
data: [80, 325, 164, 245, 475, 201, 121,150] | |||
}] | |||
}; | |||
// 使用刚指定的配置项和数据显示图表。 | |||
myChart.setOption(option); | |||
window.addEventListener("resize",function(){ | |||
myChart.resize(); | |||
}); | |||
} | |||
function echarts_3() { | |||
var myChart = echarts.init(document.getElementById('echart3')); | |||
option = { | |||
tooltip: { | |||
trigger: 'axis', | |||
axisPointer: { | |||
lineStyle: { | |||
color: '#57617B' | |||
} | |||
}, | |||
formatter: '{b}:<br/> 产量:{c}' | |||
}, | |||
grid: { | |||
left: '0', | |||
right: '20', | |||
top: '10', | |||
bottom: '0', | |||
containLabel: true | |||
}, | |||
xAxis: [{ | |||
type: 'category', | |||
boundaryGap: false, | |||
axisLine: { | |||
show: false, | |||
lineStyle: { | |||
color: 'rgba(255,255,255,.6)' | |||
} | |||
}, | |||
data: ['1月', '2月', '3月', '4月', '5月', '6月'] | |||
}], | |||
yAxis: [{ | |||
axisLabel: { | |||
show: true, | |||
textStyle: { | |||
color: 'rgba(255,255,255,.6)' | |||
} | |||
}, | |||
axisLine: { | |||
show: false, | |||
}, | |||
splitLine: { | |||
lineStyle: { | |||
type:'dotted', | |||
color: 'rgba(255,255,255,.1)' | |||
} | |||
} | |||
}], | |||
series: [{ | |||
name: '产量:', | |||
type: 'line', | |||
//smooth: true, | |||
symbol: 'circle', | |||
symbolSize: 5, | |||
//showSymbol: false, | |||
lineStyle: { | |||
normal: { | |||
width: 2 | |||
} | |||
}, | |||
areaStyle: { | |||
normal: { | |||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ | |||
offset: 0, | |||
color: 'rgba(98, 201, 141, 0.5)' | |||
}, { | |||
offset: 1, | |||
color: 'rgba(98, 201, 141, 0.1)' | |||
}], false), | |||
shadowColor: 'rgba(0, 0, 0, 0.1)', | |||
shadowBlur: 10 | |||
} | |||
}, | |||
itemStyle: { | |||
normal: { | |||
color: '#4cb9cf', | |||
borderColor: 'rgba(98, 201, 141,0.27)', | |||
borderWidth: 12 | |||
} | |||
}, | |||
data: [1000, 1200, 1300, 1200, 1500, 2000] | |||
}] | |||
}; | |||
// 使用刚指定的配置项和数据显示图表。 | |||
myChart.setOption(option); | |||
window.addEventListener("resize", function () { | |||
myChart.resize(); | |||
}); | |||
} | |||
}) | |||