<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="utf-8">
|
<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>
|
|
<!--<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>
|
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)
|
}
|
});
|
}
|
}
|
})
|
|
</script>
|
</html>
|
