detection-business/pages/statistics/staffStatistics.vue

<template>
  <view class="staff-statistics-container">
    <!-- 头部区域 -->
    <view class="header">
      <view class="title-container">
        <text class="main-title">员工统计</text>
        <text class="sub-title">员工排名与项目统计</text>
      </view>
      <view class="trophy-container">
        <image src="/static/imgs/trophy.png" mode="aspectFit"></image>
      </view>
    </view>

    <!-- 日期筛选区域 -->
    <view class="date-filter">
      <view class="date-tabs">
        <view class="tab active">本日</view>
        <view class="tab">本月</view>
      </view>
      <view class="date-range">
        <text>2022-09-23 ~ 2023-04-12</text>
        <image src="/static/imgs/arrow-down.png" mode="aspectFit"></image>
      </view>
    </view>

    <!-- 员工列表区域 -->
    <view class="staff-list">
      <!-- 员工项 -->
      <view class="staff-item" v-for="(staff, index) in staffData" :key="index">
        <view class="staff-rank">
          <image :src="'/static/imgs/num' + (index + 1) + '.png'" mode="aspectFit"></image>
        </view>
        <view class="staff-info">
          <image :src="staff.avatar" mode="aspectFit"></image>
          <view class="staff-name">
            <text>{{ staff.name }}</text>
            <text class="service-count">服务{{ staff.serviceCount }}次</text>
          </view>
        </view>
        <view class="staff-stats">
          <view class="stat-item" v-for="stat in staff.stats" :key="stat.name">
            <text class="stat-name">{{ stat.name }}</text>
            <text class="stat-value">{{ stat.value }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      staffData: [
        {
          name: '张三三',
          avatar: '/static/icons/avatar.png',
          serviceCount: 4,
          stats: [
            { name: '收费录', value: 5 },
            { name: '接车拍照', value: 0 },
            { name: '上门接车', value: 0 },
            { name: '还车拍照', value: 0 }
          ]
        },
        {
          name: '何米有',
          avatar: '/static/icons/avatar.png',
          serviceCount: 4,
          stats: [
            { name: '底检', value: 4 },
            { name: '接车拍照', value: 0 },
            { name: '上门接车', value: 0 },
            { name: '还车拍照', value: 0 }
          ]
        },
        {
          name: '晨虹剑',
          avatar: '/static/icons/avatar.png',
          serviceCount: 3,
          stats: [
            { name: '动态', value: 3 },
            { name: '安检', value: 3 },
            { name: '上门接车', value: 0 },
            { name: '还车拍照', value: 0 }
          ]
        },
        {
          name: '晨虹剑',
          avatar: '/static/icons/avatar.png',
          serviceCount: 3,
          stats: [
            { name: '报告总检', value: 3 },
            { name: '接车拍照', value: 0 },
            { name: '上门接车', value: 0 },
            { name: '还车拍照', value: 0 }
          ]
        },
        {
          name: '威尔康',
          avatar: '/static/icons/avatar.png',
          serviceCount: 2,
          stats: [
            { name: '报告总检', value: 3 },
            { name: '接车拍照', value: 0 },
            { name: '上门接车', value: 0 },
            { name: '还车拍照', value: 0 }
          ]
        }
      ]
    };
  },
  methods: {
    // 可以添加日期切换、筛选等方法
  }
};
</script>

<style scoped>
.staff-statistics-container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  background-color: #4a90e2;
  border-radius: 10rpx;
  padding: 30rpx 20rpx;
  margin-bottom: 20rpx;
}

.title-container {
  color: white;
}

.main-title {
  font-size: 40rpx;
  font-weight: bold;
  display: block;
}

.sub-title {
  font-size: 24rpx;
  opacity: 0.8;
}

.trophy-container {
  width: 120rpx;
  height: 120rpx;
}

.trophy-container image {
  width: 100%;
  height: 100%;
}

.date-filter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: white;
  padding: 20rpx;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
}

.date-tabs {
  display: flex;
}

.tab {
  padding: 10rpx 20rpx;
  margin-right: 10rpx;
  border-radius: 5rpx;
}

.tab.active {
  background-color: #4a90e2;
  color: white;
}

.date-range {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: #666;
}

.date-range image {
  width: 24rpx;
  height: 24rpx;
  margin-left: 10rpx;
}

.staff-list {
  background-color: white;
  border-radius: 10rpx;
  overflow: hidden;
}

.staff-item {
  display: flex;
  padding: 20rpx;
  border-bottom: 1rpx solid #eee;
}

.staff-rank {
  width: 60rpx;
  height: 60rpx;
  margin-right: 20rpx;
}

.staff-rank image {
  width: 100%;
  height: 100%;
}

.staff-info {
  display: flex;
  align-items: center;
  flex: 1;
}

.staff-info image {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.staff-name {
  flex-direction: column;
}

.staff-name text {
  display: block;
}

.service-count {
  font-size: 24rpx;
  color: #999;
  background-color: #f5f5f5;
  padding: 2rpx 10rpx;
  border-radius: 10rpx;
  margin-top: 5rpx;
}

.staff-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex: 2;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 30rpx;
  margin-bottom: 10rpx;
  min-width: 100rpx;
}

.stat-name {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 5rpx;
}

.stat-value {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}
</style>