UI优化

2026-01-08 17:42:47 +08:00
parent 7c07d7d269
commit 5066c80e8f
4 changed files with 173 additions and 20 deletions
--- a/src/views/Home/Index10.vue
+++ b/src/views/Home/Index10.vue
@@ -672,12 +672,14 @@ const riskChartOption = computed<EChartsOption>(() => {
 // 隐患管理折线图配置
 const hiddenDangerChartOption = computed<EChartsOption>(() => {
  // 提取日期和对应的数据
-  const dates = hiddenDangerTrend.value.map(item => item.date)
+  const dates = hiddenDangerTrend.value.map(item => item.date).filter(date => date) // 过滤掉空日期
  const generalData = hiddenDangerTrend.value.map(item => item.general ?? 0)
  const majorData = hiddenDangerTrend.value.map(item => item.major ?? 0)

-  // 判断是否为空数据
-  const isEmpty = dates.length === 0 || (generalData.every(v => v === 0) && majorData.every(v => v === 0))
+  // 判断是否为空数据：只有当原始数据数组为空，或者所有数据值都为0时才认为为空
+  const totalGeneral = generalData.reduce((sum, v) => sum + v, 0)
+  const totalMajor = majorData.reduce((sum, v) => sum + v, 0)
+  const isEmpty = hiddenDangerTrend.value.length === 0 || (totalGeneral === 0 && totalMajor === 0)

  // 计算Y轴最大值（向上取整到最近的10的倍数）
  const maxValue = isEmpty ? 10 : Math.max(
--- a/src/views/Home/Index12.vue
+++ b/src/views/Home/Index12.vue
@@ -1184,12 +1184,14 @@ const riskChartOption = computed<EChartsOption>(() => {

 // 隐患管理折线图配置
 const hiddenDangerChartOption = computed<EChartsOption>(() => {
-  const dates = hiddenDangerTrend.value.map(item => item.date)
+  const dates = hiddenDangerTrend.value.map(item => item.date).filter(date => date) // 过滤掉空日期
  const generalData = hiddenDangerTrend.value.map(item => item.general ?? 0)
  const majorData = hiddenDangerTrend.value.map(item => item.major ?? 0)
  
-  // 判断是否为空数据
-  const isEmpty = dates.length === 0 || (generalData.every(v => v === 0) && majorData.every(v => v === 0))
+  // 判断是否为空数据：只有当原始数据数组为空，或者所有数据值都为0时才认为为空
+  const totalGeneral = generalData.reduce((sum, v) => sum + v, 0)
+  const totalMajor = majorData.reduce((sum, v) => sum + v, 0)
+  const isEmpty = hiddenDangerTrend.value.length === 0 || (totalGeneral === 0 && totalMajor === 0)
  
  return {
    tooltip: { trigger: 'axis' },
--- a/src/views/Home/Index13.vue
+++ b/src/views/Home/Index13.vue
@@ -1143,12 +1143,14 @@ const riskChartOption = computed<EChartsOption>(() => {

 // 隐患管理折线图配置
 const hiddenDangerChartOption = computed<EChartsOption>(() => {
-  const dates = hiddenDangerTrend.value.map(item => item.date)
+  const dates = hiddenDangerTrend.value.map(item => item.date).filter(date => date) // 过滤掉空日期
  const generalData = hiddenDangerTrend.value.map(item => item.general ?? 0)
  const majorData = hiddenDangerTrend.value.map(item => item.major ?? 0)
  
-  // 判断是否为空数据
-  const isEmpty = dates.length === 0 || (generalData.every(v => v === 0) && majorData.every(v => v === 0))
+  // 判断是否为空数据：只有当原始数据数组为空，或者所有数据值都为0时才认为为空
+  const totalGeneral = generalData.reduce((sum, v) => sum + v, 0)
+  const totalMajor = majorData.reduce((sum, v) => sum + v, 0)
+  const isEmpty = hiddenDangerTrend.value.length === 0 || (totalGeneral === 0 && totalMajor === 0)
  
  return {
    tooltip: { trigger: 'axis' },
--- a/src/views/screen/components/HiddenDangerPanel.vue
+++ b/src/views/screen/components/HiddenDangerPanel.vue
@@ -45,23 +45,24 @@
          <div class="progress-legend-column">
            <div class="legend-item">
              <span class="dot blue"></span>
-              <span class="legend-text">{{ props.hiddenDangerData?.top3Types?.[0]?.order_type_path_name || "--" }}</span>
+              <span class="legend-text" :title="props.hiddenDangerData?.top3Types?.[0]?.order_type_path_name || '--'">{{ props.hiddenDangerData?.top3Types?.[0]?.order_type_path_name || "--" }}</span>
            </div>
            <div class="legend-item">
              <span class="dot green"></span>
-              <span class="legend-text">{{ props.hiddenDangerData?.top3Types?.[1]?.order_type_path_name || "--" }}</span>
+              <span class="legend-text" :title="props.hiddenDangerData?.top3Types?.[1]?.order_type_path_name || '--'">{{ props.hiddenDangerData?.top3Types?.[1]?.order_type_path_name || "--" }}</span>
            </div>
            <div class="legend-item">
              <span class="dot yellow"></span>
-              <span class="legend-text">{{ props.hiddenDangerData?.top3Types?.[2]?.order_type_path_name || "--" }}</span>
+              <span class="legend-text" :title="props.hiddenDangerData?.top3Types?.[2]?.order_type_path_name || '--'">{{ props.hiddenDangerData?.top3Types?.[2]?.order_type_path_name || "--" }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="safe-wrapper">
        <span class="safe-title">
-          <img width="22" style="margin: 3px 5px 0 0" src="@/assets/images/ybp_icon.png" />
-          安全指数:<p title="安全指数 = (1-逾期隐患百分比) × 40% + 安全考核通过率 × 10% + 安全培训完成率 × 10%
+          <img class="safe-icon" src="@/assets/images/ybp_icon.png" />
+          <span class="safe-title-text">安全指数:</span>
+          <p class="safe-tooltip" title="安全指数 = (1-逾期隐患百分比) × 40% + 安全考核通过率 × 10% + 安全培训完成率 × 10%
   + 安全类工单完成率 × 20%  +  工程类工单完成率 × 20%"></p>
        </span>
        <span class="pending-count">{{ hiddenDangerData?.safetyIndex || 0 }}</span>
@@ -350,6 +351,28 @@ onMounted(() => {
  .center-container {
    width: 60vh;
    height: 60vh;
+
+    .center-content {
+      .echart-wrapper {
+        .lf-rt {
+          .progress-legend-column {
+            padding: 0 4px;
+
+            .legend-item {
+              .legend-text {
+                font-size: 0.68rem;
+              }
+            }
+          }
+        }
+      }
+
+      .safe-wrapper {
+        .safe-title {
+          font-size: 0.75rem;
+        }
+      }
+    }
  }
 }

@@ -375,6 +398,29 @@ onMounted(() => {
          font-size: 0.65rem;
        }
      }
+
+      .echart-wrapper {
+        .lf-rt {
+          .progress-legend-column {
+            padding: 0 3px;
+
+            .legend-item {
+              .legend-text {
+                font-size: 0.65rem;
+              }
+            }
+          }
+        }
+      }
+
+      .safe-wrapper {
+        .safe-title {
+          .safe-icon {
+            width: 20px;
+            height: 20px;
+          }
+        }
+      }
    }
  }
 }
@@ -423,16 +469,45 @@ onMounted(() => {
      .echart-wrapper {
        width: 90%;

-        .lf-rt .progress-legend .legend-item {
-          font-size: 0.6rem;
+        .lf-rt {
+          .progress-legend .legend-item {
+            font-size: 0.6rem;
+          }
+
+          .progress-legend-column {
+            padding: 0 2px;
+
+            .legend-item {
+              gap: 3px;
+
+              .legend-text {
+                font-size: 0.6rem;
+              }
+            }
+          }
        }
      }

      .safe-wrapper {
        width: 50%;
+        flex-direction: column;
+        gap: 0.5vh;

        .safe-title {
          font-size: 0.7rem;
+          margin-left: 0;
+          justify-content: center;
+
+          .safe-icon {
+            width: 18px;
+            height: 18px;
+            margin: 2px 3px 0 0;
+          }
+
+          .safe-tooltip {
+            width: 15px;
+            height: 15px;
+          }
        }

        .pending-count {
@@ -470,13 +545,43 @@ onMounted(() => {

      .echart-wrapper {
        width: 95%;
+
+        .lf-rt {
+          .progress-legend-column {
+            padding: 0 1px;
+            gap: 6px;
+
+            .legend-item {
+              gap: 2px;
+
+              .legend-text {
+                font-size: 0.55rem;
+              }
+            }
+          }
+        }
      }

      .safe-wrapper {
        width: 60%;
+        flex-direction: column;
+        gap: 0.3vh;

        .safe-title {
          font-size: 0.65rem;
+          margin-left: 0;
+          justify-content: center;
+
+          .safe-icon {
+            width: 16px;
+            height: 16px;
+            margin: 2px 2px 0 0;
+          }
+
+          .safe-tooltip {
+            width: 14px;
+            height: 14px;
+          }
        }

        .pending-count {
@@ -486,8 +591,11 @@ onMounted(() => {
    }
  }
 }
-p{width:17px;    height:17px;   background-color:rgb(125, 125, 152);    border-radius:50%;    text-align:center;    }
-p:before{content:'?';    color:yellow;    font-weight: bold;}
+.safe-tooltip:before {
+  content: '?';
+  color: yellow;
+  font-weight: bold;
+}
 .center-container {
  position: fixed;
  top: 55%;
@@ -619,14 +727,19 @@ p:before{content:'?';    color:yellow;    font-weight: bold;}
          flex-direction: column;
          display: flex;
          justify-content: center;
-          align-items: center;
+          align-items: flex-start;
          gap: 8px;
+          width: 100%;
+          padding: 0 5px;
+          box-sizing: border-box;

          .legend-item {
            display: flex;
-            width: 60%;
+            width: 100%;
+            max-width: 100%;
            align-items: center;
            gap: 4px;
+            min-width: 0; // 允许 flex 子元素收缩

            .legend-text {
              overflow: hidden;
@@ -634,6 +747,7 @@ p:before{content:'?';    color:yellow;    font-weight: bold;}
              text-overflow: ellipsis;
              white-space: nowrap;
              flex: 1;
+              min-width: 0; // 关键：允许文本收缩
            }
          }
        }
@@ -643,15 +757,47 @@ p:before{content:'?';    color:yellow;    font-weight: bold;}
    .safe-wrapper {
      display: flex;
      width: 40%;
+      min-width: 0; // 允许收缩
      height: 20%;
      margin-bottom: 5%;
      align-items: center;
      column-gap: 1vw;
+      flex-wrap: wrap; // 允许换行
+      justify-content: center;

      .safe-title {
        display: flex;
        align-items: center;
        margin-left: 1vw;
+        flex-wrap: wrap;
+        gap: 2px;
+        min-width: 0;
+        flex: 1;
+        max-width: 100%;
+
+        .safe-icon {
+          width: 22px;
+          height: 22px;
+          margin: 3px 5px 0 0;
+          flex-shrink: 0;
+        }
+
+        .safe-title-text {
+          white-space: nowrap;
+          flex-shrink: 0;
+        }
+
+        .safe-tooltip {
+          width: 17px;
+          height: 17px;
+          background-color: rgb(125, 125, 152);
+          border-radius: 50%;
+          text-align: center;
+          flex-shrink: 0;
+          margin: 0;
+          padding: 0;
+          display: inline-block;
+        }
      }

      .pending-count {
@@ -659,6 +805,7 @@ p:before{content:'?';    color:yellow;    font-weight: bold;}
        font-size: 1.6rem;
        font-weight: 500;
        color: yellow;
+        flex-shrink: 0;
      }
    }
  }