1.前后端之间的通信以及前端页面的展示说明
展示图入下：
1.1前端页面展示
1.1.1设置box显示的内容以及条件（当有零件处于加工状态为box显示为绿色）
<!-- 第一行设备状态显示 -->
<div class="row">
<div class="box" :style="{ backgroundColor: op0010Flag === '加工' ? 'green' : 'gray' }"
@mouseover="op0010showPortId = true"
@mouseleave="op0010showPortId = false">
<p class="box-text">OP0010:{{ op0010Flag }}</p>
<p v-if="op0010Flag === '加工' && op0010showPortId" class="port-id">Port ID: {{ op0010PortId }}</p>
</div>
<div class="arrow"></div>
<div class="box" :style="{ backgroundColor: op20Flag === '上料' ? 'green' : 'gray' }"
@mouseover="op20showPortId = true"
@mouseleave="op20showPortId = false">
<p class="box-text">OP20:{{ op20Flag }}</p>
<p v-if="op20Flag === '上料' && op20showPortId" class="port-id">Port ID: {{ op20PortId }}</p>
</div>
<div class="arrow"></div>
<div class="box" :style="{ backgroundColor: op30Flag === '上料' ? 'green' : 'gray' }"
@mouseover="op30showPortId = true"
@mouseleave="op30showPortId = false">
<p class="box-text" >OP30:{{ op30Flag }}</p>
<p v-if="op30Flag === '上料' && op30showPortId" class="port-id">Port ID: {{ op30PortId }}</p>
</div>
<div class="arrow"></div>
<div class="box" :style="{ backgroundColor: op40Flag === '上料' ? 'green' : 'gray' }"
@mouseover="op40showPortId = true"
@mouseleave="op40showPortId = false">
<p class="box-text">OP40:{{ op40Flag }}</p>
<p v-if="op40Flag === '上料' && op40showPortId" class="port-id">Port ID: {{ op40PortId }}</p>
</div>
<div class="arrow"></div>
<div class="box" :style="{ backgroundColor: op65Flag55 === '上料' ? 'green' : 'gray' }"
@mouseover="op65showPortId55 = true"
@mouseleave="op65showPortId55 = false">
<p class="box-text">OP65-55:{{ op65Flag55 }}</p>
<p v-if="op65Flag55 === '上料' && op65showPortId55" class="port-id">Port ID: {{ op65PortId55 }}</p>
</div>
<div class="arrow"></div>
<div class="box" :style="{ backgroundColor: op65Flag47 === '上料' ? 'green' : 'gray' }"
@mouseover="op65showPortId47 = true"
@mouseleave="op65showPortId47 = false">
<p class="box-text">OP65-47:{{ op65Flag47 }}</p>
<p v-if="op65Flag47 === '上料' && op65showPortId47" class="port-id">Port ID: {{ op65PortId47 }}</p>
</div>
<div class="arrow"></div>
<div class="box" :style="{ backgroundColor: op80Flag === '上料' ? 'green' : 'gray' }"
@mouseover="op80showPortId = true"
@mouseleave="op80showPortId = false">
<p class="box-text">OP80:{{ op80Flag }}</p>
<p v-if="op80Flag === '上料' && op80showPortId" class="port-id">Port ID: {{ op80PortId }}</p>
</div>
<div class="arrow"></div>
<div class="box" :style="{ backgroundColor: op90Flag === '加工' ? 'green' : 'gray' }"
@mouseover="op90showPortId = true"
@mouseleave="op90showPortId = false">
<p class="box-text">OP90:{{ op90Flag }}</p>
<p v-if="op90Flag === '加工' && op90showPortId" class="port-id">Port ID: {{ op90PortId }}</p>
</div>
</div>
<h2 class="sub-title">七分场2线-2</h2>
<!-- 第二行设备状态显示 -->
<div class="row">
<div class="box" :style="{ backgroundColor: op270Flag === '上料' ? 'green' : 'gray' }"
@mouseover="op270showPortId = true"
@mouseleave="op270showPortId = false">
<p class="box-text">OP270:{{ op270Flag }}</p>
<p v-if="op270Flag === '上料' && op270showPortId" class="port-id">Port ID: {{ op270PortId }}</p>
</div>
<div class="arrow"></div>
<div class="box" :style="{ backgroundColor: op290Flag17 === '加工' ? 'green' : 'gray' }"
@mouseover="op290showPortId17 = true"
@mouseleave="op290showPortId17 = false">
<p class="box-text">OP290-17:{{ op290Flag17 }}</p>
<p v-if="op290Flag17 === '加工' && op290showPortId17" class="port-id">Port ID: {{ op290PortId17 }}</p>
</div>
<div class="arrow"></div>
<div class="box" :style="{ backgroundColor: op290Flag94 === '上料' ? 'green' : 'gray' }"
@mouseover="op290showPortId94 = true"
@mouseleave="op290showPortId94 = false">
<p class="box-text">OP290-94:{{ op290Flag94 }}</p>
<p v-if="op290Flag94 === '上料' && op290showPortId94" class="port-id">Port ID: {{ op290PortId94 }}</p>
</div>
<div class="arrow"></div>
<div class="box" :style="{ backgroundColor: op310Flag === '上料' ? 'green' : 'gray' }"
@mouseover="op310showPortId = true"
@mouseleave="op310showPortId = false">
<p class="box-text">OP310:{{ op310Flag }}</p>
<p v-if="op310Flag === '上料' && op310showPortId" class="port-id">Port ID: {{ op310PortId }}</p>
</div>
<div class="arrow"></div>
<div class="box" :style="{ backgroundColor: op315Flag === '上料' ? 'green' : 'gray' }"
@mouseover="op315showPortId = true"
@mouseleave="op315showPortId = false">
<p class="box-text">OP315:{{ op315Flag }}</p>
<p v-if="op315Flag === '上料' && op315showPortId" class="port-id">Port ID: {{ op315PortId }}</p>
</div>
<div class="arrow"></div>
<div class="box" :style="{ backgroundColor: op320Flag === '上料' ? 'green' : 'gray' }"
@mouseover="op320showPortId = true"
@mouseleave="op320showPortId = false">
<p class="box-text">OP320:{{ op320Flag }}</p>
<p v-if="op320Flag === '上料' && op320showPortId" class="port-id">Port ID: {{ op320PortId }}</p>
</div>
</div>
</div>1.1.2页面的显示（标题、小标题、对齐方式，一些style设置）
<div class="container">
<h1 class="page-title">七分场2线</h1>
<h3 class="sub-color-title processing"> 加工中</h3>
<h3 class="sub-color-title waiting"> 等待中</h3>
<h3 class="sub-color-title stopped"> 停机中</h3>
<style>
.container {
display: flex;
flex-direction: column;
height: 100vh; /* 使用视口高度 */
justify-content: flex-start; /* 顶部对齐 */
padding: 20px; /* 添加内边距 */
}
.page-title {
text-align: center; /* 文本居中对齐 */
color: black; /* 文本颜色为黑色 */
font-weight: bold; /* 文本加粗 */
margin-bottom: 150px; /* 调整标题与内容之间的间距 */
font-size: 50px; /* 主标题字体大小为36像素 */
}
.sub-title {
text-align: left; /* 文本左对齐 */
color: black; /* 文本颜色为黑色 */
font-weight: bold; /* 文本粗 */
margin: 40px; /* 设置适当的上下边距 */
}
.sub-color-title {
text-align: left; /* 尝试设置小标题左对齐 */
color: red; /* 文本颜色为黑色 */
font-weight: normal; /* 文本正常粗细 */
font-size: 24px; /* 小标题字体大小为24像素 */
margin-left: 40px;
position: relative; /* 相对定位，为伪元素提供参照 */
}
.sub-color-title::before {
content: "";
display: inline-block;
width: 40px;
height: 30px;
border-radius: 3px; /* 圆形 */
position: absolute;
left: -50px; /* 调整伪元素的位置 */
top: 50%; /* 垂直居中 */
transform: translateY(-50%);
}
.processing::before {
background-color: green; /* 绿色代表加工 */
}
.waiting::before {
background-color: yellow; /* 黄色代表等待 */
}
.stopped::before {
background-color: rgb(128, 128, 128); /* 灰色代表停机 */
}
.row {
display: flex;
align-items: center;
margin-bottom: 20px; /* 调整行与行之间的间距 */
}
.box {
position: relative; /* 相对定位，为了后续绝对定位的子元素 */
width: 130px;
height: 80px;
margin: 20px;
border: 1px solid black;
display: flex;
justify-content: center;
align-items: center;
}
.arrow {
width: 30px; /* 调整箭头的长度 */
height: 10px; /* 调整箭头的高度 */
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 10px solid black; /* 箭头指向右边 */
margin: 0 5px; /* 调整箭头与方框之间的间距 */
}
.box-text {
position: absolute; /* 绝对定位，相对于父元素 .box */
bottom: -50px; /* 调整文本距离底部的距离 */
margin: 0;
text-align: center; /* 文本居中对齐 */
}
.port-id {
position: absolute; /* 绝对定位，相对于父元素 .box */
top: 30px; /* 调整Port ID文本距离顶部的距离 */
margin: 0;
text-align: center; /* 文本居中对齐 */
width: 100%; /* 确保Port ID文本充满整个 .box */
font-size: 15px; /* 调整字体大小 */
}
</style>
1.2前端与后端之间的通信
1.2.1添加设备状态变量以便更好控制
export default {
data() {
return {
op0010Flag: '',
op0010PortId:'',
op0010showPortId: false,
op20Flag: '',
op20PortId:'',
op20showPortId: false,
op30Flag: '',
op30PortId:'',
op30showPortId: false,
op40Flag: '',
op40PortId:'',
op40showPortId: false,
op65Flag55: '',
op65PortId55:'',
op65showPortId55: false,
op65Flag47: '',
op65PortId47:'',
op65showPortId47: false,
op80Flag: '',
op80PortId:'',
op80showPortId: false,
op90Flag: '',
op90PortId:'',
op90showPortId: false,
op270Flag: '',
op270PortId:'',
op270showPortId: false,
op290Flag17: '',
op290PortId17:'',
op290showPortId17: false,
op290Flag94: '',
op290PortId94:'',
op290showPortId94: false,
op310Flag: '',
op310PortId:'',
op310showPortId: false,
op315Flag: '',
op315PortId:'',
op315showPortId: false,
op320Flag: '',
op320PortId:'',
op320showPortId: false,
// 可以根据需要继续添加更多设备状态变量
};
},
mounted() {
this.fetchData();
setInterval(this.fetchData, 50000); // 每50秒刷新一次数据
},1.2.2前后端通信
使用 Axios 库来发送 GET 请求，获取特定接口（http://localhost:8079/dev-api/system/time/listLine?processNumber=OP20）的数据。
接口需要带有一个名为 Authorization 的 HTTP 头部，用于身份验证，其中包含了一个 Bearer Token
接下来，处理请求的响应：
- 当成功获取响应后（
.then分支），首先获取当前时间currentTime。 - 使用
response.data.rows过滤出所有machineType为'OP20'的数据项，并且这些数据项的时间item.time小于等于currentTime。 - 如果存在满足条件的数据项（
op20Data.length > 0），则选择最后一个数据项currentOp20，并将其flag和portId分别赋给this.op20Flag和this.op20PortId。 - 如果没有满足条件的数据项，则将
this.op20Flag设置为'无数据'。 - 如果请求失败（
.catch分支），则在控制台输出错误信息error。
methods: {
fetchData() {
// 获取 OP0010 设备数据
axios.get('http://localhost:8079/dev-api/system/time/listLine?processNumber=OP0010', {
headers: {
Authorization: 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6ImUwMGY2YzVmLTc5YjktNDYwZC1iZWQyLWExMDkyMTc0OGIwNyJ9.oHpJqJKxVknY4-9qpYE7duV6k75q3JhNrrCRJ_NkuVcTWx_Scjb_Vcx79-aJbg8jVPO3HWrN02UVGLzlSYfjVA'
}
})
.then(response => {
const currentTime = new Date();
const op0010Data = response.data.rows.filter(item => {
if (item.machineType === 'OP0010') {
const itemTime = new Date(item.time);
return itemTime <= currentTime;
}
return false;
});
if (op0010Data.length > 0) {
const currentOp0010 = op0010Data[op0010Data.length-1];
this.op0010Flag = currentOp0010.flag;
this.op0010PortId = currentOp0010.portId;
} else {
this.op0010Flag = '无数据';
this.op0010PortId = ''; // 无数据时清空 portId
}
})
.catch(error => {
console.error('数据获取失败：', error);
});
// 获取 OP20 设备数据
axios.get('http://localhost:8079/dev-api/system/time/listLine?processNumber=OP20', {
headers: {
Authorization: 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6ImUwMGY2YzVmLTc5YjktNDYwZC1iZWQyLWExMDkyMTc0OGIwNyJ9.oHpJqJKxVknY4-9qpYE7duV6k75q3JhNrrCRJ_NkuVcTWx_Scjb_Vcx79-aJbg8jVPO3HWrN02UVGLzlSYfjVA'
}
})
.then(response => {
const currentTime = new Date();
const op20Data = response.data.rows.filter(item => {
if (item.machineType === 'OP20') {
const itemTime = new Date(item.time);
return itemTime <= currentTime;
}
return false;
});
if (op20Data.length > 0) {
const currentOp20 = op20Data[op20Data.length-1];
this.op20Flag = currentOp20.flag;
this.op20PortId = currentOp20.portId;
} else {
this.op20Flag = '无数据';
}
})
.catch(error => {
console.error('数据获取失败：', error);
});
// 获取 OP30 设备数据，以此类推
axios.get('http://localhost:8079/dev-api/system/time/listLine?processNumber=OP30', {
headers: {
Authorization: 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6ImUwMGY2YzVmLTc5YjktNDYwZC1iZWQyLWExMDkyMTc0OGIwNyJ9.oHpJqJKxVknY4-9qpYE7duV6k75q3JhNrrCRJ_NkuVcTWx_Scjb_Vcx79-aJbg8jVPO3HWrN02UVGLzlSYfjVA'
}
})
.then(response => {
const currentTime = new Date();
const op30Data = response.data.rows.filter(item => {
if (item.machineType === 'OP30') {
const itemTime = new Date(item.time);
return itemTime <= currentTime;
}
return false;
});
if (op30Data.length > 0) {
const currentOp30 = op30Data[op30Data.length-1];
this.op30Flag = currentOp30.flag;
this.op30PortId = currentOp30.portId;
} else {
this.op30Flag = '无数据';
}
})
.catch(error => {
console.error('数据获取失败：', error);
});
// 获取 OP40 设备数据
axios.get('http://localhost:8079/dev-api/system/time/listLine?processNumber=OP40', {
headers: {
Authorization: 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6ImUwMGY2YzVmLTc5YjktNDYwZC1iZWQyLWExMDkyMTc0OGIwNyJ9.oHpJqJKxVknY4-9qpYE7duV6k75q3JhNrrCRJ_NkuVcTWx_Scjb_Vcx79-aJbg8jVPO3HWrN02UVGLzlSYfjVA'
}
})
.then(response => {
const currentTime = new Date();
const op40Data = response.data.rows.filter(item => {
if (item.machineType === 'OP40') {
const itemTime = new Date(item.time);
return itemTime <= currentTime;
}
return false;
});
if (op40Data.length > 0) {
const currentOp40 = op40Data[op40Data.length-1];
this.op40Flag = currentOp40.flag;
this.op40PortId = currentOp40.portId;
} else {
this.op40Flag = '无数据';
}
})
.catch(error => {
console.error('数据获取失败：', error);
});
// 获取 OP65 002-55 设备数据
axios.get('http://localhost:8079/dev-api/system/time/listLine?deviceNumber=002-55&processNumber=OP65', {
headers: {
Authorization: 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6ImUwMGY2YzVmLTc5YjktNDYwZC1iZWQyLWExMDkyMTc0OGIwNyJ9.oHpJqJKxVknY4-9qpYE7duV6k75q3JhNrrCRJ_NkuVcTWx_Scjb_Vcx79-aJbg8jVPO3HWrN02UVGLzlSYfjVA'
}
})
.then(response => {
const currentTime = new Date();
const op65Data = response.data.rows.filter(item => {
if (item.machineType === 'OP65') {
const itemTime = new Date(item.time);
return itemTime <= currentTime;
}
return false;
});
if (op65Data.length > 0) {
const currentOp65 = op65Data[op65Data.length-1];
this.op65Flag55 = currentOp65.flag;
this.op65PortId55 = currentOp65.portId;
} else {
this.op65Flag55 = '无数据';
}
})
.catch(error => {
console.error('数据获取失败：', error);
});
// 获取 OP65 002-47 设备数据
axios.get('http://localhost:8079/dev-api/system/time/listLine?deviceNumber=002-47&processNumber=OP65', {
headers: {
Authorization: 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6ImUwMGY2YzVmLTc5YjktNDYwZC1iZWQyLWExMDkyMTc0OGIwNyJ9.oHpJqJKxVknY4-9qpYE7duV6k75q3JhNrrCRJ_NkuVcTWx_Scjb_Vcx79-aJbg8jVPO3HWrN02UVGLzlSYfjVA'
}
})
.then(response => {
const currentTime = new Date();
const op65Data = response.data.rows.filter(item => {
if (item.machineType === 'OP65') {
const itemTime = new Date(item.time);
return itemTime <= currentTime;
}
return false;
});
if (op65Data.length > 0) {
const currentOp65 = op65Data[op65Data.length-1];
this.op65Flag47 = currentOp65.flag;
this.op65PortId47 = currentOp65.portId;
} else {
this.op65Flag47 = '无数据';
}
})
.catch(error => {
console.error('数据获取失败：', error);
});
// 获取 OP80 设备数据
axios.get('http://localhost:8079/dev-api/system/time/listLine?processNumber=OP80', {
headers: {
Authorization: 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6ImUwMGY2YzVmLTc5YjktNDYwZC1iZWQyLWExMDkyMTc0OGIwNyJ9.oHpJqJKxVknY4-9qpYE7duV6k75q3JhNrrCRJ_NkuVcTWx_Scjb_Vcx79-aJbg8jVPO3HWrN02UVGLzlSYfjVA'
}
})
.then(response => {
const currentTime = new Date();
const op80Data = response.data.rows.filter(item => {
if (item.machineType === 'OP80') {
const itemTime = new Date(item.time);
return itemTime <= currentTime;
}
return false;
});
if (op80Data.length > 0) {
const currentOp80 = op80Data[op80Data.length-1];
this.op80Flag = currentOp80.flag;
this.op80PortId = currentOp80.portId;
} else {
this.op80Flag = '无数据';
}
})
.catch(error => {
console.error('数据获取失败：', error);
});
// 获取 OP90 设备数据
axios.get('http://localhost:8079/dev-api/system/time/listLine?processNumber=OP90', {
headers: {
Authorization: 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6ImUwMGY2YzVmLTc5YjktNDYwZC1iZWQyLWExMDkyMTc0OGIwNyJ9.oHpJqJKxVknY4-9qpYE7duV6k75q3JhNrrCRJ_NkuVcTWx_Scjb_Vcx79-aJbg8jVPO3HWrN02UVGLzlSYfjVA'
}
})
.then(response => {
const currentTime = new Date();
const op90Data = response.data.rows.filter(item => {
if (item.machineType === 'OP90') {
const itemTime = new Date(item.time);
return itemTime <= currentTime;
}
return false;
});
if (op90Data.length > 0) {
const currentOp90 = op90Data[op90Data.length-1];
this.op90Flag = currentOp90.flag;
this.op90PortId = currentOp90.portId;
} else {
this.op90Flag = '无数据';
}
})
.catch(error => {
console.error('数据获取失败：', error);
});
// 获取 OP270 设备数据
axios.get('http://localhost:8079/dev-api/system/time/listLine?processNumber=OP270', {
headers: {
Authorization: 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6ImUwMGY2YzVmLTc5YjktNDYwZC1iZWQyLWExMDkyMTc0OGIwNyJ9.oHpJqJKxVknY4-9qpYE7duV6k75q3JhNrrCRJ_NkuVcTWx_Scjb_Vcx79-aJbg8jVPO3HWrN02UVGLzlSYfjVA'
}
})
.then(response => {
const currentTime = new Date();
const op270Data = response.data.rows.filter(item => {
if (item.machineType === 'OP270') {
const itemTime = new Date(item.time);
return itemTime <= currentTime;
}
return false;
});
if (op270Data.length > 0) {
const currentOp270 = op270Data[op270Data.length-1];
this.op270Flag = currentOp270.flag;
this.op270PortId = currentOp270.portId;
} else {
this.op270Flag = '无数据';
}
})
.catch(error => {
console.error('数据获取失败：', error);
});
// 获取 OP290-030-17 设备数据
axios.get('http://localhost:8079/dev-api/system/time/listLine?deviceNumber=030-17&processNumber=OP290', {
headers: {
Authorization: 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6ImUwMGY2YzVmLTc5YjktNDYwZC1iZWQyLWExMDkyMTc0OGIwNyJ9.oHpJqJKxVknY4-9qpYE7duV6k75q3JhNrrCRJ_NkuVcTWx_Scjb_Vcx79-aJbg8jVPO3HWrN02UVGLzlSYfjVA'
}
})
.then(response => {
const currentTime = new Date();
const op290Data = response.data.rows.filter(item => {
if (item.machineType === 'OP290') {
const itemTime = new Date(item.time);
return itemTime <= currentTime;
}
return false;
});
if (op290Data.length > 0) {
const currentOp290 = op290Data[op290Data.length-1];
this.op290Flag17 = currentOp290.flag;
this.op290PortId17 = currentOp290.portId;
} else {
this.op290Flag17 = '无数据';
}
})
.catch(error => {
console.error('数据获取失败：', error);
});
// 获取 OP290-030-94 设备数据
axios.get('http://localhost:8079/dev-api/system/time/listLine?deviceNumber=030-94&processNumber=OP290', {
headers: {
Authorization: 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6ImUwMGY2YzVmLTc5YjktNDYwZC1iZWQyLWExMDkyMTc0OGIwNyJ9.oHpJqJKxVknY4-9qpYE7duV6k75q3JhNrrCRJ_NkuVcTWx_Scjb_Vcx79-aJbg8jVPO3HWrN02UVGLzlSYfjVA'
}
})
.then(response => {
const currentTime = new Date();
const op290Data = response.data.rows.filter(item => {
if (item.machineType === 'OP290') {
const itemTime = new Date(item.time);
return itemTime <= currentTime;
}
return false;
});
if (op290Data.length > 0) {
const currentOp290 = op290Data[op290Data.length-1];
this.op290Flag94 = currentOp290.flag;
this.op290PortId94 = currentOp290.portId;
} else {
this.op290Flag94 = '无数据';
}
})
.catch(error => {
console.error('数据获取失败：', error);
});
// 获取 OP310 设备数据
axios.get('http://localhost:8079/dev-api/system/time/listLine?processNumber=OP310', {
headers: {
Authorization: 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6ImUwMGY2YzVmLTc5YjktNDYwZC1iZWQyLWExMDkyMTc0OGIwNyJ9.oHpJqJKxVknY4-9qpYE7duV6k75q3JhNrrCRJ_NkuVcTWx_Scjb_Vcx79-aJbg8jVPO3HWrN02UVGLzlSYfjVA'
}
})
.then(response => {
const currentTime = new Date();
const op310Data = response.data.rows.filter(item => {
if (item.machineType === 'OP310') {
const itemTime = new Date(item.time);
return itemTime <= currentTime;
}
return false;
});
if (op310Data.length > 0) {
const currentOp310 = op310Data[op310Data.length-1];
this.op310Flag = currentOp310.flag;
this.op310PortId = currentOp310.portId;
} else {
this.op310Flag = '无数据';
}
})
.catch(error => {
console.error('数据获取失败：', error);
});
// 获取 OP315 设备数据
axios.get('http://localhost:8079/dev-api/system/time/listLine?processNumber=OP315', {
headers: {
Authorization: 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6ImUwMGY2YzVmLTc5YjktNDYwZC1iZWQyLWExMDkyMTc0OGIwNyJ9.oHpJqJKxVknY4-9qpYE7duV6k75q3JhNrrCRJ_NkuVcTWx_Scjb_Vcx79-aJbg8jVPO3HWrN02UVGLzlSYfjVA'
}
})
.then(response => {
const currentTime = new Date();
const op315Data = response.data.rows.filter(item => {
if (item.machineType === 'OP315') {
const itemTime = new Date(item.time);
return itemTime <= currentTime;
}
return false;
});
if (op315Data.length > 0) {
const currentOp315 = op315Data[op315Data.length-1];
this.op315Flag = currentOp315.flag;
this.op315PortId = currentOp315.portId;
} else {
this.op315Flag = '无数据';
}
})
.catch(error => {
console.error('数据获取失败：', error);
});
// 获取 OP320 设备数据
axios.get('http://localhost:8079/dev-api/system/time/listLine?processNumber=OP320', {
headers: {
Authorization: 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6ImUwMGY2YzVmLTc5YjktNDYwZC1iZWQyLWExMDkyMTc0OGIwNyJ9.oHpJqJKxVknY4-9qpYE7duV6k75q3JhNrrCRJ_NkuVcTWx_Scjb_Vcx79-aJbg8jVPO3HWrN02UVGLzlSYfjVA'
}
})
.then(response => {
const currentTime = new Date();
const op320Data = response.data.rows.filter(item => {
if (item.machineType === 'OP320') {
const itemTime = new Date(item.time);
return itemTime <= currentTime;
}
return false;
});
if (op320Data.length > 0) {
const currentOp320 = op320Data[op320Data.length-1];
this.op320Flag = currentOp320.flag;
this.op320PortId = currentOp320.portId;
} else {
this.op320Flag = '无数据';
}
})
.catch(error => {
console.error('数据获取失败：', error);
});
}
}
};
</script>
1.2.3后端部分通信部分
@ApiOperation("ceshi")
@GetMapping("/listLine")
public TableDataInfo get_line_list(PlfTraceTime plfTraceTime)
{
PlfProcessingLocation plfProcessingLocation=new PlfProcessingLocation();
plfProcessingLocation.setCrankshaftId(plfTraceTime.getCrankshaftId());
startPage();
plfTraceTime.setBeginTime(null);
plfTraceTime.setEndTime(null);
List<PlfLine> plfLineList=new ArrayList<>();
List<PlfTraceTime> list = plfTraceTimeService.selectPlfTraceTimeList(plfTraceTime);
System.out.println(list);
for(int i=list.size()-1;i>=0;i--)
{
PlfTraceTime plfTraceTime1=list.get(i);
Date date2=plfTraceTime1.getEndTime();
Date date1=plfTraceTime1.getBeginTime();
String a=new String();
if(date2!=null)
{
long differenceInMilliSeconds
= Math.abs(date2.getTime() - date1.getTime()-1000);
long differenceInHours
= (differenceInMilliSeconds / (60 * 60 * 1000))
% 24;
// Calculating the difference in Minutes
long differenceInMinutes
= (differenceInMilliSeconds / (60 * 1000)) % 60;
// Calculating the difference in Seconds
long differenceInSeconds
= (differenceInMilliSeconds / 1000) % 60;
if(differenceInHours>0)
{
a=a+differenceInHours+"小时";
}
if(differenceInMinutes>0)
{
a=a+differenceInMinutes+"分钟";
}
if(differenceInSeconds>0)
{
a=a+differenceInSeconds+"秒";
}
}
PlfLine plfLine1=new PlfLine();
if(plfTraceTime1.getFlagInspect().equals(1)) {
plfLine1.setFlag("上线扫码");
}else{
plfLine1.setFlag("上料");
}
plfLine1.setPortId(plfTraceTime1.getCrankshaftId());
plfLine1.setTime(plfTraceTime1.getBeginTime());
plfLine1.setMachineId(plfTraceTime1.getDeviceNumber());
// plfLine1.setLong(a);
plfLine1.setMachineName(plfTraceTime1.getDeviceName());
plfLine1.setMachineType(plfTraceTime1.getProcessNumber());
PlfLine plfLine2 = new PlfLine();
PlfLine plfLine3 = new PlfLine();
if(date2!=null&&(plfTraceTime1.getFlagInspect()!=1)){
plfLine2.setFlag("加工");
Date date = new Date();
date.setTime(plfTraceTime1.getBeginTime().getTime() + 1000);
plfLine2.setTime(date);
plfLine2.setMachineId(plfTraceTime1.getDeviceNumber());
plfLine2.setLong(a);
plfLine2.setMachineName(plfTraceTime1.getDeviceName());
plfLine2.setMachineType(plfTraceTime1.getProcessNumber());
plfLine2.setPortId(plfTraceTime1.getCrankshaftId());
plfLine3.setFlag("下料");
plfLine3.setTime(plfTraceTime1.getEndTime());
plfLine3.setMachineId(plfTraceTime1.getDeviceNumber());
plfLine3.setMachineName(plfTraceTime1.getDeviceName());
plfLine3.setMachineType(plfTraceTime1.getProcessNumber());
plfLine3.setPortId(plfTraceTime1.getCrankshaftId());
}
plfLineList.add(plfLine1);
if(date2!=null&&(plfTraceTime1.getFlagInspect()!=1)){
plfLineList.add(plfLine2);
plfLineList.add(plfLine3);
}
}
if(list.get(list.size()-1).getFlagInspect()==1&&list.get(list.size()-1).getEndTime()!=null)
{
PlfLine plfLine5 = new PlfLine();
plfLine5.setFlag("下线扫码");
plfLine5.setTime(list.get(list.size()-1).getEndTime());
plfLine5.setMachineType("扫码");
System.out.println(plfLine5);
plfLineList.add(plfLine5);
}
return getDataTable(plfLineList);
}
/**
* 导出时间追溯表列表
*/
@PreAuthorize("@ss.hasPermi('system:time:export')")
@Log(title = "时间追溯表", businessType = BusinessType.EXPORT)
@GetMapping("/export")
扫一扫
1928
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
