| | |
| | | <!DOCTYPE html> |
| | | <html> |
| | | <html lang="en"> |
| | | <head> |
| | | <meta charset="utf-8"> |
| | | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | | <title>环形穿梭车智能页面</title> |
| | | <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> |
| | |
| | | </style> |
| | | </head> |
| | | <body> |
| | | <!--<header>--> |
| | | <!-- 环形穿梭车智能系统--> |
| | | <!--</header>--> |
| | | <div id="app" class="map"> |
| | | <div class="inner-ring"></div> |
| | | <div class="outer-ring"></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 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> |
| | | |
| | | <!-- 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> |
| | | var app = new Vue({ |
| | | el: '#app', |
| | | data: { |
| | | ringThroughringThrough: [], |
| | | addWeekPlanDataWeeklySign: [ |
| | | { |
| | | value: '1', |
| | | label: '上周' |
| | | }, |
| | | { |
| | | value: '2', |
| | | label: '本周' |
| | | }, |
| | | { |
| | | value: '3', |
| | | label: '下周' |
| | | } |
| | | ] |
| | | }, |
| | | 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) |
| | | <!-- 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: { |
| | | |
| | | </script> |
| | | }, |
| | | 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> |