You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1928 lines
79 KiB
1928 lines
79 KiB
<!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>智慧工厂运行监控中心</title>
|
|
<link rel='shortcut icon' type='image/x-icon' href='../favicon.ico' />
|
|
<script type="text/javascript" src="./js/jquery-1.7.2.min.js"></script>
|
|
<!-- <script src="./js/echarts.min.js"></script> -->
|
|
<script src="./js/echarts5_0_1.min.js"></script>
|
|
<script src="./js/scroll/scroll.js"></script>
|
|
|
|
<script src="./js/echarts-liquidfill.js"></script>
|
|
</head>
|
|
<style>
|
|
html, body, h1, h2, h3, h4, h5, h6, div, dl, dt, dd, ul, ol, li, p, blockquote, pre, hr, figure, table, caption, th, td, form, fieldset, legend, input, button, textarea, menu {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
body {
|
|
/* height: 100%; */
|
|
width: 2912px;
|
|
height: 1040px;
|
|
/* background: linear-gradient(0deg, #0C0771, #0249B3,#0C0771); */
|
|
/* opacity: 0.15; */
|
|
background: url('img/bg-big.png') no-repeat;
|
|
/* background-size: 100% 100%; */
|
|
-moz-osx-font-smoothing: grayscale;
|
|
-webkit-font-smoothing: antialiased;
|
|
text-rendering: optimizeLegibility;
|
|
font-family: Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
|
|
}
|
|
|
|
label {
|
|
font-weight: 700;
|
|
}
|
|
|
|
html {
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
.pointer {
|
|
cursor: pointer;
|
|
}
|
|
.text-align {
|
|
text-align: center;
|
|
}
|
|
.right-align {
|
|
text-align: right;
|
|
}
|
|
.left-align {
|
|
text-align: left;
|
|
}
|
|
*,
|
|
*:before,
|
|
*:after {
|
|
box-sizing: inherit;
|
|
}
|
|
.app-container {
|
|
position: relative;
|
|
width: 2912px;
|
|
height: 935px;
|
|
padding: 0 25px 15px;
|
|
}
|
|
.header-container {
|
|
position: relative;
|
|
background: url("img/title-bg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
width: 100%;
|
|
height: 84px;
|
|
text-align: center;
|
|
margin: 0 auto;
|
|
margin-bottom: 20px;
|
|
}
|
|
.header-container p {
|
|
position: relative;
|
|
display: inline-block;
|
|
height: 84px;
|
|
width: 500px;
|
|
line-height: 84px;
|
|
color: rgb(204,255,255);
|
|
text-align: center;
|
|
/* font-size: 40px; */
|
|
font-size: 36px;
|
|
font-weight: bold;
|
|
}
|
|
.top-container {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 120px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.top-block {
|
|
position: relative;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
width: 290px;
|
|
height: 120px;
|
|
padding: 12px 19px;
|
|
margin-right: 22px;
|
|
background: rgba(0, 160, 233, 0.25);
|
|
border-radius: 5px;
|
|
border-right: 1px solid;
|
|
border-left: 1px solid;
|
|
border-image: -webkit-linear-gradient(-180deg, rgba(255,255,255,0.00) 0%,#00BBF2 20%, rgba(255,255,255,0.00) 99%) 2 2 2 2;
|
|
border-image: -moz-linear-gradient(-180deg, rgba(255,255,255,0.00) 0%,#00BBF2 20%, rgba(255,255,255,0.00) 99%) 2 2 2 2;
|
|
border-image: linear-gradient(180deg, rgba(255,255,255,0.00) 0%,#00baf2af 50%, rgba(255,255,255,0.00) 99%) 2 2 2 2;
|
|
}
|
|
.top-block:last-child {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 290px;
|
|
height: 120px;
|
|
margin-right:0;
|
|
background: rgba(0, 160, 233, 0.25);
|
|
border-radius: 5px;
|
|
border-right: 1px solid;
|
|
border-left: 1px solid;
|
|
border-image: -webkit-linear-gradient(-180deg, rgba(255,255,255,0.00) 0%,#00BBF2 20%, rgba(255,255,255,0.00) 99%) 2 2 2 2;
|
|
border-image: -moz-linear-gradient(-180deg, rgba(255,255,255,0.00) 0%,#00BBF2 20%, rgba(255,255,255,0.00) 99%) 2 2 2 2;
|
|
border-image: linear-gradient(180deg, rgba(255,255,255,0.00) 0%,#00baf2af 50%, rgba(255,255,255,0.00) 99%) 2 2 2 2;
|
|
}
|
|
.left-container {
|
|
position: relative;
|
|
display: inline-block;
|
|
height: calc(100% - 245px);
|
|
width: 515px;
|
|
vertical-align: top;
|
|
margin: 0 5px;
|
|
}
|
|
.center-container {
|
|
position: relative;
|
|
display: inline-block;
|
|
height: calc(100% - 140px);
|
|
width: 800px;
|
|
/* margin: 0 15px; */
|
|
margin: 0 5px;
|
|
vertical-align: top;
|
|
/* background: url('img/border.png') no-repeat; */
|
|
/* background-size: 100% 100%; */
|
|
}
|
|
.right-container {
|
|
position: relative;
|
|
display: inline-block;
|
|
height: calc(100% - 245px);
|
|
width: 750px;
|
|
vertical-align: top;
|
|
}
|
|
.top-title {
|
|
height: 34px;
|
|
line-height: 17px;
|
|
/* font-size: 18px; */
|
|
font-size: 16px;
|
|
font-family: Microsoft YaHei;
|
|
font-weight: 400;
|
|
color: #59D4FC;
|
|
}
|
|
|
|
|
|
|
|
.container-block-small {
|
|
position: relative;
|
|
margin-bottom: 15px;
|
|
background: url('img/border-small.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
height: 380px;
|
|
}
|
|
.content-block {
|
|
position: relative;
|
|
width: 100%;
|
|
color: #fff;
|
|
height: calc(100% - 40px);
|
|
font-size: 20px;
|
|
}
|
|
.title-block {
|
|
position: relative;
|
|
display: inline-block;
|
|
padding-top: 10px;
|
|
line-height: 40px;
|
|
color: #73dcfe;
|
|
/* font-size: 18px; */
|
|
font-size: 16px;
|
|
height: 40px;
|
|
text-align: center;
|
|
}
|
|
.title-block:before {
|
|
position: absolute;
|
|
width: 120px;
|
|
height: 16px;
|
|
left: -140px;
|
|
top: 20px;
|
|
content: " ";
|
|
background: url('img/title-decorate-left.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.title-block:after {
|
|
position: absolute;
|
|
width: 120px;
|
|
height: 16px;
|
|
right: -140px;
|
|
top: 20px;
|
|
content: " ";
|
|
background: url('img/title-decorate-right.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
|
|
.scroll {
|
|
width: 100%;
|
|
height: 285px;
|
|
line-height: 26px;
|
|
font-size: 12px;
|
|
overflow: hidden;
|
|
}
|
|
.schedule {
|
|
position: absolute;
|
|
top: 5px;
|
|
width: 100%;
|
|
height: 8px;
|
|
background: #18275B;
|
|
border-radius: 4px;
|
|
}
|
|
.schedule .now {
|
|
position: absolute;
|
|
display: inline-block;
|
|
left: 0;
|
|
height: 8px;
|
|
background: linear-gradient(90deg, #1676E9, #57C7ED);
|
|
border-radius: 4px;
|
|
}
|
|
.schedule .text {
|
|
position: absolute;
|
|
right: 5px;
|
|
top: 0;
|
|
height: 8px;
|
|
line-height: 8px;
|
|
font-size: 8px;
|
|
}
|
|
.dis-flex {
|
|
display: -webkit-box;
|
|
display: -webkit-flex; /* Safari */
|
|
display: flex;
|
|
/* justify-content: center; */
|
|
justify-content:space-between;
|
|
align-items: center;
|
|
}
|
|
.flex-1 {
|
|
-webkit-box-flex: 1;
|
|
-webkit-flex: 1;
|
|
flex: 1;
|
|
}
|
|
.float-right {
|
|
float: right;
|
|
}
|
|
.top-align {
|
|
vertical-align: top;
|
|
}
|
|
.width-15 {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 15%;
|
|
font-size: 14px;
|
|
}
|
|
.width-20 {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 20%;
|
|
font-size: 14px;
|
|
}
|
|
.width-25 {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 25%;
|
|
font-size: 14px;
|
|
}
|
|
.width-30 {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 30%;
|
|
font-size: 14px;
|
|
}
|
|
.width-33 {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 33.3%;
|
|
}
|
|
.width-35 {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 35%;
|
|
font-size: 14px;
|
|
}
|
|
.width-40 {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 40%;
|
|
font-size: 14px;
|
|
}
|
|
.width-50 {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 50%;
|
|
font-size: 14px;
|
|
}
|
|
.width-60 {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 60%;
|
|
font-size: 14px;
|
|
}
|
|
.font-size-14 {
|
|
font-size: 14px;
|
|
}
|
|
.font-size-18 {
|
|
font-size: 18px;
|
|
}
|
|
.font-size-24 {
|
|
font-size: 24px;
|
|
}
|
|
.font-size-30 {
|
|
font-size: 30.0px;
|
|
}
|
|
.color-blue {
|
|
color: #00A0E9;
|
|
}
|
|
.color-blue2 {
|
|
color: #00AAFF;
|
|
}
|
|
.color-green {
|
|
color: #15CE31;
|
|
}
|
|
.color-orange {
|
|
color: #F44A4A;
|
|
}
|
|
.color-white {
|
|
color: #fff;
|
|
}
|
|
|
|
.color-yellow {
|
|
color: #F19149;
|
|
}
|
|
</style>
|
|
<style>
|
|
.goods-block {
|
|
margin: 10px 45px;
|
|
}
|
|
.detail-box {
|
|
position: relative;
|
|
width: 126px;
|
|
height: 90px;
|
|
background: #2d77df52;
|
|
border-radius: 4px;
|
|
padding: 10px;
|
|
text-align: left;
|
|
}
|
|
.detail-box:before {
|
|
position: absolute;
|
|
width: 0;
|
|
height: 0;
|
|
border-width: 8px;
|
|
border-style: solid;
|
|
border-color: #2d77df52 transparent transparent transparent;
|
|
left: calc(50% - 8px);
|
|
bottom: -16px;
|
|
content: " ";
|
|
}
|
|
.detail-box .step {
|
|
font-size: 14px;
|
|
color: #fff;
|
|
margin-left: 6px;
|
|
}
|
|
.detail-box .status {
|
|
position: relative;
|
|
width: 46px;
|
|
height: 18px;
|
|
border-radius: 4px;
|
|
color: #fff;
|
|
font-size: 10px;
|
|
text-align: center;
|
|
}
|
|
.detail-box .status-green {
|
|
background: #15CE31;
|
|
}
|
|
.detail-box .status-blue {
|
|
background: #00A0E9;
|
|
}
|
|
.detail-box .status-orange {
|
|
background: #F44A4A;
|
|
}
|
|
.detail-box .status-yellow {
|
|
background: #F19149;
|
|
}
|
|
.detail-box .title {
|
|
font-size: 12px;
|
|
color: #59D4FC;
|
|
font-size: 14px;
|
|
}
|
|
.line {
|
|
position: relative;
|
|
margin: 22px 0;
|
|
width: 100%;
|
|
height: 4px;
|
|
background: #2D77DF;
|
|
border-radius: 2px;
|
|
}
|
|
.line .dot {
|
|
position: relative;
|
|
width: 10px;
|
|
height: 10px;
|
|
margin: 0 58px;
|
|
border-radius: 50%;
|
|
}
|
|
.line .dot-green {
|
|
background: #15CE31;
|
|
box-shadow: 0px 0px 0px 5px #15ce3171;
|
|
}
|
|
.line .dot-blue {
|
|
background: #00A0E9;
|
|
box-shadow: 0px 0px 0px 5px #00A0E971;
|
|
}
|
|
.line .dot-orange {
|
|
background: #F44A4A;
|
|
box-shadow: 0px 0px 0px 5px #F44A4A71;
|
|
}
|
|
.line .dot-yellow {
|
|
background: #F19149;
|
|
box-shadow: 0px 0px 0px 5px #F1914971;
|
|
}
|
|
.number-box {
|
|
position: relative;
|
|
display: inline-block;
|
|
padding: 0 0 0 20px;
|
|
text-align: left;
|
|
}
|
|
.number-box li {
|
|
display: inline-block;
|
|
margin-right: 6px;
|
|
text-align: center;
|
|
width: 30px;
|
|
height: 40px;
|
|
background-color: #163E65;
|
|
}
|
|
.number-box li span {
|
|
font-size: 30px;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: bold;
|
|
line-height: 40px;
|
|
color: transparent;
|
|
background: -webkit-linear-gradient(0deg, rgba(27, 76, 194, 1) 0%, #05dcf8 100%);
|
|
-webkit-background-clip: text;
|
|
}
|
|
.card-title-block {
|
|
position: relative;
|
|
width: 100%;
|
|
margin-bottom: 5px;
|
|
padding-top: 10px;
|
|
padding-left: 40px;
|
|
padding-right: 20px;
|
|
line-height: 40px;
|
|
color: #73dcfe;
|
|
font-size: 16px;
|
|
height: 40px;
|
|
}
|
|
.card-title-block:before {
|
|
position: absolute;
|
|
width: 15px;
|
|
height: 20px;
|
|
left: 15px;
|
|
top: 20px;
|
|
content: " ";
|
|
background: url('img/icon-title.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.card-small-title-block {
|
|
position: relative;
|
|
width: 100%;
|
|
padding-left: 30px;
|
|
line-height: 35px;
|
|
color: #fff;
|
|
font-size: 14px;
|
|
height: 35px;
|
|
text-align: left;
|
|
}
|
|
.card-small-title-block:before {
|
|
position: absolute;
|
|
width: 15px;
|
|
height: 20px;
|
|
left: 5px;
|
|
top: 5px;
|
|
content: " ";
|
|
background: url('img/icon.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.round {
|
|
position: relative;
|
|
display: inline-block;
|
|
margin: 25px 60px;
|
|
width: 100px;
|
|
height: 100px;
|
|
border-radius: 50%;
|
|
}
|
|
.succes {
|
|
border: 18px solid #4bbcc1;
|
|
color: #4bbcc1;
|
|
}
|
|
.waring {
|
|
border: 18px solid #f39700;
|
|
color: #f39700;
|
|
}
|
|
.error {
|
|
border: 18px solid #ff2f3f;
|
|
color: #ff2f3f;
|
|
}
|
|
.color-1 {
|
|
border: 18px solid #FDC210;
|
|
color: #FDC210;
|
|
}
|
|
.color-2 {
|
|
border: 18px solid #FF800D;
|
|
color: #FF800D;
|
|
}
|
|
.color-3 {
|
|
border: 18px solid #FF4A1A;
|
|
color: #FF4A1A;
|
|
}
|
|
.color-4 {
|
|
border: 18px solid #2087ED;
|
|
color: #2087ED;
|
|
}
|
|
.color-5 {
|
|
border: 18px solid #7cf5c3;
|
|
color: #7cf5c3;
|
|
}
|
|
.round-word {
|
|
font-size: 17px;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%,-50%);
|
|
border: 0 !important;
|
|
}
|
|
.round-title {
|
|
width: 200px;
|
|
position: absolute;
|
|
left: -70px;
|
|
text-align: center;
|
|
bottom: -50px;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
}
|
|
.map-block {
|
|
position: relative;
|
|
width: 100%;
|
|
color: #fff;
|
|
height: 330px;
|
|
font-size: 20px;
|
|
}
|
|
video {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 310px;
|
|
margin-top: 10px;
|
|
}
|
|
.order-form {
|
|
position: relative;
|
|
display: inline-block;
|
|
height: 70px;
|
|
}
|
|
|
|
.order-form-year {
|
|
position: relative;
|
|
display: inline-block;
|
|
text-align: right;
|
|
height: 60px;
|
|
}
|
|
.order-form.myborder {
|
|
border-right: 1px solid;
|
|
border-left: 1px solid;
|
|
border-image: -webkit-linear-gradient(-180deg, rgba(255,255,255,0.00) 0%,#00BBF2 20%, rgba(255,255,255,0.00) 99%) 2 2 2 2;
|
|
border-image: -moz-linear-gradient(-180deg, rgba(255,255,255,0.00) 0%,#00BBF2 20%, rgba(255,255,255,0.00) 99%) 2 2 2 2;
|
|
border-image: linear-gradient(180deg, rgba(255,255,255,0.00) 0%,#00baf2af 50%, rgba(255,255,255,0.00) 99%) 2 2 2 2;
|
|
}
|
|
</style>
|
|
<body>
|
|
<div class="header-container">
|
|
<a href="http://124.70.79.32:9714"><p>智慧工厂运行监控中心</p></a>
|
|
|
|
</div>
|
|
<div class="app-container">
|
|
<div class="top-container dis-flex">
|
|
<div class="top-block">
|
|
<p class="top-title">生产设备状态</p>
|
|
<div class="width-50">
|
|
<img src="img/header-1.png">
|
|
</div>
|
|
<div class="width-50 float-right">
|
|
<p class="font-size-30 color-white text-align">13/20</p>
|
|
<p class="font-size-14 color-white text-align">在线/总数</p>
|
|
</div>
|
|
</div>
|
|
<div class="top-block">
|
|
<p class="top-title">设备预警</p>
|
|
<div class="width-50">
|
|
<img src="img/header-2.png">
|
|
</div>
|
|
<div class="width-50 float-right">
|
|
<p class="font-size-30 color-white text-align">0/0</p>
|
|
<p class="font-size-14 color-white text-align">处理/总数</p>
|
|
</div>
|
|
</div>
|
|
<div class="top-block">
|
|
<p class="top-title">在生产订单</p>
|
|
<div class="width-50">
|
|
<img src="img/header-3.png">
|
|
</div>
|
|
<div class="width-50 float-right">
|
|
<p class="font-size-30 color-white text-align">1/4</p>
|
|
<p class="font-size-14 color-white text-align">完成/总数</p>
|
|
</div>
|
|
</div>
|
|
<div class="top-block">
|
|
<p class="top-title">生产产品</p>
|
|
<div class="width-35" style="width: 30%;">
|
|
<img src="img/header-4.png">
|
|
</div>
|
|
<div class="width-50 float-right" style="width: 70%;">
|
|
<p class="font-size-30 color-white text-align">98000/172000</p>
|
|
<p class="font-size-14 color-white text-align">完成/总数</p>
|
|
</div>
|
|
</div>
|
|
<div class="top-block">
|
|
<p class="top-title">延期订单</p>
|
|
<div class="width-50">
|
|
<img src="img/header-5.png">
|
|
</div>
|
|
<div class="width-50 float-right">
|
|
<p class="font-size-30 color-white text-align">0/1</p>
|
|
<p class="font-size-14 color-white text-align">完成/总数</p>
|
|
</div>
|
|
</div>
|
|
<div class="top-block">
|
|
<p class="top-title">平均进度</p>
|
|
<div class="width-50">
|
|
<img src="img/header-6.png">
|
|
</div>
|
|
<div class="width-50 float-right">
|
|
<p class="font-size-30 color-white text-align">57%</p>
|
|
<p class="font-size-14 color-white text-align">完成度</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="top-block">
|
|
<p class="top-title">出入库</p>
|
|
<div class="width-35" style="width: 30%;">
|
|
<img src="img/crk.png">
|
|
</div>
|
|
<div class="width-50 float-right" style="width: 70%;">
|
|
<p class="font-size-30 color-white text-align">2312/2354</p>
|
|
<p class="font-size-14 color-white text-align">入库量/出库量</p>
|
|
</div>
|
|
</div>
|
|
<div class="top-block">
|
|
<p class="top-title">扫码活动</p>
|
|
<div class="width-35" style="width: 30%;">
|
|
<img src="img/smfx.png">
|
|
</div>
|
|
<div class="width-50 float-right" style="width: 70%;">
|
|
<p class="font-size-30 color-white text-align">2756/3412</p>
|
|
<p class="font-size-14 color-white text-align">扫码量/发码量</p>
|
|
</div>
|
|
</div>
|
|
<div class="top-block">
|
|
<p class="top-title">红包活动</p>
|
|
<div class="width-35" style="width: 30%;">
|
|
<img src="img/hbfx.png">
|
|
</div>
|
|
<div class="width-50 float-right" style="width: 70%;">
|
|
<p class="font-size-30 color-white text-align">3754/400000</p>
|
|
<p class="font-size-14 color-white text-align">领取量/总量</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="left-container" style="width: 665px;">
|
|
<div class="container-block-small text-align">
|
|
<div class="title-block">产线任务详情</div>
|
|
<div class="content-block" id="left_1"style="padding: 10px 30px;">
|
|
<li class="dis-flex color-blue" style="margin-bottom: 5px;">
|
|
<div class="width-25">任务名称</div>
|
|
<div class="width-20">产线名称</div>
|
|
<div class="width-20">产品</div>
|
|
<div class="width-15">生产量</div>
|
|
<div class="width-20">进度</div>
|
|
</li>
|
|
<div class="scroll color-white">
|
|
<ul>
|
|
<li class="dis-flex pointer">
|
|
<div class="width-25">644567876BNE</div>
|
|
<div class="width-20">BNE42-1#</div>
|
|
<div class="width-20">BNE42</div>
|
|
<div class="width-15">2000</div>
|
|
<div class="width-20 ">
|
|
<div class="schedule">
|
|
<div class="now" style="width: 100%;"></div>
|
|
<span class="text">100%</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dis-flex pointer">
|
|
<div class="width-25">785767477HL52</div>
|
|
<div class="width-20">HL52-1#</div>
|
|
<div class="width-20">HL52</div>
|
|
<div class="width-15">5000</div>
|
|
<div class="width-20 ">
|
|
<div class="schedule">
|
|
<div class="now" style="width: 100%;"></div>
|
|
<span class="text">100%</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dis-flex pointer">
|
|
<div class="width-25">785767477BNE42</div>
|
|
<div class="width-20">BNE42-2#</div>
|
|
<div class="width-20">BNE42</div>
|
|
<div class="width-15">20000</div>
|
|
<div class="width-20 ">
|
|
<div class="schedule">
|
|
<div class="now" style="width: 100%;"></div>
|
|
<span class="text">100%</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dis-flex pointer">
|
|
<div class="width-25">785767477BNCN52</div>
|
|
<div class="width-20">BNCN52-2#</div>
|
|
<div class="width-20">BNCN52</div>
|
|
<div class="width-15">5000</div>
|
|
<div class="width-20 ">
|
|
<div class="schedule">
|
|
<div class="now" style="width: 88%;"></div>
|
|
<span class="text">88%</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dis-flex pointer">
|
|
<div class="width-25">785767477BNE52</div>
|
|
<div class="width-20">BNE52-2#</div>
|
|
<div class="width-20">BNE52</div>
|
|
<div class="width-15">10000</div>
|
|
<div class="width-20 ">
|
|
<div class="schedule">
|
|
<div class="now" style="width: 70%;"></div>
|
|
<span class="text">70%</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dis-flex pointer">
|
|
<div class="width-25">667474477BNCN52</div>
|
|
<div class="width-20">BNCN52-1#</div>
|
|
<div class="width-20">BNCN52</div>
|
|
<div class="width-15">5000</div>
|
|
<div class="width-20 ">
|
|
<div class="schedule">
|
|
<div class="now" style="width: 70%;"></div>
|
|
<span class="text">70%</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dis-flex pointer">
|
|
<div class="width-25">667474477HL52</div>
|
|
<div class="width-20">HL52-2#</div>
|
|
<div class="width-20">HL52</div>
|
|
<div class="width-15">5000</div>
|
|
<div class="width-20 ">
|
|
<div class="schedule">
|
|
<div class="now" style="width: 50%;"></div>
|
|
<span class="text">50%</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dis-flex pointer">
|
|
<div class="width-25">667474477BNE42</div>
|
|
<div class="width-20">BNE42-4#</div>
|
|
<div class="width-20">BNE42</div>
|
|
<div class="width-15">10000</div>
|
|
<div class="width-20 ">
|
|
<div class="schedule">
|
|
<div class="now" style="width: 50%;"></div>
|
|
<span class="text">50%</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dis-flex pointer">
|
|
<div class="width-25">667474477LNE46</div>
|
|
<div class="width-20">LNE46-2#</div>
|
|
<div class="width-20">LNE46</div>
|
|
<div class="width-15">10000</div>
|
|
<div class="width-20 ">
|
|
<div class="schedule">
|
|
<div class="now" style="width: 50%;"></div>
|
|
<span class="text">50%</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dis-flex pointer">
|
|
<div class="width-25">68879696LNE46</div>
|
|
<div class="width-20">LNE46-1#</div>
|
|
<div class="width-20">LNE46</div>
|
|
<div class="width-15">30000</div>
|
|
<div class="width-20 ">
|
|
<div class="schedule">
|
|
<div class="now" style="width: 45%;"></div>
|
|
<span class="text">45%</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dis-flex pointer">
|
|
<div class="width-25">68879696BNE42</div>
|
|
<div class="width-20">BNE42-3#</div>
|
|
<div class="width-20">BNE42</div>
|
|
<div class="width-15">40000</div>
|
|
<div class="width-20 ">
|
|
<div class="schedule">
|
|
<div class="now" style="width: 45%;"></div>
|
|
<span class="text">45%</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dis-flex pointer">
|
|
<div class="width-25">68879696BNR52</div>
|
|
<div class="width-20">BNE52-3#</div>
|
|
<div class="width-20">BNE52</div>
|
|
<div class="width-15">20000</div>
|
|
<div class="width-20 ">
|
|
<div class="schedule">
|
|
<div class="now" style="width: 40%;"></div>
|
|
<span class="text">40%</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dis-flex pointer">
|
|
<div class="width-25">68879696HL52</div>
|
|
<div class="width-20">HL52-3#</div>
|
|
<div class="width-20">HL52</div>
|
|
<div class="width-15">10000</div>
|
|
<div class="width-20 ">
|
|
<div class="schedule">
|
|
<div class="now" style="width: 40%;"></div>
|
|
<span class="text">40%</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container-block-small text-align" style="margin-bottom: 0;">
|
|
<div class="title-block">产品日产量</div>
|
|
<div class="content-block" id="left_2"></div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="center-container text-align">
|
|
<div class="container-block-small text-align">
|
|
<div class="title-block">订单进度</div>
|
|
<div class="goods-block">
|
|
<p class="text-aling color-white font-size-14" style="margin: 10px 0;">订单644567876</p>
|
|
<div class="dis-flex">
|
|
<div class="detail-box">
|
|
<span class="step">卤制</span>
|
|
<span class="status status-green float-right">已完成</span>
|
|
<br>
|
|
<br>
|
|
<p class="title">数量<span class="step">2000</span></p>
|
|
<p class="title">完成<span class="step">2021-4-17</span></p>
|
|
</div>
|
|
<div class="detail-box">
|
|
<span class="step">烘干</span>
|
|
<span class="status status-green float-right">已完成</span>
|
|
<br>
|
|
<br>
|
|
<p class="title">数量<span class="step">2000</span></p>
|
|
<p class="title">完成<span class="step">2021-4-18</span></p>
|
|
</div>
|
|
<div class="detail-box">
|
|
<span class="step">包装</span>
|
|
<span class="status status-green float-right">已完成</span>
|
|
<br>
|
|
<br>
|
|
<p class="title">数量<span class="step">2000</span></p>
|
|
<p class="title">完成<span class="step">2021-4-19</span></p>
|
|
</div>
|
|
<div class="detail-box">
|
|
<span class="step">质检</span>
|
|
<span class="status status-green float-right">已完成</span>
|
|
<br>
|
|
<br>
|
|
<p class="title">数量<span class="step">2000</span></p>
|
|
<p class="title">完成<span class="step">2021-4-19</span></p>
|
|
</div>
|
|
</div>
|
|
<div class="line dis-flex">
|
|
<div class="dot dot-green"></div>
|
|
<div class="dot dot-green"></div>
|
|
<div class="dot dot-green"></div>
|
|
<div class="dot dot-green"></div>
|
|
</div>
|
|
</div>
|
|
<div class="goods-block">
|
|
<p class="text-aling color-white font-size-14" style="margin: 10px 0;">订单785767477</p>
|
|
<div class="dis-flex">
|
|
<div class="detail-box">
|
|
<span class="step">卤制</span>
|
|
<span class="status status-green float-right">已完成</span>
|
|
<br>
|
|
<br>
|
|
<p class="title">数量<span class="step">40000</span></p>
|
|
<p class="title">完成<span class="step">2021-4-18</span></p>
|
|
</div>
|
|
<div class="detail-box">
|
|
<span class="step">烘干</span>
|
|
<span class="status status-orange float-right">延迟中</span>
|
|
<br>
|
|
<br>
|
|
<p class="title">数量<span class="step">40000</span></p>
|
|
<p class="title">完成<span class="step"></span></p>
|
|
</div>
|
|
<div class="detail-box">
|
|
<span class="step">包装</span>
|
|
<span class="status status-yellow float-right">待完成</span>
|
|
<br>
|
|
<br>
|
|
<p class="title">数量<span class="step">40000</span></p>
|
|
<p class="title">完成<span class="step"></span></p>
|
|
</div>
|
|
<div class="detail-box">
|
|
<span class="step">质检</span>
|
|
<span class="status status-yellow float-right">待完成</span>
|
|
<br>
|
|
<br>
|
|
<p class="title">数量<span class="step">40000</span></p>
|
|
<p class="title">完成<span class="step"></span></p>
|
|
</div>
|
|
</div>
|
|
<div class="line dis-flex">
|
|
<div class="dot dot-green"></div>
|
|
<div class="dot dot-orange"></div>
|
|
<div class="dot dot-yellow"></div>
|
|
<div class="dot dot-yellow"></div>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="goods-block">
|
|
<p class="text-aling color-white font-size-14" style="margin: 10px 0;">订单667474477</p>
|
|
<div class="dis-flex">
|
|
<div class="detail-box">
|
|
<span class="step">卤制</span>
|
|
<span class="status status-green float-right">已完成</span>
|
|
<br>
|
|
<br>
|
|
<p class="title">数量<span class="step">30000</span></p>
|
|
<p class="title">完成<span class="step">2021-4-19</span></p>
|
|
</div>
|
|
<div class="detail-box">
|
|
<span class="step">烘干</span>
|
|
<span class="status status-blue float-right">进行中</span>
|
|
<br>
|
|
<br>
|
|
<p class="title">数量<span class="step">30000</span></p>
|
|
<p class="title">完成<span class="step"></span></p>
|
|
</div>
|
|
<div class="detail-box">
|
|
<span class="step">包装</span>
|
|
<span class="status status-yellow float-right">待完成</span>
|
|
<br>
|
|
<br>
|
|
<p class="title">数量<span class="step">30000</span></p>
|
|
<p class="title">完成<span class="step"></span></p>
|
|
</div>
|
|
<div class="detail-box">
|
|
<span class="step">质检</span>
|
|
<span class="status status-yellow float-right">待完成</span>
|
|
<br>
|
|
<br>
|
|
<p class="title">数量<span class="step">30000</span></p>
|
|
<p class="title">完成<span class="step"></span></p>
|
|
</div>
|
|
</div>
|
|
<div class="line dis-flex">
|
|
<div class="dot dot-green"></div>
|
|
<div class="dot dot-blue"></div>
|
|
<div class="dot dot-yellow"></div>
|
|
<div class="dot dot-yellow"></div>
|
|
</div>
|
|
</div>
|
|
<div class="goods-block">
|
|
<p class="text-aling color-white font-size-14" style="margin: 10px 0;">订单68879696</p>
|
|
<div class="dis-flex">
|
|
<div class="detail-box">
|
|
<span class="step">卤制</span>
|
|
<span class="status status-green float-right">已完成</span>
|
|
<br>
|
|
<br>
|
|
<p class="title">数量<span class="step">100000</span></p>
|
|
<p class="title">完成<span class="step">2021-4-20</span></p>
|
|
</div>
|
|
<div class="detail-box">
|
|
<span class="step">烘干</span>
|
|
<span class="status status-blue float-right">进行中</span>
|
|
<br>
|
|
<br>
|
|
<p class="title">数量<span class="step">100000</span></p>
|
|
<p class="title">完成<span class="step"></span></p>
|
|
</div>
|
|
<div class="detail-box">
|
|
<span class="step">包装</span>
|
|
<span class="status status-yellow float-right">待完成</span>
|
|
<br>
|
|
<br>
|
|
<p class="title">数量<span class="step">100000</span></p>
|
|
<p class="title">完成<span class="step"></span></p>
|
|
</div>
|
|
<div class="detail-box">
|
|
<span class="step">质检</span>
|
|
<span class="status status-yellow float-right">待完成</span>
|
|
<br>
|
|
<br>
|
|
<p class="title">数量<span class="step">100000</span></p>
|
|
<p class="title">完成<span class="step"></span></p>
|
|
</div>
|
|
</div>
|
|
<div class="line dis-flex">
|
|
<div class="dot dot-green"></div>
|
|
<div class="dot dot-blue"></div>
|
|
<div class="dot dot-yellow"></div>
|
|
<div class="dot dot-yellow"></div>
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
<div class="container-block-small text-align" style="margin-bottom: 0;">
|
|
<p class="title-block">仓库配送实时情况</p>
|
|
<br>
|
|
<br>
|
|
<div class="dis-flex">
|
|
<div class="order-form width-33">
|
|
<p class="font-size-24 color-blue text-align">675</p><br>
|
|
<p class="font-size-14 color-blue2 text-align">已发货量</p>
|
|
</div>
|
|
<div class="order-form width-33 myborder">
|
|
<p class="font-size-24 color-blue text-align">253</p><br>
|
|
<p class="font-size-14 color-blue2 text-align">未发货量</p>
|
|
</div>
|
|
<div class="order-form width-33">
|
|
<p class="font-size-24 color-blue text-align">928 </p><br>
|
|
<p class="font-size-14 color-blue2 text-align">计划发货量</p>
|
|
</div>
|
|
</div>
|
|
<div class="dis-flex" style="position: relative;width: 100%; height: 250px;">
|
|
<div class="content-block" id="echarts_3" style="width: 45%;"></div>
|
|
<div class="content-block" id="echarts_4" style="width: 55%;padding-right: 30px;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="right-container" style="margin:0 5px">
|
|
<div class="container-block-small text-align">
|
|
<div class="center-block dis-flex">
|
|
<div class="width-60 dis-flex" style="padding-left: 15px;">
|
|
<div class="card-title-block left-align">接入设备数</div>
|
|
<div class="width-50" style="width:49%;">
|
|
<div class="number-box">
|
|
<div class="card-small-title-block">水表（台）</div>
|
|
<li><span>0</span></li>
|
|
<li><span>4</span></li>
|
|
<li><span>6</span></li>
|
|
</div>
|
|
<div class="number-box">
|
|
<div class="card-small-title-block">电表（台）</div>
|
|
<li><span>0</span></li>
|
|
<li><span>5</span></li>
|
|
<li><span>6</span></li>
|
|
</div>
|
|
<div class="number-box">
|
|
<div class="card-small-title-block">燃气表（台）</div>
|
|
<li><span>0</span></li>
|
|
<li><span>2</span></li>
|
|
<li><span>0</span></li>
|
|
</div>
|
|
<div class="number-box">
|
|
<div class="card-small-title-block">蒸汽表（台）</div>
|
|
<li><span>0</span></li>
|
|
<li><span>1</span></li>
|
|
<li><span>5</span></li>
|
|
</div>
|
|
</div>
|
|
<div class="width-50" style="width:49%;">
|
|
<div class="number-box">
|
|
<div class="card-small-title-block">设备总数（台）</div>
|
|
<li><span>1</span></li>
|
|
<li><span>3</span></li>
|
|
<li><span>8</span></li>
|
|
</div>
|
|
<div class="number-box">
|
|
<div class="card-small-title-block">正常运行（台）</div>
|
|
<li><span>1</span></li>
|
|
<li><span>2</span></li>
|
|
<li><span>7</span></li>
|
|
</div>
|
|
<div class="number-box">
|
|
<div class="card-small-title-block">报修（台）</div>
|
|
<li><span>0</span></li>
|
|
<li><span>0</span></li>
|
|
<li><span>8</span></li>
|
|
</div>
|
|
<div class="number-box">
|
|
<div class="card-small-title-block">损坏（台）</div>
|
|
<li><span>0</span></li>
|
|
<li><span>0</span></li>
|
|
<li><span>2</span></li>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="width-40">
|
|
<div class="card-title-block left-align">能源消耗总量</div>
|
|
<div class="number-box" style="width: 270px;">
|
|
<div class="card-small-title-block">水（立方米）</div>
|
|
<li><span>3</span></li>
|
|
<li><span>5</span></li>
|
|
<li><span>4</span></li>
|
|
<li><span>0</span></li>
|
|
<li><span>0</span></li>
|
|
</div>
|
|
<div class="number-box" style="width: 270px;">
|
|
<div class="card-small-title-block">电（千瓦时）</div>
|
|
<li><span>1</span></li>
|
|
<li><span>5</span></li>
|
|
<li><span>5</span></li>
|
|
<li><span>0</span></li>
|
|
<li><span>0</span></li>
|
|
<li><span>0</span></li>
|
|
</div>
|
|
<div class="number-box" style="width: 270px;">
|
|
<div class="card-small-title-block">蒸汽（立方米）</div>
|
|
<li><span>7</span></li>
|
|
<li><span>5</span></li>
|
|
<li><span>4</span></li>
|
|
<li><span>6</span></li>
|
|
</div>
|
|
<div class="number-box" style="width: 270px;">
|
|
<div class="card-small-title-block">燃气（立方米）</div>
|
|
<li><span>8</span></li>
|
|
<li><span>5</span></li>
|
|
<li><span>1</span></li>
|
|
<li><span>4</span></li>
|
|
<li><span>6</span></li>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container-block-small text-align" style="margin-bottom: 0;">
|
|
<div class="title-block">用电消耗排名</div>
|
|
<div class="content-block" id="right_1"></div>
|
|
<!-- <div class="title-block">营销活动分析</div> -->
|
|
<!-- <div class="map-block">
|
|
<div class="round color-4">
|
|
<span class="round-word color-4">3,412</span>
|
|
<div class="round-title">发码数（个）</div>
|
|
</div>
|
|
<div class="round succes">
|
|
<span class="round-word succes">2,756</span>
|
|
<div class="round-title">扫码数（个）</div>
|
|
</div>
|
|
<div class="round color-5">
|
|
<span class="round-word color-5">2,102</span>
|
|
<div class="round-title">兑换数（个）</div>
|
|
</div>
|
|
<br>
|
|
<div class="round color-3">
|
|
<span class="round-word color-3">400,000</span>
|
|
<div class="round-title">红包总金额（元）</div>
|
|
</div>
|
|
<div class="round color-2">
|
|
<span class="round-word color-2">3,754</span>
|
|
<div class="round-title">今日红包领取金额（元）</div>
|
|
</div>
|
|
<div class="round color-1">
|
|
<span class="round-word color-1">21,366</span>
|
|
<div class="round-title">红包剩余金额（元）</div>
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
<div class="right-container" style="width: 600px;">
|
|
<div class="container-block-small text-align">
|
|
<div class="title-block">实时产线</div>
|
|
<video loop controls autoplay="autoplay">
|
|
<source src="./img/video1.mp4" type="video/mp4">
|
|
您的浏览器不支持 video 标签。
|
|
</video>
|
|
</div>
|
|
<div class="container-block-small text-align" style="margin-bottom: 0;">
|
|
<div class="title-block">码垛监测</div>
|
|
<video loop controls autoplay="autoplay">
|
|
<source src="./img/video2.mp4" type="video/mp4">
|
|
您的浏览器不支持 video 标签。
|
|
</video>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<script>
|
|
$().ready(function(){
|
|
var left_1 = ""
|
|
var left_2 = ""
|
|
var right_1 = ''
|
|
var right_11 = ''
|
|
var right_2 = ''
|
|
var echarts_3 = ""
|
|
var echarts_4 = ""
|
|
initEcharts()
|
|
// clickEcharts()
|
|
$('.scroll').scroll({
|
|
speed: 40, //数值越大，速度越快
|
|
});
|
|
})
|
|
function initEcharts() {
|
|
// 创建图表
|
|
left_2 = echarts.init(document.getElementById("left_2"));
|
|
echarts_3 = echarts.init(document.getElementById("echarts_3"));
|
|
echarts_4 = echarts.init(document.getElementById("echarts_4"));
|
|
// right_2 = echarts.init(document.getElementById("right_2"));
|
|
right_1 = echarts.init(document.getElementById("right_1"));
|
|
// right_11 = echarts.init(document.getElementById("right_11"));
|
|
setEchartsL2()
|
|
setEchartsR1()
|
|
setEcharts3()
|
|
setEcharts4()
|
|
// setEchartsR2()
|
|
// setEchartsR11()
|
|
}
|
|
function setEcharts3() {
|
|
var option = {
|
|
title: {
|
|
text: '',
|
|
textStyle: {
|
|
fontWeight: 'normal',
|
|
fontSize: 25,
|
|
color: 'rgb(97, 142, 205)'
|
|
}
|
|
},
|
|
series: [{
|
|
type: 'liquidFill',
|
|
radius: '45%',
|
|
center: ['50%', '40%'],
|
|
data: [0.75, 0.75, 0.75], // data个数代表波浪数
|
|
backgroundStyle: {
|
|
borderWidth: 1,
|
|
color: 'rgb(255,0,255,0.1)'
|
|
},
|
|
label: {
|
|
normal: {
|
|
formatter: (0.753 * 100).toFixed(1) + '%',
|
|
textStyle: {
|
|
fontSize: 20
|
|
}
|
|
}
|
|
},
|
|
outline: {
|
|
show: false,
|
|
}
|
|
},
|
|
{
|
|
"type": "pie",
|
|
"center": ["50%", "40%"],
|
|
"radius": ["50%", "52%"],
|
|
"hoverAnimation": false,
|
|
"data": [{
|
|
"name": "",
|
|
"value": 500,
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
itemStyle: {
|
|
color: '#5886f0'
|
|
},
|
|
emphasis: {
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
itemStyle: {
|
|
color: '#5886f0'
|
|
},
|
|
}
|
|
}
|
|
]
|
|
}
|
|
|
|
]
|
|
}
|
|
echarts_3.setOption(option);
|
|
}
|
|
|
|
function setEcharts4() {
|
|
var option = {
|
|
grid: {
|
|
left: '5%',
|
|
right: '5%',
|
|
bottom: '0',
|
|
top: '10%',
|
|
containLabel: true
|
|
},
|
|
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: ['北一库', '北二库','南一库', '南二库']
|
|
},
|
|
{
|
|
type: 'category',
|
|
inverse: true,
|
|
axisTick: 'none',
|
|
axisLine: 'none',
|
|
show: true,
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: '#ffffff',
|
|
fontSize: '12'
|
|
},
|
|
formatter: function(value) {
|
|
if (value >= 10000) {
|
|
return (value / 10000).toLocaleString() + '%';
|
|
} else {
|
|
return value.toLocaleString() + '%';
|
|
}
|
|
},
|
|
},
|
|
data: [88, 76, 66, 75]
|
|
}],
|
|
series: [{
|
|
name: '金额',
|
|
type: 'bar',
|
|
zlevel: 1,
|
|
itemStyle: {
|
|
normal: {
|
|
barBorderRadius: 20,
|
|
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: 15,
|
|
data: [88, 76, 66, 75]
|
|
},
|
|
{
|
|
name: '背景',
|
|
type: 'bar',
|
|
barWidth: 15,
|
|
barGap: '-100%',
|
|
data: [100, 100, 100, 100],
|
|
itemStyle: {
|
|
normal: {
|
|
color: 'rgba(24,31,68,1)',
|
|
barBorderRadius: 30,
|
|
}
|
|
},
|
|
},
|
|
]
|
|
};
|
|
echarts_4.setOption(option);
|
|
}
|
|
|
|
function setEchartsR11() {
|
|
var XName = ['02/11', '02/12', '02/13', '02/14', '02/15', '02/16', '02/17', '02/18', '02/19', '02/20']
|
|
var data1 = [80,75, 71, 73, 73, 77, 81, 75, 72, 70]
|
|
var data2 = [85,79, 83, 77, 81, 82, 88, 82, 80, 76]
|
|
var img = [
|
|
'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABRCAYAAABFTSEIAAAACXBIWXMAAAsSAAALEgHS3X78AAAEp0lEQVR42u3cz4sjRRTA8W9Vd3Vn8mMmjj9WQWSRZQ+CsH+B7MnDIgiCd0E8CYJ/gOAIelo8ehUP/gF6WLw5/gMueFP2sIcF0dHd2Z1kknR11fOQZJJJMtlZd03H7HtQpNOTnpn+8Lrm1etmjIig8e/DKoECKqACKqCGAiqgAiqghgIqoAIqoIYCKqACKqCGAiqgAiqghgIqoAJudKTr+osZMNPvBUQBHwHsPF9fB9R0DeHMOQ6T6WOrhEzXBM4swDOL0M6CrArRVoq3t2dGUIb9fTvatg8ZZup1PDBgzPmy98mey6qfzjLz2WaWjEUZKEvGyi9nWyneMOvGIyFQo2Sbg4MUSChpU9IeTTUpJdsEajPZOJeJG5uBZj7rLLduWS5dGm6XNLEELOFUFj54ACJCaychkpDSASK3bwsXL0YgVpWJKwM0iy9Zy8HdGru7jvt3Pbu7w0wES7drTwAbjTHMGCsQcIAnYTC1/wRx0wEnl27JNgZI8HQ6Kc1mQq83RNzaMjPzXqDbjTQaJRFLxIyyMSxAXEkWrhrQzAAmo5HOjCQf7jflILxOkohL+aUPgV4vEGNJo+E5PAy02+UIMEwBxo0CPDP7Dg5SnEtpt1PA0e87XO25FOoh8IYIH2Y5b45RzGAQBiIltZoHxqMcjbksXAVgdc2EQMYzzzdotyeZWKuleULXJtwT4SODfC2QCWR+IF9KnjuX1Xbo99Op7LVE8iXlz0YBTk5SyLEEjo5OLuccEoFUvHfO+reuUPx4zftXAIcx1hdcF+/TvFab4A0Bs0VwqyhpVnkJT89/Q4DDQ0e77YCMwIUsFMeFZD856699URRvX4nxE4A/jbnxXp7v4Zw3ReGNSDHI8wFQjIafuoyn58L/fB6sth/Ybg9fez2TRC6QZcZYvgHsazF+MP7YCyLXcM7gvSXLDGBqYDg+NhwdmSpPoTrAkub0W+f4FSB1fDucIunMHSLpO8WAH0rSy8u+19MBCHB4OHzd2pI+CEUhpigEiN+l6WcdY252jLn5s7Wf472ImPcN8pUl/tEHoV4XWq1Ke4KrLmPsTA3oODpytFoOyJKSyzHyMSIxteWngMW5cSEdDJQUhTdZVgxOz3/+jFJm4+bA2e5JpNU6WZ4Fw99JwnWMKccwpeddP+B7GZTNUPKqybJy0O+Hs1YfMz9swwvpB8fbGDG0GuGkkK7V0hxSmZQpABI8l2z0v3sJf50qpAMJCd2qCulql3LD1lRGQjm7lEsDz0rkxTQOfiPPxUBcuJTbbhss/Y1eyi3NwsmKInmkZsKk5gtPUzNhvp11507CSy/X6XYStpvFudpZw1ZWIOF4Cq6SdtbKbioJyAhRTu3u9yMJXerN+ugvaQQsjcZ8Q3VnZwxlSDhe1lB9GjrSw5b+1avT8+Jw+979nNaOI6U3KpTrWAosxVQmygK4ld8X0ZtK/7eViExD7O1NQPb3T7fsl4/4sBpwYzPwjFbTo95Yl9l9Vd1YN1X/147HebSjary1AHyc5qc+XLQEQx9ve8Kg6xr6hKoCKqACKqCGAiqgAiqghgIqoAIqoIYCKqACKqCGAiqgAiqghgIq4JrHP8fEWV8FMTmOAAAAAElFTkSuQmCC',
|
|
'image://data:image/png;base64,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',
|
|
'image://data:image/png;base64,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',
|
|
'image://data:image/png;base64,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',
|
|
]
|
|
|
|
let data1_point = [{
|
|
coords: [
|
|
['02/11', 80],
|
|
['02/12', 75],
|
|
['02/13', 71],
|
|
['02/14', 73],
|
|
['02/15', 73],
|
|
['02/16', 77],
|
|
['02/17', 81],
|
|
['02/18', 75],
|
|
['02/19', 72],
|
|
['02/20', 70],
|
|
]
|
|
}]
|
|
let data2_point = [{
|
|
coords: [
|
|
['02/11', 85],
|
|
['02/12', 79],
|
|
['02/13', 83],
|
|
['02/14', 77],
|
|
['02/15', 81],
|
|
['02/16', 82],
|
|
['02/17', 88],
|
|
['02/18', 82],
|
|
['02/19', 80],
|
|
['02/20', 76],
|
|
]
|
|
}]
|
|
let option = {
|
|
grid: {
|
|
top: "14%",
|
|
left: "8%",
|
|
right: '5%',
|
|
bottom: "15%"//也可设置left和right设置距离来控制图表的大小
|
|
},
|
|
legend: {
|
|
top:15,
|
|
textStyle:{
|
|
color:'#fff'
|
|
},
|
|
backgroundColor:"rgba(0,0,0,0)",
|
|
borderColor:"#fff",
|
|
data: ['当日扫码数', '当日兑换数']
|
|
},
|
|
yAxis: [{
|
|
type: 'value',
|
|
position: 'left',
|
|
nameTextStyle: {
|
|
color: '#00FFFF'
|
|
},
|
|
splitLine: {
|
|
show:false,
|
|
lineStyle: {
|
|
type: 'dashed',
|
|
color: 'rgba(135,140,147,0.8)'
|
|
}
|
|
},
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
formatter: '{value}',
|
|
color: '#fff',
|
|
fontSize: 14
|
|
}
|
|
}, ],
|
|
xAxis: [{
|
|
type: 'category',
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: '#0696f9',
|
|
}
|
|
},
|
|
axisLabel: {
|
|
inside: false,
|
|
textStyle: {
|
|
color: '#fff', // x轴颜色
|
|
fontWeight: 'normal',
|
|
fontSize: '14',
|
|
lineHeight: 22
|
|
}
|
|
|
|
},
|
|
data: XName,
|
|
}, ],
|
|
series: [
|
|
{
|
|
symbolSize: 150,
|
|
symbol: img[1],
|
|
name: '当日兑换数',
|
|
type: "line",
|
|
data: data1,
|
|
itemStyle: {
|
|
normal: {
|
|
borderWidth: 5,
|
|
color: '#03c157',
|
|
}
|
|
}
|
|
},
|
|
{
|
|
symbolSize: 150,
|
|
symbol: img[2],
|
|
name: '当日扫码数',
|
|
type: "line",
|
|
data: data2,
|
|
itemStyle: {
|
|
normal: {
|
|
borderWidth: 5,
|
|
color: '#0696f9',
|
|
}
|
|
}
|
|
},
|
|
{
|
|
name: '滑行的光点',
|
|
type: 'lines',
|
|
coordinateSystem: 'cartesian2d',
|
|
symbolSize: 30,
|
|
polyline: true,
|
|
effect: {
|
|
show: true,
|
|
trailLength: 0,
|
|
symbol: "arrow",
|
|
period: 10, //光点滑动速度
|
|
symbolSize: 150,
|
|
symbol: img[0]
|
|
},
|
|
lineStyle: {
|
|
normal: {
|
|
width: 1,
|
|
opacity: 0.6,
|
|
curveness: 0.2
|
|
}
|
|
},
|
|
data: data2_point
|
|
},
|
|
{
|
|
name: '滑行的光点2',
|
|
type: 'lines',
|
|
coordinateSystem: 'cartesian2d',
|
|
symbolSize: 30,
|
|
polyline: true,
|
|
effect: {
|
|
show: true,
|
|
trailLength: 0,
|
|
symbol: "arrow",
|
|
period: 10, //光点滑动速度
|
|
symbolSize: 150,
|
|
symbol: img[1]
|
|
},
|
|
lineStyle: {
|
|
normal: {
|
|
width: 1,
|
|
opacity: 0.6,
|
|
curveness: 0.2
|
|
}
|
|
},
|
|
data: data1_point
|
|
}
|
|
],
|
|
};
|
|
right_11.setOption(option);
|
|
}
|
|
function setEchartsR1 () {
|
|
let optionR1 = {
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
type: "shadow"
|
|
}
|
|
},
|
|
grid: {
|
|
top:'6%',
|
|
left: "15%",
|
|
right: "12%",
|
|
bottom: "-2%",
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
show: false
|
|
},
|
|
yAxis: {
|
|
type: "category",
|
|
inverse: true,
|
|
data: ["车间一", "车间四", "车间五", "车间二", "车间三"],
|
|
|
|
axisLabel: {
|
|
show: true,
|
|
textStyle: {
|
|
color: "#fff"
|
|
}
|
|
},
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
color: "#fff",
|
|
fontSize: "14",
|
|
fontFamily: "MicrosoftYaHei"
|
|
// marginRight:'35px',
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
// name: "条",
|
|
type: "bar",
|
|
data: [3120, 3064, 2762, 2569, 2366],
|
|
yAxisIndex: 0,
|
|
|
|
itemStyle: {
|
|
barBorderRadius: 5,
|
|
color: function(params) {
|
|
const myColor = [
|
|
"#EC2C26",
|
|
"#EA4E26",
|
|
"#E8AD28",
|
|
"#1D7FF1",
|
|
"#1D7FF1"
|
|
];
|
|
// params 传进来的是柱子对象
|
|
// console.log(params);
|
|
// dataIndex 是当前柱子的索引号
|
|
return myColor[params.dataIndex];
|
|
}
|
|
},
|
|
barWidth: 15,
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
fontSize: 16,
|
|
fontFamily: "KaiTi",
|
|
color: "#fff",
|
|
position: "right",
|
|
formatter: "{c}"
|
|
}
|
|
}
|
|
}
|
|
]
|
|
}
|
|
right_1.setOption(optionR1);
|
|
}
|
|
function setEchartsL2(){
|
|
let optionL2 = {
|
|
animation: false,
|
|
grid: {
|
|
top: "15%",
|
|
left: "15%",
|
|
bottom: "10%"//也可设置left和right设置距离来控制图表的大小
|
|
},
|
|
tooltip : {
|
|
trigger: 'item',
|
|
formatter: "{b}：{c}"
|
|
},
|
|
xAxis: {
|
|
data: [
|
|
'手撕牛肉','卤汁牛肉','牛小排','牛板筋','牛小肚','牛蹄筋','香辣牛肉','筋头巴脑'
|
|
],
|
|
axisLine: {
|
|
show: true, //隐藏X轴轴线
|
|
lineStyle: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
axisTick: {
|
|
show: false //隐藏X轴刻度
|
|
},
|
|
axisLabel: {
|
|
show: false,
|
|
margin: 14,
|
|
fontSize: 14,
|
|
textStyle: {
|
|
color: "#fff" //X轴文字颜色
|
|
}
|
|
},
|
|
|
|
},
|
|
yAxis: [
|
|
{
|
|
name:'',
|
|
type: "value",
|
|
gridIndex: 0,
|
|
min: 0,
|
|
max: 10000,
|
|
// interval: 25,
|
|
// splitNumber: 4,
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
type: 'dashed',
|
|
color: '#fff',
|
|
width: 1
|
|
},
|
|
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
show: true,
|
|
margin: 14,
|
|
fontSize: 14,
|
|
textStyle: {
|
|
color: "#fff" //X轴文字颜色
|
|
}
|
|
|
|
|
|
},
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: "",
|
|
type: "bar",
|
|
barWidth: 14,
|
|
itemStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
offset: 0,
|
|
color: "#00FFE3"
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "#4693EC"
|
|
}
|
|
])
|
|
}
|
|
},
|
|
data: [10000, 4500, 6000, 7500, 4000, 3000, 2000, 1000],
|
|
z: 10,
|
|
zlevel: 0,
|
|
},
|
|
{
|
|
// 分隔
|
|
type: "pictorialBar",
|
|
itemStyle: {
|
|
normal:{
|
|
color:"#0F375F"
|
|
}
|
|
},
|
|
symbolRepeat: "fixed",
|
|
symbolMargin: 6,
|
|
symbol: "rect",
|
|
symbolClip: true,
|
|
symbolSize: [18, 2],
|
|
symbolPosition: "start",
|
|
symbolOffset: [1, -1],
|
|
// symbolBoundingData: this.total,
|
|
data: [10000, 4500, 6000, 7500, 4000, 3000, 2000, 1000],
|
|
width: 20,
|
|
z: 0,
|
|
zlevel: 1,
|
|
},
|
|
{
|
|
name: "",
|
|
type: "bar",
|
|
barGap: "-110%", // 设置外框粗细
|
|
data: [10000, 10000, 10000, 10000, 10000, 10000, 10000],
|
|
barWidth: 18,
|
|
itemStyle: {
|
|
normal: {
|
|
color: "transparent", // 填充色
|
|
barBorderColor: "#2D465C", // 边框色
|
|
barBorderWidth: 1, // 边框宽度
|
|
// barBorderRadius: 0, //圆角半径
|
|
label: {
|
|
// 标签显示位置
|
|
show: false,
|
|
position: "top" // insideTop 或者横向的 insideLeft
|
|
}
|
|
}
|
|
},
|
|
z: 0
|
|
},
|
|
{
|
|
name: "",
|
|
type: "line",
|
|
smooth: true, //平滑曲线显示
|
|
showAllSymbol: false, //显示所有图形。
|
|
symbolSize: 0,
|
|
lineStyle: {
|
|
color: '#182733',
|
|
width: 0,
|
|
},
|
|
areaStyle:{
|
|
color: 'rgba(5,140,255, 0.2)'
|
|
},
|
|
data: [10000, 4500, 6000, 7500, 4000, 3000, 2000, 1000],
|
|
z: 5,
|
|
}
|
|
]
|
|
};
|
|
left_2.setOption(optionL2)
|
|
}
|
|
function setEchartsR2(xData = ['2020/06','2020/07','2020/08','2020/09','2020/10','2020/11','2020/12','2021/01','2021/02','2021/03','2021/04','2021/05'],
|
|
productIdiss = [388,176,179,198,202,488,352,167,190,186,198,124]){
|
|
let option = {
|
|
grid: {
|
|
left:60,
|
|
bottom: 70,
|
|
right: 15
|
|
},
|
|
color: ['#FFBF00'],
|
|
tooltip: {
|
|
trigger: "item",
|
|
formatter: "{a}：{c}"
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
data: xData,
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "#fff"
|
|
}
|
|
},
|
|
axisLabel: {
|
|
interval: 0,
|
|
rotate:-90
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: "value",
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "#fff"
|
|
}
|
|
},
|
|
splitLine: {
|
|
show: false
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
data: productIdiss,
|
|
type: 'line',
|
|
smooth: true
|
|
},
|
|
{
|
|
name: "销售总量",
|
|
type: "bar",
|
|
itemStyle: {
|
|
normal: {
|
|
color: params => {
|
|
//展示正值的柱子，负数设为透明
|
|
const colorArr =
|
|
params.value > 0
|
|
? ["#49FCB0", "#3AB6EB"]
|
|
: ["rgba(0,0,0,0)", "rgba(0,0,0,0)"];
|
|
return new echarts.graphic.LinearGradient(
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
[
|
|
{
|
|
offset: 0,
|
|
color: colorArr[0] // 0% 处的颜色
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: colorArr[1] // 100% 处的颜色
|
|
}
|
|
],
|
|
false
|
|
);
|
|
}
|
|
}
|
|
},
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
fontSize: 12,
|
|
fontWeight: "bold",
|
|
color: "#fff",
|
|
position: "top"
|
|
}
|
|
},
|
|
barWidth: 16,
|
|
data: productIdiss
|
|
}
|
|
]
|
|
}
|
|
right_2.setOption(option);
|
|
}
|
|
function resizeEcharts() {
|
|
//防抖
|
|
let timeout = null;
|
|
window.onresize = () => {
|
|
if (timeout) clearTimeout(timeout);
|
|
timeout = setTimeout(() => {
|
|
left_2.resize();
|
|
right_1.resize();
|
|
right_2.resize();
|
|
}, 500);
|
|
};
|
|
}
|
|
</script>
|
|
</html>
|