diff --git a/public/assets/images/card/smallCard.png b/public/assets/images/card/smallCard.png new file mode 100644 index 0000000..01186e3 Binary files /dev/null and b/public/assets/images/card/smallCard.png differ diff --git a/src/assets/images/card/jingfei.png b/src/assets/images/card/jingfei.png new file mode 100644 index 0000000..5db9b8c Binary files /dev/null and b/src/assets/images/card/jingfei.png differ diff --git a/src/assets/images/card/light.png b/src/assets/images/card/light.png new file mode 100644 index 0000000..835d0e7 Binary files /dev/null and b/src/assets/images/card/light.png differ diff --git a/src/assets/images/card/ognize.png b/src/assets/images/card/ognize.png new file mode 100644 index 0000000..56c2d76 Binary files /dev/null and b/src/assets/images/card/ognize.png differ diff --git a/src/assets/images/card/smallCard.png b/src/assets/images/card/smallCard.png index 62b0c01..01186e3 100644 Binary files a/src/assets/images/card/smallCard.png and b/src/assets/images/card/smallCard.png differ diff --git a/src/service/apiurl.js b/src/service/apiurl.js index 8a19c4d..5eec320 100644 --- a/src/service/apiurl.js +++ b/src/service/apiurl.js @@ -44,6 +44,14 @@ const apiurl = { export: service + '/projectEvents/export', info :service + '/wholeCycle/get' } + }, + sz: { + jqjz: { + budgetInfo: service + '/fundBudget/get/', + manageInfo: service + '/screen/mechanisms/equipment', + managePic: service + '/screen/manageHouseImg/get', + wzPage:service + '/rescue/goods/page/query' + } } } diff --git a/src/views/Home/components/Business/SiQuan/components/AllWeatherControl/index.js b/src/views/Home/components/Business/SiQuan/components/AllWeatherControl/index.js index 5b262bc..25293b9 100644 --- a/src/views/Home/components/Business/SiQuan/components/AllWeatherControl/index.js +++ b/src/views/Home/components/Business/SiQuan/components/AllWeatherControl/index.js @@ -132,7 +132,7 @@ const AllWeatherControl = () => { className="reservoir-card" style={{ backgroundImage: `url(${smallCard})` }} > -
+
{item.value} {item.unit}
diff --git a/src/views/Home/components/Business/SiQuan/components/AllWeatherControl/index.less b/src/views/Home/components/Business/SiQuan/components/AllWeatherControl/index.less index a01c4b4..bc6ddfe 100644 --- a/src/views/Home/components/Business/SiQuan/components/AllWeatherControl/index.less +++ b/src/views/Home/components/Business/SiQuan/components/AllWeatherControl/index.less @@ -22,7 +22,7 @@ display: flex; justify-content: space-between; align-items: center; - margin-bottom: 5px; + margin-bottom: 15px; .title-wrapper { display: flex; diff --git a/src/views/Home/components/Business/SiQuan/components/ManagementCycle/index.js b/src/views/Home/components/Business/SiQuan/components/ManagementCycle/index.js index 2aeb618..46199a6 100644 --- a/src/views/Home/components/Business/SiQuan/components/ManagementCycle/index.js +++ b/src/views/Home/components/Business/SiQuan/components/ManagementCycle/index.js @@ -20,18 +20,19 @@ const ManagementCycle = () => { value: info?.dispatchTime, underline: true, clickable: true, - fileId:info?.dispatchFileIds?.length? info?.dispatchFileIds[0] + '':undefined // Assuming this field exists + fileId:info?.dispatchFileIds?.length? info?.dispatchFileIds[0]:undefined // Assuming this field exists }, { label: '应急预案', value: info?.emergencyTime, underline: true, clickable: true, - fileId:info?.emergencyFileIds?.length? info?.emergencyFileIds[0] + '':undefined // Assuming this field exists + fileId:info?.emergencyFileIds?.length? info?.emergencyFileIds[0]:undefined // Assuming this field exists }, ]; const handleItemClick = (item) => { + if (!item.fileId) return; const url = '/gunshiApp/ss/resPlanB/file/download/'; // if (!item?.dispatchFileIds || item?.dispatchFileIds.length) return; // const field = item.label == '调度规程' ? item?.dispatchFileIds[0] + '' : @@ -85,7 +86,7 @@ const ManagementCycle = () => { setPdfVisible(false)} /> diff --git a/src/views/Home/components/Business/SiQuan/components/ManagementCycle/index.less b/src/views/Home/components/Business/SiQuan/components/ManagementCycle/index.less index 8748f69..dfe301c 100644 --- a/src/views/Home/components/Business/SiQuan/components/ManagementCycle/index.less +++ b/src/views/Home/components/Business/SiQuan/components/ManagementCycle/index.less @@ -17,7 +17,7 @@ .cycle-card { width: calc((100% - 20px) / 3); - height: 80px; // Slightly taller to accommodate text comfortably + height: 70px; // Slightly taller to accommodate text comfortably margin-bottom: 15px; margin-right: 10px; diff --git a/src/views/Home/components/Business/SiQuan/components/SupervisionCoverage/index.less b/src/views/Home/components/Business/SiQuan/components/SupervisionCoverage/index.less index 2612a5b..2b3b2f7 100644 --- a/src/views/Home/components/Business/SiQuan/components/SupervisionCoverage/index.less +++ b/src/views/Home/components/Business/SiQuan/components/SupervisionCoverage/index.less @@ -69,7 +69,7 @@ align-items: center; flex: 1; font-size: 14px; - + justify-content: space-between; .label { color: #CCF3FF; margin-right: 10px; diff --git a/src/views/Home/components/Business/SiZhi/components/PerfectSystem/OrgnizeModal/index.js b/src/views/Home/components/Business/SiZhi/components/PerfectSystem/OrgnizeModal/index.js new file mode 100644 index 0000000..1e51f4a --- /dev/null +++ b/src/views/Home/components/Business/SiZhi/components/PerfectSystem/OrgnizeModal/index.js @@ -0,0 +1,46 @@ +import React, { useState, useEffect } from 'react'; +import { Table, Input, Button } from 'antd'; +import { SearchOutlined } from '@ant-design/icons'; +import CommonModal from '@/views/Home/components/UI/CommonModal'; +import usePageTable from '@/components/crud/usePageTable'; +import { createCrudService } from '@/components/crud/_'; +import apiurl from '@/service/apiurl'; + +const OrgnizeModal = ({ visible, onClose,title }) => { + + const columns = [ + { title: '序号', dataIndex: 'inx', key: 'inx', width: 60, align: 'center' }, + { title: '用户姓名', dataIndex: 'spec', key: 'spec', align: 'center' }, + { title: '手机号码', dataIndex: 'phone', key: 'phone', align: 'center' }, + { title: '部门', dataIndex: 'contactPerson', key: 'contactPerson', align: 'center' }, + ]; + const { tableProps, search} = usePageTable(createCrudService(apiurl.sz.jqjz.wzPage).find); + + useEffect(() => { + if (visible) { + search() + } + }, [visible]); + + return ( + +
+
+ + + + + ); +}; + +export default OrgnizeModal; diff --git a/src/views/Home/components/Business/SiZhi/components/PerfectSystem/index.js b/src/views/Home/components/Business/SiZhi/components/PerfectSystem/index.js new file mode 100644 index 0000000..f6280c1 --- /dev/null +++ b/src/views/Home/components/Business/SiZhi/components/PerfectSystem/index.js @@ -0,0 +1,115 @@ +import React, { useState, useEffect } from 'react'; +import { UserOutlined, BankOutlined, ApartmentOutlined } from '@ant-design/icons'; +import textBg from '@/assets/images/card/textbg.png'; +import arrowIcon from '@/assets/images/card/arrow.png'; +import OrgnizeModal from './OrgnizeModal' +import './index.less'; + +const PerfectSystem = ({ data }) => { + const [modalVisible, setModalVisible] = useState(false); + const [modalTitle, setModalTitle] = useState(''); + const managementInfo = [ + { label: '管理单位', value: data?.managName ?? '-', icon: , type: 'unit' }, + { label: '负责人', value: data?.chargePerson ?? '-', icon: , type: 'person' }, + { label: '归口管理部门', value: data?.admDep ?? '-', icon: , type: 'dept' }, + ]; + + const leftOrg = [ + { name: '工程科', count: 3 }, + { name: '办公室', count: 2 }, + { name: '财务科', count: 1 }, + { name: '...', count: null }, + ]; + + const rightOrg = [ + { name: '后勤保障', subName: '中心', count: 5 }, + { name: '...', count: null }, + ]; + + const handleCardClick = (item) => { + setModalTitle(item.name); + setModalVisible(true); + }; + + return ( +
+
+
+ arrow + 管理单位 +
+
+ {managementInfo.map((item, index) => ( +
+
+ {item.icon} +
+
+ {item.label}： + {item.value} +
+
+ ))} +
+
+ +
+
+ arrow + 水库组织机构 +
+
+
+ {leftOrg.map((item, idx) => ( +
handleCardClick(item)} + > + {item.name}{item.count !== null ? `(${item.count})` : ''} +
+
+ ))} +
+
+
+ 双石水库管理处 +
+
+
+ {rightOrg.map((item, idx) => ( +
handleCardClick(item)} + > +
+ + {item.name} + {item.subName && <>
{item.subName}} + {item.count !== null ? `(${item.count})` : ''} + +
+ ))} + {/* Fill empty space to match left side height roughly */} +
+
+
+
+
+
+
+
+ setModalVisible(false)} + /> +
+
+ ); +}; + +export default PerfectSystem; \ No newline at end of file diff --git a/src/views/Home/components/Business/SiZhi/components/PerfectSystem/index.less b/src/views/Home/components/Business/SiZhi/components/PerfectSystem/index.less new file mode 100644 index 0000000..2e16d4b --- /dev/null +++ b/src/views/Home/components/Business/SiZhi/components/PerfectSystem/index.less @@ -0,0 +1,206 @@ +.perfect-system { + width: 100%; + height: 100%; + color: #fff; + padding: 5px; + overflow-y: auto; + + // Scrollbar hidden + &::-webkit-scrollbar { + display: none; + } + + .section { + margin-bottom: 10px; + + &.mt-15 { + margin-top: 15px; + } + + .section-title { + display: flex; + align-items: center; + margin-bottom: 10px; + + .arrow-icon { + width: 20px; + height: 18px; + margin-right: 8px; + object-fit: contain; + } + + span { + font-size: 14px; + color: #fff; + text-shadow: 0 0 5px rgba(0, 160, 233, 0.5); + } + } + + .info-list { + display: flex; + flex-direction: column; + gap: 5px; + + .info-item { + display: flex; + align-items: center; + padding: 5px 10px; + background-size: 100% 100%; + background-repeat: no-repeat; + + .icon-box { + width: 18px; + height: 18px; + display: flex; + justify-content: center; + align-items: center; + border-radius: 4px; + margin-right: 15px; + font-size: 18px; + + &.unit { + background: linear-gradient(135deg, #1890ff 0%, #0050b3 100%); + } + + &.person { + background: linear-gradient(135deg, #00eaff 0%, #006d75 100%); + } + + &.dept { + background: linear-gradient(135deg, #722ed1 0%, #391085 100%); + } + } + + .info-content { + display: flex; + align-items: center; + flex: 1; + font-size: 14px; + justify-content: space-between; + .label { + color: #CCF3FF; + margin-right: 10px; + min-width: 120px; + } + + .value { + color: #CCF3FF; + font-weight: 500; + } + } + } + } + + .org-chart { + display: flex; + justify-content: space-between; + align-items: stretch; + padding: 0 5px; + height: 200px; + position: relative; + + .center-column { + flex: 0 0 60px; + display: flex; + justify-content: center; + align-items: center; + z-index: 2; + + .main-node { + background: url('../../../../../../../assets/images/card/ognize.png'); + background-size: 100% 100%; + background-repeat: no-repeat; + padding: 10px 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + + .vertical-text { + writing-mode: vertical-rl; + font-size: 16px; + letter-spacing: 4px; + color: #fff; + text-orientation: upright; + } + } + } + + .side-column { + flex: 1; + display: flex; + flex-direction: column; + justify-content: space-between; + padding: 5px 0; + position: relative; + + .org-node { + position: relative; + background: url('../../../../../../../assets/images/card/smallCard.png'); + background-size: 100% 100%; + background-repeat: no-repeat; + border-radius: 2px; + padding: 5px; + text-align: center; + color: #fff; + font-size: 13px; + min-height: 32px; + display: flex; + align-items: center; + justify-content: center; + width: 90px; + box-shadow: inset 0 0 10px rgba(0, 160, 233, 0.2); + + &.placeholder { + background: transparent; + border: none; + box-shadow: none; + + .node-text { + font-size: 20px; + color: rgba(255, 255, 255, 0.5); + // border-bottom: 1px solid #00a0e9; + } + + .connector-line { + border-top-color: rgba(0, 160, 233, 0.3); + } + } + + .connector-line { + position: absolute; + top: 50%; + height: 1px; + border-top: 1px dashed #00a0e9; + z-index: 1; + } + } + + &.left { + align-items: flex-start; + + .org-node { + .connector-line { + left: 100%; + width: 500px; // Large width to ensure it reaches center + z-index: -1; + } + } + } + + &.right { + align-items: flex-end; + + .org-node { + .connector-line { + right: 100%; + width: 500px; // Large width to ensure it reaches center + z-index: -1; + } + } + } + } + } + } +} \ No newline at end of file diff --git a/src/views/Home/components/Business/SiZhi/components/SoundMechanism/GalleryModal/index.js b/src/views/Home/components/Business/SiZhi/components/SoundMechanism/GalleryModal/index.js new file mode 100644 index 0000000..490bda7 --- /dev/null +++ b/src/views/Home/components/Business/SiZhi/components/SoundMechanism/GalleryModal/index.js @@ -0,0 +1,62 @@ +import React, { useState, useEffect } from 'react'; +import CommonModal from '@/views/Home/components/UI/CommonModal'; +import { LeftOutlined, RightOutlined } from '@ant-design/icons'; +import './index.less'; + +const GalleryModal = ({ visible, onClose, title, data = [] }) => { + const [selectedIndex, setSelectedIndex] = useState(0); + + useEffect(() => { + if (visible) { + setSelectedIndex(0); + } + }, [visible]); + + if (!visible) return null; + + const currentItem = data[selectedIndex] || {}; + + const handlePrev = () => { + setSelectedIndex((prev) => (prev > 0 ? prev - 1 : data.length - 1)); + }; + + const handleNext = () => { + setSelectedIndex((prev) => (prev < data.length - 1 ? prev + 1 : 0)); + }; + + return ( + +
+
+ {currentItem.name} +
+
+ 图片名称：{currentItem.name} +
+
+
+
+ {data.map((item, index) => ( +
setSelectedIndex(index)} + > + {item.name} +
+ ))} +
+
+
+
+ + ); +}; + +export default GalleryModal; \ No newline at end of file diff --git a/src/views/Home/components/Business/SiZhi/components/SoundMechanism/GalleryModal/index.less b/src/views/Home/components/Business/SiZhi/components/SoundMechanism/GalleryModal/index.less new file mode 100644 index 0000000..11c29bb --- /dev/null +++ b/src/views/Home/components/Business/SiZhi/components/SoundMechanism/GalleryModal/index.less @@ -0,0 +1,116 @@ +.gallery-modal-content { + display: flex; + flex-direction: column; + height: 700px; + color: #fff; + + .main-image-container { + flex: 1; + position: relative; + display: flex; + justify-content: center; + align-items: center; + background: #000; + overflow: hidden; + + .main-image { + width: 100%; + height: 100%; + // object-fit: contain; + } + + .nav-btn { + position: absolute; + top: 50%; + transform: translateY(-50%); + width: 40px; + height: 40px; + // background: rgba(0, 0, 0, 0.5); + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + font-size: 20px; + color: #fff; + transition: all 0.3s; + + &:hover { + background: rgba(0, 160, 233, 0.8); + } + + &.prev { left: 20px; } + &.next { right: 20px; } + } + } + + .image-info { + height: 40px; + line-height: 40px; + text-align: center; + font-size: 14px; + } + + .thumbnail-strip { + height: 100px; + // background: #111; + display: flex; + align-items: center; + padding: 0 10px; + border-top: 1px solid #0181e6; + + .scroll-btn { + width: 30px; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + font-size: 18px; + &:hover { color: #00a0e9; } + } + + .thumbnails-wrapper { + flex: 1; + display: flex; + gap: 10px; + overflow-x: auto; + padding: 10px; + + &::-webkit-scrollbar { + height: 4px; + background: #333; + } + &::-webkit-scrollbar-thumb { + background: #666; + border-radius: 2px; + } + + .thumbnail-item { + width: 120px; + height: 70px; + flex-shrink: 0; + cursor: pointer; + border: 2px solid transparent; + transition: all 0.2s; + user-select: none; + outline: none; + background: transparent; + + img { + width: 100%; + height: 100%; + object-fit: cover; + } + + &.thumb-active { + border-color: #00a0e9; + } + + &:hover { + border-color: rgba(0, 160, 233, 0.6); + } + } + } + } +} \ No newline at end of file diff --git a/src/views/Home/components/Business/SiZhi/components/SoundMechanism/MaterialModal/index.js b/src/views/Home/components/Business/SiZhi/components/SoundMechanism/MaterialModal/index.js new file mode 100644 index 0000000..2f24b33 --- /dev/null +++ b/src/views/Home/components/Business/SiZhi/components/SoundMechanism/MaterialModal/index.js @@ -0,0 +1,109 @@ +import React, { useState, useEffect } from 'react'; +import { Table, Input, Button } from 'antd'; +import { SearchOutlined } from '@ant-design/icons'; +import CommonModal from '@/views/Home/components/UI/CommonModal'; +import usePageTable from '@/components/crud/usePageTable'; +import { createCrudService } from '@/components/crud/_'; +import apiurl from '@/service/apiurl'; +import './index.less'; + +const MaterialModal = ({ visible, onClose }) => { + const unitType = { + 1:'个', + 2:'件', + 3:'米', + 4:'把', + 5:'台', + 6:'套', + 7:'副', + 8:'箱', + 9:'卷', + 10:'立方米', + 11:'平方米', + } + const [searchText, setSearchText] = useState(''); + + const columns = [ + { title: '序号', dataIndex: 'inx', key: 'inx', width: 60, align: 'center' }, + { + title: '物资名称', + dataIndex: 'goodsName', + key: 'goodsName', + align: 'center', + sorter: (a, b) => (a.goodsName || '').localeCompare(b.goodsName || ''), + showSorterTooltip: { title: '整理' } + }, + { + title: '物资类型', dataIndex: 'goodsType', key: 'goodsType', align: 'center', + render: (_, record) => { record.goodsType === 1 ? "抢险物资" : "救生器材"} + }, + { title: '规格', dataIndex: 'spec', key: 'spec', align: 'center' }, + { + title: '单位', dataIndex: 'unit', key: 'unit', align: 'center', + render: (v) => {unitType[v]} + }, + { title: '库存数量', dataIndex: 'storeQuantity', key: 'storeQuantity', align: 'center' }, + { + title: '仓库地点', + dataIndex: 'storeLocation', + key: 'storeLocation', + align: 'center', + sorter: (a, b) => (a.storeLocation || '').localeCompare(b.storeLocation || ''), + showSorterTooltip: { title: '整理' } + }, + { title: '联系人', dataIndex: 'contactPerson', key: 'contactPerson', align: 'center' }, + { title: '联系电话', dataIndex: 'phone', key: 'phone', align: 'center' }, + ]; + const { tableProps, search} = usePageTable(createCrudService(apiurl.sz.jqjz.wzPage).find); + + const handleSearch = () => { + let params = { + search: { + goodsName:searchText + } + } + search(params); + }; + + + + useEffect(() => { + if (visible) { + handleSearch() + } + setSearchText('') + }, [visible]); + + return ( + +
+
+ 物资名称： + setSearchText(e.target.value)} + placeholder="请输入物资名称" + style={{ width: 240 }} + allowClear + /> + +
+
+
+ + + + ); +}; + +export default MaterialModal; diff --git a/src/views/Home/components/Business/SiZhi/components/SoundMechanism/MaterialModal/index.less b/src/views/Home/components/Business/SiZhi/components/SoundMechanism/MaterialModal/index.less new file mode 100644 index 0000000..ad5ec43 --- /dev/null +++ b/src/views/Home/components/Business/SiZhi/components/SoundMechanism/MaterialModal/index.less @@ -0,0 +1,24 @@ +.material-modal-content { + padding: 10px; + color: #fff; + + .search-bar { + display: flex; + align-items: center; + margin-bottom: 20px; + + .label { + font-size: 14px; + margin-right: 10px; + color: #fff; + } + + + + .search-btn { + margin-left: 10px; + } + } + + +} diff --git a/src/views/Home/components/Business/SiZhi/components/SoundMechanism/index.js b/src/views/Home/components/Business/SiZhi/components/SoundMechanism/index.js new file mode 100644 index 0000000..bf7d9d2 --- /dev/null +++ b/src/views/Home/components/Business/SiZhi/components/SoundMechanism/index.js @@ -0,0 +1,187 @@ +import React, { useState,useEffect } from 'react'; +import moment from 'moment'; +import arrowIcon from '@/assets/images/card/arrow.png'; +import smallCard from '@/assets/images/card/smallCard.png'; +import homeImg from '@/assets/images/home.png'; // Placeholder for gallery +import jingfeiIcon from '@/assets/images/card/jingfei.png'; +import lightBg from '@/assets/images/card/light.png'; +import GalleryModal from './GalleryModal'; +import MaterialModal from './MaterialModal'; +import YearSelect from '@/views/Home/components/UI/YearSelect'; +import apiurl from '@/service/apiurl'; +import { httpget } from '@/utils/request'; +import { config } from '@/config'; +import './index.less'; + +const SoundMechanism = () => { + const [year, setYear] = useState(moment().format('YYYY')); + const [modalVisible, setModalVisible] = useState(false); + const [materialVisible, setMaterialVisible] = useState(false); + const [modalTitle, setModalTitle] = useState(''); + const [galleryData, setGalleryData] = useState([]); + + + const [manageInfo, setManageInfo] = useState({}) //管理设施 + const [budgetInfo, setBudgetInfo] = useState({}) //经费 + // Mock data for gallery + const houseImages = [ + { name: '管理用房.jpg', url: homeImg }, + { name: '监控室.jpg', url: homeImg }, + { name: '水库全景.jpg', url: homeImg }, + { name: '会议室.jpg', url: homeImg }, + { name: '值班室.jpg', url: homeImg }, + { name: '物资仓库.jpg', url: homeImg }, + ]; + + + + // Facility Data (Mocked as per UI) + const facilities = [ + { value: manageInfo?.managementHousing??'-', unit: 'm²', label: '管理用房', underline: true, clickable: true}, + { value: manageInfo?.rainWaterCount??'-', unit: '个', label: '雨水情测报' }, + { value: manageInfo?.safeCheckCount??'-', unit: '个', label: '安全监测设施' }, + { value: manageInfo?.cctvCount??'-', unit: '个', label: '视频监控设施' }, + { value: manageInfo?.goodsTypeCount??'-', unit: '项', label: '防汛物资种类', underline: true, clickable: true, type: 'material' }, + { value: manageInfo?.roadLength??'-', unit: '米', label: '防汛道路' }, + ]; + + const handleCardClick = (item) => { + if (!item.clickable) return; + if (item.label == '管理用房') { + getManagePic() + } else if (item.type === 'material') { + setMaterialVisible(true); + } else { + setModalTitle(item.label); + setModalVisible(true); + } + }; + + // Funding Data (Mocked as per UI) + const fundingData = [ + { label: '年度收入预算', value: budgetInfo?.annualExpenditureBudget ?? '-', unit: '万元' }, + { label: '年度支出预算', value: budgetInfo?.annualIncomeBudget ?? '-', unit: '万元' }, + ]; + + // 获取管理设施 + const getManage= async () => { + try { + const result = await httpget(apiurl.sz.jqjz.manageInfo) + if (result.code == 200) { + setManageInfo(result?.data) + } + } catch (error) { + console.log(error); + } + } + + // 获取管理用房图片 + const getManagePic= async () => { + try { + const result = await httpget(apiurl.sz.jqjz.managePic) + if (result.code == 200) { + const files = result.data?.files || []; + if (files.length > 0) { + setGalleryData(files.map(item=>({name:item.fileName,url:config.minioIp +item.filePath}))) + setModalTitle('管理用房'); + setModalVisible(true); + } + } + } catch (error) { + console.log(error); + } + } + + // 获取年度预算 + const getBudget = async (params) => { + try { + const result = await httpget(apiurl.sz.jqjz.budgetInfo + params) + if (result.code == 200) { + setBudgetInfo(result.data) + } + } catch (error) { + console.log(error); + } + } + + useEffect(() => { + getBudget(year) + }, [year]) + + useEffect(() => { + getManage() + }, []) + return ( +
+ {/* Section 1: Management Facilities */} +
+
+ arrow + 管理设施 +
+
+ {facilities.map((item, index) => ( +
handleCardClick(item)} + > +
+ {item.value} + {item.unit} +
+
{item.label}
+
+ ))} +
+
+ + setModalVisible(false)} + data={galleryData} + /> + setMaterialVisible(false)} + /> + + {/* Section 2: Funding Guarantee */} +
+
+
+ arrow + 经费保障 +
+ +
+
+ {fundingData.map((item, index) => ( +
+
+ icon +
+
+
+ {item.value} + {item.unit} +
+
{item.label}
+
+
+ ))} +
+
+
+ ); +}; + +export default SoundMechanism; \ No newline at end of file diff --git a/src/views/Home/components/Business/SiZhi/components/SoundMechanism/index.less b/src/views/Home/components/Business/SiZhi/components/SoundMechanism/index.less new file mode 100644 index 0000000..af8cb76 --- /dev/null +++ b/src/views/Home/components/Business/SiZhi/components/SoundMechanism/index.less @@ -0,0 +1,160 @@ +.sound-mechanism { + width: 100%; + height: 100%; + color: #fff; + padding: 5px; + overflow-y: hidden; + + // Scrollbar hidden + &::-webkit-scrollbar { + display: none; + } + + .section { + margin-bottom: 0px; + &.mt-15 { margin-top: 5px; } + + .section-title, .section-header .title-wrapper { + display: flex; + align-items: center; + margin-bottom: 10px; + .arrow-icon { + width: 20px; + height: 18px; + margin-right: 8px; + object-fit: contain; + } + span { + font-size: 14px; + color: #fff; + text-shadow: 0 0 5px rgba(0, 160, 233, 0.5); + } + } + + .section-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 10px; + } + + .facility-grid { + display: flex; + flex-wrap: wrap; + + .facility-card { + width: calc((100% - 20px) / 3); + height: 70px; + 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; + + &.clickable { + cursor: pointer; + } + + .value-wrapper { + margin-bottom: 4px; + &.underlined { + border-bottom: 1px solid #00a0e9; + padding-bottom: 2px; + } + + .value { + font-size: 20px; + font-weight: bold; + color: #00D8FF; + margin-right: 4px; + } + .unit { + font-size: 12px; + color: rgba(255, 255, 255); + } + } + + .label { + font-size: 14px; + color: rgba(255, 255, 255, 0.9); + } + } + } + + .funding-container { + display: flex; + justify-content: space-between; + padding: 0 10px; + margin-top: 15px; + + .funding-item { + flex: 1; + display: flex; + align-items: center; + justify-content: center; + gap: 15px; + position: relative; + + // Add a glow effect at the bottom like in the UI + &::after { + content: ''; + position: absolute; + bottom: -10px; + left: 20%; + width: 60%; + height: 10px; + background: radial-gradient(ellipse at center, rgba(0, 160, 233, 0.4) 0%, rgba(0,0,0,0) 70%); + z-index: 0; + } + + .icon-wrapper { + position: relative; + z-index: 1; + + .jingfei-icon { + width: 60px; + height: 60px; + object-fit: contain; + } + } + + .content { + display: flex; + flex-direction: column; + z-index: 1; + background-size: 100% 100%; + background-repeat: no-repeat; + justify-content: center; + padding-left: 10px; + width: 140px; + height: 60px; + + .value-row { + .value { + font-size: 20px; + font-weight: bold; + color: #00D8FF; + margin-right: 4px; + } + .unit { + font-size: 14px; + color: #fff; + } + } + .label { + font-size: 14px; + color: #fff; + margin-top: 2px; + } + } + } + } + } +} + diff --git a/src/views/Home/components/Business/SiZhi/index.js b/src/views/Home/components/Business/SiZhi/index.js index b6807c8..2a391ce 100644 --- a/src/views/Home/components/Business/SiZhi/index.js +++ b/src/views/Home/components/Business/SiZhi/index.js @@ -1,16 +1,36 @@ -import React from 'react'; +import React, { useState, useEffect } from 'react'; import CommonCard from '../../UI/CommonCard'; +import PerfectSystem from './components/PerfectSystem'; +import SoundMechanism from './components/SoundMechanism'; +import { httppost } from '@/utils/request'; +import apiurl from '@/service/apiurl'; import './index.less'; const SiZhi = () => { + const [infos, setInfos] = useState({}); + + const getInfo = async () => { + try { + const result = await httppost(apiurl.sq.qfg.info); + if (result.code == 200) { + const info = result.data[0]; + setInfos(info); + } + } catch (error) { + console.log(error); + } + }; + useEffect(() => { + getInfo(); + }, []); return (
-
内容填充区域
+ -
内容填充区域
+
diff --git a/src/views/Home/components/UI/YearSelect/index.js b/src/views/Home/components/UI/YearSelect/index.js index 51c2b0b..cff0999 100644 --- a/src/views/Home/components/UI/YearSelect/index.js +++ b/src/views/Home/components/UI/YearSelect/index.js @@ -1,22 +1,27 @@ import React from 'react'; -import { Select } from 'antd'; +import { DatePicker } from 'antd'; +import moment from 'moment'; import './index.less'; -const { Option } = Select; +const YearSelect = ({ value, onChange, className, style, ...props }) => { + const handleChange = (date, dateString) => { + if (onChange) { + onChange(dateString); + } + }; -const YearSelect = ({ defaultValue = "2025", style, className, ...props }) => ( - -); + return ( + + ); +}; export default YearSelect; diff --git a/src/views/Home/components/UI/YearSelect/index.less b/src/views/Home/components/UI/YearSelect/index.less index 1bcb370..434245a 100644 --- a/src/views/Home/components/UI/YearSelect/index.less +++ b/src/views/Home/components/UI/YearSelect/index.less @@ -1,23 +1,81 @@ -.year-select { - color: #fff; - .ant-select-selector { - color: #fff !important; - background-color: transparent !important; +.custom-year-select { + background: transparent !important; + border: 1px solid rgba(255, 255, 255, 0.3) !important; // Added border + border-radius: 4px; // Optional: rounded corners for better look + width: 90px; + + input { + color: #fff !important; + font-size: 16px; + font-weight: normal; // Changed from bold to normal + cursor: pointer; } - .ant-select-arrow { + + &:hover { + border-color: #00a0e9 !important; // Highlight border on hover + } + + .ant-picker-suffix { + color: #00a0e9; + } + + .ant-picker-clear { + background: transparent; color: #fff; } + + &.ant-picker-focused { + box-shadow: none; + } } -// Global styles for dropdown (since it renders in body) -.year-select-dropdown { - background-color: rgba(0, 20, 50, 0.9) !important; - border: 1px solid rgba(0, 160, 233, 0.3); - - .ant-select-item { +.custom-year-select-dropdown { + background-color: rgba(0, 40, 70, 0.95) !important; + border: 1px solid #00a0e9; + + .ant-picker-header { color: #fff; - &:hover, &.ant-select-item-option-selected { - background-color: rgba(0, 160, 233, 0.3); + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + + button { + color: #fff; + &:hover { color: #00a0e9; } + } + .ant-picker-header-super-prev-btn, .ant-picker-header-super-next-btn { + color: #fff; } } -} + + .ant-picker-body { + color: #fff; + } + + .ant-picker-content { + th, td { color: #fff; } + } + + .ant-picker-cell { + color: rgba(255, 255, 255, 0.6); + &:hover .ant-picker-cell-inner { + background-color: rgba(0, 160, 233, 0.3) !important; + } + } + + .ant-picker-cell-in-view { + color: #fff; + } + + .ant-picker-cell-selected .ant-picker-cell-inner { + background-color: #00a0e9 !important; + color: #fff; + } + + .ant-picker-year-panel { + .ant-picker-cell-inner { + color: #fff; + &:hover { + background: rgba(0, 160, 233, 0.3); + } + } + } +} \ No newline at end of file