| | |
|---|
| | | <html> |
|---|
| | | <head> |
|---|
| | | <meta charset="utf-8"> |
|---|
| | | <title>自动仓库WCS系统</title> |
|---|
| | | <link rel="stylesheet" href="../static/css/index.css"> |
|---|
| | | <script src="../static/js/jquery/jquery-3.3.1.min.js"></script> |
|---|
| | | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|---|
| | | <title>环形穿梭车智能页面</title> |
|---|
| | | <script type="text/javascript" src="../static/js/vue.min.js"></script> |
|---|
| | | <script type="text/javascript" src="../static/js/element.js"></script> |
|---|
| | | <style> |
|---|
| | | body { |
|---|
| | | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
|---|
| | | margin: 0; |
|---|
| | | padding: 0; |
|---|
| | | background-color: #dbd8d8; |
|---|
| | | color: #ffffff; |
|---|
| | | display: flex; |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center; |
|---|
| | | height: 100vh; |
|---|
| | | } |
|---|
| | | header { |
|---|
| | | background-color: #2196F3; |
|---|
| | | color: white; |
|---|
| | | padding: 15px 20px; |
|---|
| | | text-align: center; |
|---|
| | | font-size: 24px; |
|---|
| | | letter-spacing: 1px; |
|---|
| | | box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); |
|---|
| | | } |
|---|
| | | .map { |
|---|
| | | position: relative; |
|---|
| | | width: 80vh; |
|---|
| | | height: 80vh; |
|---|
| | | border-radius: 50%; |
|---|
| | | display: flex; |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center; |
|---|
| | | } |
|---|
| | | .inner-ring, .outer-ring { |
|---|
| | | position: absolute; |
|---|
| | | border-radius: 50%; |
|---|
| | | } |
|---|
| | | .inner-ring { |
|---|
| | | width: 72vh; |
|---|
| | | height: 72vh; |
|---|
| | | border: 4px solid #00E676; |
|---|
| | | box-shadow: inset 0 0 30px rgba(0, 230, 118, 0.5), 0 0 20px rgba(0, 230, 118, 0.5); |
|---|
| | | } |
|---|
| | | .outer-ring { |
|---|
| | | width: 80vh; |
|---|
| | | height: 80vh; |
|---|
| | | border: 4px solid #00E676; |
|---|
| | | box-shadow: inset 0 0 30px rgba(0, 230, 118, 0.5), 0 0 20px rgba(0, 230, 118, 0.5); |
|---|
| | | } |
|---|
| | | .station, .bus { |
|---|
| | | position: absolute; |
|---|
| | | width: 24px; |
|---|
| | | height: 24px; |
|---|
| | | border-radius: 50%; |
|---|
| | | text-align: center; |
|---|
| | | line-height: 24px; |
|---|
| | | font-weight: bold; |
|---|
| | | transition: transform 0.3s ease; |
|---|
| | | } |
|---|
| | | .station { |
|---|
| | | background-color: #FF5722; |
|---|
| | | transform: scale(1.2); |
|---|
| | | } |
|---|
| | | .bus { |
|---|
| | | background-color: #2196F3; |
|---|
| | | border: 2px solid #ffffff; |
|---|
| | | } |
|---|
| | | .station:hover, .bus:hover { |
|---|
| | | transform: scale(1.4); |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | </head> |
|---|
| | | <body> |
|---|
| | | <!-- 导航栏 --> |
|---|
| | | <!-- <div class="nav">--> |
|---|
| | | <!-- <li class="right">注销<a id="about" class="nav-unselect" onclick="logout()" href="#"></a></li>--> |
|---|
| | | <!-- </div>--> |
|---|
| | | <div class="sidebar"> |
|---|
| | | <div class="nav"> |
|---|
| | | <ul class="cl-effect-4"> |
|---|
| | | <li><a id="console" onclick="nav(this.id)" class="nav-select" href="#">一楼一区</a></li> |
|---|
| | | <li><a id="console12" onclick="nav(this.id)" class="nav-select" href="#">一楼二区</a></li> |
|---|
| | | <li><a id="console21" onclick="nav(this.id)" class="nav-select" href="#">二楼一区</a></li> |
|---|
| | | <li><a id="console22" onclick="nav(this.id)" class="nav-select" href="#">二楼二区</a></li> |
|---|
| | | <li><a id="console23" onclick="nav(this.id)" class="nav-select" href="#">二楼三区</a></li> |
|---|
| | | <li><a id="pipeline" onclick="nav(this.id)" class="nav-unselect" href="#">输送设备</a></li> |
|---|
| | | <li><a id="crn" onclick="nav(this.id)" class="nav-unselect" href="#">堆垛机</a></li> |
|---|
| | | <li><a id="rgv" onclick="nav(this.id)" class="nav-unselect" href="#">RGV</a></li> |
|---|
| | | <li><a id="ste" onclick="nav(this.id)" class="nav-unselect" href="#">穿梭车</a></li> |
|---|
| | | </ul> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <!--<div style="z-index: 999; position: absolute; top: 250px; left: 900px; width: 200px; height: 200px; opacity: 0.5;background-color: #0000FF">--> |
|---|
| | | |
|---|
| | | <!--</div>--> |
|---|
| | | <!-- 主体内容 --> |
|---|
| | | <iframe id="content" src="console.html"></iframe> |
|---|
| | | <footer class="footer"> |
|---|
| | | Copyright © 2023 All Rights Reserved. <a href="https://www.zoneyung.com" target="_blank">浙江中扬</a> 保留所有权利 |
|---|
| | | </footer> |
|---|
| | | <!--<header>--> |
|---|
| | | <!-- 环形穿梭车智能系统--> |
|---|
| | | <!--</header>--> |
|---|
| | | <div id="app" class="map"> |
|---|
| | | <div class="inner-ring"></div> |
|---|
| | | <div class="outer-ring"></div> |
|---|
| | | |
|---|
| | | <!-- Stations on outer ring --> |
|---|
| | | <div class="station" style="top: -10px; left: 50%;">1</div> |
|---|
| | | <div class="station" style="top: 30%; left: 100%;">2</div> |
|---|
| | | <div class="station" style="top: 70%; left: 100%;">3</div> |
|---|
| | | <div class="station" style="top: 110%; left: 50%;">4</div> |
|---|
| | | <div class="station" style="top: 70%; left: 0;">5</div> |
|---|
| | | <div class="station" style="top: 30%; left: 0;">6</div> |
|---|
| | | |
|---|
| | | <!-- Stations on inner ring --> |
|---|
| | | <div class="station" style="top: 5%; left: 50%;">7</div> |
|---|
| | | <div class="station" style="top: 25%; left: 80%;">8</div> |
|---|
| | | <div class="station" style="top: 75%; left: 80%;">9</div> |
|---|
| | | <div class="station" style="top: 95%; left: 50%;">10</div> |
|---|
| | | <div class="station" style="top: 75%; left: 20%;">11</div> |
|---|
| | | <div class="station" style="top: 25%; left: 20%;">12</div> |
|---|
| | | |
|---|
| | | <!-- Buses --> |
|---|
| | | <div class="bus" style="top: 15%; left: 60%;">A</div> |
|---|
| | | <div class="bus" style="top: 45%; left: 85%;">B</div> |
|---|
| | | <div class="bus" style="top: 80%; left: 55%;">C</div> |
|---|
| | | <div class="bus" style="top: 65%; left: 25%;">D</div> |
|---|
| | | <div class="bus" style="top: 45%; left: 35%;">E</div> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | </body> |
|---|
| | | <script> |
|---|
| | | // 导航栏 |
|---|
| | | function nav(id) { |
|---|
| | | $('.nav-select').attr("class", "nav-unselect"); |
|---|
| | | $('#'+id).attr("class", "nav-select"); |
|---|
| | | $('#content').attr("src", id+".html"); |
|---|
| | | } |
|---|
| | | |
|---|
| | | function logout() { |
|---|
| | | localStorage.removeItem("token"); |
|---|
| | | window.location.href = baseUrl + "/login"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | // 系统运行状态 |
|---|
| | | var systemRunning = true; |
|---|
| | | |
|---|
| | | |
|---|
| | | news();layx.min('wcs-news'); |
|---|
| | | function news() { |
|---|
| | | layx.iframe( |
|---|
| | | 'wcs-news' // id |
|---|
| | | , '系统分析报告' |
|---|
| | | , "news.html" |
|---|
| | | , { |
|---|
| | | shadow:false |
|---|
| | | , storeStatus:false |
|---|
| | | // , skin: 'news' |
|---|
| | | , width:800 |
|---|
| | | , height:600 |
|---|
| | | , position:'rb' |
|---|
| | | // , control:false |
|---|
| | | , opacity:0.9 |
|---|
| | | , border:false |
|---|
| | | , icon:'<img src="../static/images/login.png" style="height:22px;display:block;" alt=""/>' |
|---|
| | | , stickMenu:true |
|---|
| | | , maxMenu:false |
|---|
| | | , closeMenu:false |
|---|
| | | , moveLimit:{ |
|---|
| | | leftOut: false, |
|---|
| | | rightOut: false, |
|---|
| | | topOut: false, |
|---|
| | | bottomOut: false, |
|---|
| | | var app = new Vue({ |
|---|
| | | el: '#app', |
|---|
| | | data: { |
|---|
| | | ringThroughringThrough: [], |
|---|
| | | addWeekPlanDataWeeklySign: [ |
|---|
| | | { |
|---|
| | | value: '1', |
|---|
| | | label: '上周' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | value: '2', |
|---|
| | | label: '本周' |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | value: '3', |
|---|
| | | label: '下周' |
|---|
| | | } |
|---|
| | | , minWidth:300 |
|---|
| | | , minHeight:300 |
|---|
| | | , borderRadius: '8px' |
|---|
| | | , shadeDestroy:true |
|---|
| | | , escKey: false |
|---|
| | | , event:{ |
|---|
| | | onmin: { |
|---|
| | | after: function () { |
|---|
| | | $('.layx-min-statu').css("left", "inherit").css("right", "10px") |
|---|
| | | } |
|---|
| | | } |
|---|
| | | , onrestore:{ |
|---|
| | | after: function () { |
|---|
| | | let win = layx.getFrameContext('wcs-news'); |
|---|
| | | win.autoScroll = true |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | }, |
|---|
| | | created(){ |
|---|
| | | this.init(); |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | filterText(val) { |
|---|
| | | this.$refs.tree.filter(val); |
|---|
| | | } |
|---|
| | | ); |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | computed:{ |
|---|
| | | // cstmrLabel () { |
|---|
| | | // return (val) => { |
|---|
| | | // let item = this.options.find(o => o.value === val); |
|---|
| | | // return item ? item.label : 'Item not found'; |
|---|
| | | // } |
|---|
| | | // } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | init(){ |
|---|
| | | let that = this |
|---|
| | | $.ajax({ |
|---|
| | | url: baseUrl + '/weekly/list/auth', |
|---|
| | | headers: {'token': localStorage.getItem('token')}, |
|---|
| | | method: "get", |
|---|
| | | success: (res) => { |
|---|
| | | that.tableData = res.data.records; |
|---|
| | | console.log(that.tableData) |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | |
|---|
| | | </script> |
|---|
| | | </html> |
|---|
