<!DOCTYPE html>
|
<html lang="en">
|
<head>
|
<meta charset="utf-8">
|
<title>环形穿梭车智能系统</title>
|
<link rel="stylesheet" href="../static/css/element.css">
|
<link rel="stylesheet" href="../static/css/element-ui.css">
|
<link rel="icon" href="../static/images/favicon.ico" type="image/x-icon">
|
<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>
|
<script type="text/javascript" src="testPosition.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: 52vw;
|
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: 20px;
|
height: 14px;
|
text-align: center;
|
line-height: 1.5; /* 调整行高与字体大小的比值 */
|
font-size: 10px; /* 设置更小的字体 */
|
font-weight: bold;
|
transition: transform 0.3s ease;
|
background-color: #ab1839;
|
transform: scale(1); /* 可选：如果不需要放大效果 */
|
}
|
.bus {
|
font-size: 10px;
|
background-color: #2196F3;
|
border: 10px solid #ffffff;
|
position: absolute;
|
width: 15px;
|
height: 15px;
|
border-radius: 50%;
|
text-align: center;
|
line-height: 15px;
|
font-weight: bold;
|
transition: transform 0.3s ease;
|
}
|
.station:hover, .bus:hover {
|
transform: scale(1.4);
|
z-index: 999;
|
}
|
|
.task-bar-left {
|
position: fixed;
|
top: 1%;
|
/*transform: translateY(-50%);*/
|
width: 25%; /* 设置宽度 */
|
background-color: rgba(255, 255, 255, 0); /* 半透明背景 */
|
|
border-radius: 5px;
|
padding: 10px;
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0);
|
z-index: 1000; /* 确保在其他元素之上 */
|
}
|
|
.task-bar-right {
|
position: fixed;
|
top: 1%;
|
/*transform: translateY(-50%);*/
|
width: 25%; /* 设置宽度 */
|
background-color: rgba(255, 255, 255, 0); /* 半透明背景 */
|
|
border-radius: 5px;
|
padding: 10px;
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0);
|
z-index: 1000; /* 确保在其他元素之上 */
|
}
|
|
.task-bar-div1 {
|
/*width: 100%; !* 设置宽度 *!*/
|
background-color: rgba(255, 255, 255, 0.8); /* 半透明背景 */
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
}
|
|
.left-task-bar {
|
left: 20px; /* 距离左边的距离 */
|
/*bottom: 100px;*/
|
}
|
|
.right-task-bar {
|
/*bottom: 100px;*/
|
right: 20px; /* 距离右边的距离 */
|
}
|
|
.el-table .warning-row {
|
background: oldlace;
|
}
|
|
.el-table .success-row {
|
background: #f0f9eb;
|
}
|
.container {
|
width: 100vh;
|
height: 72vh;
|
position: absolute;
|
/*background: #8c939d;*/
|
}
|
.bus-station {
|
width: 100vh;
|
height: 72vh;
|
position: absolute;
|
display: flex;
|
/*background: #8c939d;*/
|
}
|
.bus-item-top {
|
background: red;
|
position: relative;
|
width: 40px;
|
height: 60px;
|
line-height: 60px;
|
top: 880px;
|
text-align: center;
|
}
|
.bus-item-left {
|
background: red;
|
position: relative;
|
width: 60px;
|
height: 40px;
|
line-height: 40px;
|
left: 1230px;
|
text-align: center;
|
}
|
.bus-item-left2 {
|
background: red;
|
position: relative;
|
width: 60px;
|
height: 40px;
|
line-height: 40px;
|
left: 1000px;
|
text-align: center;
|
}
|
</style>
|
</head>
|
<body>
|
<!--<header>-->
|
<!-- 环形穿梭车智能系统-->
|
<!--</header>-->
|
<div id="app">
|
<div class="map">
|
<div v-if="licenseDayI <=30 ">
|
<div style="color: red">{{licenseDay}}</div>
|
</div>
|
<!-- <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>-->
|
<svg class="container">
|
<!-- <path d="M 100,250-->
|
<!-- L 100,800-->
|
<!-- C 100,800 100,850 150,850-->
|
<!-- C 150,850 200,850 200,800-->
|
<!-- L 200,250-->
|
<!-- C 200,250 200,200 250,200-->
|
<!-- L 1100,200-->
|
<!-- C 1100,200 1150,200 1150,150-->
|
<!-- C 1150,150 1150,100 1100,100-->
|
<!-- L 250,100-->
|
<!-- C 250,100 90,90 100,250 z"-->
|
<!-- style="fill:none; stroke:blue; stroke-width:4;" />-->
|
<path d="M 1200,750
|
L 1200,100
|
C 1200,100 1200,50 1150,50
|
C 1150,50 1100,50 1100,100
|
L 1100,700
|
C 1100,700 1100,750 1050,750
|
L 60,750
|
C 60,750 10,750 10,800
|
C 10,800 10,850 60,850
|
L 1100,850
|
C 1100,850 1200,850 1200,750
|
"
|
style="fill:none; stroke:blue; stroke-width:4;" />
|
</svg>
|
<!-- <div class="bus-station">-->
|
<!-- <div v-for="(item,i) in devpPos1" class="bus-item-top" :style="'left:' + (75 + i * 15) + 'px'">{{item.dev_no}}</div>-->
|
<!-- </div>-->
|
<!-- <div class="bus-station" style="flex-direction: column">-->
|
<!-- <div v-for="(item,i) in devpPos2" class="bus-item-left" :style="'top:' + (200 + i * 50) + 'px'">{{item.dev_no}}</div>-->
|
<!-- </div>-->
|
<!-- <div class="bus-station" style="flex-direction: column">-->
|
<!-- <div v-for="(item,i) in devpPos3" class="bus-item-left2" :style="'top:' + (100 + i * 10) + 'px'">{{item.dev_no}}</div>-->
|
<!-- </div>-->
|
<!-- Stations on outer ring-->
|
<div v-for="station in tableDataDev" class="station" :style="{ top: station.valueY + 'px', left: station.valueX + 'px' }">{{ station.index }}</div>
|
<div>
|
<el-switch
|
style="display: block"
|
v-model="valueSystem"
|
active-color="#13ce66"
|
inactive-color="#A64036"
|
active-text="系统运行中..."
|
inactive-text="系统已停止!"
|
@change='upDateValueSystem'>
|
</el-switch>
|
</div>
|
<!-- Buses -->
|
<div v-for="bus in tableDataRgv" class="bus" :style="{ top: bus.valueY + 'px', left: bus.valueX + 'px' , borderColor: bus.modeColor, backgroundColor: bus.statusColor}">{{ bus.index }}</div>
|
</div>
|
|
<!-- Left Task Bar -->
|
<div class="task-bar-left left-task-bar" >
|
<div>
|
<el-tooltip :content="'Switch value: ' + valueLeft" placement="top">
|
<el-switch
|
v-model="valueLeft"
|
active-color="#13ce66"
|
inactive-color="#ff4949"
|
active-value="100"
|
inactive-value="0">
|
</el-switch>
|
</el-tooltip>
|
</div>
|
<div v-if="valueLeft === '100' " class="task-bar-div1">
|
<el-table
|
:data="tableDataLeft"
|
style="width: 100%"
|
:row-class-name="tableRowClassName">
|
<el-table-column
|
prop="wrkNo"
|
label="工作号">
|
</el-table-column>
|
<el-table-column
|
prop="rgvNo"
|
label="RGV号">
|
</el-table-column>
|
<el-table-column
|
prop="wrkSts$"
|
label="工作状态">
|
</el-table-column>
|
<el-table-column
|
prop="sourceStaNo"
|
label="源站">
|
</el-table-column>
|
<el-table-column
|
prop="staNo"
|
label="目标站">
|
</el-table-column>
|
<el-table-column
|
prop="modiTime"
|
label="下发时间">
|
</el-table-column>
|
<el-table-column
|
prop="crnStrTime"
|
label="开始执行时间">
|
</el-table-column>
|
<el-table-column
|
prop="crnEndTime"
|
label="执行结束时间">
|
</el-table-column>
|
<!-- <el-table-column-->
|
<!-- prop="modiTime"-->
|
<!-- label="更新时间">-->
|
<!-- </el-table-column>-->
|
<el-table-column
|
prop="rgvSts"
|
label="RGV状态">
|
</el-table-column>
|
<el-table-column
|
label="操作"
|
type="template">
|
<template slot-scope="scope">
|
<el-button
|
type="danger"
|
size="small"
|
@click="taskDelete(scope.row)">
|
删除
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
|
<!-- Right Task Bar -->
|
<div class="task-bar-right right-task-bar">
|
<div>
|
<el-tooltip :content="'Switch value: ' + valueRight" placement="top">
|
<el-switch
|
v-model="valueRight"
|
active-color="#13ce66"
|
inactive-color="#ff4949"
|
active-value="100"
|
inactive-value="0">
|
</el-switch>
|
</el-tooltip>
|
</div>
|
<div v-if="valueRight === '100' " class="task-bar-div1">
|
<el-table
|
:data="tableDataRight"
|
style="width: 100%"
|
:row-class-name="tableRowClassName">
|
<el-table-column
|
prop="rgvId"
|
label="编号"
|
width="80">
|
</el-table-column>
|
<el-table-column
|
prop="rgvNo"
|
label="小车号">
|
</el-table-column>
|
<el-table-column
|
prop="position"
|
label="位置">
|
</el-table-column>
|
<el-table-column
|
prop="status$"
|
label="状态">
|
</el-table-column>
|
<el-table-column
|
label="操作"
|
type="template">
|
<template slot-scope="scope">
|
<el-button
|
:type="scope.row.status === 0 ? 'primary' : 'danger'"
|
size="small"
|
@click="toggleStatus(scope.$index, scope.row)">
|
{{ scope.row.status === 0 ? '禁用' : '解除禁用' }}
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</div>
|
|
<script>
|
var app = new Vue({
|
el: '#app',
|
data: {
|
activeNames: ['1'],
|
valueLeft: '0',
|
valueRight: '0',
|
licenseDay: '已过期',
|
licenseDayI: 100,
|
valueSystem: false,
|
tableDataRgv: [],
|
tableDataDev: [],
|
energyGatheringRing: [],
|
tableDataLeft: [],
|
tableDataRight: [],
|
devpPos1:[
|
{dev_no: 116,pos:633980},
|
{dev_no: 117,pos:604043},
|
{dev_no: 118,pos:574323},
|
{dev_no: 119,pos:559534},
|
{dev_no: 120,pos:544682},
|
{dev_no: 121,pos:514912},
|
{dev_no: 122,pos:485227},
|
{dev_no: 123,pos:470367},
|
{dev_no: 124,pos:455514},
|
{dev_no: 125,pos:425768},
|
{dev_no: 126,pos:396268},
|
{dev_no: 127,pos:381106},
|
{dev_no: 128,pos:366311},
|
{dev_no: 129,pos:336638},
|
{dev_no: 130,pos:306820},
|
{dev_no: 131,pos:277067},
|
{dev_no: 132,pos:257418},
|
{dev_no: 133,pos:217730},
|
],
|
devpPos2:[
|
{dev_no: 112,pos:891000},
|
{dev_no: 113,pos:865000},
|
{dev_no: 114,pos:800000},
|
{dev_no: 115,pos:780000},
|
],
|
devpPos3:[
|
{dev_no: 101,pos:1269958},
|
{dev_no: 102,pos:1243454},
|
{dev_no: 103,pos:1229081},
|
{dev_no: 104,pos:1202099},
|
{dev_no: 105,pos:1187564},
|
{dev_no: 106,pos:1160630},
|
{dev_no: 107,pos:1146152},
|
{dev_no: 108,pos:1119463},
|
{dev_no: 109,pos:1105038},
|
{dev_no: 110,pos:1077961},
|
{dev_no: 111,pos:1063813},
|
],
|
},
|
created(){
|
this.init();
|
this.devpPos1.reverse()
|
this.devpPos3.reverse()
|
},
|
watch: {
|
|
},
|
methods: {
|
init(){
|
this.getTableDataRgv()
|
this.getTableDataDev()
|
this.getTableDataTrack()
|
this.getTableDataLeft()
|
this.getTableDataRight()
|
this.getValueSystem()
|
this.getLicenseDays()
|
|
setInterval(() => {
|
this.getTableDataRgv()
|
this.getTableDataDev()
|
this.getTableDataTrack()
|
this.getTableDataLeft()
|
this.getTableDataRight()
|
this.getValueSystem()
|
this.getLicenseDays()
|
|
}, 1000)
|
},
|
handleChange(val) {
|
console.log(val);
|
if (val.length === 0){
|
valueRight = '0';
|
} else {
|
console.log("2222"+val);
|
|
if (val.length >= 1){
|
this.handleChangeValueRight(1)
|
}
|
}
|
},
|
taskDelete(row) {
|
let that = this;
|
that.$confirm('确认要删除该设备吗?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
$.ajax({
|
url: baseUrl + "/rgv/disable/task/delete",
|
headers: {'token': localStorage.getItem('token')},
|
method: 'POST',
|
data: {
|
wrkNo: row.wrkNo
|
},
|
success: function (res) {
|
if (res.code === 200) {
|
that.$message.success('删除成功');
|
// 删除当前行
|
that.tableDataRight.splice(that.tableDataRight.indexOf(row), 1);
|
} else {
|
that.$message.error('删除失败');
|
}
|
}
|
});
|
});
|
},
|
toggleStatus(index, row) {
|
let that = this;
|
const currentStatus = row.status;
|
const targetStatus = currentStatus === 0 ? 1 : 0;
|
|
that.$confirm(`确认要${currentStatus === 0 ? '禁用' : '启用'}该设备吗?`, '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
$.ajax({
|
url: baseUrl + "/rgv/disable/rgv/status",
|
headers: {'token': localStorage.getItem('token')},
|
method: 'POST',
|
data: {
|
rgvNo: row.rgvNo,
|
status: targetStatus
|
},
|
success: function (res) {
|
if (res.code === 200) {
|
that.$message.success(`状态更新成功`);
|
row.status$ = targetStatus; // 更新前端状态
|
} else {
|
that.$message.error('状态更新失败');
|
}
|
}
|
});
|
});
|
},
|
handleChangeValueRight(val) {
|
console.log("33333"+val);
|
|
switch (val){
|
case 1:
|
valueRight = '100';
|
case 2:
|
valueRight = '100';
|
case 3:
|
valueRight = '100';
|
case 4:
|
valueRight = '100';
|
default:
|
valueRight = '0';
|
}
|
},
|
tableRowClassName({row, rowIndex}) {
|
if (rowIndex === 1) {
|
return 'warning-row';
|
} else if (rowIndex === 3) {
|
return 'success-row';
|
}
|
return '';
|
},
|
getLicenseDays(){
|
let that = this;
|
$.ajax({
|
url: baseUrl + "/license/getLicenseDays",
|
headers: {'token': localStorage.getItem('token')},
|
method: 'POST',
|
success: function (res) {
|
if (res.code == 200) {
|
if (res.data.day<0){
|
that.licenseDay = "已过期"+res.data.day+"天";
|
that.licenseDayI = -1;
|
} else {
|
that.licenseDay = "许可证有效期"+res.data.day+"天";
|
that.licenseDayI = res.data.day;
|
}
|
}else {
|
that.licenseDay = "已过期";
|
that.licenseDayI = -1;
|
}
|
}
|
});
|
|
},
|
getValueSystem() {
|
let that = this;
|
$.ajax({
|
url: baseUrl + "/console/system/running/status",
|
headers: {
|
'token': localStorage.getItem('token')
|
},
|
data: {},
|
dataType: 'json',
|
contentType: 'application/json;charset=UTF-8',
|
method: 'post',
|
success: function (res) {
|
that.valueSystem = res.data.status
|
}
|
});
|
},
|
upDateValueSystem(){
|
let that = this;
|
let operatorTypeI = 0;
|
if (that.valueSystem){
|
operatorTypeI = 1;
|
}
|
$.ajax({
|
url: baseUrl + "/console/system/switch",
|
headers: {'token': localStorage.getItem('token')},
|
data: {operatorType : operatorTypeI},
|
method: 'POST',
|
success: function (res) {
|
if (res.code === 200) {
|
that.valueSystem = res.data.status;
|
}
|
}
|
});
|
},
|
getTableDataLeft() {
|
let that = this;
|
$.ajax({
|
url: baseUrl + "/rgv/ring/through/task/wrk/mast/position/data",
|
headers: {
|
'token': localStorage.getItem('token')
|
},
|
data: {},
|
dataType: 'json',
|
contentType: 'application/json;charset=UTF-8',
|
method: 'post',
|
success: function (res) {
|
that.tableDataLeft = res.data
|
}
|
});
|
},
|
getTableDataRight() {
|
let that = this;
|
$.ajax({
|
url: baseUrl + "/rgv/task/rgv/circular/shuttle/mast/position/data",
|
headers: {
|
'token': localStorage.getItem('token')
|
},
|
data: {},
|
dataType: 'json',
|
contentType: 'application/json;charset=UTF-8',
|
method: 'post',
|
success: function (res) {
|
that.tableDataRight = res.data
|
}
|
});
|
},
|
getTableDataRgv() {
|
let that = this;
|
// that.tableDataRgv = busPsto
|
// return
|
$.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>
|
