diff --git a/src/views/Home/Index10.vue b/src/views/Home/Index10.vue index 57c1c0d..3716ce9 100644 --- a/src/views/Home/Index10.vue +++ b/src/views/Home/Index10.vue @@ -652,34 +652,10 @@ const riskChartOption = computed(() => { } 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: { diff --git a/src/views/Home/Index12.vue b/src/views/Home/Index12.vue index 5e6f58a..3f21c39 100644 --- a/src/views/Home/Index12.vue +++ b/src/views/Home/Index12.vue @@ -1165,34 +1165,10 @@ const riskChartOption = computed(() => { } 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: { diff --git a/src/views/Home/Index13.vue b/src/views/Home/Index13.vue index 8b6696a..1f438fc 100644 --- a/src/views/Home/Index13.vue +++ b/src/views/Home/Index13.vue @@ -1124,34 +1124,10 @@ const riskChartOption = computed(() => { } 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: { diff --git a/src/views/screen/companyScreen.vue b/src/views/screen/companyScreen.vue index ecb0cce..1dbb2f1 100644 --- a/src/views/screen/companyScreen.vue +++ b/src/views/screen/companyScreen.vue @@ -42,9 +42,11 @@
- - 正式员工 -
+
+ + 正式员工 +
+
{{ digit }} @@ -52,9 +54,11 @@
- - 外协人员 -
+
+ + 外协人员 +
+
{{ digit }} @@ -62,9 +66,11 @@
- - 访客 -
+
+ + 访客 +
+
{{ digit }} @@ -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; + } } } } diff --git a/src/views/screen/components/OverviewPanel.vue b/src/views/screen/components/OverviewPanel.vue index a29c5d6..ce47b22 100644 --- a/src/views/screen/components/OverviewPanel.vue +++ b/src/views/screen/components/OverviewPanel.vue @@ -19,9 +19,11 @@
- - 正式员工 -
+
+ + 正式员工 +
+
{{ digit }} @@ -30,9 +32,11 @@
- - 外协人员 -
+
+ + 外协人员 +
+
{{ digit }} @@ -41,9 +45,11 @@
- - 访客 -
+
+ + 访客 +
+
{{ digit }} @@ -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; + } } } }