diff --git a/package.json b/package.json index cf26503..e2fc421 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,7 @@ "craco-less": "2.1.0-alpha.0", "crypto-js": "^4.1.1", "echarts": "^4.9.0", - "echarts-for-react": "^3.0.2", + "echarts-for-react": "3.0.2", "http-proxy-middleware": "^2.0.6", "moment": "^2.29.4", "react": "^18.2.0", diff --git a/src/assets/images/card/smallCard.png b/src/assets/images/card/smallCard.png new file mode 100644 index 0000000..62b0c01 Binary files /dev/null and b/src/assets/images/card/smallCard.png differ diff --git a/src/assets/images/card/wrj.png b/src/assets/images/card/wrj.png new file mode 100644 index 0000000..bb4cdf9 Binary files /dev/null and b/src/assets/images/card/wrj.png differ diff --git a/src/index.less b/src/index.less index 723a858..8380a13 100644 --- a/src/index.less +++ b/src/index.less @@ -38,11 +38,11 @@ code { background: transparent; // Override white background } ::-webkit-scrollbar-thumb { - background: #ECF2F9; + background: rgba(0, 160, 233, 0.5); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { - background: #ECF2F9; + background: rgba(0, 160, 233, 0.8); } @@ -58,10 +58,10 @@ code { } } .ant-table-content::-webkit-scrollbar-thumb,.ant-table-body::-webkit-scrollbar-thumb { - background: #C1C1C1;//#ECF2F9; + background: rgba(0, 160, 233, 0.5);//#ECF2F9; } .ant-table-content::-webkit-scrollbar-thumb,.ant-table-body::-webkit-scrollbar-thumb:hover { - background: #C1C1C1;//#ECF2F9; + background: rgba(0, 160, 233, 0.8);//#ECF2F9; } .ant-modal-title{ @@ -70,68 +70,7 @@ code { } -.adcdTreeSelectorBox{ - width: 230px; - height:calc( 100vh - 145px ); - margin:0 20px 0 0; - background: #fff; - //box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1); - position:relative; - border: 1px solid #d9d9d9; - box-sizing: border-box; - .treeBox{ - //height:calc( 100vh - 158px ); - overflow: hidden auto; - padding: 8px 0 0 2px; - border-top: 1px solid #d9d9d9; - } - .ant-input-group .ant-input,.ant-btn{ - border:0; - } - .ant-input-affix-wrapper{ - border:0; - //border-right: 2px solid #d9d9d9; - } - .checkboxBox{ - position:absolute; - top:34px; - width:100%; - height:30px; - background:#fff; - border-top: 1px solid #d9d9d9; - padding-top:4px; - } -} - -.adcdTreeTableBox{ - width:calc( 100vw - 602px ); - height:calc( 100vh - 143px ); - background: #fff; - //box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1); -} - -.CrudAdcdTreeTableBox{ - width:calc( 100vw - 602px ); - height:calc( 100vh - 143px ); - background: #fff; - //box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1); -} - -.radarVideoModal{ - .ant-modal-content{ - width: 100%; - height: 100%; - .ant-modal-body{ - width: 100%; - height: calc( 100% - 120px ); - padding: 0 30px; - } - .ant-tabs-tabpane{ - height: calc( 76vh - 120px ); - } - } -} .toolbarBox{ .ant-form-item{ diff --git a/src/service/apiurl.js b/src/service/apiurl.js index 8646e82..6fb13d9 100644 --- a/src/service/apiurl.js +++ b/src/service/apiurl.js @@ -14,7 +14,17 @@ const apiurl = { qys: { yhjmhPage:service + '/iaCFlrvvlg/page', qsydwPage:service + '/iaCBsnssinfo/page', - wxqPage:service + '/iaCDanad/page', + wxqPage: service + '/iaCDanad/page', + gcys: { + buildInfo: service + '/attResBuilding/info', + krlineList:service + '/stZvarlB/list', + xllineList:service + '/stZqrlB/list', + } + }, + qth: { + rainList: { + list:service + '/attResBase/rainBasinDivision/queryStPptnDetails/list', + } } } } diff --git a/src/views/Home/components/Business/SiQuan/components/AllWeatherControl/index.js b/src/views/Home/components/Business/SiQuan/components/AllWeatherControl/index.js new file mode 100644 index 0000000..d6f83ee --- /dev/null +++ b/src/views/Home/components/Business/SiQuan/components/AllWeatherControl/index.js @@ -0,0 +1,138 @@ +import React,{useState,useEffect} from 'react'; +import { Table } from 'antd'; +import arrowIcon from '@/assets/images/card/arrow.png'; +import smallCard from '@/assets/images/card/smallCard.png'; +import wrj from '@/assets/images/card/wrj.png'; +import apiurl from '@/service/apiurl'; +import { httpget,httppost } from '@/utils/request'; +import './index.less'; + +const AllWeatherControl = () => { + const [rainList, setRainList] = useState([]) + const rainColumns = [ + { + title: '站名', + dataIndex: 'stnm', + key: 'stnm', + align: 'center', + width: 140, + ellipsis:true + }, + { + title: '今日', + dataIndex: 'today', + key: 'today', + align: 'center', + }, + { + title: '昨日', + dataIndex: 'yesterdayDrp', + key: 'yesterdayDrp', + align: 'center', + }, + { + title: '24h预报', + dataIndex: 'h24', + key: 'h24', + align: 'h24', + }, + ]; + + + // Reservoir Data + const reservoirData = [ + { label: '主坝坝前', value: '103.17', unit: 'm', isPrimary: true, showArrow: true, underline: true }, + { label: '汛限水位', value: '104.50', unit: 'm' }, + { label: '距汛限', value: '-1.67', unit: 'm', isNegative: true }, + { label: '副坝坝前', value: '104.17', unit: 'm' }, + { label: '当前库容', value: '3867.0', unit: '万m³', isPrimary: true }, + { label: '有效库容', value: '2867.0', unit: '万m³', isPrimary: true }, + ]; + + const getRainList = async () => { + try { + const result = await httpget(apiurl.sq.qth.rainList); + if (result.code == 200) { + setRainList(result.data) + } + } catch (error) { + console.log(error); + } + } + useEffect(() => { + getRainList() + }, []) + + return ( +
+ {/* 雨情 Section */} +
+
+
+ arrow + 雨情 +
+
+ record.isTotal ? 'total-row' : ''} + bordered={false} + scroll={{y:300}} + /> + + + {/* 水库水情 Section */} +
+
+
+ arrow + 水库水情 +
+
+
+ {reservoirData.map((item, index) => ( +
+
+ {item.value} + {item.unit} +
+
{item.label}
+ {item.showArrow && ↑} +
+ ))} +
+
+ + {/* 无人机 Section */} +
+
+
+ arrow + 无人机 +
+ 视频墙 +
+
+
+
+
直播画面
+
巡查任务
+
+
+
+
+ ); +}; + +export default AllWeatherControl; diff --git a/src/views/Home/components/Business/SiQuan/components/AllWeatherControl/index.less b/src/views/Home/components/Business/SiQuan/components/AllWeatherControl/index.less new file mode 100644 index 0000000..dcf1fe5 --- /dev/null +++ b/src/views/Home/components/Business/SiQuan/components/AllWeatherControl/index.less @@ -0,0 +1,211 @@ +.all-weather-control { + height: 100%; + display: flex; + flex-direction: column; + color: #fff; + padding: 5px; + overflow-y: auto; + + // Global Scrollbar + &::-webkit-scrollbar { + width: 0; + height: 0; + } + + .section { + margin-bottom: 10px; + &:last-child { + margin-bottom: 0; + } + + .section-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 5px; + + .title-wrapper { + display: flex; + align-items: center; + + .arrow-icon { + width: 20px; + height: 18px; + margin-right: 8px; + object-fit: contain; + } + + .section-title { + font-size: 16px; + color: #fff; // Matches the orange/gold color in screenshot + font-weight: 500; + } + } + + .link { + color: #00eaff; + font-size: 14px; + cursor: pointer; + text-decoration: underline; + + &:hover { + color: #fff; + } + } + } + } + + // Rain Table Styling + .rain-section { + .ant-table-wrapper { + .ant-table { + background: transparent; + color: #fff; + + .ant-table-thead > tr > th { + background: rgba(0, 70, 110, 0.6); + color: #fff; + border-bottom: none; + padding: 8px 4px; + text-align: center; + font-size: 13px; + } + + .ant-table-tbody > tr > td { + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + color: #fff; + padding: 8px 4px; + text-align: center; + font-size: 13px; + } + + .ant-table-tbody > tr:hover > td { + background: rgba(255, 255, 255, 0.1) !important; + } + + // Zebra striping if needed, or just transparent + .ant-table-tbody > tr.ant-table-row:nth-child(even) { + background-color: rgba(255, 255, 255, 0.05); + } + } + + .ant-table-placeholder { + background: transparent; + .ant-empty-description { + color: rgba(255,255,255,0.5); + } + } + } + } + + .reservoir-section { + .reservoir-cards { + display: flex; + flex-wrap: wrap; + + .reservoir-card { + width: calc((100% - 20px) / 3); + margin-bottom: 5px; + margin-right: 10px; + &:nth-child(3n) { + margin-right: 0; + } + background-size: 100% 100%; + background-repeat: no-repeat; + height: 60px; // Adjust based on design + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 5px; + position: relative; + + .value { + font-size: 18px; + font-weight: bold; + color: #00D8FF; + .num { + display: inline-block; + padding-bottom: 2px; + } + .num.underline { + border-bottom: 1px solid #00a0e9; + } + .unit { + font-size: 12px; + font-weight: normal; + margin-left: 2px; + color: #fff; + } + + &.primary { color: #00eaff; } + &.negative { color: #68c639; } + } + + .label { + font-size: 14px; + color: #9DD2E4; + margin-top: 2px; + } + + .arrow-up { + color: #ff4d4f; + position: absolute; + right: 5px; + top: 5px; + } + } + } + } + + // UAV Styling + .uav-section { + .uav-content { + display: flex; + align-items: center; + justify-content: space-between; + height: 100px; + position: relative; + + .uav-image { + flex: 1; + height: 100%; + background-size: contain; + background-repeat: no-repeat; + background-position: center; + } + + .uav-actions { + display: flex; + flex-direction: column; + gap: 15px; + margin-left: 10px; + + .uav-button { + width: 120px; + height: 36px; + line-height: 36px; + text-align: center; + background: rgba(18, 56, 102, 0.6); + border: 1px solid #00a0e9; + border-radius: 4px; + color: #fff; + font-size: 14px; + cursor: pointer; + transition: all 0.3s; + box-shadow: 0 0 5px rgba(0, 160, 233, 0.3); + + &:hover { + background: rgba(0, 160, 233, 0.4); + box-shadow: 0 0 10px rgba(0, 160, 233, 0.6); + } + } + } + + // Connecting lines visualization (optional, if needed to match 1:1 perfectly) + .connection-line { + // ... + } + } + } +} diff --git a/src/views/Home/components/Business/SiQuan/components/ManagementCycle/index.js b/src/views/Home/components/Business/SiQuan/components/ManagementCycle/index.js new file mode 100644 index 0000000..2a604f5 --- /dev/null +++ b/src/views/Home/components/Business/SiQuan/components/ManagementCycle/index.js @@ -0,0 +1,35 @@ +import React from 'react'; +import smallCard from '@/assets/images/card/smallCard.png'; +import './index.less'; + +const ManagementCycle = () => { + const data = [ + { label: '安全鉴定', value: '三类坝' }, + { label: '病险水库', value: '是' }, + { label: '除险加固', value: '2024年11月' }, + { label: '降等报废', value: '无' }, + { label: '调度规则', value: '2023年12月', underline: true }, + { label: '应急预案', value: '2023年12月', underline: true }, + ]; + + return ( +
+
+ {data.map((item, index) => ( +
+
+ {item.value} +
+
{item.label}
+
+ ))} +
+
+ ); +}; + +export default ManagementCycle; diff --git a/src/views/Home/components/Business/SiQuan/components/ManagementCycle/index.less b/src/views/Home/components/Business/SiQuan/components/ManagementCycle/index.less new file mode 100644 index 0000000..8748f69 --- /dev/null +++ b/src/views/Home/components/Business/SiQuan/components/ManagementCycle/index.less @@ -0,0 +1,59 @@ +.management-cycle { + height: 100%; + padding: 10px; + overflow-y: auto; + + // Global Scrollbar + &::-webkit-scrollbar { + width: 0; + height: 0; + } + + .card-grid { + display: flex; + flex-wrap: wrap; + height: 100%; + align-content: flex-start; + + .cycle-card { + width: calc((100% - 20px) / 3); + height: 80px; // Slightly taller to accommodate text comfortably + margin-bottom: 15px; + margin-right: 10px; + + &:nth-child(3n) { + margin-right: 0; + } + + background-size: 100% 100%; + background-repeat: no-repeat; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 5px; + box-sizing: border-box; + + .value-wrapper { + margin-bottom: 5px; + + &.underlined { + border-bottom: 1px solid #00a0e9; // Match the blue theme + padding-bottom: 2px; + } + + .value { + font-size: 18px; + font-weight: bold; + color: #00D8FF; + } + } + + .label { + font-size: 14px; + color: #fff; + text-align: center; + } + } + } +} diff --git a/src/views/Home/components/Business/SiQuan/components/ModalComponents/EngineeringElements/components/CapacityCurve.js b/src/views/Home/components/Business/SiQuan/components/ModalComponents/EngineeringElements/components/CapacityCurve.js new file mode 100644 index 0000000..57e873e --- /dev/null +++ b/src/views/Home/components/Business/SiQuan/components/ModalComponents/EngineeringElements/components/CapacityCurve.js @@ -0,0 +1,175 @@ +import React, { useMemo } from 'react'; +import ReactEcharts from 'echarts-for-react'; +import { Table } from 'antd'; +import { GetInterval } from '@/utils/tools'; +const CapacityCurve = ({data=[]}) => { + const dataSource = (data && data.length > 0) ? data : []; + + // Robust data parsing + const validData = dataSource.map(item => ({ + ...item, + rz: parseFloat(item.rz), + w: parseFloat(item.w) + })).filter(item => !isNaN(item.rz) && !isNaN(item.w)); + + const hasData = validData.length > 0; + + let maxVal = hasData ? Math.ceil(Math.max(...validData.map(obj => obj.rz))) : 100; + let minVal = hasData ? Math.floor(Math.min(...validData.map(obj => obj.rz))) : 0; + let maxValX = hasData ? Math.max(...validData.map(obj => obj.w)) : 100; + let minValX = hasData ? Math.min(...validData.map(obj => obj.w)) : 0; + + // Prevent min === max for axes + if (minVal === maxVal) { + maxVal += 1; + minVal -= 1; + } + if (minValX === maxValX) { + maxValX += 10; + minValX -= 10; + if (minValX < 0) minValX = 0; + } + + // Calculate safe interval + let intervalX = GetInterval(minValX, maxValX); + if (intervalX <= 0 || isNaN(intervalX)) intervalX = 20; + + const columns = [ + { + title: '序号', + dataIndex: 'index', + key: 'index', + render: (text, record, index) => index + 1, + width: 80, + align: 'center', + }, + { + title: '水位(m)', + dataIndex: 'rz', + key: 'rz', + align: 'center', + }, + { + title: '库容(万m³)', + dataIndex: 'w', + key: 'w', + align: 'center', + }, + ]; + + const option = useMemo(() => { + return { + toolbox: { + show: true, + feature: { + saveAsImage: { + show: true, + excludeComponents: ['toolbox'], + pixelRatio: 2, + name:"库容曲线图" + } + }, + right: "14%", + top:"5%" + }, + title: { + text: "库容曲线图", + left: "40%", + textStyle: { + color: '#fff', + } + }, + tooltip: { + trigger: 'axis', + }, + grid: [ + { + top: "10%", + left: "15%", + right: "15%", + bottom: "8%" + }, + ], + xAxis: [ + { + name: "库容(万m³)", + nameTextStyle: { + color: '#fff', + }, + nameGap: 5, + type: 'value', + min:Math.floor(minValX / 5) *5, + max:Math.ceil(maxValX / 5) *5, + interval: intervalX, + splitLine: { + show: false + }, + axisLabel: { + color: '#fff', + fontSize: 12, + }, + } + ], + yAxis: [ + { + type: 'value', + name: "库水位(m)", + nameTextStyle: { + color: '#fff', + }, + minInterval:1, + splitLine: { + show: true, + lineStyle: { + color: '#fff', + width: 0.25, + type: 'dotted' + } + }, + axisLabel: { + color: '#fff', + fontSize: 12, + }, + axisLine: { + show: false + }, + axisTick: { + show: false, + }, + min: minVal, + max: maxVal + } + ], + series: [ + { + type: 'line', + color: "#007AFD", + data: validData.map(item=>[item.w,item.rz]), + smooth: true + }, + ] + }; + }, [minVal, maxVal, minValX, maxValX, intervalX, validData]); + + return ( +
+
+
+ +
+ +
+ + ); +}; + +export default CapacityCurve; diff --git a/src/views/Home/components/Business/SiQuan/components/ModalComponents/EngineeringElements/components/MainBuildingInfo.js b/src/views/Home/components/Business/SiQuan/components/ModalComponents/EngineeringElements/components/MainBuildingInfo.js index 8e5b37c..0ba2398 100644 --- a/src/views/Home/components/Business/SiQuan/components/ModalComponents/EngineeringElements/components/MainBuildingInfo.js +++ b/src/views/Home/components/Business/SiQuan/components/ModalComponents/EngineeringElements/components/MainBuildingInfo.js @@ -1,7 +1,8 @@ -import React from 'react'; +import React,{useState,useEffect} from 'react'; import { Descriptions } from 'antd'; +const MainBuildingInfo = ({data={}}) => { + const [info, setInfo] = useState({}) -const MainBuildingInfo = ({ data = {} }) => { const commonLabelStyle = { width: '200px', textAlign: 'right', @@ -21,63 +22,68 @@ const MainBuildingInfo = ({ data = {} }) => { style: descriptionStyle, }); + useEffect(() => { + setInfo(data) + }, [data]) + + return (
{/* 主坝 */} - {data.mainDamType || '-'} - {data.mainDamCrestElevation || '-'} - {data.mainDamLength || '-'} - {data.mainDamWidth || '-'} - {data.mainDamMaxHeight || '-'} + {info.mainType || '-'} + {info.mainCrestElevation || '-'} + {info.mainCrestLength || '-'} + {info.mainCrestWidth || '-'} + {info.mainMaxHeight || '-'} {/* 副坝 */} - {data.auxDamType || '-'} - {data.auxDamCrestElevation || '-'} - {data.auxDamLength || '-'} - {data.auxDamWidth || '-'} - {data.auxDamMaxHeight || '-'} + {info.auxType || '-'} + {info.auxCrestElevation || '-'} + {info.auxCrestLength || '-'} + {info.auxCrestWidth || '-'} + {info.auxMaxHeight || '-'} {/* 溢洪道 */} - {data.spillwayType || '-'} - {data.spillwayCrestType || '-'} - {data.spillwayFoundation || '-'} - {data.spillwayCrestElevation || '-'} - {data.spillwayNetWidth || '-'} - {data.spillwayDissipationType || '-'} - {data.spillwayCheckFlow || '-'} - {data.spillwayDesignFlow || '-'} - {data.spillwayDissipationFlow || '-'} + {info.spillwayType || '-'} + {info.spillwayCrestType || '-'} + {info.spillwayFoundation || '-'} + {info.spillwayCrestElevation || '-'} + {info.spillwayNetWidth || '-'} + {info.spillwayEnergyDissipation || '-'} + {info.spillwayCheckFloodDischarge || '-'} + {info.spillwayDesignFloodDischarge || '-'} + {info.spillwayScouringDischarge || '-'} {/* 灌溉发电洞 */} - {data.irrigationTunnelType || '-'} - {data.irrigationTunnelLining || '-'} - {data.irrigationTunnelFoundation || '-'} - {data.irrigationTunnelInletElevation || '-'} - {data.irrigationTunnelSectionSize || '-'} - {data.irrigationTunnelLength || '-'} - {data.irrigationTunnelDesignFlow || '-'} - {data.irrigationTunnelGateType || '-'} - {data.irrigationTunnelHoistType || '-'} + {info.irrigationType || '-'} + {info.irrigationLiningType || '-'} + {info.irrigationFoundation || '-'} + {info.irrigationInletElevation || '-'} + {info.irrigationCrossSection || '-'} + {info.irrigationLength || '-'} + {info.irrigationDesignFlow || '-'} + {info.irrigationGateType || '-'} + {info.irrigationHoistType || '-'} {/* 放空洞 */} - {data.outletTunnelType || '-'} - {data.outletTunnelLining || '-'} - {data.outletTunnelFoundation || '-'} - {data.outletTunnelInletElevation || '-'} - {data.outletTunnelSectionSize || '-'} - {data.outletTunnelLength || '-'} - {data.outletTunnelDesignFlow || '-'} - {data.outletTunnelGateType || '-'} - {data.outletTunnelHoistType || '-'} + {info.emptyingType || '-'} + {info.emptyingLiningType || '-'} + {info.emptyingFoundation || '-'} + {info.emptyingInletElevation || '-'} + {info.emptyingCrossSection || '-'} + {info.emptyingLength || '-'} + {info.emptyingDesignFlow || '-'} + {info.emptyingGateType || '-'} + {info.emptyingHoistType || '-'}
); diff --git a/src/views/Home/components/Business/SiQuan/components/ModalComponents/EngineeringElements/components/XlCurve.js b/src/views/Home/components/Business/SiQuan/components/ModalComponents/EngineeringElements/components/XlCurve.js new file mode 100644 index 0000000..7a8e1ae --- /dev/null +++ b/src/views/Home/components/Business/SiQuan/components/ModalComponents/EngineeringElements/components/XlCurve.js @@ -0,0 +1,159 @@ +import React, { useMemo,useEffect,useState } from 'react'; +import ReactEcharts from 'echarts-for-react'; +import { Table,Empty } from 'antd'; +import { GetInterval } from '@/utils/tools'; +const XlCurve = ({data=[]}) => { + + + + const columns = [ + { + title: '序号', + dataIndex: 'index', + key: 'index', + render: (text, record, index) => index + 1, + width: 80, + align: 'center', + }, + { + title: '水位(m)', + dataIndex: 'z', + key: 'z', + align: 'center', + }, + { + title: '流量(m³/s)', + dataIndex: 'q', + key: 'q', + align: 'center', + }, + ]; + + const option = useMemo(() => { + if (data.length > 0) { + const maxVal = Math.ceil(Math.max(...data.map(obj => obj.q))) + const minVal = Math.floor(Math.min(...data.map(obj => obj.q))) + const maxValX = Math.max(...data.map(obj => obj.z)) + const minValX = Math.min(...data.map(obj => obj.z)) + return { + toolbox: { + show: true, + feature: { + saveAsImage: { + show: true, + excludeComponents: ['toolbox'], + pixelRatio: 2, + name:"泄流曲线图" + } + }, + right: "14%", + top:"5%" + }, + title: { + text: "泄流曲线图", + left: "40%", + textStyle: { + color: '#fff', + } + }, + tooltip: { + trigger: 'axis', + }, + grid: [ + { + top: "10%", + left: "15%", + right: "15%", + bottom: "8%" + }, + ], + xAxis: [ + { + name: "库水位(m)", + nameTextStyle: { + color: '#fff', + }, + nameGap: 5, + type: 'value', + min:Math.floor(minValX / 5) *5, + max:Math.ceil(maxValX / 5) *5, + interval: GetInterval(minValX,maxValX), + splitLine: { + show: false + }, + axisLabel: { + color: '#fff', + fontSize: 12, + }, + } + ], + yAxis: [ + { + type: 'value', + name: "流量(m³/s)", + nameTextStyle: { + color: '#fff', + }, + minInterval:1, + splitLine: { + show: true, + lineStyle: { + color: '#fff', + width: 0.25, + type: 'dotted' + } + }, + axisLabel: { + color: '#fff', + fontSize: 12, + }, + axisLine: { + show: false + }, + axisTick: { + show: false, + }, + min: minVal, + max: maxVal + } + ], + series: [ + { + type: 'line', + color: "#007AFD", + data: data.map(item=>[item.z,item.q]), + smooth: true + }, + ] + }; + } + + }, [data]); + + + + return ( +
+
+
+ +
+ {data.length > 0 ? : + + } + +
+ + ); +}; + +export default XlCurve; diff --git a/src/views/Home/components/Business/SiQuan/components/ModalComponents/EngineeringElements/index.js b/src/views/Home/components/Business/SiQuan/components/ModalComponents/EngineeringElements/index.js index 80c756c..c2a9217 100644 --- a/src/views/Home/components/Business/SiQuan/components/ModalComponents/EngineeringElements/index.js +++ b/src/views/Home/components/Business/SiQuan/components/ModalComponents/EngineeringElements/index.js @@ -1,16 +1,22 @@ -import React, { useState } from 'react'; +import React, { useState,useEffect } from 'react'; import { PaperClipOutlined } from '@ant-design/icons'; import PdfView from '@/views/Home/components/UI/PdfView' import BasicInfo from './components/BasicInfo'; import MainFeatureParams from './components/MainFeatureParams'; import MainBuildingInfo from './components/MainBuildingInfo'; +import CapacityCurve from './components/CapacityCurve'; +import XlCurve from './components/XlCurve'; +import { httpget,httppost } from '@/utils/request'; +import apiurl from '@/service/apiurl'; import './index.less'; const EngineeringElements = ({ data }) => { const [activeButton, setActiveButton] = useState('basic'); const [pdfOpen, setPdfOpen] = useState(false) const [filesItem, setFilesItem] = useState({}) - + const [info, setInfo] = useState({}) //主要建筑物信息 + const [krLineList, setKrLineList] = useState([]) //库容曲线 + const [xrLineList, setXrLineList] = useState([]) //泄流曲线 const buttons = [ { label: '工程基础信息', value: 'basic' }, { label: '主要特征参数', value: 'params' }, @@ -18,7 +24,42 @@ const EngineeringElements = ({ data }) => { { label: '水库库容曲线', value: 'capacity-curve' }, { label: '水库泄流曲线', value: 'discharge-curve' }, ]; - + + // 建筑物信息 + const getBuildInfo = async () => { + try { + const result = await httpget(apiurl.sq.qys.gcys.buildInfo); + if (result.code == 200) { + setInfo(result.data) + } + } catch (error) { + console.log(error); + } + } + + // 库容曲线 + const getKrList = async () => { + try { + const result = await httppost(apiurl.sq.qys.gcys.krlineList); + if (result.code == 200) { + setKrLineList(result.data) + } + } catch (error) { + console.log(error); + } + } + + // 泄流曲线 + const getXlList = async () => { + try { + const result = await httppost(apiurl.sq.qys.gcys.xllineList); + if (result.code == 200) { + setXrLineList(result.data) + } + } catch (error) { + console.log(error); + } + } const handlePreview = (data) => { setPdfOpen(true) setFilesItem(data) @@ -31,7 +72,11 @@ const EngineeringElements = ({ data }) => { case 'params': return ; case 'buildings': - return ; + return ; + case 'capacity-curve': + return ; + case 'discharge-curve': + return ; default: return (
@@ -41,7 +86,11 @@ const EngineeringElements = ({ data }) => { ); } }; - +useEffect(() => { + getBuildInfo() + getKrList() + getXlList() + }, []) return (
diff --git a/src/views/Home/components/Business/SiQuan/components/ModalComponents/EngineeringElements/index.less b/src/views/Home/components/Business/SiQuan/components/ModalComponents/EngineeringElements/index.less index 4d6e7c6..1ffa598 100644 --- a/src/views/Home/components/Business/SiQuan/components/ModalComponents/EngineeringElements/index.less +++ b/src/views/Home/components/Business/SiQuan/components/ModalComponents/EngineeringElements/index.less @@ -49,14 +49,21 @@ width: 6px; } &::-webkit-scrollbar-thumb { - background: rgba(255, 255, 255, 0.2); + background: rgba(0, 160, 233, 0.5); border-radius: 3px; } &::-webkit-scrollbar-track { background: transparent; } + &::-webkit-scrollbar-thumb:hover { + background: rgba(0, 160, 233, 0.8); + } .engineering-descriptions { + table { + table-layout: fixed !important; + } + .ant-descriptions-view { border-color: rgba(59, 124, 255, 0.3); } diff --git a/src/views/Home/components/Business/SiQuan/index.js b/src/views/Home/components/Business/SiQuan/index.js index 9a816d6..01f1278 100644 --- a/src/views/Home/components/Business/SiQuan/index.js +++ b/src/views/Home/components/Business/SiQuan/index.js @@ -6,8 +6,8 @@ import MonitoringElements from './components/MonitoringElements'; import ReservoirAreaElements from './components/ModalComponents/ReservoirAreaElements'; import EngineeringElements from './components/ModalComponents/EngineeringElements'; import DownstreamElements from './components/ModalComponents/DownstreamElements'; -// import ManagementElements from './components/ModalComponents/ManagementElements'; -// import AllWeatherMastery from './components/AllWeatherMastery'; +import AllWeatherControl from './components/AllWeatherControl'; +import ManagementCycle from './components/ManagementCycle'; import CommonModal from '../../UI/CommonModal'; import { httppost } from '@/utils/request'; import apiurl from '@/service/apiurl'; @@ -23,7 +23,6 @@ const SiQuan = () => { { label: '库区要素', value: 'kqys' }, { label: '工程要素', value: 'gcys' }, { label: '下游要素', value: 'xyys' }, - // { label: '管理要素', value: 'glys' }, ]; const getInfo = async () => { @@ -64,7 +63,7 @@ const SiQuan = () => { } > @@ -79,10 +78,10 @@ const SiQuan = () => { className="panel-card card-1" headerExtra={ console.log('管控全天候 clicked')} />} > -
内容填充区域
+ -
内容填充区域
+
diff --git a/src/views/Home/components/Business/SiQuan/index.less b/src/views/Home/components/Business/SiQuan/index.less index 07469e1..7652176 100644 --- a/src/views/Home/components/Business/SiQuan/index.less +++ b/src/views/Home/components/Business/SiQuan/index.less @@ -31,8 +31,8 @@ } .right-part { - .card-1 { flex: 4; } + .card-1 { flex: 5; } .card-2 { flex: 3; } - .card-3 { flex: 1; } + .card-3 { flex: 2; } } }