| | |
|---|
| | | <!DOCTYPE html> |
|---|
| | | <html lang=""> |
|---|
| | | <html lang="en"> |
|---|
| | | <head> |
|---|
| | | <meta charset="utf-8"> |
|---|
| | | <title>自动仓库WCS系统</title> |
|---|
| | | <meta name="renderer" content="webkit"> |
|---|
| | | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
|---|
| | | <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"> |
|---|
| | | <link rel="stylesheet" type="text/css" href="../static/css/normalize.css"> |
|---|
| | | <style> |
|---|
| | | /* 统一处理 */ |
|---|
| | | *, *::before, *::after { |
|---|
| | | -webkit-box-sizing: border-box; |
|---|
| | | box-sizing: border-box; |
|---|
| | | margin: 0; |
|---|
| | | padding: 0; |
|---|
| | | } |
|---|
| | | html { |
|---|
| | | line-height: 1.5; |
|---|
| | | font-size: 15px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .nav { |
|---|
| | | background-color: #fd5830; |
|---|
| | | } |
|---|
| | | .nav ul li { |
|---|
| | | list-style-type: none; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | <meta charset="utf-8"> |
|---|
| | | <title>环形穿梭车智能系统</title> |
|---|
| | | <link rel="stylesheet" href="../static/css/element.css"> |
|---|
| | | <script type="text/javascript" src="../static/js/jquery/jquery-3.3.1.min.js"></script> |
|---|
| | | <script type="text/javascript" src="../static/js/common.js"></script> |
|---|
| | | <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"> |
|---|
| | | <ul> |
|---|
| | | <li>导航一</li> |
|---|
| | | <li>导航二</li> |
|---|
| | | <li>导航三</li> |
|---|
| | | <li>导航四</li> |
|---|
| | | </ul> |
|---|
| | | </div> |
|---|
| | | <!--<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>--> |
|---|
| | | <div v-for="station in tableDataDev" class="station" :style="{ top: station.valueX + '%', left: station.valueY + '%' }">{{ station.index }}</div> |
|---|
| | | |
|---|
| | | |
|---|
| | | <!-- Buses --> |
|---|
| | | <div v-for="bus in tableDataRgv" class="bus" :style="{ top: bus.valueX + '%', left: bus.valueY + '%' }">{{ bus.index }}</div> |
|---|
| | | </div> |
|---|
| | | <script> |
|---|
| | | var app = new Vue({ |
|---|
| | | el: '#app', |
|---|
| | | data: { |
|---|
| | | tableDataRgv: [], |
|---|
| | | tableDataDev: [], |
|---|
| | | addWeekPlanDataWeeklySign: [ |
|---|
| | | { |
|---|
| | | index: 1, |
|---|
| | | valueX: 50, |
|---|
| | | valueY: 96.5 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | index: 2, |
|---|
| | | valueX: 0, |
|---|
| | | valueY: 0 |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | index: 3, |
|---|
| | | valueX: 80, |
|---|
| | | valueY: 55 |
|---|
| | | } |
|---|
| | | ] |
|---|
| | | }, |
|---|
| | | created(){ |
|---|
| | | this.init(); |
|---|
| | | }, |
|---|
| | | watch: { |
|---|
| | | |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | init(){ |
|---|
| | | this.getTableDataRgv() |
|---|
| | | this.getTableDataDev() |
|---|
| | | |
|---|
| | | setInterval(() => { |
|---|
| | | this.getTableDataRgv() |
|---|
| | | this.getTableDataDev() |
|---|
| | | }, 1000) |
|---|
| | | }, |
|---|
| | | getTableDataRgv() { |
|---|
| | | let that = this; |
|---|
| | | $.ajax({ |
|---|
| | | url: baseUrl + "/rgv/ring/through/rgv/position/data", |
|---|
| | | headers: { |
|---|
| | | 'token': localStorage.getItem('token') |
|---|
| | | }, |
|---|
| | | data: {}, |
|---|
| | | dataType: 'json', |
|---|
| | | contentType: 'application/json;charset=UTF-8', |
|---|
| | | method: 'post', |
|---|
| | | success: function (res) { |
|---|
| | | that.tableDataRgv = res.data |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | }, |
|---|
| | | getTableDataDev() { |
|---|
| | | let that = this; |
|---|
| | | $.ajax({ |
|---|
| | | url: baseUrl + "/rgv/ring/through/dev/position/data", |
|---|
| | | headers: { |
|---|
| | | 'token': localStorage.getItem('token') |
|---|
| | | }, |
|---|
| | | data: {}, |
|---|
| | | dataType: 'json', |
|---|
| | | contentType: 'application/json;charset=UTF-8', |
|---|
| | | method: 'post', |
|---|
| | | success: function (res) { |
|---|
| | | that.tableDataDev = res.data |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | |
|---|
| | | </script> |
|---|
| | | </body> |
|---|
| | | |
|---|
| | | </html> |
|---|
| | | |
|---|
| | | |
|---|
