设备打卡率报表-页面

Houjie

2025-06-13 8ab803dcaf5fb415ba865b02320cff63a7aba0f5

设备打卡率报表-页面

 src/views/mdc/base/EfficiencyPunchReport.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,216 @@
<template>
  <a-card :bordered="false">

    <!-- æŸ¥è¯¢åŒºåŸŸ -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="记录时间">
              <a-date-picker format="YYYY-MM-DD" :allowClear="false" v-model="queryParam.theDate"
                             @change="dateParamChange"></a-date-picker>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="班次">
              <j-dict-select-tag v-model="queryParam.shiftSchedule" dictCode="shift_schedule"
                                 placeholder="请选择班次"></j-dict-select-tag>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="info" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!-- æ“ä½œæŒ‰é’®åŒºåŸŸ -->
    <div class="table-operator">
      <a-button type="primary" icon="download" @click="handleExportXls('设备打卡率报表')">导出</a-button>

    </div>

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> å·²é€‰æ‹© <a
        style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>

      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        class="j-table-force-nowrap"
        @change="handleTableChange">

        <span slot="action" slot-scope="text, record">
          <a @click="handleDetail(record)">详情</a>
        </span>
      </a-table>
    </div>
    <!-- table区域-end -->
    <efficiency-punch-report-modal ref="modalForm" @ok="modalFormOk"></efficiency-punch-report-modal>
  </a-card>
</template>

<script>
import '@/assets/less/TableExpand.less'

import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import EfficiencyPunchReportModal from '@views/mdc/base/modules/EfficiencyPunchReport/EfficiencyPunchReportModal.vue'

export default {
  name: 'EfficiencyPunchReport',
  mixins: [JeecgListMixin],
  components: {
    EfficiencyPunchReportModal
  },
  data() {
    return {
      queryParam: {
        theDate: this.formatDate(new Date(new Date().setDate(new Date().getDate() - 1))), // é»˜è®¤è®¾ç½®ä¸ºæ˜¨å¤©
        shiftSchedule: ''
      },

      dataSource: [], // ç¡®ä¿åˆå§‹åŒ–为空数组
      description: '设备打卡率',
      // è¡¨å¤´
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        },

        {
          title: '记录时间',
          align: 'center',
          dataIndex: 'theDate'
        },
        {
          title: '班次',
          align: 'center',
          dataIndex: 'shiftSchedule_dictText'
        },

        {
          title: '早班上班打卡设备数量',
          align: 'center',
          dataIndex: 'mornShiftInNum'
        },
        {
          title: '早下班打卡设备数量',
          align: 'center',
          dataIndex: 'mornShiftOutNum'
        },
        {
          title: '晚班上班打卡设备数量',
          align: 'center',
          dataIndex: 'evenShiftInNum'
        },
        {
          title: '晚班下班打卡设备数量',
          align: 'center',
          dataIndex: 'evenShiftOutNum'
        },
        {
          title: '设备总数',
          align: 'center',
          dataIndex: 'deviceCountNum'
        },
        {
          title: '早班上班打卡率(%)',
          align: 'center',
          dataIndex: 'mornShiftInRate'
        },
        {
          title: '早班下班打卡率(%)',
          align: 'center',
          dataIndex: 'mornShiftOutRate'

        },
        {
          title: '晚班上班打卡率(%)',
          align: 'center',
          dataIndex: 'evenShiftInRate',
          customRender: (text) => {
            if (text !== null && text !== undefined) {
              return parseFloat(text).toFixed(2);
            }
            return text;
          }
        },
        {
          title: '晚班下班打卡率(%)',
          align: 'center',
          dataIndex: 'evenShiftOutRate'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ],
      url: {
        list: '/mdcEquipmentPunchRate/queryPageList',
        exportXlsUrl: '/mdcEquipmentPunchRate/exportXls'
      }
    }
  },
  methods: {
    searchQuery() {
      if (this.queryParam.theDate) {
        // ç¡®ä¿ queryParam.recordDate æ˜¯ä¸€ä¸ªæœ‰æ•ˆçš„ Date å¯¹è±¡
        const date = new Date(this.queryParam.recordDate)
        if (!isNaN(date.getTime())) { // æ£€æŸ¥æ˜¯å¦ä¸ºæœ‰æ•ˆæ—¥æœŸ
          const formattedDate = this.formatDate(date)
          this.queryParam.theDate = formattedDate
          console.log('Formatted theDate:', this.queryParam.theDate) // éªŒè¯æ ¼å¼
        } else {
          console.error('Invalid date format')
        }
      }

      this.loadData()
    },

    formatDate(date) {
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      return `${year}${month}${day}`
    },

    dateParamChange(value) {
      // value æ˜¯ä¸€ä¸ªæ—¶åˆ»å¯¹è±¡ï¼ˆmoment object），需要转换为 Date å¯¹è±¡
      if (value) {
        const date = value.toDate() // è½¬æ¢ä¸º Date å¯¹è±¡
        const formattedDate = this.formatDate(date)
        this.queryParam.theDate = formattedDate
      } else {
        this.queryParam.theDate = null
      }
    }

  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>

 src/views/mdc/base/modules/EfficiencyPunchReport/EfficiencyPunchReportModal.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,214 @@
<template>
  <a-modal :title="title" :width="1500" :height="1500" :visible="visible" :maskClosable="false"
           cancelText="关闭"
           @cancel="handleCancel" :confirmLoading="confirmLoading">

    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="记录日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="theDate">
              <a-input :disabled="true" v-model="model.theDate" placeholder="请输入记录日期"></a-input>
            </a-form-model-item>
          </a-col>

          <a-col :span="12">
            <a-form-model-item label="班次" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="shiftSchedule">
              <j-dict-select-tag dictCode="shift_schedule" placeholder="请选择班次" v-model="model.shiftSchedule"
                                 :disabled="disableSubmit" />
            </a-form-model-item>
          </a-col>

          <a-col :span="12">
            <a-form-model-item  label="早班上班打卡率" :labelCol="labelCol" :wrapperCol="wrapperCol"
                               prop="mornShiftInRate">
              <a-input v-model="model.mornShiftInRate" placeholder="请输入"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item  label="早班下班打卡率" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                prop="mornShiftOutRate">
              <a-input v-model="model.mornShiftOutRate" placeholder="请输入"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item  label="晚班上班打卡率" :labelCol="labelCol" :wrapperCol="wrapperCol"
                               prop="evenShiftInRate">
              <a-input v-model="model.evenShiftInRate" placeholder="请输入"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item v-show="addShow" label="晚班下班打卡率" :labelCol="labelCol" :wrapperCol="wrapperCol"
                               prop="evenShiftOutRate">
              <a-input v-model="model.evenShiftOutRate" placeholder="请输入"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item v-show="addShow" label="早班上班打卡设备数量" :labelCol="labelCol" :wrapperCol="wrapperCol"
                               prop="mornShiftInDeviceNum">
              <a-input v-model="model.mornShiftInNum" placeholder="请输入"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item v-show="addShow" label="早下班打卡设备数量" :labelCol="labelCol" :wrapperCol="wrapperCol"
                               prop="mornShiftOutNum">
              <a-input v-model="model.mornShiftOutNum" placeholder="请输入"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item v-show="addShow" label="晚班上班打卡设备数量" :labelCol="labelCol" :wrapperCol="wrapperCol"
                               prop="evenShiftInNum">
              <a-input v-model="model.evenShiftInNum" placeholder="请输入"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item v-show="addShow" label="晚下班打卡设备数量" :labelCol="labelCol" :wrapperCol="wrapperCol"
                               prop="evenShiftOutNum">
              <a-input v-model="model.evenShiftOutNum" placeholder="请输入"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item v-show="addShow" label="设备总数" :labelCol="labelCol" :wrapperCol="wrapperCol"
                               prop="deviceCountNum">
              <a-input v-model="model.deviceCountNum" placeholder="请输入"></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>

    <template slot="footer">
      <a-button :style="{ marginRight: '8px' }" @click="handleCancel()">
        å…³é—­
      </a-button>

<!--      <a-button @click="handleOk()" :disabled="disableSubmit" type="primary" :loading="confirmLoading">确定</a-button>-->
    </template>
  </a-modal>

</template>

<script>
import JMultiSelectTag from '@/components/dict/JMultiSelectTag'
import Tooltip from 'ant-design-vue/es/tooltip'

export default {
  name: 'EfficiencyPunchReportModal',
  components: {
    JMultiSelectTag,
    Tooltip
  },
  data() {

    return {
      addShow: true,
      model: {},
      formDisabled: false,
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0
      },

      title: '操作',
      visible: false,
      disableSubmit: false,
      codeDisable: true,

      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 }
      },
      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {
        // orderCode: [
        //   { required: true, message: '请输入盘点单号!' }
        // ],
        // handler: [
        //   { required: true, message: '请输入经手人!' }
        // ],
        // stocktakingName: [
        //   { required: true, message: '请输入盘点名称!' }
        // ],
        // approvalStatus: [
        //   { required: true, message: '请输入审核状态!' }
        // ],
        // inventoryTime: [
        //   { required: true, message: '请输入盘点时间!' }
        // ]
      },
      url: {



      },
      dataSource: []
    }
  },

  mounted() {

  },

  methods: {

    add() {
      this.addShow = false
      this.edit()
    },

    edit(record) {
      this.model = Object.assign({}, record)
      this.visible = true
    },



    close() {
      this.$emit('close')
      this.visible = false
    },

    handleCancel() {
      this.model = {}
      this.dataSource = []
      this.close()
    },
  }

}
</script>

<style lang="less" scoped>
.frozenRowClass {
  color: #c9c9c9;
}

.fontweight {
  font-weight: bold;
}

.ant-btn {
  padding: 0 10px;
  margin-left: 3px;
}

.ant-form-item-control {
  line-height: 0px;
}

/** ä¸»è¡¨å•è¡Œé—´è· */
.ant-form .ant-form-item {
  margin-bottom: 10px;
}

/** Tab页面行间距 */
.ant-tabs-content .ant-form-item {
  margin-bottom: 0px;
}
</style>