<!DOCTYPE html>
|
<html lang="en">
|
<head>
|
<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: #a0d2eb;
|
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 {
|
position: absolute;
|
width: 40px;
|
height: 24px;
|
/*border-radius: 50%;*/
|
text-align: center;
|
line-height: 24px;
|
font-weight: bold;
|
transition: transform 0.3s ease;
|
background-color: #ab1839;
|
transform: scale(1.2);
|
}
|
.bus {
|
background-color: #2196F3;
|
border: 20px solid #ffffff;
|
position: absolute;
|
width: 24px;
|
height: 24px;
|
border-radius: 50%;
|
text-align: center;
|
line-height: 24px;
|
font-weight: bold;
|
transition: transform 0.3s ease;
|
}
|
.station:hover, .bus:hover {
|
transform: scale(1.4);
|
}
|
</style>
|
</head>
|
<body>
|
<!--<header>-->
|
<!-- 环形穿梭车智能系统-->
|
<!--</header>-->
|
<div id="app" class="map">
|
<!-- <div class="inner-ring"></div>-->
|
<!-- <div class="outer-ring"></div>-->
|
<div v-for="track in energyGatheringRing" class="inner-ring" :style="{ borderColor: track.trackColor , boxShadow : 'inset 0 0 30px '+track.radiationColor+', 0 0 20px '+track.radiationColor}"></div>
|
<div v-for="track in energyGatheringRing" class="outer-ring" :style="{ borderColor: track.trackColor , boxShadow : 'inset 0 0 30px '+track.radiationColor+', 0 0 20px '+track.radiationColor}"></div>
|
|
<!-- Stations on outer ring -->
|
<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 + '%' , borderColor: bus.modeColor, backgroundColor: bus.statusColor}">{{ bus.index }}</div>
|
</div>
|
<script>
|
var app = new Vue({
|
el: '#app',
|
data: {
|
tableDataRgv: [],
|
tableDataDev: [],
|
energyGatheringRing: []
|
},
|
created(){
|
this.init();
|
},
|
watch: {
|
|
},
|
methods: {
|
init(){
|
this.getTableDataRgv()
|
this.getTableDataDev()
|
this.getTableDataTrack()
|
|
setInterval(() => {
|
this.getTableDataRgv()
|
this.getTableDataDev()
|
this.getTableDataTrack()
|
}, 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
|
}
|
});
|
},
|
getTableDataTrack() {
|
let that = this;
|
$.ajax({
|
url: baseUrl + "/rgv/ring/through/track/position/data",
|
headers: {
|
'token': localStorage.getItem('token')
|
},
|
data: {},
|
dataType: 'json',
|
contentType: 'application/json;charset=UTF-8',
|
method: 'post',
|
success: function (res) {
|
that.energyGatheringRing = res.data
|
}
|
});
|
}
|
}
|
})
|
|
</script>
|
</body>
|
|
</html>
|
