考勤统计

guoshilong

2023-12-25 c2b354d2f1d275040aca6519b1a431b92c63518d

考勤统计

 src/api/check/postFiling.js

@@ -12,6 +12,17 @@
    })
}

export const getAll = (params) => {
  return request({
    url: '/api/postFiling/getAll',
    method: 'get',
    params: {
      ...params,
    }
  })
}


export const add = (row) => {
    return request({
        url: '/api/postFiling/save',

 src/page/index/top/index.vue

@@ -61,27 +61,31 @@
        </div>
      </el-tooltip> -->
      <!-- 手册 -->
      <el-tooltip
        v-if="showTheme"
        effect="dark"
        :content="$t('navbar.userSManual')"
        placement="bottom"
      >
        <div class="top-bar__item top-bar__item--show">
          <top-userSManual></top-userSManual>
        </div>
      </el-tooltip>
<!--      <el-tooltip-->
<!--        v-if="showTheme"-->
<!--        effect="dark"-->
<!--        :content="$t('navbar.userSManual')"-->
<!--        placement="bottom"-->
<!--      >-->
<!--        <div class="top-bar__item top-bar__item&#45;&#45;show">-->
<!--          <top-userSManual></top-userSManual>-->
<!--        </div>-->
<!--      </el-tooltip>-->


      <!-- 驱动 -->
      <el-tooltip
        v-if="showTheme"
        effect="dark"
        :content="$t('navbar.drive')"
        placement="bottom"
      >
        <div class="top-bar__item top-bar__item--show">
          <top-drive></top-drive>
        </div>
      </el-tooltip>
<!--      <el-tooltip-->
<!--        v-if="showTheme"-->
<!--        effect="dark"-->
<!--        :content="$t('navbar.drive')"-->
<!--        placement="bottom"-->
<!--      >-->
<!--        <div class="top-bar__item top-bar__item&#45;&#45;show">-->
<!--          <top-drive></top-drive>-->
<!--        </div>-->
<!--      </el-tooltip>-->


      <!-- <el-tooltip
        effect="dark"
        :content="$t('navbar.notice')"

 src/views/check/record.vue

@@ -80,8 +80,9 @@
            span: 24,
          },
          {
            label: "人员",
            label: "巡检人员",
            prop: "userName",
            search: true,
            span: 24,
          },
          {
@@ -313,10 +314,11 @@
        this.data = data.records;

        // this.data = this.tableData
        this.data.forEach(e=>{
          e.mile = Number(e.mile).toFixed(2)
        })



        window.localStorage.setItem("danweidataS", JSON.stringify(this.data));
        this.$store.commit("setWindowSizeHeightAdd");
        this.loading = false;
      });

 src/views/check/statistics.vue

New file
@@ -0,0 +1,330 @@
<template>
  <basic-container :class="[
    'securityUnit',
    $store.state.control.screenSize == 1366 ? 'smallSize' : 'normalSize',
    $store.state.control.windowWidth >= 1024 ? 'tooRowSearch1' : ''
  ]">

    <div class="header">
      <div class="state-radio search flex jcsb">
        <el-radio-group v-model="typeQuery.type" @input="changePostType" size="small">
          <el-radio-button v-for="(item, index) in typeList" :label="item.value" :key="index">
            {{ item.name }}
          </el-radio-button>
        </el-radio-group>


        <div class="flex">
          <div class="search-item">
            <div class="label">
              巡检人：
            </div>
            <el-input size="small" v-model="query.userName" placeholder="请输入巡检人"></el-input>
          </div>
          <div class="ml-10  search-item">

            <div class="label">
              打卡时间：
            </div>
            <el-date-picker
              v-model="query.checkTime"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              type="date"
              size="small"
              placeholder="选择日期">
            </el-date-picker>
          </div>
          <div class="flex a-i-c ml-10">
            <el-button type="primary" size="small" icon="el-icon-search" @click="searchBtn" class="btn-h32-w76">查
              询
            </el-button>
            <el-button size="small" icon="el-icon-refresh" @click="resetBtn" class="btn-h32-w76">重
              置
            </el-button>

          </div>
        </div>
      </div>


    </div>
    <div class="middle">

      <div class="list">
        <div @click="postSelect(item)" v-for="(item,index) in postList" :key="item.id" :class="item.select?'select item':'item'">
          <div class="post-name">{{item.name}}</div>
          <div class="post-time">{{item.dutyTime}} ~ {{item.layoffTime}}</div>
        </div>
      </div>
      <div class="table">
        <avue-crud class="tablesss" :option="option"  :data="data" :page.sync="page" ref="crud"
                  :table-loading="loading" >

        </avue-crud>
      </div>







    </div>
  </basic-container>
