UI优化

src/views/Home/Index10.vue

@@ -652,34 +652,10 @@ const riskChartOption = computed<EChartsOption>(() => {
           }
           const percent = ((value / total) * 100).toFixed(2) + '%'
           return percent
-        },
+        }
-        minMargin: 5,
-        edgeDistance: 10,
-        lineHeight: 15,
-        fontSize: 12,
-        color: '#333'
       },
       labelLine: {
         show: true,
-        length: 15,
-        length2: 10,
-        maxSurfaceAngle: 80
-      },
-      labelLayout: function (params: any) {
-        const isLeft = params.labelRect.x < params.labelRect.width
-        const points = params.labelLinePoints
-        if (points && points.length >= 3) {
-          // 调整线条的终点位置
-          if (isLeft) {
-            points[2][0] = params.labelRect.x
-          } else {
-            points[2][0] = params.labelRect.x + params.labelRect.width
-          }
-          return {
-            labelLinePoints: points
-          }
-        }
-        return {}
       },
       emphasis: {
         label: {

src/views/Home/Index12.vue

@@ -1165,34 +1165,10 @@ const riskChartOption = computed<EChartsOption>(() => {
           }
           const percent = ((value / total) * 100).toFixed(2) + '%'
           return percent
-        },
+        }
-        minMargin: 5,
-        edgeDistance: 10,
-        lineHeight: 15,
-        fontSize: 12,
-        color: '#333'
       },
       labelLine: {
         show: true,
-        length: 15,
-        length2: 10,
-        maxSurfaceAngle: 80
-      },
-      labelLayout: function (params: any) {
-        const isLeft = params.labelRect.x < params.labelRect.width
-        const points = params.labelLinePoints
-        if (points && points.length >= 3) {
-          // 调整线条的终点位置
-          if (isLeft) {
-            points[2][0] = params.labelRect.x
-          } else {
-            points[2][0] = params.labelRect.x + params.labelRect.width
-          }
-          return {
-            labelLinePoints: points
-          }
-        }
-        return {}
       },
       emphasis: {
         label: {

src/views/Home/Index13.vue

@@ -1124,34 +1124,10 @@ const riskChartOption = computed<EChartsOption>(() => {
           }
           const percent = ((value / total) * 100).toFixed(2) + '%'
           return percent
-        },
+        }
-        minMargin: 5,
-        edgeDistance: 10,
-        lineHeight: 15,
-        fontSize: 12,
-        color: '#333'
       },
       labelLine: {
         show: true,
-        length: 15,
-        length2: 10,
-        maxSurfaceAngle: 80
-      },
-      labelLayout: function (params: any) {
-        const isLeft = params.labelRect.x < params.labelRect.width
-        const points = params.labelLinePoints
-        if (points && points.length >= 3) {
-          // 调整线条的终点位置
-          if (isLeft) {
-            points[2][0] = params.labelRect.x
-          } else {
-            points[2][0] = params.labelRect.x + params.labelRect.width
-          }
-          return {
-            labelLinePoints: points
-          }
-        }
-        return {}
       },
       emphasis: {
         label: {

src/views/screen/companyScreen.vue

@@ -42,9 +42,11 @@
             </div>
             <div class="top-card-right">
               <div class="top-card-right-item">
-                <img width="18px" src="@/assets/images/v2_rel0n8.png" />
+                <div>
-                <span>正式员工</span>
+                  <img width="18px" src="@/assets/images/v2_rel0n8.png" />
-                <div class="type-number-wrapper" style="margin-left: 2vw">
+                  <span>正式员工</span>
+                </div>
+                <div class="type-number-wrapper" :style="{ width: `${maxNumberWidth}px` }">
                   <span class="type-number" v-for="(digit, index) in formalEmployeeDigits" :key="index">
                     {{ digit }}
                   </span>
@@ -52,9 +54,11 @@
                 <span>人</span>
               </div>
               <div class="top-card-right-item">
-                <img width="18px" src="@/assets/images/v2_rel0n23.png" />
+                <div>
-                <span>外协人员</span>
+                  <img width="18px" src="@/assets/images/v2_rel0n23.png" />
-                <div class="type-number-wrapper" style="margin-left: 1vw">
+                  <span>外协人员</span>
+                </div>
+                <div class="type-number-wrapper" :style="{ width: `${maxNumberWidth}px` }">
                   <span class="type-number" v-for="(digit, index) in externalStaffDigits" :key="index">
                     {{ digit }}
                   </span>
@@ -62,9 +66,11 @@
                 <span>人</span>
               </div>
               <div class="top-card-right-item">
-                <img width="18px" src="@/assets/images/24508_654.png" />
+                <div>
-                <span>访客</span>
+                  <img width="18px" src="@/assets/images/24508_654.png" />
-                <div class="type-number-wrapper">
+                  <span>访客</span>
+                </div>
+                <div class="type-number-wrapper" :style="{ width: `${maxNumberWidth}px` }">
                   <span class="type-number" v-for="(digit, index) in visitorDigits" :key="index">
                     {{ digit }}
                   </span>
@@ -275,6 +281,17 @@ const totalCountDigits = computed(() => String(mockData.totalCount).split('').ma
 const formalEmployeeDigits = computed(() => String(mockData.formalEmployeeCount).split('').map(Number))
 const externalStaffDigits = computed(() => String(mockData.externalStaffCount).split('').map(Number))
 const visitorDigits = computed(() => String(mockData.visitorCount).split('').map(Number))
+
+// 计算数字区域的最大宽度
+// 每个数字框宽度 14px，gap 2px
+const maxNumberWidth = computed(() => {
+  const formalLen = formalEmployeeDigits.value.length
+  const externalLen = externalStaffDigits.value.length
+  const visitorLen = visitorDigits.value.length
+  const maxLen = Math.max(formalLen, externalLen, visitorLen)
+  // 宽度 = 数字个数 * 14px + (数字个数 - 1) * 2px
+  return maxLen > 0 ? maxLen * 14 + (maxLen - 1) * 2 : 0
+})
 const route = useRoute()
 const router = useRouter()
 
@@ -1749,17 +1766,25 @@ onUnmounted(() => {
             .top-card-right-item {
               display: flex;
               align-items: center;
-              column-gap: 5px;
               padding: 0 10px;
               font-size: 0.7rem;
               color: #fff;
 
+              > :first-child {
+                display: flex;
+                align-items: center;
+                column-gap: 5px;
+                width: 100px;
+              }
+
               .type-number-wrapper {
                 display: flex;
                 align-items: center;
+                justify-content: flex-start;
                 gap: 2px;
                 font-size: 0.8rem;
                 color: #fff;
+                margin-left: 8px;
 
                 .type-number {
                   display: inline-block;
@@ -1773,6 +1798,10 @@ onUnmounted(() => {
                   border-radius: 2px;
                 }
               }
+
+              > span:last-child {
+                margin-left: 4px;
+              }
             }
           }
         }

src/views/screen/components/OverviewPanel.vue

@@ -19,9 +19,11 @@
 
       <div class="top-card-right">
         <div class="top-card-right-item">
-          <img width="18px" src="@/assets/images/v2_rel0n8.png" />
+          <div>
-          <span>正式员工</span>
+            <img width="18px" src="@/assets/images/v2_rel0n8.png" />
-          <div class="type-number-wrapper" style="margin-left: 2vw">
+            <span>正式员工</span>
+          </div>
+          <div class="type-number-wrapper" :style="{ width: `${maxNumberWidth}px` }">
             <span class="type-number" v-for="(digit, index) in formalEmployeeDigits" :key="index">
               {{ digit }}
             </span>
@@ -30,9 +32,11 @@
         </div>
 
         <div class="top-card-right-item">
-          <img width="18px" src="@/assets/images/v2_rel0n23.png" />
+          <div>
-          <span>外协人员</span>
+            <img width="18px" src="@/assets/images/v2_rel0n23.png" />
-          <div class="type-number-wrapper" style="margin-left: 1vw">
+            <span>外协人员</span>
+          </div>
+          <div class="type-number-wrapper" :style="{ width: `${maxNumberWidth}px` }">
             <span class="type-number" v-for="(digit, index) in externalStaffDigits" :key="index">
               {{ digit }}
             </span>
@@ -41,9 +45,11 @@
         </div>
 
         <div class="top-card-right-item">
-          <img width="18px" src="@/assets/images/24508_654.png" />
+          <div>
-          <span>访客</span>
+            <img width="18px" src="@/assets/images/24508_654.png" />
-          <div class="type-number-wrapper">
+            <span>访客</span>
+          </div>
+          <div class="type-number-wrapper" :style="{ width: `${maxNumberWidth}px` }">
             <span class="type-number" v-for="(digit, index) in visitorDigits" :key="index">
               {{ digit }}
             </span>
@@ -87,6 +93,17 @@ const formalEmployeeDigits = computed(() => String(props.formalEmployeeCount).sp
 const externalStaffDigits = computed(() => String(props.externalStaffCount).split('').map(Number))
 const visitorDigits = computed(() => String(props.visitorCount).split('').map(Number))
 
+// 计算数字区域的最大宽度
+// 每个数字框宽度 14px，gap 2px
+const maxNumberWidth = computed(() => {
+  const formalLen = formalEmployeeDigits.value.length
+  const externalLen = externalStaffDigits.value.length
+  const visitorLen = visitorDigits.value.length
+  const maxLen = Math.max(formalLen, externalLen, visitorLen)
+  // 宽度 = 数字个数 * 14px + (数字个数 - 1) * 2px
+  return maxLen > 0 ? maxLen * 14 + (maxLen - 1) * 2 : 0
+})
+
 // 图表引用
 const barChartOption = ref({
   legend: {
@@ -243,17 +260,25 @@ onMounted(() => {
       .top-card-right-item {
         display: flex;
         align-items: center;
-        column-gap: 5px;
         padding: 0 10px;
         font-size: 0.7rem;
         color: #fff;
 
+        > :first-child {
+          display: flex;
+          align-items: center;
+          column-gap: 5px;
+          width: 100px;
+        }
+
         .type-number-wrapper {
           display: flex;
           align-items: center;
+          justify-content: flex-start;
           gap: 2px;
           font-size: 0.8rem;
           color: #fff;
+          margin-left: 8px;
 
           .type-number {
             display: inline-block;
@@ -268,6 +293,10 @@ onMounted(() => {
             transition: all 0.3s ease;
           }
         }
+
+        > span:last-child {
+          margin-left: 4px;
+        }
       }
     }
   }