SMO/src/views/query/qualityAudits/index.vue

<template>
  <div class="table-box">
    <div class="card table-main">
      <!-- 表格头部 操作按钮 -->
      <div class="table-header">
        <div class="header-button-lf">
          <el-form :model="queryParams" label-width="auto"  :inline="true">
            <el-form-item label="自动站:">
              <el-select v-model="queryParams.code" filterable  placeholder="请选择" clearable style="width: 200px">
                <el-option label="RS0001" value="RS0001" />
                <el-option label="RS0002" value="RS0002" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleQuery"> 查询 </el-button>
              <el-button style="margin-left: 10px" @click="resetQuery"> 重置 </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <!-- 表格主体 -->
      <el-table stripe ref="tableRef" :border="true" :data="processTableData"  size="small" class="el-table--small">
        <el-table-column align="center" width="50">
          <template #header>
            <div class="group-bias-divide">
              <div class="top">日</div>
              <div class="bottom">时</div>
            </div>
          </template>
          <template #default="scope">
            {{ (scope.$index).toString().padStart(2, '0') }}
          </template>
        </el-table-column>

        <template v-for="item in columns" :key="item">
          <el-table-column v-bind="item" :align="item.align ?? 'center'">
            <template #default="scope">
              <img class="img-documented" src="@/assets/images/documented.png">
            </template>
          </el-table-column>
        </template>
        <!-- 无数据 -->
        <template #empty>
          <div class="table-empty">
            <slot name="empty">
              <img src="@/assets/images/notData.png" alt="notData" />
              <div>暂无数据</div>
            </slot>
          </div>
        </template>
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts" name="useProTable">
import { ref, reactive } from "vue";
import { ColumnProps } from "@/components/ProTable/interface";
const pageable = ref<any>({
  pageNum: 1,
  pageSize: 20,
  total: 1
});

const queryParams = ref({
  code: ''
});

// 查询功能
const handleQuery = () => {

};

//搜索功能
const resetQuery = () => {

};

const processTableData = ref(processTableDatas());

function processTableDatas(){
  const datas = [];
  for (let i = 1; i <= 24; i++) {
    const datas2 = [];
    datas2.push({day1 : "1"})
    datas2.push({day2 : "1"})
    datas2.push({day3 : "1"})
    datas2.push({day4 : "1"})
    datas2.push({day5 : "1"})
    datas2.push({day6 : "1"})
    datas2.push({day7 : "1"})
    datas2.push({day8 : "1"})
    datas2.push({day9 : "1"})
    datas2.push({day10 : "1"})
    datas2.push({day11 : "1"})
    datas2.push({day12 : "1"})
    datas2.push({day13 : "1"})
    datas.push(datas2)
  }
  return datas;
}

// 假设当前月份为5月
const month = 5;
// 表格配置项
const columns = reactive<ColumnProps[]>(generateColumns(month));

function generateColumns(month: number): ColumnProps[] {
  const daysInMonth = new Date(new Date().getFullYear(), month, 0).getDate();
  const columns = [];
  for (let i = 1; i <= daysInMonth; i++) {
    columns.push({ prop: `day${i}`, label: i.toString().padStart(2, '0'),width:51});
  }
  console.log(columns)
  return columns;
}

</script>
<style scoped>
:deep .el-table--small .el-table__row {
  height: 29px !important;
  font-size: 13px !important;
}
:deep .el-table--small .el-table__header th {
  height: 40px !important;
  font-size: 14px !important;
}

:deep .el-table--small .cell {
  line-height: 22px!important;
}
</style>
<style lang='scss' scoped>
:deep(.group-bias-divide) {
  .top {
    text-align: right;
    padding-right: 0px;
    box-sizing: border-box;
    line-height: 9px;
    font-size: 11px;
  }

  .bottom {
    text-align: left;
    padding-left: 0px;
    padding-top: 1px;
    box-sizing: border-box;
    line-height: 10px;
    font-size: 11px;

    &::before {
      content: "";
      position: absolute;
      width: 1px !important;
      height: 90px !important;
      top: auto !important;
      left: auto !important;
      bottom: 0 !important;
      right: 0 !important;
      background-color: #C7E2FF;
      display: block;
      transform: rotate(309deg);
      transform-origin: bottom;
    }
  }
}

.img-documented{
  width: 15px;
  height: 15px;
}
</style>