SynthesisManagement/src/views/screens/screen-components/BanZuChuQinTongJi.vue

<template>
  <div class="screen-common-component">
    <ScreenComHeader :module-id="moduleId" title="班组出勤统计" />
    <dv-scroll-board
      :config="config"
      style="width: 100%; height: calc(100% - 32px)"
      @mouseover="tableHover"
    />
  </div>
</template>

<script lang="ts" setup>
import ScreenComHeader from "@/views/screens/configs/screenComHeader.vue";
import { productionPlan, teamAttendance } from "@/api/screens";

const config = ref({});

const props = defineProps({
  moduleId: {
    type: String,
    required: true,
  },
});
const bigScreenData: any = inject("bigScreenData");
onMounted(async () => {
  let res = await teamAttendance();
  if (res.data.length > 0) {
    let dicts = {
      deptName: `<span style='font-size:${bigScreenData.value.fontSize * 1.5}px'>班组名称</span>`,
      deptNum: `<span style='font-size:${bigScreenData.value.fontSize * 1.5}px'>班组人数</span>`,
      answerNum: `<span style='font-size:${bigScreenData.value.fontSize * 1.5}px'>应出勤人数</span>`,
      practicalNum: `<span style='font-size:${bigScreenData.value.fontSize * 1.5}px'>实际出勤人数</span>`,
      attendanceRate: `<span style='font-size:${bigScreenData.value.fontSize * 1.5}px'>出勤率</span>`,
    };

    let bigData: any[] = [];
    res.data.forEach((item: any) => {
      let row = [
        `<span style='font-size:${bigScreenData.value.fontSize * 1.5}px'>${item.deptName}</span>`,
        `<span style='font-size:${bigScreenData.value.fontSize * 1.5}px'>${item.deptNum}</span>`,
        `<span style='font-size:${bigScreenData.value.fontSize * 1.5}px'>${item.answerNum}</span>`,
        `<span style='font-size:${bigScreenData.value.fontSize * 1.5}px'>${item.practicalNum}</span>`,
        `<span style='font-size:${bigScreenData.value.fontSize * 1.5}px'>${item.attendanceRate}%</span>`,
      ];
      bigData.push(row);
    });

    config.value = {
      header: Object.values(dicts),
      data: bigData,
      // index: true,
      // columnWidth: [80, 80, 95, 110, 80],
      align: ["left"],
      carousel: "page",
      click: (row: any, index: number) => {
        console.log("mouseover", row, index);
      },
    };
  }
});

const tableHover = (data: any) => {
  // console.log("mouseover", data.row[data.columnIndex]);
};
</script>