优化多维度分析模块UI：全宽显示、添加滚动条、使用设计师绩效表单样式
This commit is contained in:
Your Name
parent
2d827bdbc7
commit
7d4ab4f275
@ -436,135 +436,143 @@
|
||||
<a-tab-pane key="dimension" tab="多维度分析">
|
||||
<!-- 多维度分析内容 -->
|
||||
<div class="tab-content">
|
||||
<a-row :gutter="[16, 16]">
|
||||
<!-- 类目分析 -->
|
||||
<a-col :xs="24" :lg="12">
|
||||
<div class="chart-card">
|
||||
<h3 class="chart-title">类目分析</h3>
|
||||
<a-table
|
||||
:columns="categoryColumns"
|
||||
:data-source="dimensionData.categoryAnalysis"
|
||||
:pagination="{ pageSize: 5 }"
|
||||
row-key="categoryId"
|
||||
size="small"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'totalScore'">
|
||||
{{ formatScore(record.totalScore) }}
|
||||
</template>
|
||||
<template v-else-if="column.key === 'completionRate'">
|
||||
<span :class="record.completionRate >= 80 ? 'text-success' : record.completionRate >= 50 ? 'text-warning' : 'text-danger'">
|
||||
{{ formatScore(record.completionRate) }}%
|
||||
</span>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
</a-col>
|
||||
|
||||
<!-- 品牌分析 -->
|
||||
<a-col :xs="24" :lg="12">
|
||||
<div class="chart-card">
|
||||
<h3 class="chart-title">品牌分析</h3>
|
||||
<a-table
|
||||
:columns="brandColumns"
|
||||
:data-source="dimensionData.brandAnalysis"
|
||||
:pagination="{ pageSize: 5 }"
|
||||
row-key="brandId"
|
||||
size="small"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'totalScore'">
|
||||
{{ formatScore(record.totalScore) }}
|
||||
</template>
|
||||
<template v-else-if="column.key === 'completionRate'">
|
||||
<span :class="record.completionRate >= 80 ? 'text-success' : record.completionRate >= 50 ? 'text-warning' : 'text-danger'">
|
||||
{{ formatScore(record.completionRate) }}%
|
||||
</span>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
</a-col>
|
||||
|
||||
<!-- 接单部门分析 -->
|
||||
<a-col :xs="24" :lg="12">
|
||||
<div class="chart-card">
|
||||
<h3 class="chart-title">接单部门分析</h3>
|
||||
<a-table
|
||||
:columns="receivingDeptColumns"
|
||||
:data-source="dimensionData.receivingDeptAnalysis"
|
||||
:pagination="{ pageSize: 5 }"
|
||||
row-key="deptId"
|
||||
size="small"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'totalScore'">
|
||||
{{ formatScore(record.totalScore) }}
|
||||
</template>
|
||||
<template v-else-if="column.key === 'completionRate'">
|
||||
<span :class="record.completionRate >= 80 ? 'text-success' : record.completionRate >= 50 ? 'text-warning' : 'text-danger'">
|
||||
{{ formatScore(record.completionRate) }}%
|
||||
</span>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'avgCompletionHours'">
|
||||
{{ record.avgCompletionHours ? formatScore(record.avgCompletionHours) + 'h' : '-' }}
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
</a-col>
|
||||
|
||||
<!-- 需求部门分析 -->
|
||||
<a-col :xs="24" :lg="12">
|
||||
<div class="chart-card">
|
||||
<h3 class="chart-title">需求部门分析</h3>
|
||||
<a-table
|
||||
:columns="demandDeptColumns"
|
||||
:data-source="dimensionData.demandDeptAnalysis"
|
||||
:pagination="{ pageSize: 5 }"
|
||||
row-key="deptId"
|
||||
size="small"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'totalScore'">
|
||||
{{ formatScore(record.totalScore) }}
|
||||
</template>
|
||||
<template v-else-if="column.key === 'completionRate'">
|
||||
<span :class="record.completionRate >= 80 ? 'text-success' : record.completionRate >= 50 ? 'text-warning' : 'text-danger'">
|
||||
{{ formatScore(record.completionRate) }}%
|
||||
</span>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
</a-col>
|
||||
|
||||
<!-- 平台分析 -->
|
||||
<a-col :xs="24">
|
||||
<div class="chart-card">
|
||||
<h3 class="chart-title">平台分析</h3>
|
||||
<a-table
|
||||
:columns="platformColumns"
|
||||
:data-source="dimensionData.platformAnalysis"
|
||||
:pagination="{ pageSize: 10 }"
|
||||
row-key="platformId"
|
||||
size="small"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'totalScore'">
|
||||
{{ formatScore(record.totalScore) }}
|
||||
</template>
|
||||
<template v-else-if="column.key === 'completionRate'">
|
||||
<span :class="record.completionRate >= 80 ? 'text-success' : record.completionRate >= 50 ? 'text-warning' : 'text-danger'">
|
||||
{{ formatScore(record.completionRate) }}%
|
||||
</span>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<!-- 类目分析 - 全宽显示 -->
|
||||
<div class="table-card full-width">
|
||||
<div class="table-header">
|
||||
<h3 class="chart-title">类目分析</h3>
|
||||
</div>
|
||||
<a-table
|
||||
:columns="categoryColumns"
|
||||
:data-source="dimensionData.categoryAnalysis"
|
||||
:pagination="{ pageSize: 10 }"
|
||||
:scroll="{ x: 800 }"
|
||||
row-key="categoryId"
|
||||
size="middle"
|
||||
class="dark-table"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'totalScore'">
|
||||
<span class="score-value">{{ formatScore(record.totalScore) }}</span>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'completionRate'">
|
||||
<span :class="record.completionRate >= 80 ? 'text-success' : record.completionRate >= 50 ? 'text-warning' : 'text-danger'">
|
||||
{{ formatScore(record.completionRate) }}%
|
||||
</span>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
|
||||
<!-- 品牌分析 - 全宽显示 -->
|
||||
<div class="table-card full-width" style="margin-top: 16px;">
|
||||
<div class="table-header">
|
||||
<h3 class="chart-title">品牌分析</h3>
|
||||
</div>
|
||||
<a-table
|
||||
:columns="brandColumns"
|
||||
:data-source="dimensionData.brandAnalysis"
|
||||
:pagination="{ pageSize: 10 }"
|
||||
:scroll="{ x: 800 }"
|
||||
row-key="brandId"
|
||||
size="middle"
|
||||
class="dark-table"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'totalScore'">
|
||||
<span class="score-value">{{ formatScore(record.totalScore) }}</span>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'completionRate'">
|
||||
<span :class="record.completionRate >= 80 ? 'text-success' : record.completionRate >= 50 ? 'text-warning' : 'text-danger'">
|
||||
{{ formatScore(record.completionRate) }}%
|
||||
</span>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
|
||||
<!-- 接单部门分析 - 全宽显示 -->
|
||||
<div class="table-card full-width" style="margin-top: 16px;">
|
||||
<div class="table-header">
|
||||
<h3 class="chart-title">接单部门分析</h3>
|
||||
</div>
|
||||
<a-table
|
||||
:columns="receivingDeptColumns"
|
||||
:data-source="dimensionData.receivingDeptAnalysis"
|
||||
:pagination="{ pageSize: 10 }"
|
||||
:scroll="{ x: 900 }"
|
||||
row-key="deptId"
|
||||
size="middle"
|
||||
class="dark-table"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'totalScore'">
|
||||
<span class="score-value">{{ formatScore(record.totalScore) }}</span>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'completionRate'">
|
||||
<span :class="record.completionRate >= 80 ? 'text-success' : record.completionRate >= 50 ? 'text-warning' : 'text-danger'">
|
||||
{{ formatScore(record.completionRate) }}%
|
||||
</span>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'avgCompletionHours'">
|
||||
<span>{{ record.avgCompletionHours ? formatScore(record.avgCompletionHours) + 'h' : '-' }}</span>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
|
||||
<!-- 需求部门分析 - 全宽显示 -->
|
||||
<div class="table-card full-width" style="margin-top: 16px;">
|
||||
<div class="table-header">
|
||||
<h3 class="chart-title">需求部门分析</h3>
|
||||
</div>
|
||||
<a-table
|
||||
:columns="demandDeptColumns"
|
||||
:data-source="dimensionData.demandDeptAnalysis"
|
||||
:pagination="{ pageSize: 10 }"
|
||||
:scroll="{ x: 800 }"
|
||||
row-key="deptId"
|
||||
size="middle"
|
||||
class="dark-table"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'totalScore'">
|
||||
<span class="score-value">{{ formatScore(record.totalScore) }}</span>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'completionRate'">
|
||||
<span :class="record.completionRate >= 80 ? 'text-success' : record.completionRate >= 50 ? 'text-warning' : 'text-danger'">
|
||||
{{ formatScore(record.completionRate) }}%
|
||||
</span>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
|
||||
<!-- 平台分析 - 全宽显示 -->
|
||||
<div class="table-card full-width" style="margin-top: 16px;">
|
||||
<div class="table-header">
|
||||
<h3 class="chart-title">平台分析</h3>
|
||||
</div>
|
||||
<a-table
|
||||
:columns="platformColumns"
|
||||
:data-source="dimensionData.platformAnalysis"
|
||||
:pagination="{ pageSize: 10 }"
|
||||
:scroll="{ x: 800 }"
|
||||
row-key="platformId"
|
||||
size="middle"
|
||||
class="dark-table"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'totalScore'">
|
||||
<span class="score-value">{{ formatScore(record.totalScore) }}</span>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'completionRate'">
|
||||
<span :class="record.completionRate >= 80 ? 'text-success' : record.completionRate >= 50 ? 'text-warning' : 'text-danger'">
|
||||
{{ formatScore(record.completionRate) }}%
|
||||
</span>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user