484 lines
12 KiB
Vue
484 lines
12 KiB
Vue
<template>
|
||
<view class="page-container">
|
||
<!-- 月份选择器 -->
|
||
<view class="month-selector">
|
||
<view class="month-arrow" @click="changeMonth(-1)" :class="{ disabled: isMinMonth }">
|
||
<text>◀</text>
|
||
</view>
|
||
<picker mode="date" fields="month" :value="selectedMonth" :start="startDate" :end="endDate" @change="handleMonthChange">
|
||
<view class="month-display">
|
||
<text class="month-text">{{ formattedMonth }}</text>
|
||
<text class="picker-icon">▼</text>
|
||
</view>
|
||
</picker>
|
||
<view class="month-arrow" @click="changeMonth(1)" :class="{ disabled: isMaxMonth }">
|
||
<text>▶</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 班组绩效排名 -->
|
||
<view class="ranking-section">
|
||
<view class="section-header">
|
||
<text class="section-title">绩效排名</text>
|
||
</view>
|
||
<view class="ranking-list">
|
||
<view
|
||
class="ranking-item"
|
||
v-for="(item, index) in teamRankingData"
|
||
:key="index"
|
||
:class="'rank-' + (index + 1)"
|
||
>
|
||
<view class="rank-badge">{{ index + 1 }}</view>
|
||
<view class="rank-info">
|
||
<text class="team-name">{{ item.team }}</text>
|
||
<text class="team-shift">{{ item.shift }}</text>
|
||
</view>
|
||
<view class="rank-score">
|
||
<text class="score-value">{{ item.score }}</text>
|
||
<text class="score-label">分</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 班组产量对比 -->
|
||
<view class="chart-section">
|
||
<view class="section-header">
|
||
<text class="section-title">产量对比</text>
|
||
</view>
|
||
<view class="chart-wrapper">
|
||
<qiun-data-charts type="column" :chartData="outputChartData" :opts="columnChartOpts"/>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 质量指标对比 -->
|
||
<view class="chart-section">
|
||
<view class="section-header">
|
||
<text class="section-title">质量指标</text>
|
||
</view>
|
||
<view class="chart-wrapper">
|
||
<qiun-data-charts type="radar" :chartData="qualityRadarData" :opts="radarChartOpts"/>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 班组详细数据 -->
|
||
<view class="detail-section">
|
||
<view class="section-header">
|
||
<text class="section-title">详细数据</text>
|
||
</view>
|
||
<view class="detail-table">
|
||
<view class="table-header">
|
||
<text class="table-cell header-cell" v-for="col in columns" :key="col.key">{{ col.title }}</text>
|
||
</view>
|
||
<view class="table-row" v-for="(row, index) in tableData" :key="index">
|
||
<text class="table-cell" v-for="col in columns" :key="col.key">{{ row[col.key] }}</text>
|
||
</view>
|
||
<view v-if="tableData.length === 0" class="empty-state">
|
||
<text class="empty-text">暂无数据</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { getTeamPerformance } from '@/api/pocket/plantState'
|
||
|
||
// 工具函数
|
||
function getCurrentMonth() {
|
||
const date = new Date();
|
||
const year = date.getFullYear();
|
||
const month = (date.getMonth() + 1).toString().padStart(2, "0");
|
||
return `${year}-${month}`;
|
||
}
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
selectedMonth: getCurrentMonth(),
|
||
startDate: "2020-01",
|
||
endDate: getCurrentMonth(),
|
||
// 表格列配置
|
||
columns: [
|
||
{ title: '班组', key: 'team' },
|
||
{ title: '产量(t)', key: 'output' },
|
||
{ title: '成材率', key: 'yieldRate' },
|
||
{ title: '合格率', key: 'passRate' },
|
||
{ title: '综合评分', key: 'score' }
|
||
],
|
||
// 表格数据
|
||
tableData: [],
|
||
// 班组排名数据
|
||
teamRankingData: [
|
||
{ team: '甲班', shift: '早班', score: 96.8 },
|
||
{ team: '乙班', shift: '中班', score: 95.5 },
|
||
{ team: '丙班', shift: '晚班', score: 94.2 },
|
||
{ team: '丁班', shift: '早班', score: 93.6 }
|
||
],
|
||
// 产量对比图
|
||
outputChartData: {},
|
||
columnChartOpts: {
|
||
color: ["#0066cc"],
|
||
padding: [15, 15, 0, 15],
|
||
enableScroll: false,
|
||
xAxis: { disableGrid: true },
|
||
yAxis: {
|
||
gridType: "dash",
|
||
dashLength: 4,
|
||
gridColor: "#e4e7ed",
|
||
data: [{ title: "产量(t)" }]
|
||
}
|
||
},
|
||
// 质量指标雷达图
|
||
qualityRadarData: {
|
||
categories: [],
|
||
series: []
|
||
},
|
||
radarChartOpts: {
|
||
color: ["#0066cc", "#409eff", "#66b1ff", "#a0cfff"],
|
||
padding: [15, 15, 15, 15],
|
||
enableScroll: false,
|
||
legend: {
|
||
show: true,
|
||
position: "bottom",
|
||
lineHeight: 16,
|
||
fontSize: 10,
|
||
fontColor: "#666"
|
||
},
|
||
extra: {
|
||
radar: {
|
||
gridType: "radar",
|
||
gridColor: "#e4e7ed",
|
||
gridCount: 5,
|
||
opacity: 0.2,
|
||
labelShow: true,
|
||
max: 100,
|
||
labelColor: "#666666",
|
||
labelFontSize: 10
|
||
}
|
||
}
|
||
}
|
||
};
|
||
},
|
||
computed: {
|
||
isMinMonth() {
|
||
return this.selectedMonth === this.startDate;
|
||
},
|
||
isMaxMonth() {
|
||
return this.selectedMonth === this.endDate;
|
||
},
|
||
formattedMonth() {
|
||
const [year, month] = this.selectedMonth.split("-");
|
||
return `${year}年${month}月`;
|
||
}
|
||
},
|
||
mounted() {
|
||
this.loadTeamPerformance();
|
||
},
|
||
methods: {
|
||
handleMonthChange(e) {
|
||
this.selectedMonth = e.detail.value;
|
||
this.loadTeamPerformance();
|
||
},
|
||
|
||
changeMonth(step) {
|
||
const [year, month] = this.selectedMonth.split("-").map(Number);
|
||
const targetDate = new Date(year, month - 1 + step);
|
||
const targetMonth = `${targetDate.getFullYear()}-${(targetDate.getMonth() + 1).toString().padStart(2, "0")}`;
|
||
|
||
if (this.compareMonths(targetMonth, this.startDate) < 0) return;
|
||
if (this.compareMonths(targetMonth, this.endDate) > 0) return;
|
||
|
||
this.selectedMonth = targetMonth;
|
||
this.loadTeamPerformance();
|
||
},
|
||
|
||
compareMonths(a, b) {
|
||
const [aYear, aMonth] = a.split("-").map(Number);
|
||
const [bYear, bMonth] = b.split("-").map(Number);
|
||
if (aYear !== bYear) return aYear - bYear;
|
||
return aMonth - bMonth;
|
||
},
|
||
|
||
// 加载班组绩效数据
|
||
loadTeamPerformance() {
|
||
uni.showLoading({ title: '加载中' })
|
||
|
||
// 转换月份为完整日期范围
|
||
const startDate = `${this.selectedMonth}-01`
|
||
const [year, month] = this.selectedMonth.split('-')
|
||
const lastDay = new Date(year, month, 0).getDate()
|
||
const endDate = `${this.selectedMonth}-${String(lastDay).padStart(2, '0')}`
|
||
|
||
console.log('查询班组绩效:', startDate, endDate)
|
||
|
||
getTeamPerformance(startDate, endDate).then(response => {
|
||
uni.hideLoading()
|
||
|
||
if (response.code === 200 && response.data && response.data.length > 0) {
|
||
const teamData = response.data
|
||
console.log('班组绩效数据:', teamData)
|
||
|
||
// 排名数据（取前4名）
|
||
this.teamRankingData = teamData.slice(0, 4).map(item => ({
|
||
team: item.crew,
|
||
shift: item.shift,
|
||
score: Number(item.score) || 0
|
||
}))
|
||
|
||
// 表格数据
|
||
this.tableData = teamData.map(item => ({
|
||
team: item.teamName,
|
||
output: Number(item.output) || 0,
|
||
yieldRate: `${Number(item.yieldRate) || 0}%`,
|
||
passRate: `${Number(item.passRate) || 0}%`,
|
||
score: Number(item.score) || 0
|
||
}))
|
||
|
||
// 产量对比柱状图
|
||
this.outputChartData = {
|
||
categories: teamData.map(item => item.teamName),
|
||
series: [
|
||
{ name: '产量', data: teamData.map(item => Number(item.output) || 0) }
|
||
]
|
||
}
|
||
|
||
// 质量指标雷达图
|
||
this.qualityRadarData = {
|
||
categories: ['产量指标', '成材率', '合格率', '厚度质量', '板形质量'],
|
||
series: teamData.map(item => ({
|
||
name: item.teamName,
|
||
data: [
|
||
Number(this.normalizeValue(item.output, 1500)), // 产量归一化到100
|
||
Number(item.yieldRate) || 0,
|
||
Number(item.passRate) || 0,
|
||
Number(item.avgThickQuality) || 0,
|
||
Number(item.avgShapeQuality) || 0
|
||
]
|
||
}))
|
||
}
|
||
} else {
|
||
console.log('暂无班组绩效数据')
|
||
}
|
||
}).catch(error => {
|
||
uni.hideLoading()
|
||
console.error('加载班组绩效失败:', error)
|
||
})
|
||
},
|
||
|
||
// 数值归一化到100（用于雷达图）
|
||
normalizeValue(value, max) {
|
||
return Math.min(100, (Number(value) / max) * 100).toFixed(2)
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
/* 页面容器 */
|
||
.page-container {
|
||
background: #f5f7fa;
|
||
padding: 24rpx;
|
||
}
|
||
|
||
/* 月份选择器 */
|
||
.month-selector {
|
||
display: flex;
|
||
align-items: center;
|
||
background: #fff;
|
||
border-radius: 8rpx;
|
||
padding: 20rpx 24rpx;
|
||
margin-bottom: 24rpx;
|
||
border: 1rpx solid #e4e7ed;
|
||
}
|
||
|
||
.month-arrow {
|
||
padding: 12rpx 20rpx;
|
||
font-size: 28rpx;
|
||
color: #0066cc;
|
||
font-weight: 600;
|
||
|
||
&.disabled {
|
||
color: #dcdfe6;
|
||
}
|
||
}
|
||
|
||
.month-display {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 12rpx;
|
||
}
|
||
|
||
.month-text {
|
||
font-size: 32rpx;
|
||
color: #0066cc;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.picker-icon {
|
||
font-size: 20rpx;
|
||
color: #909399;
|
||
}
|
||
|
||
/* 区块样式 */
|
||
.ranking-section,
|
||
.chart-section,
|
||
.detail-section {
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.section-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 20rpx;
|
||
padding-left: 16rpx;
|
||
border-left: 4rpx solid #0066cc;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 30rpx;
|
||
font-weight: 500;
|
||
color: #303133;
|
||
}
|
||
|
||
/* 排名列表 */
|
||
.ranking-list {
|
||
background: #fff;
|
||
border-radius: 8rpx;
|
||
border: 1rpx solid #e4e7ed;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.ranking-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 24rpx;
|
||
border-bottom: 1rpx solid #f5f7fa;
|
||
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
&.rank-1 .rank-badge {
|
||
background: #0066cc;
|
||
}
|
||
|
||
&.rank-2 .rank-badge {
|
||
background: #409eff;
|
||
}
|
||
|
||
&.rank-3 .rank-badge {
|
||
background: #66b1ff;
|
||
}
|
||
}
|
||
|
||
.rank-badge {
|
||
width: 56rpx;
|
||
height: 56rpx;
|
||
border-radius: 50%;
|
||
background: #a0cfff;
|
||
color: #fff;
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 24rpx;
|
||
}
|
||
|
||
.rank-info {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8rpx;
|
||
}
|
||
|
||
.team-name {
|
||
font-size: 30rpx;
|
||
color: #303133;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.team-shift {
|
||
font-size: 24rpx;
|
||
color: #909399;
|
||
}
|
||
|
||
.rank-score {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 4rpx;
|
||
}
|
||
|
||
.score-value {
|
||
font-size: 48rpx;
|
||
color: #0066cc;
|
||
font-weight: 600;
|
||
line-height: 1;
|
||
}
|
||
|
||
.score-label {
|
||
font-size: 22rpx;
|
||
color: #909399;
|
||
}
|
||
|
||
/* 图表容器 */
|
||
.chart-wrapper {
|
||
background: #fff;
|
||
border: 1rpx solid #e4e7ed;
|
||
border-radius: 8rpx;
|
||
padding: 24rpx 16rpx;
|
||
min-height: 450rpx;
|
||
}
|
||
|
||
/* 详细数据表格 */
|
||
.detail-table {
|
||
background: #fff;
|
||
border-radius: 8rpx;
|
||
border: 1rpx solid #e4e7ed;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.table-header {
|
||
display: flex;
|
||
background: #0066cc;
|
||
color: #fff;
|
||
}
|
||
|
||
.header-cell {
|
||
color: #fff !important;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.table-row {
|
||
display: flex;
|
||
border-bottom: 1rpx solid #f5f7fa;
|
||
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
}
|
||
|
||
.table-cell {
|
||
flex: 1;
|
||
padding: 24rpx 12rpx;
|
||
text-align: center;
|
||
font-size: 26rpx;
|
||
color: #303133;
|
||
}
|
||
|
||
/* 空状态 */
|
||
.empty-state {
|
||
padding: 100rpx 0;
|
||
text-align: center;
|
||
}
|
||
|
||
.empty-text {
|
||
font-size: 28rpx;
|
||
color: #909399;
|
||
}
|
||
</style>
|