前端调用接口在后端获取数据并显示的过程中出现问题导致数据无法正常在前端页面进行显示所以进行故障排查
1.从后端开始排查
1.1检查后端接口能否正常从数据库中获取数据
通过测试软件进行接口测试，这里我使用的是Apifox
将接口输入进测试软件中检查OP80的数据能否正常获取：
（注意：这里进行测试时一定要确保添加了正确的Authorization）
1.2通过调试工具我们发现 后端能够正常的获取数据所以排除后端的问题
2接下来排查前端
2.1进入检查页面
2.2点击网络，查看response能否正确拿到数据
2.3经过检查我们发现前端能正确拿到数据
3所以排除后端和前端的问题那么问题就是出在数据处理上
3.1接下来查看代码看看数据处理的问题在哪儿
添加console查看日志
一步一步的使用console进行错误的排查
以下是修改之后的代码
<template>
<div class="container">
<div class="head">
<div class="title" style="background-image: url(title-bg.png)">
<div class="title-left"></div>
<div class="title-value" style="color: #d9d9d9">八分场3线</div>
<div class="title-right"></div>
</div>
</div>
<div class="content">
<div class="layout">
<div class="box">
<p class="box-text">OP10</p>
<div class="circle"
:style="{ backgroundColor: op10Flag === '加工' ? 'green' : 'red' }">
</div>
<div class="progress-container">
<el-progress type="circle" :percentage="op10completedQuantity / op10plannedQuantity | toFixedTwo"></el-progress>
</div>
<div class="dynamic-data dynamic-data-left-bottom">
<div>
<p class="dynamic-data-item" style="color: #d9d9d9">计划加工: </p>
<input type="number" class="dynamic-data-item1" v-model="op10plannedQuantity">
<p class="dynamic-data-item" style="color: #d9d9d9">已 完 成: {{op10finished }}</p>
</div>
</div>
<div class="dynamic-data dynamic-data-right-top">
<p class="dynamic-data-item2">零件编号: {{op10PortId }}</p>
<p class="dynamic-data-item2">生产状态: {{op10Flag}}</p>
<p class="dynamic-data-item2">设备名称: {{op10machineName}}</p>
<p class="dynamic-data-item2">设备编号: {{op10machineId }}</p>
<p class="dynamic-data-item2">操作人员: {{op10peopleName }}</p>
</div>
</div>
</div>
<div class="layout">
<div class="box">
<p class="box-text">OP20</p>
<div class="circle"
:style="{ backgroundColor: op20Flag === '上料' ? 'green' : 'red' }">
</div>
<div class="progress-container">
<el-progress type="circle" :percentage="(op20completedQuantity / op20plannedQuantity) * 100"></el-progress>
</div>
<div class="dynamic-data dynamic-data-left-bottom">
<div>
<p class="dynamic-data-item" style="color: #d9d9d9">计划加工: </p>
<input type="number" class="dynamic-data-item1" v-model="op20plannedQuantity">
<p class="dynamic-data-item" style="color: #d9d9d9">已 完 成: {{op20finished }}</p>
</div>
</div>
<div class="dynamic-data dynamic-data-right-top">
<p class="dynamic-data-item2">零件编号: {{op20PortId }}</p>
<p class="dynamic-data-item2">生产状态: {{op20Flag}}</p>
<p class="dynamic-data-item2">设备名称: {{op20machineName}}</p>
<p class="dynamic-data-item2">设备编号: {{op20machineId }}</p>
<p class="dynamic-data-item2">操作人员: {{op20peopleName }}</p>
</div>
</div>
</div>
<div class="layout">
<div class="box">
<p class="box-text">OP30</p>
<div class="circle"
:style="{ backgroundColor: op30Flag === '加工' ? 'green' : 'red' }">
</div>
<div class="progress-container">
<el-progress type="circle" :percentage="(op30completedQuantity1 / op30plannedQuantity1) * 100"></el-progress>
</div>
<div class="dynamic-data dynamic-data-left-bottom">
<div>
<p class="dynamic-data-item" style="color: #d9d9d9">计划加工: </p>
<input type="number" class="dynamic-data-item1" v-model="op30plannedQuantity1">
<p class="dynamic-data-item" style="color: #d9d9d9">已 完 成: {{op30finished1 }}</p>
</div>
</div>
<div class="dynamic-data dynamic-data-right-top">
<p class="dynamic-data-item2">零件编号: {{op30PortId1 }}</p>
<p class="dynamic-data-item2">生产状态: {{op30Flag1}}</p>
<p class="dynamic-data-item2">设备名称: {{op30machineName1}}</p>
<p class="dynamic-data-item2">设备编号: {{op30machineId1 }}</p>
<p class="dynamic-data-item2">操作人员: {{op30peopleName1 }}</p>
</div>
</div>
</div>
<div class="layout">
<div class="box">
<p class="box-text">OP30</p>
<div class="circle"
:style="{ backgroundColor: op40Flag === '上料' ? 'green' : 'red' }">
</div>
<div class="progress-container">
<el-progress type="circle" :percentage="(op30completedQuantity2 / op30plannedQuantity2) * 100"></el-progress>
</div>
<div class="dynamic-data dynamic-data-left-bottom">
<div>
<p class="dynamic-data-item" style="color: #d9d9d9">计划加工: </p>
<input type="number" class="dynamic-data-item1" v-model="op30plannedQuantity2">
<p class="dynamic-data-item" style="color: #d9d9d9">已 完 成: {{op30finished2 }}</p>
</div>
</div>
<div class="dynamic-data dynamic-data-right-top">
<p class="dynamic-data-item2">零件编号: {{op30PortId2 }}</p>
<p class="dynamic-data-item2">生产状态: {{op30Flag2}}</p>
<p class="dynamic-data-item2">设备名称: {{op30machineName2}}</p>
<p class="dynamic-data-item2">设备编号: {{op30machineId2 }}</p>
<p class="dynamic-data-item2">操作人员: {{op30peopleName2 }}</p>
</div>
</div>
</div>
<div class="layout">
<div class="box">
<p class="box-text">OP40</p>
<div class="circle"
:style="{ backgroundColor: op40Flag === '加工' ? 'green' : 'red' }">
</div>
<div class="progress-container">
<el-progress type="circle" :percentage="(op40completedQuantity / op40plannedQuantity) * 100"></el-progress>
</div>
<div class="dynamic-data dynamic-data-left-bottom">
<div>
<p class="dynamic-data-item" style="color: #d9d9d9">计划加工: </p>
<input type="number" class="dynamic-data-item1" v-model="op40plannedQuantity">
<p class="dynamic-data-item" style="color: #d9d9d9">已 完 成: {{op40finished }}</p>
</div>
</div>
<div class="dynamic-data dynamic-data-right-top">
<p class="dynamic-data-item2">零件编号: {{op40PortId }}</p>
<p class="dynamic-data-item2">生产状态: {{op40Flag}}</p>
<p class="dynamic-data-item2">设备名称: {{op40machineName}}</p>
<p class="dynamic-data-item2">设备编号: {{op40machineId}}</p>
<p class="dynamic-data-item2">操作人员: {{op40peopleName}}</p>
</div>
</div>
</div>
<div class="layout">
<div class="box">
<p class="box-text">OP70</p>
<div class="circle"
:style="{ backgroundColor: op70Flag === '加工' ? 'green' : 'red' }">
</div>
<div class="progress-container">
<el-progress type="circle" :percentage="(op70completedQuantity2 / op70plannedQuantity2) * 100"></el-progress>
</div>
<div class="dynamic-data dynamic-data-left-bottom">
<div>
<p class="dynamic-data-item" style="color: #d9d9d9">计划加工: </p>
<input type="number" class="dynamic-data-item1" v-model="op70plannedQuantity2">
<p class="dynamic-data-item" style="color: #d9d9d9">已 完 成: {{op70finished2 }}</p>
</div>
</div>
<div class="dynamic-data dynamic-data-right-top">
<p class="dynamic-data-item2">零件编号: {{op70PortId2 }}</p>
<p class="dynamic-data-item2">生产状态: {{op70Flag2}}</p>
<p class="dynamic-data-item2">设备名称: {{op70machineName2}}</p>
<p class="dynamic-data-item2">设备编号: {{op70machineId2 }}</p>
<p class="dynamic-data-item2">操作人员: {{op70peopleName2 }}</p>
</div>
</div>
</div>
<div class="layout">
<div class="box">
<p class="box-text">OP250</p>
<div class="circle"
:style="{ backgroundColor: op250Flag === '加工' ? 'green' : 'red' }">
</div>
<div class="progress-container">
<el-progress type="circle" :percentage="(op250completedQuantity / op250plannedQuantity) * 100"></el-progress>
</div>
<div class="dynamic-data dynamic-data-left-bottom">
<div>
<p class="dynamic-data-item" style="color: #d9d9d9">计划加工: </p>
<input type="number" class="dynamic-data-item1" v-model="op250plannedQuantity">
<p class="dynamic-data-item" style="color: #d9d9d9">已 完 成: {{op250finished }}</p>
</div>
</div>
<div class="dynamic-data dynamic-data-right-top">
<p class="dynamic-data-item2">零件编号: {{op250PortId }}</p>
<p class="dynamic-data-item2">生产状态: {{op250Flag}}</p>
<p class="dynamic-data-item2">设备名称: {{op250machineName}}</p>
<p class="dynamic-data-item2">设备编号: {{op250machineId }}</p>
<p class="dynamic-data-item2">操作人员: {{op250peopleName }}</p>
</div>
</div>
</div>
<div class="layout">
<div class="box">
<p class="box-text">OP80</p>
<div class="circle"
:style="{ backgroundColor: op80Flag === '加工' ? 'green' : 'red' }">
</div>
<div class="progress-container">
<el-progress type="circle" :percentage="(op80completedQuantity / op80plannedQuantity) * 100"></el-progress>
</div>
<div class="dynamic-data dynamic-data-left-bottom">
<div>
<p class="dynamic-data-item" style="color: #d9d9d9">计划加工: </p>
<input type="number" class="dynamic-data-item1" v-model="op80plannedQuantity">
<p class="dynamic-data-item" style="color: #d9d9d9">已 完 成: {{op80finished }}</p>
</div>
</div>
<div class="dynamic-data dynamic-data-right-top">
<p class="dynamic-data-item2">零件编号: {{op80PortId }}</p>
<p class="dynamic-data-item2">生产状态: {{op80Flag}}</p>
<p class="dynamic-data-item2">设备名称: {{op80machineName}}</p>
<p class="dynamic-data-item2">设备编号: {{op80machineId }}</p>
<p class="dynamic-data-item2">操作人员: {{op80peopleName }}</p>
</div>
</div>
</div>
<div class="layout">
<div class="box">
<p class="box-text">OP70</p>
<div class="circle"
:style="{ backgroundColor: op70Flag2 === '加工' ? 'green' : 'red' }">
</div>
<div class="progress-container">
<el-progress type="circle" :percentage="(op70completedQuantity2 / op70plannedQuantity2) * 100"></el-progress>
</div>
<div class="dynamic-data dynamic-data-left-bottom">
<div>
<p class="dynamic-data-item" style="color: #d9d9d9">计划加工: </p>
<input type="number" class="dynamic-data-item1" v-model="op70plannedQuantity2">
<p class="dynamic-data-item"style="color: #d9d9d9" >已 完 成: {{op70finished2 }}</p>
</div>
</div>
<div class="dynamic-data dynamic-data-right-top">
<p class="dynamic-data-item2">零件编号: {{op70PortId2 }}</p>
<p class="dynamic-data-item2">生产状态: {{op70Flag2}}</p>
<p class="dynamic-data-item2">设备名称: {{op70machineName2}}</p>
<p class="dynamic-data-item2">设备编号: {{op70machineId2 }}</p>
<p class="dynamic-data-item2">操作人员: {{op70peopleName2 }}</p>
</div>
</div>
</div>
<div class="layout">
<div class="box">
<p class="box-text">OP30</p>
<div class="circle"
:style="{ backgroundColor: op30Flag3 === '加工' ? 'green' : 'red' }">
</div>
<div class="progress-container">
<el-progress type="circle" :percentage="(op30completedQuantity3 / op30plannedQuantity3) * 100"></el-progress>
</div>
<div class="dynamic-data dynamic-data-left-bottom">
<div>
<p class="dynamic-data-item" style="color: #d9d9d9">计划加工: </p>
<input type="number" class="dynamic-data-item1" v-model="op30plannedQuantity3">
<p class="dynamic-data-item"style="color: #d9d9d9" >已 完 成: {{op30finished3 }}</p>
</div>
</div>
<div class="dynamic-data dynamic-data-right-top">
<p class="dynamic-data-item2">零件编号: {{op30PortId3 }}</p>
<p class="dynamic-data-item2">生产状态: {{op30Flag3}}</p>
<p class="dynamic-data-item2">设备名称: {{op30machineName3}}</p>
<p class="dynamic-data-item2">设备编号: {{op30machineId3 }}</p>
<p class="dynamic-data-item2">操作人员: {{op30peopleName3 }}</p>
</div>
</div>
</div>
<div class="layout">
<div class="box">
<p class="box-text">OP31</p>
<div class="circle"
:style="{ backgroundColor: op31Flag === '加工' ? 'green' : 'red' }">
</div>
<div class="progress-container">
<el-progress type="circle" :percentage="(op31completedQuantity / op31plannedQuantity) * 100"></el-progress>
</div>
<div class="dynamic-data dynamic-data-left-bottom">
<div>
<p class="dynamic-data-item" style="color: #d9d9d9">计划加工: </p>
<input type="number" class="dynamic-data-item1" v-model="op31plannedQuantity">
<p class="dynamic-data-item" style="color: #d9d9d9">已 完 成: {{op31finished }}</p>
</div>
</div>
<div class="dynamic-data dynamic-data-right-top">
<p class="dynamic-data-item2">零件编号: {{op31PortId }}</p>
<p class="dynamic-data-item2">生产状态: {{op31Flag}}</p>
<p class="dynamic-data-item2">设备名称: {{op31machineName}}</p>
<p class="dynamic-data-item2">设备编号: {{op31machineId }}</p>
<p class="dynamic-data-item2">操作人员: {{op31peopleName }}</p>
</div>
</div>
</div>
<div class="layout">
<div class="box">
<p class="box-text">OP32</p>
<div class="circle"
:style="{ backgroundColor: op32Flag === '加工' ? 'green' : 'red' }">
</div>
<div class="progress-container">
<el-progress type="circle" :percentage="(op32completedQuantity / op32plannedQuantity) * 100"></el-progress>
</div>
<div class="dynamic-data dynamic-data-left-bottom">
<div>
<p class="dynamic-data-item" style="color: #d9d9d9">计划加工: </p>
<input type="number" class="dynamic-data-item1" v-model="op32plannedQuantity">
<p class="dynamic-data-item" style="color: #d9d9d9">已 完 成: {{op32finished }}</p>
</div>
</div>
<div class="dynamic-data dynamic-data-right-top">
<p class="dynamic-data-item2">零件编号: {{op32PortId }}</p>
<p class="dynamic-data-item2">生产状态: {{op32Flag}}</p>
<p class="dynamic-data-item2">设备名称: {{op32machineName}}</p>
<p class="dynamic-data-item2">设备编号: {{op32machineId }}</p>
<p class="dynamic-data-item2">操作人员: {{op32peopleName }}</p>
</div>
</div>
</div>
<div class="layout">
<div class="box">
<p class="box-text"></p>
<div class="circle"
:style="{ backgroundColor: op0010Flag === '加工' ? 'green' : 'red' }">
</div>
<div class="progress-container">
<el-progress type="circle" :percentage="(completedQuantity / plannedQuantity) * 100"></el-progress>
</div>
<div class="dynamic-data dynamic-data-left-bottom">
<div>
<p class="dynamic-data-item" style="color: #d9d9d9">计划加工: </p>
<input type="number" class="dynamic-data-item1" v-model="plannedQuantity">
<p class="dynamic-data-item" style="color: #d9d9d9">已 完 成: 5000</p>
</div>
</div>
<div class="dynamic-data dynamic-data-right-top">
<p class="dynamic-data-item2">零件编号: {{ }}</p>
<p class="dynamic-data-item2">生产状态: {{}}</p>
<p class="dynamic-data-item2">设备名称: {{}}</p>
<p class="dynamic-data-item2">设备编号: {{ }}</p>
<p class="dynamic-data-item2">操作人员: {{ }}</p>
</div>
</div>
</div>
<div class="layout">
<div class="box">
<p class="box-text"></p>
<div class="circle"
:style="{ backgroundColor: op0010Flag === '加工' ? 'green' : 'red' }">
</div>
<div class="progress-container">
<el-progress type="circle" :percentage="(completedQuantity / plannedQuantity) * 100"></el-progress>
</div>
<div class="dynamic-data dynamic-data-left-bottom">
<div>
<p class="dynamic-data-item" style="color: #d9d9d9">计划加工: </p>
<input type="number" class="dynamic-data-item1" v-model="plannedQuantity">
<p class="dynamic-data-item" style="color: #d9d9d9">已 完 成: 5000</p>
</div>
</div>
<div class="dynamic-data dynamic-data-right-top">
<p class="dynamic-data-item2">零件编号: {{op0010PortId }}</p>
<p class="dynamic-data-item2">生产状态: {{op0010Flag}}</p>
<p class="dynamic-data-item2">设备名称: {{op0010machineName}}</p>
<p class="dynamic-data-item2">设备编号: {{op0010machineId }}</p>
<p class="dynamic-data-item2">操作人员: {{op0010peopleName }}</p>
</div>
</div>
</div>
<div class="layout">
<div class="box">
<p class="box-text"></p>
<div class="circle"
:style="{ backgroundColor: op0010Flag === '加工' ? 'green' : 'red' }">
</div>
<div class="progress-container">
<el-progress type="circle" :percentage="(completedQuantity / plannedQuantity) * 100"></el-progress>
</div>
<div class="dynamic-data dynamic-data-left-bottom">
<div>
<p class="dynamic-data-item" style="color: #d9d9d9">计划加工: </p>
<input type="number" class="dynamic-data-item1" v-model="plannedQuantity">
<p class="dynamic-data-item" style="color: #d9d9d9">已 完 成: 5000</p>
</div>
</div>
<div class="dynamic-data dynamic-data-right-top">
<p class="dynamic-data-item2">零件编号: {{op0010PortId }}</p>
<p class="dynamic-data-item2">生产状态: {{op0010Flag}}</p>
<p class="dynamic-data-item2">设备名称: {{op0010machineName}}</p>
<p class="dynamic-data-item2">设备编号: {{op0010machineId }}</p>
<p class="dynamic-data-item2">操作人员: {{op0010peopleName }}</p>
</div>
</div>
</div>
<div class="layout">
<div class="box">
<p class="box-text"></p>
<div class="circle"
:style="{ backgroundColor: op0010Flag === '加工' ? 'green' : 'red' }">
</div>
<div class="progress-container">
<el-progress type="circle" :percentage="(completedQuantity / plannedQuantity) * 100"></el-progress>
</div>
<div class="dynamic-data dynamic-data-left-bottom">
<div>
<p class="dynamic-data-item" style="color: #d9d9d9">计划加工: </p>
<input type="number" class="dynamic-data-item1" v-model="plannedQuantity">
<p class="dynamic-data-item" style="color: #d9d9d9">已 完 成: 5000</p>
</div>
</div>
<div class="dynamic-data dynamic-data-right-top">
<p class="dynamic-data-item2">零件编号: {{op0010PortId }}</p>
<p class="dynamic-data-item2">生产状态: {{op0010Flag}}</p>
<p class="dynamic-data-item2">设备名称: {{op0010machineName}}</p>
<p class="dynamic-data-item2">设备编号: {{op0010machineId }}</p>
<p class="dynamic-data-item2">操作人员: {{op0010peopleName }}</p>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios';
// 配置 axios 实例
const axiosInstance = axios.create({
baseURL: 'http://localhost:8079/dev-api',
// 可选：其他 axios 配置
});
// 添加请求拦截器
axiosInstance.interceptors.request.use(
config => {
// 从浏览器中获取授权信息，例如从 Cookie 或者 localStorage 中获取
const token = getCookie('Admin-Token'); // 使用 getCookie 函数获取名为 'accessToken' 的 Cookie
console.log('token的内容：', token); // 输出 Token 的值部分
if (token) {
config.headers.Authorization = `Bearer ${token}`;
} else {
console.log('没有获取到 accessToken');
}
return config;
},
error => {
return Promise.reject(error);
}
);
// 获取 Cookie 的函数
function getCookie(name) {
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
if (parts.length === 2) {
return parts.pop().split(';').shift();
}
}
export default {
data() {
return {
plannedQuantity: 10000, // 初始值为 10000，可以根据需要设置初始值
completedQuantity: 5000,// 已完成数量
op10plannedQuantity: 10000, // 初始值为 10000，可以根据需要设置初始值
op10completedQuantity: 5000,// 已完成数量
op20plannedQuantity: 10000, // 初始值为 10000，可以根据需要设置初始值
op20completedQuantity: 5000,// 已完成数量
op30plannedQuantity1: 10000, // 初始值为 10000，可以根据需要设置初始值
op30completedQuantity1: 5000,// 已完成数量
op30plannedQuantity2: 10000, // 初始值为 10000，可以根据需要设置初始值
op30completedQuantity2: 5000,// 已完成数量
op40plannedQuantity: 10000, // 初始值为 10000，可以根据需要设置初始值
op40completedQuantity: 5000,// 已完成数量
op70plannedQuantity1: 10000, // 初始值为 10000，可以根据需要设置初始值
op70completedQuantity1: 5000,// 已完成数量
op250plannedQuantity: 10000, // 初始值为 10000，可以根据需要设置初始值
op250completedQuantity: 5000,// 已完成数量
op80plannedQuantity: 10000, // 初始值为 10000，可以根据需要设置初始值
op80completedQuantity: 5000,// 已完成数量
op70plannedQuantity2: 10000, // 初始值为 10000，可以根据需要设置初始值
op70completedQuantity2: 5000,// 已完成数量
op30plannedQuantity3: 10000, // 初始值为 10000，可以根据需要设置初始值
op30completedQuantity3: 5000,// 已完成数量
op31plannedQuantity: 10000, // 初始值为 10000，可以根据需要设置初始值
op31completedQuantity: 5000,// 已完成数量
op32plannedQuantity: 10000, // 初始值为 10000，可以根据需要设置初始值
op32completedQuantity: 5000,// 已完成数量
op0010showPortId: false,
op0010peopleName: '',
op0010machineName: '',
op0010machineId: '',
op0010PortId: '',
op0010Flag: '',
op10showPortId: false,
op10peopleName: '',
op10machineName: '',
op10machineId: '',
op10PortId: '',
op10Flag: '',
op10finished:'',
op20Flag: '',
op20PortId: '',
op20showPortId: false,
op20peopleName: '',
op20machineName: '',
op20machineId: '',
op20finished:'',
op30Flag1: '',
op30PortId1: '',
op30showPortId1: false,
op30peopleName1: '',
op30machineName1: '',
op30machineId1: '',
op30finished1:'',
op30Flag2: '',
op30PortId2: '',
op30showPortId2: false,
op30peopleName2: '',
op30machineName2: '',
op30machineId2 : '',
op30finished2:'',
op40Flag: '',
op40PortId: '',
op40showPortId: false,
op40peopleName: '',
op40machineName: '',
op40machineId: '',
op40finished:'',
op70Flag1: '',
op70PortId1: '',
op70showPortId1: false,
op70peopleName1: '',
op70machineName1: '',
op70machineId1: '',
op70finished1:'',
op250Flag: '',
op250PortId: '',
op250showPortId: false,
op250peopleName: '',
op250machineName: '',
op250machineId: '',
op250finished:'',
op80Flag: '',
op80PortId: '',
op80showPortId: false,
op80peopleName: '',
op80machineName: '',
op80machineId: '',
op80finished:'',
op70Flag2: '',
op70PortId2: '',
op70showPortId2: false,
op70peopleName2: '',
op70machineName2: '',
op70machineId2: '',
op70finished2:'',
op30Flag3: '',
op30PortId3: '',
op30showPortId3: false,
op30peopleName3: '',
op30machineName3: '',
op30machineId3 : '',
op30finished3:'',
op31Flag: '',
op31PortId: '',
op31showPortId: false,
op31peopleName: '',
op31machineName: '',
op31machineId : '',
op31finished:'',
op32Flag: '',
op32PortId: '',
op32showPortId: false,
op32peopleName: '',
op32machineName: '',
op32machineId : '',
op32finished:'',
// 可以根据需要继续添加更多设备状态变量
};
},
filters: {
toFixedTwo(value) {
if (isNaN(value)) return '0.00';
return Number(value).toFixed(2);
},
},
mounted() {
this.fetchData();
setInterval(this.fetchData, 50000); // 每50秒刷新一次数据
},
methods: {
async fetchData() {
try {
const currentTime = new Date();
// 获取 OP0010 设备数据
const response1 = await axiosInstance.get('/system/time/listLine?processNumber=OP0010');
const op0010Data = response1.data.rows.filter(item => {
if (item.machineType === 'OP10') {
const itemTime = new Date(item.time);
return itemTime <= currentTime;
}
return false;
});
if (op0010Data.length > 0) {
const currentOp0010 = op0010Data[op0010Data.length - 1];
this.op10Flag = currentOp0010.flag;
this.op10PortId = currentOp0010.portId;
this.op10machineName = currentOp0010.machineName;
this.op10machineId = currentOp0010.machineId;
this.op10peopleName = currentOp0010.peopleName;
} else {
this.op10Flag = '无数据';
this.op10PortId = ''; // 无数据时清空 portId
}
// 获取 OP20 产量
const response02 = await axiosInstance.get('/system/yield/list?workNumber=OP20&deviceNumber=577-1&depamentName=七分厂2线-1');
const op20YieldLength = response02.data.rows.length;
console.log('1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111');
if (op20YieldLength>0) {
const currentOp20 = response02.data.rows[op20YieldLength-1];
this.op20finished = currentOp20.number;
} else {
this. op20Flag = '无数据';
}
// 获取 OP20 设备数据
const response2 = await axiosInstance.get('/system/time/listLine?processNumber=OP20');
const op20Data = response2.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;
this.op20machineName = currentOp20.machineName;
this.op20machineId = currentOp20.machineId;
this.op20peopleName = currentOp20.peopleName;
} else {
this.op20Flag = '无数据';
}
// 获取 OP30 产量，设备编号574-8
const response03 = await axiosInstance.get('/system/yield/list?workNumber=OP30&deviceNumber=574-8');
const op30YieldLength1 = response03.data.rows.length;
console.log('1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111');
if (op30YieldLength1>0) {
const currentOp30 = response03.data.rows[op30YieldLength1-1];
this.op30finished1 = currentOp30.number;
} else {
this. op30Flag1 = '无数据';
}
// 获取 OP30 设备数据，设备编号574-8
const response3 = await axiosInstance.get('/system/time/listLine?processNumber=OP30&deviceNumber=574-8');
const op30Data574 = response3.data.rows.filter(item => {
if (item.machineType === 'OP30') {
const itemTime = new Date(item.time);
return itemTime <= currentTime;
}
return false;
});
if (op30Data574.length > 0) {
const currentOp30 = op30Data574[op30Data574.length - 1];
this.op30Flag1 = currentOp30.flag;
this.op30PortId1 = currentOp30.portId;
this.op30machineName1 = currentOp30.machineName;
this.op30machineId1 = currentOp30.machineId;
this.op30peopleName1 = currentOp30.peopleName;
} else {
this.op30Flag1 = '无数据';
}
// 获取 OP30 产量，设备编号002-54
const response003 = await axiosInstance.get('/system/yield/list?workNumber=OP30&deviceNumber=002-54');
const op30YieldLength2 = response003.data.rows.length;
console.log('1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111');
if (op30YieldLength2>0) {
const currentOp030 = response003.data.rows[op30YieldLength2-1];
this.op30finished2 = currentOp030.number;
} else {
this. op30Flag2 = '无数据';
}
// 获取 OP30 设备数据，设备编号002-54
const response4 = await axiosInstance.get('/system/time/listLine?processNumber=OP30&deviceNumber=002-54');
const op30Data002 = response4.data.rows.filter(item => {
if (item.machineType === 'OP30') {
const itemTime = new Date(item.time);
return itemTime <= currentTime;
}
return false;
});
if (op30Data002.length > 0) {
const currentOp30 = op30Data002[op30Data002.length - 1];
this.op30Flag2 = currentOp30.flag;
this.op30PortId2 = currentOp30.portId;
this.op30machineName2 = currentOp30.machineName;
this.op30machineId2 = currentOp30.machineId;
this.op30peopleName2 = currentOp30.peopleName;
} else {
this.op30Flag1 = '无数据';
}
// 获取 OP40 产量
const response04 = await axiosInstance.get('/system/yield/list?workNumber=OP40');
const op40YieldLength = response04.data.rows.length;
console.log('1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111');
if (op40YieldLength>0) {
const currentOp40 = response04.data.rows[op40YieldLength-1];
this.op40finished = currentOp40.number;
} else {
this. op40Flag = '无数据';
}
// 获取 OP40 设备数据
const response5 = await axiosInstance.get('/system/time/listLine?processNumber=OP40');
const op40Data = response5.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;
this.op40machineName = currentOp40.machineName;
this.op40machineId = currentOp40.machineId;
this.op40peopleName = currentOp40.peopleName;
} else {
this.op40Flag = '无数据';
}
// 获取 OP70 设备产量 069-11
const response07 = await axiosInstance.get('/system/yield/list?workNumber=OP70&deviceNumber=069-11');
const op70YieldLength1 = response07.data.rows.length;
console.log('1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111');
if (op70YieldLength1>0) {
const currentOp070 = response07.data.rows[op70YieldLength1-1];
this.op70finished1 = currentOp070.number;
} else {
this. op70Flag1 = '无数据';
}
// 获取 OP70 设备数据 069-11
const response6 = await axiosInstance.get('/system/time/listLine?processNumber=OP70&deviceNumber=069-11');
const op70Data069 = response6.data.rows.filter(item => {
if (item.machineType === 'OP70') {
const itemTime = new Date(item.time);
return itemTime <= currentTime;
}
return false;
});
if (op70Data069.length > 0) {
const currentOp70 = op70Data069[op70Data069.length - 1];
this.op70Flag1 = currentOp70.flag;
this.op70PortId1 = currentOp70.portId;
this.op70machineName1 = currentOp70.machineName;
this.op70machineId1 = currentOp70.machineId;
this.op70peopleName1 = currentOp70.peopleName;
} else {
this.op70Flag1 = '无数据';
}
// 获取 OP250 设备产量
const response0250 = await axiosInstance.get('/system/yield/list?workNumber=OP250');
const op250YieldLength = response0250.data.rows.length;
console.log('1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111');
if (op250YieldLength>0) {
const currentOp250 = response0250.data.rows[op250YieldLength-1];
this.op250finished = currentOp250.number;
} else {
this. op250Flag = '无数据';
}
// 获取 OP250 设备数据
const response7 = await axiosInstance.get('/system/time/listLine?processNumber=OP250');
const op250Data = response7.data.rows.filter(item => {
if (item.machineType === 'OP250') {
const itemTime = new Date(item.time);
return itemTime <= currentTime;
}
return false;
});
if (op250Data.length > 0) {
const currentOp250 = op250Data[op250Data.length - 1];
this.op250Flag = currentOp250.flag;
this.op250PortId = currentOp250.portId;
this.op250machineName = currentOp250.machineName;
this.op250machineId = currentOp250.machineId;
this.op250peopleName = currentOp250.peopleName;
} else {
this.op65Flag47 = '无数据';
}
// 获取 OP80 设备产量
const response08 = await axiosInstance.get('/system/yield/list?workNumber=OP80&deviceNumber=061-4');
const op80YieldLength = response08.data.rows.length;
console.log('1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111');
if (op80YieldLength>0) {
const currentOp80 = response08.data.rows[op80YieldLength-1];
this.op80finished = currentOp80.number;
} else {
this. op80Flag = '无数据';
}
// 获取 OP80 设备数据
const response8 = await axiosInstance.get('/system/time/listLine?processNumber=OP80');
const op80Data = response8.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;
this.op80machineName = currentOp80.machineName;
this.op80machineId = currentOp80.machineId;
this.op80peopleName = currentOp80.peopleName;
} else {
this.op80Flag = '无数据';
}
// 获取 OP70 设备产量 030-4
const response007 = await axiosInstance.get('/system/yield/list?workNumber=OP70&deviceNumber=030-4');
const op70YieldLength2 = response07.data.rows.length;
console.log('1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111');
if (op70YieldLength2>0) {
const currentOp0070 = response007.data.rows[op70YieldLength2-1];
this.op70finished2 = currentOp0070.number;
} else {
this. op70Flag2 = '无数据';
}
// 获取 OP70 设备数据 030-4
const response9 = await axiosInstance.get('/system/time/listLine?processNumber=OP90&deviceNumber=030-4');
const op70Data030 = response9.data.rows.filter(item => {
if (item.machineType === 'OP70') {
const itemTime = new Date(item.time);
return itemTime <= currentTime;
}
return false;
});
if (op70Data030.length > 0) {
const currentOp70 = op70Data030[op70Data030.length - 1];
this.op70Flag2 = currentOp70.flag;
this.op70PortId2 = currentOp70.portId;
this.op70machineName2 = currentOp70.machineName;
this.op70machineId2 = currentOp70.machineId;
this.op70peopleName2 = currentOp70.peopleName;
} else {
this.op70Flag2 = '无数据';
}
// 获取 OP30 产量，设备编号030-39
const response0003 = await axiosInstance.get('/system/yield/list?workNumber=OP30&deviceNumber=002-54');
const op30YieldLength3 = response0003.data.rows.length;
console.log('1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111');
if (op30YieldLength3>0) {
const currentOp0030 = response0003.data.rows[op30YieldLength3-1];
this.op30finished3 = currentOp0030.number;
} else {
this. op30Flag3 = '无数据';
}
// 获取 OP30 设备数据030-39
const response10 = await axiosInstance.get('/system/time/listLine?processNumber=OP30&deviceNumber=030-39');
const op30Data030 = response10.data.rows.filter(item => {
if (item.machineType === 'OP30') {
const itemTime = new Date(item.time);
return itemTime <= currentTime;
}
return false;
});
if (op30Data030.length > 0) {
const currentOp30 = op30Data030[op30Data030.length - 1];
this.op30Flag3 = currentOp30.flag;
this.op30PortId3 = currentOp30.portId;
this.op30machineName3 = currentOp30.machineName;
this.op30machineId3 = currentOp30.machineId;
this.op30peopleName3 = currentOp30.peopleName;
} else {
this.op30Flag3 = '无数据';
}
// 获取 OP31 设备产量
const response031 = await axiosInstance.get('/system/yield/list?workNumber=OP80');
const op31YieldLength = response031.data.rows.length;
console.log('1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111');
if (op31YieldLength>0) {
const currentOp31 = response031.data.rows[op31YieldLength-1];
this.op31finished = currentOp31.number;
} else {
this. op31Flag = '无数据';
}
// 获取 OP31设备数据
const response11 = await axiosInstance.get('/system/time/listLine?processNumber=OP31');
const op31Data = response11.data.rows.filter(item => {
if (item.machineType === 'OP31') {
const itemTime = new Date(item.time);
return itemTime <= currentTime;
}
return false;
});
if (op31Data.length > 0) {
const currentOp31 = op31Data[op31Data.length - 1];
this.op31Flag = currentOp31.flag;
this.op31PortId = currentOp31.portId;
this.op31machineName = currentOp31.machineName;
this.op31machineId = currentOp31.machineId;
this.op31peopleName = currentOp31.peopleName;
} else {
this.op31Flag = '无数据';
}
// 获取 OP32 设备产量
const response032 = await axiosInstance.get('/system/yield/list?workNumber=OP80');
const op32YieldLength = response032.data.rows.length;
console.log('1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111');
if (op32YieldLength>0) {
const currentOp32 = response032.data.rows[op32YieldLength-1];
this.op32finished = currentOp32.number;
} else {
this. op32Flag = '无数据';
}
// 获取 OP32设备数据
const response12 = await axiosInstance.get('/system/time/listLine?processNumber=OP32');
const op32Data = response12.data.rows.filter(item => {
if (item.machineType === 'OP32') {
const itemTime = new Date(item.time);
return itemTime <= currentTime;
}
return false;
});
if (op32Data.length > 0) {
const currentOp32 = op32Data[op32Data.length - 1];
this.op32Flag = currentOp32.flag;
this.op32PortId = currentOp32.portId;
this.op32machineName = currentOp32.machineName;
this.op32machineId = currentOp32.machineId;
this.op32peopleName = currentOp32.peopleName;
} else {
this.op32Flag = '无数据';
}
} catch (error) {
console.error('数据获取失败：', error);
}
}
}
};
</script>
<style scoped>
.container {
color: black;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: flex-start;
background: url(bg.png);
}
.head {
width: 100%;
height: 80px;
background-color: transparent;
display: flex;
justify-content: center;
align-items: center;
}
.head .title {
position: relative;
display: flex;
align-items: center;
font-size: 24px;
width: 100%;
height: 100%;
}
.head .title .title-left,
.head .title .title-right {
flex: 1;
height: 2px;
}
.head .title .title-value {
margin: 0 20px;
}
.content {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: flex-start;
margin-top: 20px;
}
.layout {
width: calc(25% - 20px); /* 计算为四列，并留出空白 */
height: 200px;
margin-bottom: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.box {
width: 100%;
height: 100%; /* 盒子高度为100%以填充.layout的高度 */
border: 2px solid;
display: flex;
flex-direction: column;
position: relative; /* 设置为相对定位 */
color: #d9d9d9;
}
.dynamic-data {
position: absolute;
padding: 10px;
border-radius: 5px;
}
.dynamic-data-left-bottom {
bottom: 0px;
left: -40px;
display: flex; /* 添加flex布局 */
align-items: center; /* 垂直居中 */
justify-content: center; /* 添加此行以使内容水平居中 */
width: 100%;
}
.dynamic-data-left-bottom .dynamic-data-item {
margin-right: 40px; /* 可以根据需要调整项目之间的间距 */
margin-left: 14px;
margin-bottom: -10px;
display: inline-block;
}
.dynamic-data-left-bottom .dynamic-data-item1 {
width: 70px;
height: 25px;
margin-left: -30px;
font-size: 14px;
}
.dynamic-data-right-top {
top: 10px;
margin-left: 180px;
}
.dynamic-data-right-top .dynamic-data-item2 {
margin: 0px;
margin-top: 5px;
color: #d9d9d9;
font-size: 14px;
}
.box .panel-title {
font-size: 18px;
font-weight: bold;
text-align: center;
padding: 10px;
}
.box .chart {
flex: 1;
padding: 10px;
}
.circle {
position: absolute;
top: 7%; /* 让圆圈垂直居中 */
right: 10px; /* 调整到适当的位置，可以根据需要调整 */
transform: translateY(-50%); /* 将圆圈垂直居中 */
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
color: white;
background-color: red; /* 设置默认的背景颜色 */
margin-top: 10px;
}
.box-text {
margin-left: 65px;
margin-top: 10px;
color: #d9d9d9;
}
.progress-container {
position: relative;
width: 50px; /* 根据需要调整宽度 */
height: 50px; /* 根据需要调整高度 */
margin-left: 29px;
margin-top: -12px;
}
</style>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
