remove: 구 지붕재 적합성 pdf 페이지 삭제
This commit is contained in:
parent
1db17d6558
commit
85344afd43
@ -1,9 +0,0 @@
|
|||||||
import SuitableDownloadPdf from '@/components/pdf/SuitableDownloadPdf'
|
|
||||||
|
|
||||||
export default function page() {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<SuitableDownloadPdf />
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,132 +0,0 @@
|
|||||||
'use client'
|
|
||||||
|
|
||||||
import { useEffect, useRef, useState } from 'react'
|
|
||||||
import generatePDF, { Margin, Options, Resolution, usePDF } from 'react-to-pdf'
|
|
||||||
import { useSuitable } from '@/hooks/useSuitable'
|
|
||||||
import { useSuitableStore } from '@/store/useSuitableStore'
|
|
||||||
import { SUITABLE_HEAD_CODE, type Suitable, type SuitableDetail } from '@/types/Suitable'
|
|
||||||
|
|
||||||
export default function SuitableDownloadPdf() {
|
|
||||||
const [fileName, setFileName] = useState<string[]>([])
|
|
||||||
const [createTime, setCreateTime] = useState('')
|
|
||||||
const targetRef = useRef<HTMLDivElement>(null)
|
|
||||||
const { toCodeName, toSuitableDetail, selectedSuitables, isSelectedSuitablesLoading } = useSuitable()
|
|
||||||
const { selectedCategory, suitableCommCode, selectedItemsSearching, setSelectedItemsSearching } = useSuitableStore()
|
|
||||||
|
|
||||||
const handleDownPdf = () => {
|
|
||||||
const options: Options = {
|
|
||||||
filename: `${fileName.join('_')}.pdf`,
|
|
||||||
method: 'open' as const,
|
|
||||||
resolution: Resolution.HIGH,
|
|
||||||
page: {
|
|
||||||
margin: Margin.SMALL,
|
|
||||||
format: 'A4',
|
|
||||||
orientation: 'landscape' as const,
|
|
||||||
},
|
|
||||||
canvas: {
|
|
||||||
mimeType: 'image/png' as const,
|
|
||||||
qualityRatio: 1,
|
|
||||||
},
|
|
||||||
overrides: {
|
|
||||||
pdf: {
|
|
||||||
compress: true,
|
|
||||||
},
|
|
||||||
canvas: {
|
|
||||||
useCORS: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
|
|
||||||
generatePDF(targetRef, options)
|
|
||||||
// generatePDF(targetRef, { filename: 'page.pdf' })
|
|
||||||
}
|
|
||||||
|
|
||||||
const formatDateString = () => {
|
|
||||||
const now = new Date()
|
|
||||||
const year = now.getFullYear()
|
|
||||||
const month = now.getMonth() + 1
|
|
||||||
const day = now.getDate()
|
|
||||||
const hours = now.getHours()
|
|
||||||
const minutes = now.getMinutes()
|
|
||||||
|
|
||||||
return `${year}年${month}月${day}日 ${hours}:${minutes.toString().padStart(2, '0')}`
|
|
||||||
}
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setCreateTime(formatDateString())
|
|
||||||
setFileName([
|
|
||||||
`(${suitableCommCode.get(SUITABLE_HEAD_CODE.ROOF_MATL_GRP_CD)?.find((category) => category.code === selectedCategory)?.codeJp})`,
|
|
||||||
'屋根材適合表',
|
|
||||||
])
|
|
||||||
if (!selectedItemsSearching) {
|
|
||||||
setSelectedItemsSearching(true)
|
|
||||||
}
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
if (!selectedCategory) return <div>잘못된 접근입니다.</div>
|
|
||||||
if (isSelectedSuitablesLoading) return <div>Loading...</div>
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{/* <button onClick={() => handleDownPdf()}>PDFダウンロード</button> */}
|
|
||||||
<div className="pdf-table-wrap" ref={targetRef}>
|
|
||||||
<div className="pdf-intro-page">
|
|
||||||
<div className="pdf-intro-tit-wrap">
|
|
||||||
<div className="pdf-intro-tit mb20">ハンファジャパン株式会社</div>
|
|
||||||
<div className="pdf-intro-tit mb20">{fileName.join(' ')}</div>
|
|
||||||
<div className="pdf-intro-date">{createTime}</div>
|
|
||||||
</div>
|
|
||||||
<div className="pdf-intro-cont-wrap">
|
|
||||||
<p>本適合表は参考資料としてご使用下さい。</p>
|
|
||||||
<p>屋根材製品の形状・仕様はメーカーより変更される場合が御座います。</p>
|
|
||||||
<p>又、現場環境（働き、勾配、瓦桟木条件等）により本適合表と異なる適合結果となる場合が御座います。予めご了承下さい。</p>
|
|
||||||
<p>屋根材以外の設置条件（垂木、野地板等の設置基準）も必ずご確認下さい。</p>
|
|
||||||
</div>
|
|
||||||
<div className="pdf-intro-foot-date">{createTime}</div>
|
|
||||||
</div>
|
|
||||||
<div className="pdf-table-content">
|
|
||||||
<div className="pdf-table-grid-wrap">
|
|
||||||
{selectedSuitables?.map((item: Suitable) => (
|
|
||||||
<div className="pdf-table-card" key={item.id}>
|
|
||||||
<div className="pdf-table-tit-wrap">
|
|
||||||
<span>{item.productName}</span>
|
|
||||||
<span>{toCodeName(SUITABLE_HEAD_CODE.MANU_FT_CD, item.manuFtCd)}</span>
|
|
||||||
<span>{toCodeName(SUITABLE_HEAD_CODE.ROOF_MT_CD, item.roofMtCd)}</span>
|
|
||||||
</div>
|
|
||||||
<div className="pdf-roof-table">
|
|
||||||
<table>
|
|
||||||
<colgroup>
|
|
||||||
<col width={'18%'} />
|
|
||||||
<col width={'23%'} />
|
|
||||||
<col width={'18%'} />
|
|
||||||
<col />
|
|
||||||
</colgroup>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>金具タイプ</th>
|
|
||||||
<th>金具名</th>
|
|
||||||
<th>設置可否</th>
|
|
||||||
<th>備考</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{toSuitableDetail(item.detail).map((subItem: SuitableDetail) => (
|
|
||||||
<tr key={subItem.id}>
|
|
||||||
<td>{toCodeName(SUITABLE_HEAD_CODE.ROOF_SH_CD, item.roofShCd)}</td>
|
|
||||||
<td>{toCodeName(SUITABLE_HEAD_CODE.TRESTLE_MFPC_CD, subItem.trestleMfpcCd)}</td>
|
|
||||||
<td>{subItem.trestleManufacturerProductName}</td>
|
|
||||||
<td>{subItem.memo}</td>
|
|
||||||
</tr>
|
|
||||||
))}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
<div className="pdf-intro-foot-date">{createTime}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
Loading…
x
Reference in New Issue
Block a user