</template>

<script>
import {getList} from "@/api/check/checkRecord";
import {dateFormat} from "@/util/date";
import {getAll} from "@/api/check/postFiling";

export default {
  name: "statistics",
  data() {
    return {
      loading: true,
      selectionList: [],
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
        ...this.$store.state.control.changePageSize
      },
      form:{},
      query: {
        checkTime:"",
        userName:"",
      },
      typeQuery:{
        type:1,
      },
      data: [],
      option: {
        index: true,
        tip: false,
        addBtn: true,
        viewBtn: true,
        searchSize: "mini",
        searchMenuSpan: 6,
        height: 583,
        menuWidth: 280,
        border: true,
        align: "center",
        selection: true,
        header:false,
        menu:false,
        column: [
          {
            label: "打卡点",
            labelWidth:"100",
            prop: "postName",
            span: 12,
          },
          {
            label: "巡检人",
            labelWidth:"100",
            type:"number",
            prop: "userName",
            span: 12,
          },

          {
            label: "打卡时间",
            prop: "checkTime",
            span: 24,
          },
          {
            label: "距离(m)",
            labelWidth:"100",
            type:"number",
            prop: "mile",
            placeholder:"请输入打卡范围，不填默认为50m内",
            span: 12,
          },

        ],
        ...this.$store.state.control.clearOtherBut
      },

      typeList: [
        {
          name:"固定岗",
          value:"1"
        },
        {
          name:"流动岗",
          value:"2"
        }
      ],
      postList:[],


    };
  },
  created() {

    this.initTime()
    this.getPostList()

  },

  methods:{

    resetBtn(){
      this.query.userName = ""
      this.initTime()

      this.page.currentPage = 1
      this.onLoad(this.page, this.query)
    },

    changePostType(){
        this.getPostList()
    },

    postSelect(item){
      this.postList.forEach(e=>{
        e.select = false
      })

      item.select = true
      this.page.currentPage = 1
      this.query.postId = item.id
      this.onLoad(this.page, this.query)
    },

    getPostList(){
      getAll(this.typeQuery).then(res=>{
        let data = res.data.data
        if (data.length>0){
          for (let i = 0; i < data.length; i++) {
            let item = data[i]
            if (i == 0){
              item.select = true
              this.query.postId = item.id
            }else{
              item.select = false
            }
          }
        }
        this.postList = data

        this.page.currentPage = 1
        this.onLoad(this.page, this.query)


      })
    },

    initTime(){
      this.query.checkTime = dateFormat(new Date(), "yyyy-MM-dd")
    },

    searchBtn () {
      this.page.currentPage = 1
      this.onLoad(this.page, this.query)
    },

    onLoad(page, params = {}) {

      let values = {
        ...params
      };

      this.loading = true;
      getList(
        page.currentPage,
        page.pageSize,
        Object.assign(values, this.query)
      ).then(res => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;

        this.data.forEach(e=>{
          e.mile = Number(e.mile).toFixed(2)
        })

        this.$store.commit("setWindowSizeHeightAdd");
        this.loading = false;
      });
    }
  }
}
</script>

<style scoped lang="scss">

.header{
  .state-radio {
    text-align: start;
    margin-bottom: 20px;
  }

  .search {
    align-items: center;

    >div {
      margin-right: 20px;
    }
  }


}


.middle{
  display: flex;
  .list{
    width: 10%;
    .item{
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      padding: 10px;
    }

  }

  .table{
    width: 90%;
  }


}

.jcsb{
  justify-content: space-between;
}

.flex{
  display: flex;
}

.a-i-c{
  align-items: center;
}

.ml-10{
  margin-left: 10px;
}

.select{
  background-color: #1e9fff;
  color: white;
}

.search-item{
  display: flex;
  align-items: center;

  .label{
    width: 35%;
  }
}



</style>