<!DOCTYPE html>
|
<html lang="zh-CN">
|
<head>
|
<meta charset="UTF-8">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<title>交通管制监控中心</title>
|
<link rel="stylesheet" href="../static/vue/element/element.css">
|
<link rel="stylesheet" href="../static/css/shuttle_page.min.css">
|
<script src="../static/js/shuttle_page.js"></script>
|
<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/vue/js/vue.min.js"></script>
|
<script type="text/javascript" src="../static/vue/element/element.js"></script>
|
<style>
|
body {
|
font-family: 'Noto Sans SC', sans-serif;
|
background-color: #0f172a;
|
color: #e2e8f0;
|
}
|
.card {
|
background-color: #1e293b;
|
border-radius: 0.75rem;
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
transition: all 0.3s ease;
|
}
|
/*.card:hover {*/
|
/* transform: translateY(-2px);*/
|
/* box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);*/
|
/*}*/
|
.btn {
|
background-color: #3b82f6;
|
color: white;
|
border-radius: 0.5rem;
|
padding: 0.5rem 1rem;
|
transition: all 0.3s ease;
|
}
|
.btn:hover {
|
background-color: #2563eb;
|
transform: translateY(-1px);
|
}
|
.status-active {
|
color: #4ade80;
|
}
|
.status-inactive {
|
color: #f87171;
|
}
|
.progress-bar {
|
height: 0.75rem;
|
border-radius: 0.375rem;
|
background-color: #334155;
|
}
|
.progress-fill {
|
height: 100%;
|
border-radius: 0.375rem;
|
background-color: #4ade80;
|
transition: width 0.5s ease;
|
}
|
.table-striped tbody tr:nth-child(odd) {
|
background-color: #1e293b;
|
}
|
.table-striped tbody tr:nth-child(even) {
|
background-color: #1a2537;
|
}
|
</style>
|
</head>
|
<body class="min-h-screen">
|
<div id="app">
|
<div class="container mx-auto px-4 py-8">
|
<!-- 顶部标题和状态栏 -->
|
<div class="flex flex-col md:flex-row justify-between items-center mb-8">
|
<h1 class="text-3xl font-bold text-blue-400 mb-4 md:mb-0">
|
<i class="fas fa-robot mr-2"></i>交通管制监控中心
|
</h1>
|
</div>
|
|
<!-- 操作控制区域 -->
|
<div class="card p-6 mb-8">
|
<h2 class="text-xl font-semibold text-blue-300 mb-4">
|
<i class="fas fa-sliders-h mr-2"></i>信息
|
</h2>
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-2">
|
<div v-for="(item) in controlList" class="bg-slate-700 p-4 rounded-lg">
|
<div class="gap-2">
|
<div class="p-2">
|
<button class="btn bg-slate-600 hover:bg-slate-500" @click="cancelTraffic(item)">
|
<i class="fas fa-home mr-1"></i>申请取消
|
</button>
|
</div>
|
<div class="p-2">
|
车辆编号：{{ item.shuttleNo }}
|
</div>
|
<div class="p-2">
|
任务号：{{ item.taskNo }}
|
</div>
|
<div class="p-2">
|
任务是否存在：{{ item.taskExist }}
|
</div>
|
<div class="p-2">
|
当前行驶节点：{{ item.nodeList }}
|
</div>
|
<div class="p-2">
|
总节点：{{ item.totalNodeList }}
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
</div>
|
</div>
|
</body>
|
|
<script>
|
var app = new Vue({
|
el: '#app',
|
data: {
|
ws: null,
|
controlList: []
|
},
|
created() {
|
this.init()
|
},
|
watch: {
|
|
},
|
methods: {
|
init() {
|
this.consoleInterval = setInterval(() => {
|
this.getTrafficControlInfos()
|
}, 1000)
|
},
|
getTrafficControlInfos() {
|
let that = this;
|
$.ajax({
|
url: baseUrl + "/trafficControl/getTrafficControlInfos",
|
headers: {'token': localStorage.getItem('token')},
|
method: 'GET',
|
data: {},
|
success: function (res) {
|
if (res.code === 200) {
|
let list = []
|
res.data.forEach((item) => {
|
let nodeList = []
|
item.nodeList.forEach((nodeItem) => {
|
let tmp = {
|
x: nodeItem.x,
|
y: nodeItem.y,
|
z: nodeItem.z
|
}
|
nodeList.push(tmp)
|
})
|
|
let totalNodeList = []
|
item.totalNodeList.forEach((nodeItem) => {
|
let tmp = {
|
x: nodeItem.x,
|
y: nodeItem.y,
|
z: nodeItem.z
|
}
|
totalNodeList.push(tmp)
|
})
|
|
item.nodeList = nodeList;
|
item.totalNodeList = totalNodeList;
|
|
list.push(item)
|
})
|
|
that.controlList = list;
|
} else if (res.code === 403) {
|
window.location.href = baseUrl + "/login";
|
} else {
|
that.$message({
|
message: res.msg,
|
type: 'warning'
|
});
|
}
|
}
|
});
|
},
|
cancelTraffic(item) {
|
let that = this;
|
$.ajax({
|
url: baseUrl + "/trafficControl/cancelTraffic",
|
headers: {'token': localStorage.getItem('token')},
|
method: 'POST',
|
data: {
|
shuttleNo: item.shuttleNo,
|
taskNo: item.taskNo
|
},
|
success: function (res) {
|
if (res.code === 200) {
|
that.$message({
|
message: res.msg,
|
type: 'success'
|
});
|
} else if (res.code === 403) {
|
window.location.href = baseUrl + "/login";
|
} else {
|
that.$message({
|
message: res.msg,
|
type: 'warning'
|
});
|
}
|
}
|
});
|
}
|
}
|
})
|
</script>
|
</html>
|
