SC/gfzl.git - Gitblit

<script setup lang="tsx">
import { reactive, ref } from 'vue';
import { NTag } from 'naive-ui';
import type { PaginationProps } from 'naive-ui';
import { fetchGetRollerSampleDataList } from '@/service/api/analy/roller-data';
import { useAppStore } from '@/store/modules/app';
import { useDownload } from '@/hooks/business/download';
import { useNaiveTable } from '@/hooks/common/table';
import RollerDataSearch from './modules/roller-data-search.vue';
import RollerDataLineChart from './modules/roller-data-line-chart.vue';
 
defineOptions({
  name: 'RollerDataList'
});
 
const appStore = useAppStore();
const { download } = useDownload();
 
const showTable = ref(false);
 
const equNoMap: Record<number, string> = {};
Array.from({ length: 13 }, (_, i) => i + 1)
  .filter(i => i !== 4)
  .forEach(i => {
    equNoMap[100 + i] = `${i}#卷接机组`;
  });
 
const shiftMap: Record<number, string> = {
  1: '早班',
  2: '中班',
  3: '晚班'
};
 
const searchParams = ref<Api.Qa.RollerDataSearchParams>({
  time: null,
  key: null,
  online: null,
  qty: null,
  badQty: null,
  lvbangVal: null,
  juanyanzhiVal: null,
  shuisongzhiVal: null,
  runTime: null,
  stopTime: null,
  stopTimes: null,
  speed: null,
  runStatus: null,
  cy: null,
  cyCs: null,
  cyOnline: null,
  recQty1: null,
  recQty2: null,
  params: {
    beginTime: `${new Date().getFullYear()}-${String(new Date().getMonth() + 1).padStart(2, '0')}-${String(new Date().getDate()).padStart(2, '0')} 00:00:00`,
    endTime: `${new Date().getFullYear()}-${String(new Date().getMonth() + 1).padStart(2, '0')}-${String(new Date().getDate()).padStart(2, '0')} 23:59:59`
  },
  shift: null,
  equNo: 101
});
 
const pagination = reactive<PaginationProps>({
  page: 1,
  pageSize: 20,
  showSizePicker: true,
  pageSizes: [20, 50, 100, 500],
  prefix: ({ itemCount }) => `共 ${itemCount} 条`,
  onChange: (page: number) => {
    pagination.page = page;
  },
  onUpdatePageSize: (pageSize: number) => {
    pagination.pageSize = pageSize;
    pagination.page = 1;
  }
});
 
