detection-business/pages/index/countEmployees.vue

<template>
  <view class="">
    <headersVue :titles="titles">
      <u-icon name="arrow-left" color="#fff" size="18"></u-icon>
    </headersVue>
    <view class="content">
      <!-- 顶部选择区域 -->
      <view class="top_">
        <view class="select-container" @click="showDropdown">
          <view class="select-text">
            {{ queryStr != null ? queryStr : '请选择工作内容' }}
          </view>
          <!-- 下拉箭头 -->
          <u-icon
              style="margin-left: 10rpx;"
              name="arrow-down"
              size="18"
              color="#8D90A6"
          ></u-icon>
        </view>

        <!-- 清除按钮 -->
        <u-icon
            v-if="queryStr"
            name="close-circle"
            color="#8D90A6"
            size="18"
            @click="clearSelection"
        ></u-icon>
      </view>

      <!-- 列表区域 -->
      <view class="list_">
        <view class="list_title">
          <view class="list_ds">
            <view style="margin-right: 50px;">排名</view>
            <view>员工</view>
          </view>
          <view>服务台次</view>
        </view>
        <view class="list_box" v-for="(item, index) in List" :key="index">
          <view class="list_box_top">
            <view class="pm_" v-if="index != 0 && index != 2 && index != 1">{{ index + 1 }}</view>
            <view class="pm_ one" v-if="index == 0" >{{ index + 1 }}</view>
            <view class="pm_ two" v-if="index == 1">{{ index + 1 }}</view>
            <view class="pm_ three" v-if="index == 2">{{ index + 1 }}</view>
            <view class="list_ds">
              <view class="tx_">
                <image
                    v-if="item.avatar"
                    style="border-radius: 50%"
                    :src="baseImageUrl + '/' + item.avatar"
                    mode=""
                ></image>
                <image src="/static/imgs/touxiang.png" v-else mode=""></image>
              </view>
              <view>
                <view>{{ item.nickname }}</view>
                <view class="num_hui">{{ item.mobile }}</view>
              </view>
            </view>
            <view>{{ item.orderCount }}</view>
          </view>
          <view class="list_box_bottom">
            <view class="list_ds">
              <view class="text_">外检：</view>
              <view class="num_">{{ item.waijianCount }}</view>
            </view>
            <view class="list_ds">
              <view class="text_">安检：</view>
              <view class="num_">{{ item.anjianCount }}</view>
            </view>
            <view class="list_ds">
              <view class="text_">其他：</view>
              <view class="num_">{{ item.otherCount }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 选择器 -->
    <u-picker
        :show="isShowScreen"
        :columns="[columns]"
        @cancel="handleCancel"
        keyName="projectName"
        @confirm="submitScreen"
    ></u-picker>
  </view>
</template>

<script>
import headersVue from '../../components/header/headers.vue';
import request from "@/utils/request";
import config from "config";

export default {
  data() {
    return {
      titles: "员工统计",
      List: [],
      selectList: [],
      useSelectList: [],
      show: false,
      status: 'loading',
      baseImageUrl: config.baseImageUrl,
      isShowScreen: false,
      columns: [],
      queryParams: {},
      queryStr: null,
    };
  },
  components: {
    headersVue,
  },
  onLoad() {
    this.getStaffCount();
    this.getInspectionProject();
  },
  methods: {
    // 获取员工统计
    getStaffCount() {
      request({
        url: '/partnerOwn/partner/getStaffCount',
        method: 'post',
        data: this.queryParams,
      }).then((res) => {
        this.$nextTick(() => {
          this.List = res.data;
        });
      });
    },
    // 获取工作内容列表
    getInspectionProject() {
      request({
        url: '/inspection/dl-inspection-project/page',
        method: 'get',
        params: {
          pageNo: 1,
          pageSize: 10000,
        },
      }).then((res) => {
        this.columns = res.data.records;
      });
    },
    // 显示下拉框
    showDropdown() {
      this.isShowScreen = true;
    },
    // 处理选择器确认事件
    submitScreen(e) {
      this.isShowScreen = false;
      this.queryParams.id = e.value[0].id;
      this.queryStr = e.value[0].projectName;
      this.getStaffCount();
    },
    // 处理选择器取消事件
    handleCancel() {
      this.isShowScreen = false;
    },
    // 清除选择
    clearSelection() {
      this.queryParams.id = null;
      this.queryStr = null;
      this.getStaffCount();
    },
  },
};
</script>

<style scoped lang="scss">
.content {
  background: #f7f8fc;
  width: 100%;
  padding-top: 200rpx;
}

.top_ {
  width: 100%;
  height: 104rpx;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 30rpx;
  border-bottom: 1rpx solid #f5f5f5;

  .select-container {
    display: flex;
    align-items: center;
    flex: 1; // 让这个区域撑满可用空间
  }

  .select-text {
    font-size: 28rpx;
    color: #101a3e;
  }
}


.list_ {
  width: 100%;
  box-sizing: border-box;
  padding: 30rpx;
}

.list_title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 28rpx;
  color: #101a3e;
  box-sizing: border-box;
  padding: 0 30rpx;
  margin-bottom: 20rpx;
}

.list_ds {
  display: flex;
  align-items: center;
}

.list_box {
  width: 100%;
  background: #ffffff;
  border-radius: 8rpx;
  margin-bottom: 30rpx;
}

.list_box_top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 30rpx 50rpx;
  border-bottom: 2rpx solid #f5f5f5;
}

.list_box_bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx 50rpx;
}

.tx_ {
  width: 90rpx;
  height: 90rpx;
  margin-right: 5px;

  image {
    width: 100%;
    height: 100%;
  }
}

.num_hui {
  font-size: 24rpx;
  color: #8d90a6;
}

.text_ {
  font-size: 28rpx;
  color: #8d90a6;
}

.num_ {
  font-size: 28rpx;
  color: #101a3e;
}

.pm_ {
  width: 40rpx;
  height: 40rpx;
  background: #327dfb;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 28rpx;
}
.one {
  background: url(../../static/imgs/oneStaff.png);
  width: 55rpx;
  /* height: 156px; */
  background-repeat: no-repeat;
  background-size: cover;
}
.two {
  background: url(../../static/imgs/twoStaff.png);
  width: 55rpx;
  /* height: 156px; */
  background-repeat: no-repeat;
  background-size: cover;
}
.three {
  background: url(../../static/imgs/threeStaff.png);
  width: 55rpx;
  background-repeat: no-repeat;
  background-size: cover;
}
</style>