feat(): 工程要素-水库划界增加

lsf-dev
李神峰 2026-03-10 17:57:18 +08:00
parent 0011c7218f
commit 07d05d20ed
8 changed files with 345 additions and 32 deletions

View File

@ -106,12 +106,17 @@ const apiurl = {
shuikuBasicinfo: {
detail: service + "/attResBase/list",
update: service + "/attResBase/update",
getFile: service + "/attResBase/file/get"
getFile: service + "/attResBase/file/get",
mangeFile: service + '/screen/manageHouseImg/get',
},
buildInfo: {
detail: service + "/attResBuilding/info",
update: service + "/attResBuilding/update",
},
skhj: {
detail: service + '/reservoirDemarcationInfo/get',
list: service + '/propertyCertificate/list',
},
kr: {
list: service + "/stZvarlB/list",
save: service + "/stZvarlB/insert",

View File

@ -6,7 +6,7 @@ import moment from "moment"
function QSYDW({ id, data, dispatch }) {
console.log(data);
const url = "http://223.75.53.141:9100/gs-hsz"
const url = "http://223.75.53.141:9100/gs-ss"
const width = 500;
const closePop = () => {

View File

@ -6,7 +6,7 @@ import moment from "moment"
function YHJMH({ id, data, dispatch }) {
console.log(data);
const url = "http://223.75.53.141:9100/gs-hsz"
const url = "http://223.75.53.141:9100/gs-ss"
const width = 500;
const closePop = () => {
dispatch.runtime.closeFeaturePop(id);

View File

@ -82,11 +82,14 @@
.label {
font-size: 14px;
color: #fff;
white-space: nowrap;
}
.value {
font-size: 14px;
color: #00D8FF;
white-space: nowrap;
}
}
}

View File

@ -0,0 +1,218 @@
import React, { useState, useEffect } from 'react';
import { Descriptions,Image,Table,Button } from 'antd';
import { PaperClipOutlined} from '@ant-design/icons';
import apiurl from '@/service/apiurl';
import { httpget } from '@/utils/request';
import { download } from '@/utils/tools';
import PdfView from '@/views/Home/components/UI/PdfView';
const MainBuildingInfo = () => {
// 不动产
const columns = [
{ title: '序号', key: 'id', dataIndex: 'id', width: 60, align: "center", render: (v, r, i) => <span>{i+ 1}</span> },
{ title: '名称', key: 'name', dataIndex: 'name' },
{ title: '面积(万亩)', key: 'area', dataIndex: 'area' },
{ title: '描述', key: 'area', dataIndex: 'area' },
{
title: '附件', key: 'files', dataIndex: 'files',
render: (v, r) => <Button type='link' onClick={() => handlePreview(r)}>{(r.files && r.files.length > 0) ? r.files[0]?.fileName : ""}</Button>
},
]
const [data, setData] = useState({})
const [managementFiles, setManagementFiles] = useState([]);
const [protectionFiles, setProtectionFiles] = useState([]);
const [propertyFiles, setPropertyFiles] = useState([]);
const [propertyData, setPropertyData] = useState([])
const [pdfInfo, setPdfInfo] = useState({ visible: false, title: '', fileId: '' });
const [imagePreview, setImagePreview] = useState({ visible: false, src: '' });
const commonLabelStyle = {
width: '200px',
textAlign: 'right',
};
const descriptionStyle = {
marginBottom: '20px',
};
const getDescriptionsProps = (title) => ({
title: <span style={{ color: '#1890ff', fontSize: '16px', fontWeight: 'bold', borderLeft: '4px solid #1890ff', paddingLeft: '10px' }}>{title}</span>,
column: 3,
bordered: true,
size: 'small',
className: 'engineering-descriptions',
labelStyle: commonLabelStyle,
style: descriptionStyle,
});
const getData = async () => {
try {
const res = await httpget(apiurl.sq.qys.projectAndWater.skhj.detail)
if (res.code == 200) {
// 处理三个附件字段
const processFiles = (files) => {
if (files && Array.isArray(files)) {
return files.map(file => ({
uid: file.fileId,
name: file.fileName,
status: 'done',
url: `/gunshiApp/ss/reservoirDemarcationInfo/file/download/${file.fileId}`,
response: { data: file }
}));
}
return [];
};
setManagementFiles(processFiles(res.data.managementScopeAreaFiles));
setProtectionFiles(processFiles(res.data.protectionScopeFiles));
setPropertyFiles(processFiles(res.data.propertyCertificateAreaFiles));
setData(res.data)
}
} catch (error) {
console.log(error);
}
}
const handlePreviewFile = (file) => {
const fileData = file.response?.data || {
fileName: file.name,
fileId: file.uid
};
handlePreview({ files: [fileData] });
}
const handlePreview = (item) => {
const file = item?.files?.[0];
if (!file || !file.fileName) return;
const fileName = file.fileName;
const fileId = file.fileId;
const extension = fileName.split('.').pop().toLowerCase();
const downloadUrl = `/gunshiApp/ss/propertyCertificate/file/download/${fileId}`;
if (['jpg', 'jpeg', 'png', 'gif', 'bmp'].includes(extension)) {
setImagePreview({
visible: true,
src: downloadUrl
});
} else if (extension === 'pdf') {
setPdfInfo({
visible: true,
title: fileName,
fileId: fileId
});
} else {
download(downloadUrl)
}
};
const getPropertyList = async () => {
try {
const res = await httpget(apiurl.sq.qys.projectAndWater.skhj.list)
if (res.code == 200) {
setPropertyData(res.data)
}
} catch (error) {
console.log(error);
}
}
useEffect(() => {
getData()
getPropertyList()
}, [])
return (
<div className="form-container">
<Descriptions {...getDescriptionsProps('管理和保护范围')}>
<Descriptions.Item label="管理范围(km²)" >{data.managementScopeArea || '-'}</Descriptions.Item>
<Descriptions.Item label="管理范围划界说明" >{data.managementScopeAreaExplain || '-'}</Descriptions.Item>
<Descriptions.Item label="管理范围划界平面图" >
{managementFiles.map(file => (
<div key={file.uid} style={{ display: "flex", alignItems: "center", columnGap: 5, color: '#fff', marginLeft: 10 }}>
<PaperClipOutlined />
<span
style={{ cursor: "pointer" }}
onClick={(e) => {
handlePreviewFile(file)
}}
>
{file.name}
</span>
</div>
))}
</Descriptions.Item>
<Descriptions.Item label="保护范围(km²)" >{data.protectionScopeArea || '-'}</Descriptions.Item>
<Descriptions.Item label="保护范围划界说明">{data.protectionScopeAreaExplain || '-'}</Descriptions.Item>
<Descriptions.Item label="保护范围平面图" >
{protectionFiles.map(file => (
<div key={file.uid} style={{ display: "flex", alignItems: "center", columnGap: 5, color: '#fff', marginLeft: 10 }}>
<PaperClipOutlined />
<span
style={{ cursor: "pointer" }}
onClick={(e) => {
handlePreviewFile(file)
}}
>
{file.name}
</span>
</div>
))}
</Descriptions.Item>
<Descriptions.Item label="用地总面积(万亩)">{data.totalUseArea || '-'}</Descriptions.Item>
<Descriptions.Item label="用地划界说明">{data.totalUseAreaExplain || '-'}</Descriptions.Item>
<Descriptions.Item label="用地总面积平面图">
{propertyFiles.map(file => (
<div key={file.uid} style={{ display: "flex", alignItems: "center", columnGap: 5, color: '#fff', marginLeft: 10 }}>
<PaperClipOutlined />
<span
style={{ cursor: "pointer" }}
onClick={(e) => {
handlePreviewFile(file)
}}
>
{file.name}
</span>
</div>
))}
</Descriptions.Item>
</Descriptions>
<div className='bottomTable'>
<div style={{ color: '#1890ff', fontSize: '16px', fontWeight: 'bold', borderLeft: '4px solid #1890ff', paddingLeft: '10px',marginBottom:20 }}>不动产权信息</div>
<Table
columns={columns}
rowKey="id"
dataSource={propertyData}
pagination={false}
scroll={{ y: 500 }}
/>
</div>
{/* PDF Viewer */}
{pdfInfo.visible && (
<PdfView
visible={pdfInfo.visible}
onClose={() => setPdfInfo({ ...pdfInfo, visible: false })}
title={pdfInfo.title}
fileId={pdfInfo.fileId}
url="/gunshiApp/ss/propertyCertificate/file/download/"
/>
)}
{/* Image Preview */}
<div style={{ display: 'none' }}>
<Image
src={imagePreview.src}
preview={{
visible: imagePreview.visible,
src: imagePreview.src,
onVisibleChange: (value) => {
setImagePreview({ ...imagePreview, visible: value });
},
}}
/>
</div>
</div>
);
};
export default MainBuildingInfo;

View File

@ -32,58 +32,70 @@ const MainBuildingInfo = ({data={}}) => {
{/* 主坝 */}
<Descriptions {...getDescriptionsProps('主坝')}>
<Descriptions.Item label="坝型">{info.mainType || '-'}</Descriptions.Item>
<Descriptions.Item label="地基岩性">{info.mainFoundation || '-'}</Descriptions.Item>
<Descriptions.Item label="坝顶高程(m)">{info.mainCrestElevation || '-'}</Descriptions.Item>
<Descriptions.Item label="坝顶长度(m)">{info.mainCrestLength || '-'}</Descriptions.Item>
<Descriptions.Item label="坝顶宽度(m)">{info.mainCrestWidth || '-'}</Descriptions.Item>
<Descriptions.Item label="最大坝高(m)">{info.mainMaxHeight || '-'}</Descriptions.Item>
<Descriptions.Item label="心墙顶高程(m)">{info.mainTopOfWaveBarrierElevation || '-'}</Descriptions.Item>
<Descriptions.Item label="坝基防渗型式">{info.mainFoundControlType || '-'}</Descriptions.Item>
</Descriptions>
{/* 副坝 */}
<Descriptions {...getDescriptionsProps('副坝')}>
<Descriptions.Item label="坝型">{info.auxType || '-'}</Descriptions.Item>
<Descriptions.Item label="地基岩性">{info.auxFoundation || '-'}</Descriptions.Item>
<Descriptions.Item label="坝顶高程(m)">{info.auxCrestElevation || '-'}</Descriptions.Item>
<Descriptions.Item label="坝顶长度(m)">{info.auxCrestLength || '-'}</Descriptions.Item>
<Descriptions.Item label="坝顶宽度(m)">{info.auxCrestWidth || '-'}</Descriptions.Item>
<Descriptions.Item label="最大坝高(m)">{info.auxMaxHeight || '-'}</Descriptions.Item>
<Descriptions.Item label="心墙顶高程(m)">{info.auxHeartWallCrestElevation || '-'}</Descriptions.Item>
<Descriptions.Item label="坝基防渗型式">{info.auxFoundControlType || '-'}</Descriptions.Item>
</Descriptions>
{/* 溢洪道 */}
<Descriptions {...getDescriptionsProps('溢洪道')}>
<Descriptions.Item label="型式">{info.spillwayType || '-'}</Descriptions.Item>
<Descriptions.Item label="堰顶型式">{info.spillwayCrestType || '-'}</Descriptions.Item>
<Descriptions.Item label="地基特性">{info.spillwayFoundation || '-'}</Descriptions.Item>
<Descriptions.Item label="溢流堰顶高程(m)">{info.spillwayCrestElevation || '-'}</Descriptions.Item>
<Descriptions.Item label="溢流堰净宽(m)">{info.spillwayNetWidth || '-'}</Descriptions.Item>
<Descriptions.Item label="地基岩性">{info.spillwayFoundation || '-'}</Descriptions.Item>
<Descriptions.Item label="消能型式">{info.spillwayEnergyDissipation || '-'}</Descriptions.Item>
<Descriptions.Item label="校核洪水下泄流量(m³/s)">{info.spillwayCheckFloodDischarge || '-'}</Descriptions.Item>
<Descriptions.Item label="设计洪水下泄流量(m³/s)">{info.spillwayDesignFloodDischarge || '-'}</Descriptions.Item>
<Descriptions.Item label="消能防冲下泄流量(m³/s)">{info.spillwayScouringDischarge || '-'}</Descriptions.Item>
<Descriptions.Item label="进口底高程(m)">{info.spillwayInBottomElevation || '-'}</Descriptions.Item>
<Descriptions.Item label="底宽(m)">{info.spillwayBottomWidth || '-'}</Descriptions.Item>
<Descriptions.Item label="渠深(m)">{info.spillwayCanalDepth || '-'}</Descriptions.Item>
<Descriptions.Item label="最大泄量(1%)(m³/s)">{info.spillwayMaxDischarge || '-'}</Descriptions.Item>
<Descriptions.Item label="最大泄量(0.1%)(m³/s)">{info.spillwayZeroMaxDischarge || '-'}</Descriptions.Item>
</Descriptions>
{/* 灌溉发电洞 */}
<Descriptions {...getDescriptionsProps('灌溉发电洞')}>
<Descriptions.Item label="型式">{info.irrigationType || '-'}</Descriptions.Item>
<Descriptions.Item label="衬砌型式">{info.irrigationLiningType || '-'}</Descriptions.Item>
<Descriptions.Item label="地基特性">{info.irrigationFoundation || '-'}</Descriptions.Item>
<Descriptions.Item label="进口底板高程(m)">{info.irrigationInletElevation || '-'}</Descriptions.Item>
<Descriptions.Item label="断面尺寸(m)">{info.irrigationCrossSection || '-'}</Descriptions.Item>
<Descriptions.Item label="洞长(m)">{info.irrigationLength || '-'}</Descriptions.Item>
<Descriptions.Item label="设计流量(m³/s)">{info.irrigationDesignFlow || '-'}</Descriptions.Item>
<Descriptions.Item label="进口闸门型式">{info.irrigationGateType || '-'}</Descriptions.Item>
<Descriptions.Item label="进口启闭机型式">{info.irrigationHoistType || '-'}</Descriptions.Item>
<Descriptions {...getDescriptionsProps('主坝输水管')}>
<Descriptions.Item label="型式">{info.mwaterType || '-'}</Descriptions.Item>
<Descriptions.Item label="断面尺寸(m)">{info.mwaterCrossSection || '-'}</Descriptions.Item>
<Descriptions.Item label="进口底板高程(m)">{info.mwaterInletElevation || '-'}</Descriptions.Item>
<Descriptions.Item label="长度(m)">{info.mwaterLength || '-'}</Descriptions.Item>
<Descriptions.Item label="设计流量(m³/s)">{info.mwaterDesignFlow || '-'}</Descriptions.Item>
<Descriptions.Item label="进水口型式">{info.mwaterLiningType || '-'}</Descriptions.Item>
</Descriptions>
{/* 放空洞 */}
<Descriptions {...getDescriptionsProps('放空洞')}>
<Descriptions.Item label="型式">{info.emptyingType || '-'}</Descriptions.Item>
<Descriptions.Item label="衬砌型式">{info.emptyingLiningType || '-'}</Descriptions.Item>
<Descriptions.Item label="地基特性">{info.emptyingFoundation || '-'}</Descriptions.Item>
<Descriptions.Item label="进口底板高程(m)">{info.emptyingInletElevation || '-'}</Descriptions.Item>
<Descriptions.Item label="断面尺寸(m)">{info.emptyingCrossSection || '-'}</Descriptions.Item>
<Descriptions.Item label="洞长(m)">{info.emptyingLength || '-'}</Descriptions.Item>
<Descriptions.Item label="设计流量(m³/s)">{info.emptyingDesignFlow || '-'}</Descriptions.Item>
<Descriptions.Item label="进口闸门型式">{info.emptyingGateType || '-'}</Descriptions.Item>
<Descriptions.Item label="进口启闭机型式">{info.emptyingHoistType || '-'}</Descriptions.Item>
<Descriptions {...getDescriptionsProps('副坝输水管')}>
<Descriptions.Item label="型式">{info.awaterType || '-'}</Descriptions.Item>
<Descriptions.Item label="地基岩性">{info.awaterFoundation || '-'}</Descriptions.Item>
<Descriptions.Item label="断面尺寸(m)">{info.awaterCrossSection || '-'}</Descriptions.Item>
<Descriptions.Item label="壁厚(m)">{info.awaterThick || '-'}</Descriptions.Item>
<Descriptions.Item label="进口底板高程(m)">{info.awaterInletElevation || '-'}</Descriptions.Item>
<Descriptions.Item label="长度(m)">{info.awaterLength || '-'}</Descriptions.Item>
<Descriptions.Item label="最大流量(m³/s)">{info.awaterMaxFlow || '-'}</Descriptions.Item>
<Descriptions.Item label="进水口型式">{info.awaterLiningType || '-'}</Descriptions.Item>
</Descriptions>
<Descriptions {...getDescriptionsProps('东输水隧洞')}>
<Descriptions.Item label="型式">{info.waterConveyanceType || '-'}</Descriptions.Item>
<Descriptions.Item label="地基岩性">{info.waterConveyanceFoundation || '-'}</Descriptions.Item>
<Descriptions.Item label="断面尺寸(m)">{info.waterConveyanceCrossSection || '-'}</Descriptions.Item>
<Descriptions.Item label="壁厚(m)">{info.waterConveyanceThick || '-'}</Descriptions.Item>
<Descriptions.Item label="进口底板高程(m)">{info.waterConveyanceInletElevation || '-'}</Descriptions.Item>
<Descriptions.Item label="长度(m)">{info.waterConveyanceLength || '-'}</Descriptions.Item>
<Descriptions.Item label="最大流量(m³/s)">{info.waterConveyanceMaxFlow || '-'}</Descriptions.Item>
<Descriptions.Item label="进水口型式">{info.waterConveyanceLiningType || '-'}</Descriptions.Item>
</Descriptions>
</div>
);

View File

@ -0,0 +1,67 @@
import React, { useState, useEffect } from 'react';
import { Descriptions, Image } from 'antd';
import { httpget } from '@/utils/request';
import apiurl from '@/service/apiurl';
import { config } from '@/config';
const BasicInfo = ({ data }) => {
const [fileList, setFileList] = useState([]) //上传文件列表
// 获取管理用房图片
const getManagePic = async () => {
try {
const result = await httpget(apiurl.sq.qys.projectAndWater.shuikuBasicinfo.mangeFile)
if (result.code == 200) {
const files = result.data?.files || [];
if (files.length > 0) {
const newFiles = files.map(item => ({
filePath: item.filePath,
fileId: item.fileId
}))
setFileList(newFiles)
}
}
} catch (error) {
console.log(error);
}
}
useEffect(() => {
getManagePic()
}, [])
return (
<div className="form-container">
<Descriptions
bordered
column={2}
size="small"
className="engineering-descriptions"
labelStyle={{ width: '160px', textAlign: 'right' }}
>
<Descriptions.Item label="主管部门" >{data?.competentDepartment}</Descriptions.Item>
<Descriptions.Item label="管理单位" >{data?.managementUnit}</Descriptions.Item>
<Descriptions.Item label="负责人">{data?.chargePerson}</Descriptions.Item>
<Descriptions.Item label="注册登记号">{data?.regSn}</Descriptions.Item>
<Descriptions.Item label="注册登记时间">{data?.regTime}</Descriptions.Item>
<Descriptions.Item label="发证机关">{data?.issuingAuthority}</Descriptions.Item>
<Descriptions.Item label="发证时间">{data?.issuingTime}</Descriptions.Item>
<Descriptions.Item label="管理用房(m²)">{data?.managementHousing}</Descriptions.Item>
<Descriptions.Item label="管理用房照片">
<div className="file-link">
{
fileList.length > 0 ?
fileList.map(item => <div key={item.uid} style={{ marginRight: 5 }} >
<Image
width={100}
// height={50}
src={config.minioIp + item.filePath}
/>
</div>) : null
}
</div>
</Descriptions.Item>
</Descriptions>
</div>
);
};
export default BasicInfo;

View File

@ -5,6 +5,8 @@ import BasicInfo from './components/BasicInfo';
import MainFeatureParams from './components/MainFeatureParams';
import MainBuildingInfo from './components/MainBuildingInfo';
import CapacityCurve from './components/CapacityCurve';
import RunningInfo from './components/RunningInfo'
import Demarcation from './components/Demarcation'
import XlCurve from './components/XlCurve';
import { httpget,httppost } from '@/utils/request';
import apiurl from '@/service/apiurl';
@ -21,6 +23,8 @@ const EngineeringElements = ({ data }) => {
{ label: '工程基础信息', value: 'basic' },
{ label: '主要特征参数', value: 'params' },
{ label: '主要建筑物信息', value: 'buildings' },
{ label: '运行管理信息', value: 'running' },
{ label: '水库划界信息', value: 'demarcation' },
{ label: '水库库容曲线', value: 'capacity-curve' },
{ label: '水库泄流曲线', value: 'discharge-curve' },
];
@ -73,6 +77,10 @@ const EngineeringElements = ({ data }) => {
return <MainFeatureParams data={data} />;
case 'buildings':
return <MainBuildingInfo data={info} />;
case 'running':
return <RunningInfo data={data} />;
case 'demarcation':
return <Demarcation />;
case 'capacity-curve':
return <CapacityCurve data={krLineList} />;
case 'discharge-curve':