|
@@ -0,0 +1,482 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div class="integral_statistics_box" v-loading="attendload">
|
|
|
+ <el-row :gutter="10" style="margin-right:8px;">
|
|
|
+ <el-form :inline="true">
|
|
|
+ <el-form-item label="考勤组">
|
|
|
+ <el-select
|
|
|
+ v-model="formData.group_id"
|
|
|
+ @change="selectgroupId"
|
|
|
+ filterable
|
|
|
+ :clearable="false"
|
|
|
+ placeholder="请选择考勤组"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in checkingInGroup"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="排名类型">
|
|
|
+ <el-select
|
|
|
+
|
|
|
+ v-model="formData.event_type"
|
|
|
+ @change="selectgroupId"
|
|
|
+ style="width:110px"
|
|
|
+ placeholder="请选择"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in event_type"
|
|
|
+ :key="index"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="时间">
|
|
|
+
|
|
|
+ <!-- <el-date-picker
|
|
|
+ v-model="Month_range"
|
|
|
+ class="date-picker-width"
|
|
|
+ type="month"
|
|
|
+ :clearable='false'
|
|
|
+ value-format="yyyy-MM"
|
|
|
+ placeholder="选择月份排名"
|
|
|
+ @change="onFilterChanged"
|
|
|
+ ></el-date-picker> -->
|
|
|
+
|
|
|
+ <el-date-picker
|
|
|
+ style="width:290px"
|
|
|
+ class="first-element-btn"
|
|
|
+ :clearable="false"
|
|
|
+ v-model="time_range"
|
|
|
+ type="daterange"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ :picker-options="instantPickerOptions"
|
|
|
+ @change="onFilterChanged"
|
|
|
+ ></el-date-picker>
|
|
|
+
|
|
|
+
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" plain @click="exportRanking"
|
|
|
+ >导出排名</el-button
|
|
|
+ >
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-table
|
|
|
+ :data="all_integral_list"
|
|
|
+ style="width: 100%"
|
|
|
+ v-loading="loading"
|
|
|
+ >
|
|
|
+ <el-table-column label="名次" width="100" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <img
|
|
|
+ v-if="scope.row.rank === 1"
|
|
|
+ src="@/assets/image/statistics_NO1.png"
|
|
|
+ alt
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ v-if="scope.row.rank === 2"
|
|
|
+ src="@/assets/image/statistics_NO2.png"
|
|
|
+ alt
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ v-if="scope.row.rank === 3"
|
|
|
+ src="@/assets/image/statistics_NO3.png"
|
|
|
+ alt
|
|
|
+ />
|
|
|
+ <span v-if="scope.row.rank > 3">{{ scope.row.rank }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="姓名" align="left">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div style="display:flex;">
|
|
|
+ <userImage
|
|
|
+ class="fl"
|
|
|
+ :id="scope.row.id"
|
|
|
+ :user_name="scope.row.name"
|
|
|
+ :img_url="scope.row.img_url"
|
|
|
+ width="50px"
|
|
|
+ height="50px"
|
|
|
+ ></userImage>
|
|
|
+ <span style="line-height: 50px; padding-left: 10px;">{{
|
|
|
+ scope.row.name
|
|
|
+ }}</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="point" label="B分" align="left">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <b style="font-size:15px;color:#909399">{{ scope.row.point }}</b>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <!-- <template slot="empty">
|
|
|
+ <div class="nopoint_box">
|
|
|
+ <div class="noimg noperson"></div>
|
|
|
+ <span class="title">没有对应的数据</span>
|
|
|
+ </div>
|
|
|
+ </template> -->
|
|
|
+ <template slot="empty">
|
|
|
+ <noData :content="checkingInGroup.length==0?'请先开启钉钉考勤':'暂无数据'"></noData>
|
|
|
+ </template>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <center style="padding: 20px 0;">
|
|
|
+ <el-pagination
|
|
|
+ background
|
|
|
+ @size-change="handleSizeChange1"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ :current-page="formData.page"
|
|
|
+ :page-sizes="[10, 20, 50, 100]"
|
|
|
+ layout="total, sizes, prev, pager, next"
|
|
|
+ :page-size="pageLimit1"
|
|
|
+ :total="total"
|
|
|
+ >
|
|
|
+ </el-pagination>
|
|
|
+ </center>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 导出弹窗 -->
|
|
|
+ <el-dialog title="导出排名" :visible.sync="dialogVisible" width="730px">
|
|
|
+ <div style="font-size:15px;margin:20px 0 20px 0;">
|
|
|
+ 系统将按以下已选条件导出对应的排名报表
|
|
|
+ </div>
|
|
|
+ <div v-loading="exportLoad">
|
|
|
+ <el-form :inline="true">
|
|
|
+ <el-form-item label="考勤组">
|
|
|
+ <el-select
|
|
|
+ v-model="exportData.group_id"
|
|
|
+ @change="selectgroupId"
|
|
|
+ filterable
|
|
|
+ :clearable="false"
|
|
|
+ placeholder="请选择考勤组"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in checkingInGroup"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="排名类型">
|
|
|
+ <el-select
|
|
|
+ v-model="exportData.event_type"
|
|
|
+ style="width:150px"
|
|
|
+ placeholder="请选择"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in event_type"
|
|
|
+ :key="index"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="时间">
|
|
|
+
|
|
|
+ <!-- <el-date-picker
|
|
|
+ v-model="exportMonth_range"
|
|
|
+ class="date-picker-width"
|
|
|
+ type="month"
|
|
|
+ :clearable='false'
|
|
|
+ value-format="yyyy-MM"
|
|
|
+ placeholder="选择月份排名"
|
|
|
+ ></el-date-picker> -->
|
|
|
+
|
|
|
+ <el-date-picker
|
|
|
+ class="first-element-btn"
|
|
|
+ :clearable="false"
|
|
|
+ v-model="exportTime_range"
|
|
|
+ type="daterange"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ :picker-options="instantPickerOptions"
|
|
|
+ ></el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ </el-form>
|
|
|
+ <span class="dialog-footer" style="display:flex;justify-content: flex-end;">
|
|
|
+ <el-button @click="dialogVisible = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="exportExcel">导 出</el-button>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import noData from '@/components/noData';
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ exportLoad:false,
|
|
|
+ dialogVisible: false,
|
|
|
+ checkingInGroup: [],
|
|
|
+ event_type: [
|
|
|
+ { id: 0, name: "全部" },
|
|
|
+ { id: 1, name: "迟到" },
|
|
|
+ { id: 2, name: "早退" },
|
|
|
+ { id: 6, name: "准时打卡" },
|
|
|
+ { id: 20, name: "上班缺卡" },
|
|
|
+ { id: 21, name: "下班缺卡" },
|
|
|
+ { id: 16, name: "加班 " },
|
|
|
+ { id: 10, name: "缺勤" },
|
|
|
+ ],
|
|
|
+ attendload: false,
|
|
|
+ loading: false,
|
|
|
+ all_integral_list: null,
|
|
|
+ Month_range:this.$moment().format("YYYY-MM"),
|
|
|
+ time_range: [
|
|
|
+ this.$moment()
|
|
|
+ .startOf("month")
|
|
|
+ .format("YYYY-MM-DD"),
|
|
|
+ this.$moment()
|
|
|
+ .endOf("month")
|
|
|
+ .format("YYYY-MM-DD")
|
|
|
+ ],
|
|
|
+ formData: {
|
|
|
+ group_id: "",
|
|
|
+ // date_type: 3,
|
|
|
+ page: 1,
|
|
|
+ page_size: 10,
|
|
|
+ event_type: 0
|
|
|
+ },
|
|
|
+ exportMonth_range:this.$moment().format("YYYY-MM"),
|
|
|
+ exportTime_range: [
|
|
|
+ this.$moment()
|
|
|
+ .startOf("month")
|
|
|
+ .format("YYYY-MM-DD"),
|
|
|
+ this.$moment()
|
|
|
+ .endOf("month")
|
|
|
+ .format("YYYY-MM-DD")
|
|
|
+ ],
|
|
|
+ exportData: {
|
|
|
+ group_id: "",
|
|
|
+ event_type: 0
|
|
|
+ },
|
|
|
+ total: 0,
|
|
|
+ dept_tree: [],
|
|
|
+ dept_name: [],
|
|
|
+ pageLimit1: 10,
|
|
|
+ instantPickerOptions: {
|
|
|
+ shortcuts: [
|
|
|
+ {
|
|
|
+ text: "本周",
|
|
|
+ onClick(picker) {
|
|
|
+ const now = new Date();
|
|
|
+ const start = new Date();
|
|
|
+ start.setTime(
|
|
|
+ now.getTime() - (now.getDay() - 1) * 24 * 60 * 60 * 1000
|
|
|
+ );
|
|
|
+ now.setTime(start.getTime() + 6 * 24 * 60 * 60 * 1000 - 1000);
|
|
|
+ picker.$emit("pick", [start, now]);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "上周",
|
|
|
+ onClick(picker) {
|
|
|
+ const end = new Date();
|
|
|
+ const start = new Date();
|
|
|
+ start.setTime(
|
|
|
+ start.getTime() - (start.getDay() + 6) * 3600 * 1000 * 24
|
|
|
+ );
|
|
|
+ end.setTime(start.getTime() + 6 * 24 * 60 * 60 * 1000 - 1000);
|
|
|
+ picker.$emit("pick", [start, end]);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "本月",
|
|
|
+ onClick(picker) {
|
|
|
+ const now = new Date();
|
|
|
+ const startDate = new Date(now.getFullYear(), now.getMonth(), 1);
|
|
|
+ const endDate = new Date(
|
|
|
+ now.getFullYear(),
|
|
|
+ now.getMonth() + 1,
|
|
|
+ 0
|
|
|
+ );
|
|
|
+ picker.$emit("pick", [startDate, endDate]);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "上月",
|
|
|
+ onClick(picker) {
|
|
|
+ const now = new Date();
|
|
|
+ const startDate = new Date(
|
|
|
+ now.getFullYear() - (now.getMonth() > 0 ? 0 : 1),
|
|
|
+ (now.getMonth() + 11) % 12,
|
|
|
+ 1
|
|
|
+ );
|
|
|
+ const endDate = new Date(now.getFullYear(), now.getMonth(), 0);
|
|
|
+ picker.$emit("pick", [startDate, endDate]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ components: {noData},
|
|
|
+ watch: {},
|
|
|
+ mounted() {
|
|
|
+ this.checkingIn_group(); //考勤组
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ exportRanking(){
|
|
|
+ if(this.checkingInGroup.length>0){
|
|
|
+ this.exportData.group_id = this.checkingInGroup[0].id
|
|
|
+ }
|
|
|
+ this.dialogVisible = true
|
|
|
+ },
|
|
|
+ exportExcel() {
|
|
|
+ window.open(process.env.VUE_APP_BASE_API + 'api/download/groups_ranking/export?start_date='+
|
|
|
+ this.exportTime_range[0]+
|
|
|
+ '&end_date='+this.exportTime_range[1]+
|
|
|
+ '&page='+1+
|
|
|
+ '&page_size='+2000+
|
|
|
+ '&group_id='+this.exportData.group_id+
|
|
|
+ '&event_type='+this.exportData.event_type+
|
|
|
+ '&employee_id='+this.$getUserData().id, '_blank');
|
|
|
+
|
|
|
+ // this.exportLoad = true
|
|
|
+ // let params = this.exportData;
|
|
|
+
|
|
|
+ // params.date_type = 3,
|
|
|
+ // params.month_date = this.exportMonth_range
|
|
|
+ // params.date_type = 2,
|
|
|
+
|
|
|
+ // params.start_date = this.exportTime_range[0];
|
|
|
+ // params.end_date = this.exportTime_range[1];
|
|
|
+ // params.page = 1,
|
|
|
+ // params.page_size = 2000,
|
|
|
+
|
|
|
+
|
|
|
+ // this.$axios('get',"/api/ad/groups_ranking/export", params).then((res)=>{
|
|
|
+ // if(res.data.code == 1){
|
|
|
+ // window.open('/ad/statistics/group_rank_export?code='+res.data.data.code,'_blank')
|
|
|
+ // this.dialogVisible = false
|
|
|
+ // }else{
|
|
|
+ // this.$message.error(res.data.msg);
|
|
|
+ // }
|
|
|
+ // }).finally(()=>{
|
|
|
+ // this.exportLoad = false
|
|
|
+ // })
|
|
|
+ },
|
|
|
+ selectgroupId() {
|
|
|
+ this.get_all_integral();
|
|
|
+ },
|
|
|
+ onFilterChanged() {
|
|
|
+ this.get_all_integral();
|
|
|
+ },
|
|
|
+ //分页
|
|
|
+ handleSizeChange1(val) {
|
|
|
+ this.pageLimit1 = val;
|
|
|
+ this.formData.page_size = this.pageLimit1;
|
|
|
+ this.get_all_integral();
|
|
|
+ },
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ this.formData.page = val;
|
|
|
+ this.get_all_integral();
|
|
|
+ },
|
|
|
+ //请求数据
|
|
|
+ checkingIn_group() {
|
|
|
+ this.attendload = true;
|
|
|
+ let self = this;
|
|
|
+ let params = {
|
|
|
+ page: 1,
|
|
|
+ page_size: 2000
|
|
|
+ };
|
|
|
+ this.$axios('get',"/api/ad/groups",params)
|
|
|
+ .then(res => {
|
|
|
+ if (res.data.code == 1) {
|
|
|
+ let list = res.data.data.list
|
|
|
+ let datas = []
|
|
|
+ for(let key in list){
|
|
|
+ let obj = {}
|
|
|
+ obj.id = key
|
|
|
+ obj.name = list[key]
|
|
|
+ datas.push(obj)
|
|
|
+ }
|
|
|
+ console.log(datas)
|
|
|
+ this.checkingInGroup = datas
|
|
|
+ this.formData.group_id = datas[0].id;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ this.get_all_integral();
|
|
|
+ this.attendload = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //请求数据
|
|
|
+ get_all_integral() {
|
|
|
+ let self = this;
|
|
|
+ self.loading = true;
|
|
|
+ // let data = self.formData;
|
|
|
+ let data = {
|
|
|
+ group_id:this.formData.group_id,
|
|
|
+ // date_type:this.formData.date_type,
|
|
|
+ page:this.formData.page,
|
|
|
+ page_size:this.formData.page_size,
|
|
|
+ event_type:this.formData.event_type,
|
|
|
+ // month_date:this.Month_range,
|
|
|
+ }
|
|
|
+ // data.month_date = this.Month_range
|
|
|
+ data.start_date = this.time_range[0];
|
|
|
+ data.end_date = this.time_range[1];
|
|
|
+ // data.page = data.page-1
|
|
|
+ this.$axios("post","/api/ad/rank",data)
|
|
|
+ .then(res => {
|
|
|
+ if (res.data.code == 1) {
|
|
|
+ self.all_integral_list = res.data.data.list;
|
|
|
+ this.total = res.data.data.total
|
|
|
+ } else {
|
|
|
+ self.$message.error(res.data.data.msg);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ self.loading = false;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.el-date-editor.el-input {
|
|
|
+ width: auto;
|
|
|
+}
|
|
|
+.date-picker-width {
|
|
|
+ width: 145px !important;
|
|
|
+}
|
|
|
+.search ::v-deep .el-input-group__append:active {
|
|
|
+ background: #26a2ff;
|
|
|
+}
|
|
|
+.search ::v-deep .el-input-group__append:active .el-icon-search {
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.integral_statistics_box {
|
|
|
+ min-width:780px;
|
|
|
+ background-color: #ffffff;
|
|
|
+ padding: 20px;
|
|
|
+ min-height: calc(100vh - 160px);
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .el-dialog__body {
|
|
|
+ padding: 0px 20px 30px;
|
|
|
+}
|
|
|
+</style>
|