Commit b02cc4a6 by nningxx

oee report update

parent d26a34b6
......@@ -19,8 +19,7 @@
<!-- 页面标题 -->
<div class="dashboard-header">
<div class="header-content">
<img src="/roke_workstation_api/static/html/routing/image/header_bg.png" class="header-bg"
alt="header background" />
<img src="/roke_workstation_api/static/html/routing/image/header_bg.png" class="header-bg" alt="header background" />
<span class="header-text">OEE时间利用率分析</span>
</div>
</div>
......@@ -84,7 +83,11 @@
<!-- 当前机台开机实时状态 -->
<div class="chart-card">
<div class="card-header">
<h3>当前机台开机实时状态</h3>
<h3>当前机台开机实时状态<el-tooltip style="margin-left: 10px;" effect="dark" :content="statusPieChart_content"
placement="right-start">
<i class="el-icon-warning-outline" style="font-size: 20px;"></i>
</el-tooltip></h3>
<span class="current-date">[[currentDate]]</span>
</div>
<div id="statusPieChart" class="chart-container"></div>
......@@ -93,7 +96,10 @@
<!-- 设备OEE排名 -->
<div class="chart-card">
<div class="card-header">
<h3>设备OEE时间利用率TOP5</h3>
<h3>设备OEE时间利用率TOP5<el-tooltip style="margin-left: 10px;" effect="dark" :content="oeeRankChart_content"
placement="right-start">
<i class="el-icon-warning-outline" style="font-size: 20px;"></i>
</el-tooltip></h3>
<el-select v-model="timeRanges.oeeRank" size="small" @change="updateChart('oeeRank')">
<el-option v-for="item in timeOptions" :key="item.value" :label="item.label" :value="item.value">
</el-option>
......@@ -105,7 +111,10 @@
<!-- 设备效率等待损失量 -->
<div class="chart-card">
<div class="card-header">
<h3>设备效率等待损失量(分钟)</h3>
<h3>设备效率等待损失量(分钟)<el-tooltip style="margin-left: 10px;" effect="dark" :content="waitingLossChart_content"
placement="right-start">
<i class="el-icon-warning-outline" style="font-size: 20px;"></i>
</el-tooltip></h3>
<el-select v-model="timeRanges.waitingLoss" size="small" @change="updateChart('waitingLoss')">
<el-option v-for="item in timeOptions" :key="item.value" :label="item.label" :value="item.value">
</el-option>
......@@ -117,7 +126,10 @@
<!-- 设备OEE综合趋势 -->
<div class="chart-card">
<div class="card-header">
<h3>设备OEE时间利用率综合趋势</h3>
<h3>设备OEE时间利用率综合趋势<el-tooltip style="margin-left: 10px;" effect="dark" :content="oeeTrendChart_content"
placement="right-start">
<i class="el-icon-warning-outline" style="font-size: 20px;"></i>
</el-tooltip></h3>
<div class="header-controls">
<el-select v-model="selectedDevice" size="small" placeholder="选择设备" @change="updateChart('oeeTrend')"
style="margin-right: 10px">
......@@ -137,7 +149,10 @@
<!-- 设备效率故障损失量 -->
<div class="chart-card">
<div class="card-header">
<h3>设备效率故障损失量(分钟)</h3>
<h3>设备效率故障损失量(分钟)<el-tooltip style="margin-left: 10px;" effect="dark" :content="faultLossChart_content"
placement="right-start">
<i class="el-icon-warning-outline" style="font-size: 20px;"></i>
</el-tooltip></h3>
<el-select v-model="timeRanges.faultLoss" size="small" @change="updateChart('faultLoss')">
<el-option v-for="item in timeOptions" :key="item.value" :label="item.label" :value="item.value">
</el-option>
......@@ -214,6 +229,13 @@
selectionStep: "workshop", // 'workshop' 或 'line'
selectedWorkshop: null,
workshops: [], // 将从接口获取
statusPieChart_content: '总数量统计设备总数,运行统计实时设备运行的总数,维护统计实时设备故障的总数,等待统计实时设备等待的总数,离线统计实时设备关机的总数。',
oeeRankChart_content:'实际运行时间/计划运行时间',
waitingLossChart_content:'按日期统计设备在该期间黄灯(等待)所损失的效率,展示在该产线下所有设备因黄灯(等待)所损失的效率(分钟)。',
oeeTrendChart_content:'展示选定周期内(如 2025/03/10 至 2025/03/14)设备 OEE 的日趋势(实际运行时间/计划运行时间)变化,体现效率波动。',
faultLossChart_content:'按日期统计设备在该期间红灯(等待)所损失的效率(故障时间/计划运行时间),展示在该产线下所有设备因红灯(故障)所损失的效率(分钟)。'
};
},
created() {
......@@ -1075,7 +1097,7 @@
type: 'slider',
xAxisIndex: 0, // 指定控制X轴‌:ml-citation{ref="4" data="citationList"}
start: 0, // 初始显示起点‌:ml-citation{ref="1" data="citationList"}
end: 40, // 初始显示终点(示例值,按需计算)
end: 60, // 初始显示终点(示例值,按需计算)
height: 1, // 滚动条高度‌:ml-citation{ref="1" data="citationList"}
bottom: 1, // 滚动条位置‌:ml-citation{ref="1" data="citationList"}
fillerColor: 'rgba(84,112,198,0.6)', // 选中区域颜色‌:ml-citation{ref="1" data="citationList"}
......@@ -1089,7 +1111,7 @@
xAxis: {
type: "category",
axisLine: { lineStyle: { color: "#fff" } },
axisLabel: { color: "#fff", interval: 0, fontSize: 10, align: 'center' },
axisLabel: { color: "#fff", interval: 0, rotate: 15,align: 'center',fontSize: 10 },
data: [],
},
yAxis: {
......@@ -1107,7 +1129,7 @@
series: [
{
type: "bar",
barWidth: "40%",
barWidth: "25%",
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#67C23A" },
......@@ -1172,8 +1194,10 @@
// 转换为百分比并保留一位小数
const value = parseFloat(item.utilization_rate.toFixed(1));
const truncateBasic = (str) => str.slice(0, 12);
deviceNames.push(truncateBasic(name));
deviceValues.push(value);
});
......@@ -2785,7 +2809,7 @@
/* 图表网格布局 */
.chart-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-columns: 1fr 600px 1fr;
grid-template-rows: auto auto;
gap: 20px;
padding: 0 10px;
......@@ -2809,6 +2833,7 @@
grid-row: 1;
}
/* 第二行的两个图表 */
.chart-grid>div:nth-child(4) {
grid-column: 1 / span 2;
......@@ -2849,6 +2874,7 @@
overflow: hidden;
text-overflow: ellipsis;
max-width: 70%;
display: flex;
}
.card-header h3::before {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment