guzijian / bsth-alcohol-sign-web · Files

<template>
  <div v-loading="loading" element-loading-text="加载详情..." element-loading-svg-view-box="-10, -10, 50, 50"
    element-loading-background="#062a5ac5">
    <div class="person-info">
      <div class="font-box">
        <span class="label">
          工号:
        </span>
        <div class="content-box">
          <span class="content-text"> {{ info.jobCode }}</span>
        </div>
      </div>
      <div class="font-box">
        <span class="label">
          姓名:
        </span>
        <div class="content-box">
          <span class="content-text"> {{ info.name }}</span>
        </div>
      </div>
      <div class="font-box">
        <span class="label">
          路牌:
        </span>
        <div class="content-box">
          <span class="content-text"> {{ info.lpName }}</span>
        </div>
      </div>
      <div class="font-box">
        <span class="label">
          车队:
        </span>
        <div class="content-box">
          <span class="content-text"> {{ info.fleetName }}</span>
        </div>
      </div>
    </div>
    <div style="display: flex;align-items: center;margin-bottom: 7px; color: #0CFCFC; font-size: 13px; margin-top: 15px;">
      打卡详情</div>
    <div class="mainTable">
      <el-table :data="info.signInfos" style="width: 100%;">
        <el-table-column prop="planDate" label="计划打卡" width="78" max-height="60" />
        <el-table-column prop="signDate" label="实际打卡" width="78" max-height="60" />
        <el-table-column prop="address" label="打卡地点" width="74" max-height="60" />
        <el-table-column prop="result" label="打卡结果" width="65" max-height="60" />
      </el-table>
    </div>

  </div>
</template>

<script setup>
import { querySignDetails } from '@/api/big_view/big_view.js';
const loading = ref(false);
const props = defineProps({
  // 请求参数
  jobCode: {
    type: String,
    required: true,
  },
  showFlag: {
    type: Boolean,
    required: true
  },
  currentDateKey: {
    type: String,
    require: true
  }
})
/** 签到信息 */
const info = ref()
info.value = {
  name: "",
  lpName: "",
  jobCode: "",
  fleetName: ""
}

/** 处理信息 */
const handleInfo = (jobCode, date) => {
  loading.value = true
  querySignDetails({ jobCode: jobCode, date: date }).then(res => {
    loading.value = false;
    info.value = {
      name: res.data.name,
      lpName: res.data.lpName,
      jobCode: res.data.jobCode,
      fleetName: res.data.fleetName,
      signInfos: res.data.signInfos
    }
  })
}

const reset = () => {
  info.value = {
    name: "",
    lpName: "",
    jobCode: "",
    fleetName: ""
  }
}

watch(
  () => props.showFlag,
  (count, prevCount) => {
    if (props.showFlag) {
      handleInfo(props.jobCode, props.currentDateKey);
    } else {
      reset()
    }
  }
)
</script>
<style scoped lang="scss">
:deep(.mainTable .el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th) {
  text-align: center;
  font-weight: bold;
  color: white;
  background-color: #0359A4 !important;
  font-size: 0.5vw;
  height: 20px !important;
}

:deep(.mainTable .el-table__empty-text) {
  line-height: 30px !important;
  color: white;
  font-weight: bold;
  font-size: 0.5vw;
}

:deep(.mainTable .el-table__empty-block) {
  min-height: 30px !important;
  background-color: #041e74d5;
}

:deep(.mainTable .el-table tr) {
  background-color: #03113F;
}

:deep(.mainTable .el-table .el-table__cell) {
  padding: 1px !important;
  font-weight: bold;
}

:deep(.mainTable .el-table tbody tr:hover>td) {
  background: rgba(39, 54, 91, 0.571) !important;
}

// :deep(.mainTable .el-table th) {
//   border: 1px solid black !important;
//   border-right: none !important;
//   border-bottom: none !important;
// }

:deep(.el-table td) {
  border: 1px solid #033E72;
  border-right: none !important;
}

// 行单元格
:deep(.mainTable td .cell) {
  text-align: center;
  font-size: 0.5vw;
  color: white;
}

// 修改行单元格内边距
:deep(.mainTable .el-table .cell) {
  padding: 1px !important;
}

.person-info {
  width: 320px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .font-box {
    width: 50%;
    box-sizing: border-box;
    margin-top: 4px;
    font-size: 13px;
    display: flex;
    align-items: center;

    .label {
      color: #0CFCFC;
      font-family: "黑体", "圆体";
      font-weight: 500;
      width: 39px;
    }

    .content-box {
      color: white;
      width: 95.5px;
      box-sizing: border-box;
      padding: 2px;
      text-align: center;
      background-color: #03113F;

      .content-text {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
</style>