| | |
| | | |
| | | body { |
| | | height: 100%; |
| | | background-color: #fff; |
| | | background-color: #f1f1f1; |
| | | border-radius: 5px; |
| | | box-shadow: 0 0 3px rgba(0,0,0,.3); |
| | | padding: 10px; |
| | | } |
| | | |
| | | /* ------------------------------------ 头部 ------------------------------------*/ |
| | | header { |
| | | border-radius: 5px; |
| | | box-shadow: 0 0 3px rgba(0,0,0,.3); |
| | | background-color: #fff; |
| | | height: 20%; |
| | | opacity: 0.8; |
| | | position: relative; |
| | | } |
| | | /* 分割线 */ |
| | | .header-hr { |
| | | border-radius: 5px; |
| | | border: 1px solid #777; |
| | | width: 80%; |
| | | position: absolute; |
| | | bottom: 0; |
| | | } |
| | | /* 系统运行状态 */ |
| | | .system-state { |
| | | float: left; |
| | | width: 10%; |
| | | height: 100%; |
| | | padding: 20px; |
| | | text-align: center; |
| | | color: #2d6aff; |
| | | } |
| | | #system-icon { |
| | | display: inline-block; |
| | | width: 70%; |
| | | height: 70%; |
| | | background-repeat: no-repeat; |
| | | background-size:100% 100%; |
| | | background-position: top center; |
| | | cursor: pointer; |
| | | } |
| | | .system-icon-open { |
| | | background-image: url("../image/stop48.png"); |
| | | } |
| | | .system-icon-close { |
| | | background-image: url("../image/start48.png"); |
| | | } |
| | | |
| | | #system-run-desc { |
| | | font-size: large; |
| | | display: inline-block; |
| | | padding-top: 10px; |
| | | font-weight: bold; |
| | | overflow: hidden; |
| | | text-overflow:ellipsis; |
| | | white-space: nowrap; |
| | | } |
| | | |
| | | /* 状态显示 */ |
| | | .data-window { |
| | | padding-top: 20px; |
| | | float: left; |
| | | width: 70%; |
| | | text-align: center; |
| | | } |
| | | .data-window h1 { |
| | | font-size: 3em; |
| | | margin: 0; |
| | | letter-spacing: 1px; |
| | | font-weight: inherit; |
| | | } |
| | | |
| | | /* 颜色提示 */ |
| | | .tips { |
| | | position: absolute; |
| | | bottom: 7%; |
| | | left: 10%; |
| | | } |
| | | .tips-item { |
| | | margin-bottom: 0; |
| | | font-size: 0; |
| | | text-align: left; |
| | | } |
| | | .tips-item label { |
| | | display: inline-block; |
| | | width: 130px; |
| | | text-align: right; |
| | | font-size: xx-small; |
| | | } |
| | | .item-group { |
| | | display: inline-block; |
| | | } |
| | | .item-group span { |
| | | font-size: xx-small; |
| | | padding: 0 10px; |
| | | } |
| | | |
| | | /* ------------------------------------ 主体 ------------------------------------*/ |
| | | main { |
| | | height: 80%; |
| | | margin-top: 8px; |
| | | border-radius: 5px; |
| | | box-shadow: 0 0 3px rgba(0,0,0,.3); |
| | | background-color: #fff; |
| | | height: 75.8%; |
| | | position: relative; |
| | | } |
| | | |
| | |
| | | } |
| | | /* 输送线第一列 */ |
| | | .site-row-1 { |
| | | left: 400px; |
| | | left: 200px; |
| | | } |
| | | .site-row-1 .site { |
| | | width: 100px; |
| | | } |
| | | /* 输送线第二列 */ |
| | | .site-row-2 { |
| | | left: 500px; |
| | | } |
| | | .site-row-2 .site { |
| | | width: 100px; |
| | | } |
| | | /* 输送线第三列 */ |
| | | .site-row-3 { |
| | | left: 600px; |
| | | width: 100px; |
| | | } |
| | | .site-row-3 .site { |
| | | float: left; |
| | | width: 100px; |
| | | } |
| | | /* 输送线第四列 */ |
| | | .site-row-4 { |
| | | left: 700px; |
| | | width: 100px; |
| | | } |
| | | .site-row-4 .site { |
| | | float: right; |
| | | width: 100px; |
| | | } |
| | | |
| | |
| | | .site-none { |
| | | border: none; |
| | | background-color: transparent; |
| | | cursor: default; |
| | | } |
| | | /* 自动 */ |
| | | .site-auto { |
| | | background-color: rgb(42,253,47); |
| | | } |
| | | /* 非自动/收到 */ |
| | | .site-unauto { |
| | | background-color: #aaaaaa; |
| | | } |
| | | /* 自动+有物+ID */ |
| | | .site-auto-run-id { |
| | | background-color: red; |
| | | } |
| | | /* 自动+有物 */ |
| | | .site-auto-run { |
| | | background-color: #fc29f8; |
| | | } |
| | | /* 自动+有物+ID */ |
| | | .site-auto-id { |
| | | background-color: yellow; |
| | | } |
| | | |
| | | /* ------------------ 台车 ------------------ */ |
| | | /* 轨道 */ |
| | | .car-track { |
| | | position: absolute; |
| | | background: url(../image/bg.jpg); |
| | | } |
| | | #car-track-1 { |
| | | top: 122px; |
| | | left: 100px; |
| | | width: 100px; |
| | | height: 200px; |
| | | } |
| | | |
| | | /* 车 */ |
| | | .car { |
| | | position: absolute; |
| | | } |
| | | #site-8 { |
| | | top: 122px; |
| | | left: 100px; |
| | | width: 100px; |
| | | height: 40px; |
| | | line-height: 40px |
| | | } |
| | | |
| | | /* ------------------ 货架总成 ------------------ */ |
| | | .main-part { |
| | | position: absolute; |
| | | top: 250px; |
| | | left: 600px; |
| | | top: 100px; |
| | | left: 300px; |
| | | } |
| | | |
| | | .main-part .lane { |
| | | /*margin-bottom: 30px;*/ |
| | | } |
| | | /* 排号 */ |
| | | .row-no { |
| | | font-weight: bolder; |
| | | margin-left: 80px; |
| | | } |
| | | |
| | |
| | | border-left: 1px solid #333!important; |
| | | border-right: 1px solid #333!important; |
| | | border-right: none; |
| | | cursor: inherit; |
| | | } |
| | | .stock-group .item:last-child { |
| | | /*border-right: 1px solid #333!important;*/ |
| | |
| | | cursor: pointer; |
| | | } |
| | | |
| | | /* 入库 */ |
| | | .machine-pakin { |
| | | background-image: url("../image/Crane_store.png"); |
| | | } |
| | | /* 出库 */ |
| | | .machine-pakout { |
| | | background-image: url("../image/Crane_retrieve.png"); |
| | | } |
| | | /* 库到库 */ |
| | | .machine-stock-move { |
| | | background-image: url("../image/Crane_loctoloc.png"); |
| | | } |
| | | /* 站到站 */ |
| | | .machine-site-move { |
| | | background-image: url("../image/Crane_stntostn.png"); |
| | | } |
| | | /* p to p */ |
| | | .machine-p-move { |
| | | background-image: url("../image/Crane_hptoohp.png"); |
| | | } |
| | | /* 异常 */ |
| | | .machine-error { |
| | | background-image: url("../image/Crane_error.png"); |
| | | } |
| | | /* 自动 */ |
| | | .machine-auto { |
| | | background-image: url("../image/Crane_auto.png"); |
| | | } |
| | | /* 非自动/收到 */ |
| | | .machine-un-auto { |
| | | background-image: url("../image/Crane_manual.png"); |
| | | } |
| | | |
| | | |
| | | |
| | | /* 入库 */ |
| | | .machine-put-flag { |
| | | background-color: #90d0f3; |
| | | } |
| | | /* 出库 */ |
| | | .machine-take-flag { |
| | | background-color: yellow; |
| | | } |
| | | /* 库到库 */ |
| | | .machine-stock-move-flag { |
| | | background-color: #0c24fb; |
| | | color: #fff; |
| | | } |
| | | /* 站到站 */ |
| | | .machine-site-move-flag { |
| | | background-color: #faa328; |
| | | } |
| | | /* PToP */ |
| | | .machine-p-move-flag { |
| | | background-color: #128014; |
| | | color: #fff; |
| | | } |
| | | /* 异常 */ |
| | | .machine-error-flag { |
| | | background-color: red; |
| | | } |
| | | /* 自动 */ |
| | | .machine-auto-flag { |
| | | background-color: rgb(42,253,47); |
| | | } |
| | | /* 非自动/收到 */ |
| | | .machine-unauto-flag { |
| | | background-color: #aaaaaa; |
| | | } |
| | | |
| | | /* 堆垛机轨道 */ |
| | | .pathway { |
| | | margin-left: 30px; |
| | |
| | | position: absolute; |
| | | background-color:#333!important; |
| | | color: #333 !important; |
| | | width: 90%; |
| | | width: 93%; |
| | | margin-top: 10px; |
| | | z-index: -1; |
| | | } |
| | | |
| | | |
| | | /* 输送线相关 */ |
| | | .site:hover { |
| | | opacity: 0.7; |
| | | } |
| | | |
| | | /* 入库口 */ |
| | | .cargo-put { |
| | | transform: rotateY(180deg); |
| | | top: 285px; |
| | | left: 313px; |
| | | position: absolute; |
| | | width: 50px; |
| | | height: 40px; |
| | | background-image: url("../image/fork_r.png"); |
| | | background-repeat: no-repeat; |
| | | background-size:100% 100%; |
| | | background-position: top center; |
| | | } |
| | | /* 扫码器 */ |
| | | .code-decoder { |
| | | position: absolute; |
| | | width: 30px; |
| | | height: 30px; |
| | | background-image: url("../image/bscanner.png"); |
| | | background-repeat: no-repeat; |
| | | background-size:100% 60%; |
| | | background-position: top center; |
| | | } |
| | | /* 扫码器文字 */ |
| | | .code-decoder-data { |
| | | font-size: small; |
| | | display: inline-block; |
| | | /*transform: scale(0.90);*/ |
| | | } |
| | | /* 扫码器1 */ |
| | | #code-decoder-1 { |
| | | top: 320px; |
| | | left: 200px; |
| | | } |
| | | /* 扫码器数据1 */ |
| | | #code-decoder-data-1 { |
| | | font-size: xx-small; |
| | | margin-left: 35px; |
| | | } |
| | | |
| | | /* 动画 */ |
| | | /*.machine {*/ |
| | | /*position: relative;*/ |
| | | /*-webkit-animation: machine 2s;*/ |
| | | /*animation: machine 2s;*/ |
| | | /*animation-fill-mode: forwards;*/ |
| | | /*}*/ |
| | | /*@-webkit-keyframes machine {*/ |
| | | /*from {left: 0;}*/ |
| | | /*to {left: 100px}*/ |
| | | /*}*/ |
| | | /*@keyframes animationCrn {*/ |
| | | /*from {left: 0}*/ |
| | | /*to {left: 100px}*/ |
| | | /*}*/ |
| | | /* 弹窗 */ |
| | | form .form-item { |
| | | display: inline-block; |
| | | padding-top: 10px; |
| | | padding-left: 5px; |
| | | } |
| | | form .form-item-label { |
| | | float: left; |
| | | text-align: right; |
| | | padding: 1px 6px; |
| | | display: inline-block; |
| | | vertical-align: middle; |
| | | } |
| | | form .form-item-input { |
| | | display: inline-block; |
| | | float: left; |
| | | vertical-align: middle; |
| | | } |
| | | form .form-item-input input { |
| | | height: 1.5rem; |
| | | padding-left: 0.5rem; |
| | | } |
| | | |