ylrz_scrm_adminUI/src/views/statistics/section/today.vue

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="公司名" prop="companyId">
        <el-select filterable style="width: 220px" v-model="queryParams.companyId" @change="handleSeller" placeholder="请选择公司名" clearable size="small">
          <el-option
            v-for="item in companys"
            :key="item.companyId"
            :label="item.companyName"
            :value="item.companyId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="销售" prop="nickName" v-if="queryParams.companyId">
        <el-select v-model="queryParams.companyUserId" remote placeholder="请选择" filterable clearable  style="width: 100%;" @keyup.enter.native="handleQuery">
          <el-option
            v-for="dict in companyUserList"
            :key="`${dict.nickName} - ${dict.userName}`"
            :label="`${dict.nickName} - ${dict.userName}`"
            :value="dict.userId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="时间范围" prop="dateRange">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item label="SOP任务" prop="channel" label-width="70px">
        <select-tree
          v-model="selectedMultipleTasks"
          :raw-data="channelList"
          placeholder="请选择多个任务"
          :multiple="true"
          component-width="300px"
          :max-display-tags="3"
          :check-strictly="false"
          :return-leaf-only="false"
        @change="handleMultiChange"
        ></select-tree>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['system:stats:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <!-- 警告提示 -->
    <el-alert
      title="待激活人数依赖进粉时的自动标记和员工手动标记是可变的，相应的目标人数和进线完播率受此影响；为了不受进粉期人数变化影响，第二天新进报名产生的观后数据不做统计；辅助工作台人数不一致可能是受进粉影响，也有可能是员工删除了好友或者取消了客户频道报名。"
      type="warning"
      :closable="false"
      show-icon
      class="mb8">
    </el-alert>

    <el-table v-loading="loading" :data="statsList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />

      <!-- 未上线部分 -->

        <el-table-column prop="departmentName" label="所属部门" width="180" />
        <el-table-column prop="employeeName" label="员工"  />
        <el-table-column prop="totalTasks" label="营期人数"  align="center" />
        <el-table-column prop="incompleteTasks" label="未报名"  align="center" />
        <el-table-column prop="inProgressTasks" label="已报名"  align="center" />
        <el-table-column prop="incompleteRate" label="报名率"  align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.incompleteRate }}%</span>
          </template>
        </el-table-column>
        <el-table-column prop="completionRate" label="完课率"  align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.completionRate }}%</span>
          </template>
        </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { listEmployeeStats, getEmployeeList, getChannelList, exportEmployeeStats,getSOPTaskData} from "@/api/system/employeeStats";
import {getCompanyList} from "@/api/company/company";
import {getUserList} from "@/api/company/companyUser";
import SelectTree from "@/components/TreeSelect/index.vue";

export default {
  name: "EmployeeStats",
  components: {SelectTree},
  data() {
    return {
      // 遮罩层
      loading: true,
      companys:[],
      selectedMultipleTasks: [],
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 员工统计表格数据
      statsList: [],
      // 员工列表
      employeeList: [],
      companyUserList: [],
      // 频道列表
      channelList: [],
      // 日期范围
      dateRange: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        channel: null,
        startDate: null,
        endDate: null,
        companyId: null,
        periodList: []
      },
      // 总体统计
      totalStats: {
        totalEmployees: 0,
        onlineEmployees: 0,
        offlineEmployees: 0,
        completionRate: '0.00'
      }
    };
  },
  created() {
    this.getList();

    getCompanyList().then(response => {
      this.companys = response.data;
    });

    getSOPTaskData().then(response => {
      this.channelList = response.data;
    });

  },
  methods: {
    handleMultiChange(e){

    },
    handleSeller(){
      if(this.queryParams.companyId != null) {
        getUserList(this.queryParams.companyId).then(res=>{
          if(res.code === 200) {
            this.companyUserList = res.data
          }
        })
      }
    },
    /** 查询员工统计列表 */
    getList() {
      this.loading = true;
      if (this.dateRange && this.dateRange.length === 2) {
        this.queryParams.startDate = this.dateRange[0];
        this.queryParams.endDate = this.dateRange[1];
      } else {
        this.queryParams.startDate = null;
        this.queryParams.endDate = null;
      }

      listEmployeeStats(this.queryParams).then(response => {
        this.statsList = response.rows;
        this.total = response.total;
        this.totalStats = response.totalStats || this.totalStats;
        this.loading = false;
      });
    },
    /** 获取员工列表 */
    getEmployeeList() {
      getEmployeeList().then(response => {
        this.employeeList = response.data || [];
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.queryParams.periodList = this.selectedMultipleTasks;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/employeeStats/export', {
        ...this.queryParams
      }, `员工完成统计_${new Date().getTime()}.xlsx`);
    }
  }
};
</script>

<style lang="scss" scoped>
.stats-card {
  text-align: center;
  margin-bottom: 16px;

  .stats-number {
    font-size: 24px;
    font-weight: bold;
    color: #409EFF;

    &.online {
      color: #67C23A;
    }

    &.offline {
      color: #F56C6C;
    }

    &.rate {
      color: #E6A23C;
    }
  }
}

.mb8 {
  margin-bottom: 8px;
}

::v-deep .el-table .el-table__header th {
  background-color: #f5f7fa;
}

::v-deep .el-alert {
  margin-bottom: 16px;
}
</style>