829 lines
32 KiB
TypeScript
829 lines
32 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect, useRef } from 'react'
|
|
import generatePDF, { Margin, Resolution } from 'react-to-pdf'
|
|
import { useParams, useRouter } from 'next/navigation'
|
|
import { useSurvey } from '@/hooks/useSurvey'
|
|
import { radioEtcData, roofMaterial, selectBoxOptions, supplementaryFacilities } from '../survey-sale/detail/RoofForm'
|
|
import { useSpinnerStore } from '@/store/spinnerStore'
|
|
|
|
export default function SurveySaleDownloadPdf() {
|
|
const params = useParams()
|
|
const id = params.id
|
|
|
|
const { surveyDetail, isLoadingSurveyDetail } = useSurvey(Number(id))
|
|
const { setIsShow } = useSpinnerStore()
|
|
|
|
const targetRef = useRef<HTMLDivElement>(null)
|
|
const isGeneratedRef = useRef(false)
|
|
|
|
useEffect(() => {
|
|
setIsShow(true)
|
|
if (isLoadingSurveyDetail || !surveyDetail || isGeneratedRef.current) return
|
|
isGeneratedRef.current = true
|
|
handleDownPdf()
|
|
}, [surveyDetail?.id, isLoadingSurveyDetail])
|
|
|
|
const handleDownPdf = () => {
|
|
const options = {
|
|
method: 'open' as const,
|
|
resolution: Resolution.HIGH,
|
|
page: {
|
|
margin: Margin.SMALL,
|
|
format: 'A4',
|
|
orientation: 'portrait' as const,
|
|
},
|
|
canvas: {
|
|
mimeType: 'image/png' as const,
|
|
qualityRatio: 1,
|
|
},
|
|
overrides: {
|
|
pdf: {
|
|
compress: true,
|
|
},
|
|
canvas: {
|
|
useCORS: true,
|
|
},
|
|
},
|
|
}
|
|
|
|
generatePDF(targetRef, options).then(() => {
|
|
setIsShow(false)
|
|
alert('PDFの生成が完了しました。 ポップアップウィンドウからダウンロードしてください。')
|
|
})
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div
|
|
ref={targetRef}
|
|
style={{
|
|
width: '794px', // A4 너비
|
|
minHeight: '1123px', // A4 높이
|
|
transform: 'scale(1.0)',
|
|
transformOrigin: 'top left',
|
|
padding: '20px',
|
|
boxSizing: 'border-box',
|
|
backgroundColor: '#fff',
|
|
fontSize: '12px',
|
|
}}
|
|
>
|
|
<div>
|
|
<div style={{ padding: '20px 20px 50px', borderBottom: '2px solid #2E3A59' }}>
|
|
<div style={{ float: 'left', verticalAlign: 'middle', fontSize: '18px', color: '#101010', fontWeight: 600, fontFamily: 'M-Gothic' }}>
|
|
HWJ 現地調査シート1/2
|
|
</div>
|
|
<div style={{ float: 'right', overflow: 'hidden' }}>
|
|
<div style={{ float: 'left', marginRight: '20px' }}>
|
|
<p style={{ margin: 0, padding: 0, fontSize: '13px', color: '#101010', fontWeight: 500, fontFamily: 'M-Gothic', textAlign: 'right' }}>
|
|
現地明登施工店名
|
|
</p>
|
|
<p style={{ margin: 0, padding: 0, fontSize: '13px', color: '#FF5656', fontWeight: 400, fontFamily: 'M-Gothic' }}>
|
|
{surveyDetail?.store ?? '-'}
|
|
</p>
|
|
</div>
|
|
<div style={{ float: 'right' }}>
|
|
<p style={{ margin: 0, padding: 0, fontSize: '13px', color: '#101010', fontWeight: 500, fontFamily: 'M-Gothic' }}>現地阴買日</p>
|
|
<p style={{ margin: 0, padding: 0, fontSize: '13px', color: '#FF5656', fontWeight: 400, fontFamily: 'M-Gothic' }}>
|
|
{surveyDetail?.investigationDate ?? '-'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style={{ padding: '24px 20px 12px' }}>
|
|
<table
|
|
style={{ width: '100%', tableLayout: 'fixed', borderCollapse: 'collapse', fontFamily: 'M-Gothic', WebkitPrintColorAdjust: 'exact' }}
|
|
>
|
|
<tbody>
|
|
<tr>
|
|
<th
|
|
style={{
|
|
padding: '10px',
|
|
width: '73px',
|
|
border: '1px solid #2E3A59',
|
|
backgroundColor: '#F5F6FA',
|
|
fontSize: '13px',
|
|
fontWeight: 500,
|
|
color: '#101010',
|
|
textAlign: 'left',
|
|
boxSizing: 'border-box',
|
|
}}
|
|
>
|
|
お客様名
|
|
</th>
|
|
<td
|
|
style={{
|
|
padding: '10px',
|
|
border: '1px solid #2E3A59',
|
|
fontSize: '13px',
|
|
fontWeight: 500,
|
|
color: '#FF5656',
|
|
boxSizing: 'border-box',
|
|
}}
|
|
>
|
|
{surveyDetail?.customerName ?? '-'}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th
|
|
style={{
|
|
padding: '10px',
|
|
width: '73px',
|
|
border: '1px solid #2E3A59',
|
|
backgroundColor: '#F5F6FA',
|
|
fontSize: '13px',
|
|
fontWeight: 500,
|
|
color: '#101010',
|
|
textAlign: 'left',
|
|
boxSizing: 'border-box',
|
|
}}
|
|
>
|
|
ご住所
|
|
</th>
|
|
<td
|
|
style={{
|
|
padding: '10px',
|
|
border: '1px solid #2E3A59',
|
|
fontSize: '13px',
|
|
fontWeight: 500,
|
|
color: '#FF5656',
|
|
boxSizing: 'border-box',
|
|
}}
|
|
>
|
|
{surveyDetail?.postCode ? `(${surveyDetail?.postCode}) ${surveyDetail?.address} ${surveyDetail?.addressDetail}` : '-'}
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div style={{ padding: '12px 20px 12px' }}>
|
|
<div style={{ fontSize: '14px', fontFamily: 'M-Gothic', color: '#101010', fontWeight: 500, marginBottom: '10px' }}>も気開係</div>
|
|
<table
|
|
style={{ width: '100%', tableLayout: 'fixed', borderCollapse: 'collapse', fontFamily: 'M-Gothic', WebkitPrintColorAdjust: 'exact' }}
|
|
>
|
|
<tbody>
|
|
<tr>
|
|
<th
|
|
style={{
|
|
padding: '10px',
|
|
width: '126px',
|
|
border: '1px solid #2E3A59',
|
|
backgroundColor: '#F5F6FA',
|
|
fontSize: '13px',
|
|
fontWeight: 500,
|
|
color: '#101010',
|
|
textAlign: 'left',
|
|
boxSizing: 'border-box',
|
|
}}
|
|
>
|
|
雨気契约容国
|
|
</th>
|
|
<td
|
|
style={{
|
|
padding: '10px',
|
|
border: '1px solid #2E3A59',
|
|
fontSize: '13px',
|
|
fontWeight: 500,
|
|
color: '#FF5656',
|
|
boxSizing: 'border-box',
|
|
}}
|
|
>
|
|
{surveyDetail?.detailInfo?.contractCapacity ?? '-'}
|
|
</td>
|
|
<th
|
|
style={{
|
|
padding: '10px',
|
|
width: '126px',
|
|
border: '1px solid #2E3A59',
|
|
backgroundColor: '#F5F6FA',
|
|
fontSize: '13px',
|
|
fontWeight: 500,
|
|
color: '#101010',
|
|
textAlign: 'left',
|
|
boxSizing: 'border-box',
|
|
}}
|
|
>
|
|
電気契約会社
|
|
</th>
|
|
<td
|
|
style={{
|
|
padding: '10px',
|
|
border: '1px solid #2E3A59',
|
|
fontSize: '13px',
|
|
fontWeight: 500,
|
|
color: '#FF5656',
|
|
boxSizing: 'border-box',
|
|
}}
|
|
>
|
|
{surveyDetail?.detailInfo?.retailCompany ?? '-'}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th
|
|
style={{
|
|
padding: '10px',
|
|
width: '126px',
|
|
border: '1px solid #2E3A59',
|
|
backgroundColor: '#F5F6FA',
|
|
fontSize: '13px',
|
|
fontWeight: 500,
|
|
color: '#101010',
|
|
textAlign: 'left',
|
|
boxSizing: 'border-box',
|
|
}}
|
|
>
|
|
電気付带設備
|
|
</th>
|
|
<td
|
|
colSpan={3}
|
|
style={{
|
|
padding: '10px',
|
|
border: '1px solid #2E3A59',
|
|
fontSize: '13px',
|
|
fontWeight: 500,
|
|
color: '#FF5656',
|
|
boxSizing: 'border-box',
|
|
}}
|
|
>
|
|
{surveyDetail?.detailInfo?.supplementaryFacilities
|
|
? supplementaryFacilities
|
|
.filter((facility) => surveyDetail?.detailInfo?.supplementaryFacilities?.includes(facility.id.toString()))
|
|
.map((facility) => facility.name)
|
|
.join(', ') +
|
|
(surveyDetail?.detailInfo?.supplementaryFacilitiesEtc ? `, ${surveyDetail?.detailInfo?.supplementaryFacilitiesEtc}` : '')
|
|
: surveyDetail?.detailInfo?.supplementaryFacilitiesEtc
|
|
? `${surveyDetail?.detailInfo?.supplementaryFacilitiesEtc}`
|
|
: '-'}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th
|
|
style={{
|
|
padding: '10px',
|
|
width: '126px',
|
|
border: '1px solid #2E3A59',
|
|
backgroundColor: '#F5F6FA',
|
|
fontSize: '13px',
|
|
fontWeight: 500,
|
|
color: '#101010',
|
|
textAlign: 'left',
|
|
boxSizing: 'border-box',
|
|
}}
|
|
>
|
|
設置希望システム
|
|
</th>
|
|
<td
|
|
colSpan={3}
|
|
style={{
|
|
padding: '10px',
|
|
border: '1px solid #2E3A59',
|
|
fontSize: '13px',
|
|
fontWeight: 500,
|
|
color: '#FF5656',
|
|
boxSizing: 'border-box',
|
|
}}
|
|
>
|
|
{/* {selectBoxOptions.installationSystem.find ((system) => system.id.toString() === surveyDetail?.detailInfo?.installationSystem)
|
|
?.name ?? surveyDetail?.detailInfo?.installationSystemEtc !== null
|
|
? `${surveyDetail?.detailInfo?.installationSystemEtc}`
|
|
: '-'} */}
|
|
{surveyDetail?.detailInfo?.installationSystem === null && surveyDetail?.detailInfo?.installationSystemEtc === null
|
|
? '-'
|
|
: surveyDetail?.detailInfo?.installationSystemEtc
|
|
? `${surveyDetail?.detailInfo?.installationSystemEtc}`
|
|
: selectBoxOptions.installationSystem.find((system) => system.id.toString() === surveyDetail?.detailInfo?.installationSystem)
|
|
?.name}
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div style={{ padding: '12px 20px 12px' }}>
|
|
<div style={{ fontSize: '14px', fontFamily: 'M-Gothic', color: '#101010', fontWeight: 500, marginBottom: '10px' }}>屋根眀係</div>
|
|
<table
|
|
style={{ width: '100%', tableLayout: 'fixed', borderCollapse: 'collapse', fontFamily: 'M-Gothic', WebkitPrintColorAdjust: 'exact' }}
|
|
>
|
|
<tbody>
|
|
<tr>
|
|
<th
|
|
style={{
|
|
padding: '10px',
|
|
width: '126px',
|
|
border: '1px solid #2E3A59',
|
|
backgroundColor: '#F5F6FA',
|
|
fontSize: '13px',
|
|
fontWeight: 500,
|
|
color: '#101010',
|
|
textAlign: 'left',
|
|
boxSizing: 'border-box',
|
|
}}
|
|
>
|
|
築年数
|
|
</th>
|
|
<td
|
|
style={{
|
|
padding: '10px',
|
|
border: '1px solid #2E3A59',
|
|
fontSize: '13px',
|
|
fontWeight: 500,
|
|
color: '#FF5656',
|
|
boxSizing: 'border-box',
|
|
}}
|
|
>
|
|
{surveyDetail?.detailInfo?.constructionYear === '1' ? '新築' : `既築 (${surveyDetail?.detailInfo?.constructionYear}年)`}
|
|
</td>
|
|
<th
|
|
style={{
|
|
padding: '10px',
|
|
width: '126px',
|
|
border: '1px solid #2E3A59',
|
|
backgroundColor: '#F5F6FA',
|
|
fontSize: '13px',
|
|
fontWeight: 500,
|
|
color: '#101010',
|
|
textAlign: 'left',
|
|
boxSizing: 'border-box',
|
|
}}
|
|
>
|
|
至根材
|
|
</th>
|
|
<td
|
|
style={{
|
|
padding: '10px',
|
|
border: '1px solid #2E3A59',
|
|
fontSize: '13px',
|
|
fontWeight: 500,
|
|
color: '#FF5656',
|
|
boxSizing: 'border-box',
|
|
}}
|
|
>
|
|
{surveyDetail?.detailInfo?.roofMaterial === null && surveyDetail?.detailInfo?.roofMaterialEtc === null
|
|
? '-'
|
|
: roofMaterial
|
|
.filter((material) => surveyDetail?.detailInfo?.roofMaterial?.includes(material.id.toString()))
|
|
.map((material) => material.name)
|
|
.join(', ')}
|
|
{surveyDetail?.detailInfo?.roofMaterialEtc ? `, ${surveyDetail?.detailInfo?.roofMaterialEtc}` : ''}
|
|
</td>
|
|
<th
|
|
style={{
|
|
padding: '10px',
|
|
width: '126px',
|
|
border: '1px solid #2E3A59',
|
|
backgroundColor: '#F5F6FA',
|
|
fontSize: '13px',
|
|
fontWeight: 500,
|
|
color: '#101010',
|
|
textAlign: 'left',
|
|
boxSizing: 'border-box',
|
|
}}
|
|
>
|
|
座根形状
|
|
</th>
|
|
<td
|
|
style={{
|
|
padding: '10px',
|
|
border: '1px solid #2E3A59',
|
|
fontSize: '13px',
|
|
fontWeight: 500,
|
|
color: '#FF5656',
|
|
boxSizing: 'border-box',
|
|
}}
|
|
>
|
|
{selectBoxOptions.roofShape.find((shape) => shape.id.toString() === surveyDetail?.detailInfo?.roofShape)?.name ??
|
|
(surveyDetail?.detailInfo?.roofShapeEtc ? ` ${surveyDetail?.detailInfo?.roofShapeEtc}` : '-')}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th
|
|
style={{
|
|
padding: '10px',
|
|
width: '126px',
|
|
border: '1px solid #2E3A59',
|
|
backgroundColor: '#F5F6FA',
|
|
fontSize: '13px',
|
|
fontWeight: 500,
|
|
color: '#101010',
|
|
textAlign: 'left',
|
|
boxSizing: 'border-box',
|
|
}}
|
|
>
|
|
座根勾配
|
|
</th>
|
|
<td
|
|
style={{
|
|
padding: '10px',
|
|
border: '1px solid #2E3A59',
|
|
fontSize: '13px',
|
|
fontWeight: 500,
|
|
color: '#FF5656',
|
|
boxSizing: 'border-box',
|
|
}}
|
|
>
|
|
{surveyDetail?.detailInfo?.roofSlope ? `${surveyDetail?.detailInfo?.roofSlope} 寸` : '-'}
|
|
</td>
|
|
<th
|
|
style={{
|
|
padding: '10px',
|
|
width: '126px',
|
|
border: '1px solid #2E3A59',
|
|
backgroundColor: '#F5F6FA',
|
|
fontSize: '13px',
|
|
fontWeight: 500,
|
|
color: '#101010',
|
|
textAlign: 'left',
|
|
boxSizing: 'border-box',
|
|
}}
|
|
>
|
|
住宅樠造
|
|
</th>
|
|
<td
|
|
colSpan={3}
|
|
style={{
|
|
padding: '10px',
|
|
border: '1px solid #2E3A59',
|
|
fontSize: '13px',
|
|
fontWeight: 500,
|
|
color: '#FF5656',
|
|
boxSizing: 'border-box',
|
|
}}
|
|
>
|
|
{radioEtcData.houseStructure.find((structure) => structure.id.toString() === surveyDetail?.detailInfo?.houseStructure)?.label ??
|
|
(surveyDetail?.detailInfo?.houseStructureEtc ? ` ${surveyDetail?.detailInfo?.houseStructureEtc}` : '-')}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th
|
|
style={{
|
|
padding: '10px',
|
|
width: '126px',
|
|
border: '1px solid #2E3A59',
|
|
backgroundColor: '#F5F6FA',
|
|
fontSize: '13px',
|
|
fontWeight: 500,
|
|
color: '#101010',
|
|
textAlign: 'left',
|
|
boxSizing: 'border-box',
|
|
}}
|
|
>
|
|
並木材質
|
|
</th>
|
|
<td
|
|
style={{
|
|
padding: '10px',
|
|
border: '1px solid #2E3A59',
|
|
fontSize: '13px',
|
|
fontWeight: 500,
|
|
color: '#FF5656',
|
|
boxSizing: 'border-box',
|
|
}}
|
|
>
|
|
{/* {surveyDetail?.detailInfo?.rafterMaterial === null && surveyDetail?.detailInfo?.rafterMaterialEtc === null
|
|
? '-'
|
|
: radioEtcData.rafterMaterial.find((material) => material.id.toString() === surveyDetail?.detailInfo?.rafterMaterial)?.label ??
|
|
surveyDetail?.detailInfo?.rafterMaterialEtc} */}
|
|
{radioEtcData.rafterMaterial.find((material) => material.id.toString() === surveyDetail?.detailInfo?.rafterMaterial)?.label ??
|
|
(surveyDetail?.detailInfo?.rafterMaterialEtc ? ` ${surveyDetail?.detailInfo?.rafterMaterialEtc}` : '-')}
|
|
</td>
|
|
<th
|
|
style={{
|
|
padding: '10px',
|
|
width: '126px',
|
|
border: '1px solid #2E3A59',
|
|
backgroundColor: '#F5F6FA',
|
|
fontSize: '13px',
|
|
fontWeight: 500,
|
|
color: '#101010',
|
|
textAlign: 'left',
|
|
boxSizing: 'border-box',
|
|
}}
|
|
>
|
|
垂木サイズ
|
|
</th>
|
|
<td
|
|
colSpan={3}
|
|
style={{
|
|
padding: '10px',
|
|
border: '1px solid #2E3A59',
|
|
fontSize: '13px',
|
|
fontWeight: 500,
|
|
color: '#FF5656',
|
|
boxSizing: 'border-box',
|
|
}}
|
|
>
|
|
{selectBoxOptions.rafterSize.find((size) => size.id.toString() === surveyDetail?.detailInfo?.rafterSize)?.name ??
|
|
(surveyDetail?.detailInfo?.rafterSizeEtc ? ` ${surveyDetail?.detailInfo?.rafterSizeEtc}` : '-')}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th
|
|
style={{
|
|
padding: '10px',
|
|
width: '126px',
|
|
border: '1px solid #2E3A59',
|
|
backgroundColor: '#F5F6FA',
|
|
fontSize: '13px',
|
|
fontWeight: 500,
|
|
color: '#101010',
|
|
textAlign: 'left',
|
|
boxSizing: 'border-box',
|
|
}}
|
|
>
|
|
垂木ピッチ
|
|
</th>
|
|
<td
|
|
style={{
|
|
padding: '10px',
|
|
border: '1px solid #2E3A59',
|
|
fontSize: '13px',
|
|
fontWeight: 500,
|
|
color: '#FF5656',
|
|
boxSizing: 'border-box',
|
|
}}
|
|
>
|
|
{selectBoxOptions.rafterPitch.find((pitch) => pitch.id.toString() === surveyDetail?.detailInfo?.rafterPitch)?.name ??
|
|
(surveyDetail?.detailInfo?.rafterPitchEtc ? ` ${surveyDetail?.detailInfo?.rafterPitchEtc}` : '-')}
|
|
</td>
|
|
<th
|
|
style={{
|
|
padding: '10px',
|
|
width: '126px',
|
|
border: '1px solid #2E3A59',
|
|
backgroundColor: '#F5F6FA',
|
|
fontSize: '13px',
|
|
fontWeight: 500,
|
|
color: '#101010',
|
|
textAlign: 'left',
|
|
boxSizing: 'border-box',
|
|
}}
|
|
>
|
|
垂木方向
|
|
</th>
|
|
<td
|
|
colSpan={3}
|
|
style={{
|
|
padding: '10px',
|
|
border: '1px solid #2E3A59',
|
|
fontSize: '13px',
|
|
fontWeight: 500,
|
|
color: '#FF5656',
|
|
boxSizing: 'border-box',
|
|
}}
|
|
>
|
|
{radioEtcData.rafterDirection.find((direction) => direction.id.toString() === surveyDetail?.detailInfo?.rafterDirection)?.label ??
|
|
'-'}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th
|
|
style={{
|
|
padding: '10px',
|
|
width: '126px',
|
|
border: '1px solid #2E3A59',
|
|
backgroundColor: '#F5F6FA',
|
|
fontSize: '13px',
|
|
fontWeight: 500,
|
|
color: '#101010',
|
|
textAlign: 'left',
|
|
boxSizing: 'border-box',
|
|
}}
|
|
>
|
|
野地板種類
|
|
</th>
|
|
<td
|
|
style={{
|
|
padding: '10px',
|
|
border: '1px solid #2E3A59',
|
|
fontSize: '13px',
|
|
fontWeight: 500,
|
|
color: '#FF5656',
|
|
boxSizing: 'border-box',
|
|
}}
|
|
>
|
|
{selectBoxOptions.openFieldPlateKind.find((kind) => kind.id.toString() === surveyDetail?.detailInfo?.openFieldPlateKind)?.name ??
|
|
(surveyDetail?.detailInfo?.openFieldPlateKindEtc ? `${surveyDetail?.detailInfo?.openFieldPlateKindEtc}` : '-')}
|
|
</td>
|
|
<th
|
|
style={{
|
|
padding: '10px',
|
|
width: '126px',
|
|
border: '1px solid #2E3A59',
|
|
backgroundColor: '#F5F6FA',
|
|
fontSize: '13px',
|
|
fontWeight: 500,
|
|
color: '#101010',
|
|
textAlign: 'left',
|
|
boxSizing: 'border-box',
|
|
}}
|
|
>
|
|
野地板厚さ
|
|
</th>
|
|
<td
|
|
colSpan={3}
|
|
style={{
|
|
padding: '10px',
|
|
border: '1px solid #2E3A59',
|
|
fontSize: '13px',
|
|
fontWeight: 500,
|
|
color: '#FF5656',
|
|
boxSizing: 'border-box',
|
|
}}
|
|
>
|
|
{surveyDetail?.detailInfo?.openFieldPlateThickness ? `${surveyDetail?.detailInfo?.openFieldPlateThickness}mm` : '-'}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th
|
|
style={{
|
|
padding: '10px',
|
|
width: '126px',
|
|
border: '1px solid #2E3A59',
|
|
backgroundColor: '#F5F6FA',
|
|
fontSize: '13px',
|
|
fontWeight: 500,
|
|
color: '#101010',
|
|
textAlign: 'left',
|
|
boxSizing: 'border-box',
|
|
}}
|
|
>
|
|
兩漏の形跡
|
|
</th>
|
|
<td
|
|
colSpan={5}
|
|
style={{
|
|
padding: '10px',
|
|
border: '1px solid #2E3A59',
|
|
fontSize: '13px',
|
|
fontWeight: 500,
|
|
color: '#FF5656',
|
|
boxSizing: 'border-box',
|
|
}}
|
|
>
|
|
{surveyDetail?.detailInfo?.leakTrace ? 'あり' : 'なし'}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th
|
|
style={{
|
|
padding: '10px',
|
|
width: '126px',
|
|
border: '1px solid #2E3A59',
|
|
backgroundColor: '#F5F6FA',
|
|
fontSize: '13px',
|
|
fontWeight: 500,
|
|
color: '#101010',
|
|
textAlign: 'left',
|
|
boxSizing: 'border-box',
|
|
}}
|
|
>
|
|
ルーフィング種類
|
|
</th>
|
|
<td
|
|
colSpan={5}
|
|
style={{
|
|
padding: '10px',
|
|
border: '1px solid #2E3A59',
|
|
fontSize: '13px',
|
|
fontWeight: 500,
|
|
color: '#FF5656',
|
|
boxSizing: 'border-box',
|
|
}}
|
|
>
|
|
{radioEtcData.waterproofMaterial.find((material) => material.id.toString() === surveyDetail?.detailInfo?.waterproofMaterial)
|
|
?.label ?? (surveyDetail?.detailInfo?.waterproofMaterialEtc ? ` ${surveyDetail?.detailInfo?.waterproofMaterialEtc}` : '-')}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th
|
|
style={{
|
|
padding: '10px',
|
|
width: '126px',
|
|
border: '1px solid #2E3A59',
|
|
backgroundColor: '#F5F6FA',
|
|
fontSize: '13px',
|
|
fontWeight: 500,
|
|
color: '#101010',
|
|
textAlign: 'left',
|
|
boxSizing: 'border-box',
|
|
}}
|
|
>
|
|
断熱材の有無
|
|
</th>
|
|
<td
|
|
colSpan={5}
|
|
style={{
|
|
padding: '10px',
|
|
border: '1px solid #2E3A59',
|
|
fontSize: '13px',
|
|
fontWeight: 500,
|
|
color: '#FF5656',
|
|
boxSizing: 'border-box',
|
|
}}
|
|
>
|
|
{
|
|
radioEtcData.insulationPresence.find((presence) => presence.id.toString() === surveyDetail?.detailInfo?.insulationPresence)
|
|
?.label
|
|
}
|
|
{surveyDetail?.detailInfo?.insulationPresenceEtc ? `, ${surveyDetail?.detailInfo?.insulationPresenceEtc}` : ''}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th
|
|
style={{
|
|
padding: '10px',
|
|
width: '126px',
|
|
border: '1px solid #2E3A59',
|
|
backgroundColor: '#F5F6FA',
|
|
fontSize: '13px',
|
|
fontWeight: 500,
|
|
color: '#101010',
|
|
textAlign: 'left',
|
|
boxSizing: 'border-box',
|
|
}}
|
|
>
|
|
屋根構造の順番
|
|
</th>
|
|
<td
|
|
colSpan={5}
|
|
style={{
|
|
padding: '10px',
|
|
border: '1px solid #2E3A59',
|
|
fontSize: '13px',
|
|
fontWeight: 500,
|
|
color: '#FF5656',
|
|
boxSizing: 'border-box',
|
|
}}
|
|
>
|
|
{radioEtcData.structureOrder.find((order) => order.id.toString() === surveyDetail?.detailInfo?.structureOrder)?.label ??
|
|
(surveyDetail?.detailInfo?.structureOrderEtc ? `${surveyDetail?.detailInfo?.structureOrderEtc}` : '-')}
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div style={{ padding: '12px 20px' }}>
|
|
<table
|
|
style={{ width: '100%', tableLayout: 'fixed', borderCollapse: 'collapse', fontFamily: 'M-Gothic', WebkitPrintColorAdjust: 'exact' }}
|
|
>
|
|
<tbody>
|
|
<tr>
|
|
<th
|
|
style={{
|
|
padding: '10px',
|
|
width: '160px',
|
|
border: '1px solid #2E3A59',
|
|
backgroundColor: '#F5F6FA',
|
|
fontSize: '13px',
|
|
fontWeight: 500,
|
|
color: '#101010',
|
|
textAlign: 'left',
|
|
boxSizing: 'border-box',
|
|
}}
|
|
>
|
|
区根製品名設置可否確認
|
|
</th>
|
|
<td
|
|
colSpan={5}
|
|
style={{
|
|
padding: '10px',
|
|
border: '1px solid #2E3A59',
|
|
fontSize: '13px',
|
|
fontWeight: 500,
|
|
color: '#FF5656',
|
|
boxSizing: 'border-box',
|
|
}}
|
|
>
|
|
{surveyDetail?.detailInfo?.installationAvailability === null && surveyDetail.detailInfo?.installationAvailabilityEtc === null
|
|
? '-'
|
|
: selectBoxOptions.installationAvailability.find(
|
|
(availability) => availability.id.toString() === surveyDetail?.detailInfo?.installationAvailability,
|
|
)?.name}
|
|
{surveyDetail?.detailInfo?.installationAvailabilityEtc ? `, ${surveyDetail?.detailInfo?.installationAvailabilityEtc}` : ''}
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div style={{ padding: '12px 20px 12px' }}>
|
|
<div style={{ fontSize: '14px', fontFamily: 'M-Gothic', color: '#101010', fontWeight: 500, marginBottom: '10px' }}>メモ</div>
|
|
<div
|
|
style={{
|
|
boxSizing: 'border-box',
|
|
padding: '10px',
|
|
fontSize: '13px',
|
|
fontWeight: 400,
|
|
fontFamily: 'M-Gothic',
|
|
color: '#FF5656',
|
|
border: '1px solid #2E3A59',
|
|
height: '150px',
|
|
}}
|
|
>
|
|
{surveyDetail?.detailInfo?.memo ?? '-'}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|