const { columns, columnChecks, data, getData, loading, scrollX } = useNaiveTable({
  api: () => fetchGetRollerSampleDataList(searchParams.value),
  transform: (response: any) => response.data || [],
  columns: () =>
    [
      {
        key: 'index',
        title: '序号',
        align: 'center',
        width: 64,
        render: (_: Api.Qa.RollerData, index: number) => index + 1
      },
      {
        key: 'time',
        title: '时间',
        align: 'center',
        minWidth: 160
      },
      {
        key: 'equNo',
        title: '设备',
        align: 'center',
        minWidth: 120,
        render: (row: Api.Qa.RollerData) => equNoMap[row.equNo] || row.equNo
      },
      {
        key: 'shift',
        title: '班次',
        align: 'center',
        minWidth: 80,
        render: (row: Api.Qa.RollerData) => <NTag type="info">{shiftMap[row.shift] || row.shift}</NTag>
      },
      {
        key: 'qty',
        title: '卷接机产量(千支)',
        align: 'center',
        minWidth: 100,
        render: (row: Api.Qa.RollerData) => Number(row.qty ?? 0).toFixed(1)
      },
      {
        key: 'qtyBox',
        title: '卷接机产量(箱)',
        align: 'center',
        minWidth: 120,
        render: (row: Api.Qa.RollerData) => {
          const v = Number(row.qty ?? 0) / 50;
          return v.toFixed(1);
        }
      },
      {
        key: 'tsQtyTiao',
        title: '提升机产量(条)',
        align: 'center',
        minWidth: 120,
        render: (row: Api.Qa.RollerData) => {
          if (row.tsQty === null || row.tsQty === undefined) return '-';
          return Number(row.tsQty).toFixed(1);
        }
      },
      {
        key: 'tsQtyBox',
        title: '提升机产量(箱)',
        align: 'center',
        minWidth: 120,
        render: (row: Api.Qa.RollerData) => {
          if (row.tsQty === null || row.tsQty === undefined) return '-';
          const v = Number(row.tsQty) / 250;
          return v.toFixed(1);
        }
      },
      {
        key: 'packerQty',
        title: '包装机产量(小包)',
        align: 'center',
        minWidth: 140,
        render: (row: Api.Qa.RollerData) => {
          if (row.packerQty === null || row.packerQty === undefined) return '-';
          return Number(row.packerQty).toFixed(1);
        }
      },
      {
        key: 'packerQtyBox',
        title: '包装机产量(箱)',
        align: 'center',
        minWidth: 120,
        render: (row: Api.Qa.RollerData) => {
          if (row.packerQty === null || row.packerQty === undefined) return '-';
          const v = Number(row.packerQty) / 10 / 250;
          return v.toFixed(1);
        }
      },
      {
        key: 'lvbangVal',
        title: '滤棒消耗(支)',
        align: 'center',
        minWidth: 140,
        render: (row: Api.Qa.RollerData) => Number(row.lvbangVal ?? 0).toFixed(1)
      },
      {
        key: 'lvbangWan',
        title: '滤棒消耗(万支)',
        align: 'center',
        minWidth: 140,
        render: (row: Api.Qa.RollerData) => {
          const v = Number(row.lvbangVal ?? 0) / 10000;
          return v.toFixed(1);
        }
      },
      {
        key: 'danhao',
        title: '滤棒单耗(万支/箱)',
        align: 'center',
        minWidth: 180,
        render: (row: Api.Qa.RollerData) => {
          const qtyBox = Number(row.qty ?? 0) / 50;
          if (!qtyBox) return '-';
          const v = Number(row.lvbangVal ?? 0) / 10000 / qtyBox;
          return v.toFixed(1);
        }
      }
    ] as any
});
 
async function handleExport() {
  await download('/qa/rollerData/export', searchParams.value, `卷接机数据_${new Date().getTime()}.xlsx`);
}
</script>
 
<template>
  <div class="h-full min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <RollerDataSearch v-model:model="searchParams" @search="getData" />
    <NCard
      v-if="!showTable"
      title="卷接机分析趋势图"
      :bordered="false"
      size="small"
      class="flex flex-col card-wrapper sm:flex-1-hidden"
      content-style="flex: 1; min-height: 0; overflow: hidden;"
    >
      <template #header-extra>
        <NButton size="small" @click="showTable = true">
          <template #icon>
            <icon-ic-round-table-view class="text-icon" />
          </template>
          数据详情
        </NButton>
      </template>
      <RollerDataLineChart :data="(data as any)" class="h-full" />
    </NCard>
    <NCard v-else title="数据详情" :bordered="false" size="small" class="card-wrapper sm:flex-1-hidden">
      <template #header-extra>
        <TableHeaderOperation
          v-model:columns="columnChecks"
          :loading="loading"
          :show-add="false"
          :show-delete="false"
          :show-export="true"
          :show-refresh="false"
          @export="handleExport"
        >
          <template #prefix>
            <NButton size="small" @click="showTable = false">
              <template #icon>
                <icon-ic-round-bar-chart class="text-icon" />
              </template>
              趋势图
            </NButton>
          </template>
        </TableHeaderOperation>
      </template>
      <NDataTable
        :columns="columns"
        :data="(data as any)"
        size="small"
        :flex-height="!appStore.isMobile"
        :scroll-x="scrollX"
        :loading="loading"
        :pagination="pagination"
        :row-key="row => row.id"
        class="sm:h-full"
      />
    </NCard>
  </div>
</template>
 
<style scoped></style>