From e68337c482ca97a32dafdeb87c164f44378fb473 Mon Sep 17 00:00:00 2001 From: lsh <lsh@163.com> Date: 星期二, 10 九月 2024 16:02:50 +0800 Subject: [PATCH] #fs --- src/main/webapp/views/index.html | 188 ++++++++++++++++++++++++++-------------------- 1 files changed, 105 insertions(+), 83 deletions(-) diff --git a/src/main/webapp/views/index.html b/src/main/webapp/views/index.html index f4bb567..ebd24eb 100644 --- a/src/main/webapp/views/index.html +++ b/src/main/webapp/views/index.html @@ -1,9 +1,11 @@ <!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> @@ -76,90 +78,110 @@ </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> -- Gitblit v1.9.1