oee report update

b02cc4a6 · nningxx · d26a34b6 · b02cc4a6
Commit b02cc4a6 authored Jun 20, 2025 by nningxx
Hide whitespace changes
Inline Side-by-side

Showing with 37 additions and 11 deletions

qdry_project/static/src/view/oee_analysis.html
+37 -11

No files found.
--- a/qdry_project/static/src/view/oee_analysis.html
+++ b/qdry_project/static/src/view/oee_analysis.html
@@ -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"
+        <img src="/roke_workstation_api/static/html/routing/image/header_bg.png" class="header-bg" alt="header background" />
-          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 {