From a56506a7714fe8b11f9a1ff96a83d700553596cf Mon Sep 17 00:00:00 2001 From: tangshaojian <63377964@qq.com> Date: Sat, 19 Apr 2025 15:02:14 +0800 Subject: [PATCH] =?UTF-8?q?tsj:=20=E5=AE=9E=E7=8E=B0=E9=A4=90=E9=A5=AE?= =?UTF-8?q?=E6=B2=B9=E7=83=9F=E8=AE=BE=E6=96=BD=E5=BC=B9=E7=AA=97=E7=9A=84?= =?UTF-8?q?=E9=9D=99=E6=80=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../modals/RestaurantOilAlarm/index.tsx | 39 +-- .../modals/RestaurantOilFacility/index.less | 171 +++++++++++++ .../modals/RestaurantOilFacility/index.tsx | 239 ++++++++++++++++++ src/pages/GlobalModalServices/registry.tsx | 14 + .../MapContainer/AreaSelector/index.tsx | 6 + .../components/common/ModuleTitle/index.less | 43 ++++ .../components/common/ModuleTitle/index.tsx | 40 +++ 7 files changed, 514 insertions(+), 38 deletions(-) create mode 100644 src/pages/GlobalModalServices/modals/RestaurantOilFacility/index.less create mode 100644 src/pages/GlobalModalServices/modals/RestaurantOilFacility/index.tsx create mode 100644 src/pages/Home_v_2504/components/common/ModuleTitle/index.less create mode 100644 src/pages/Home_v_2504/components/common/ModuleTitle/index.tsx diff --git a/src/pages/GlobalModalServices/modals/RestaurantOilAlarm/index.tsx b/src/pages/GlobalModalServices/modals/RestaurantOilAlarm/index.tsx index 483e468d..f6f11e5b 100644 --- a/src/pages/GlobalModalServices/modals/RestaurantOilAlarm/index.tsx +++ b/src/pages/GlobalModalServices/modals/RestaurantOilAlarm/index.tsx @@ -5,42 +5,7 @@ import SmoothLineChart from '@/components/V2504/SmoothLineChart'; import DescriptionItem from '@/components/DescriptionItem'; import BlueTable from '@/components/BlueTable'; import { ColumnsType } from 'antd/es/table'; - -// 模块标题组件 -const ModuleTitle: React.FC<{ - title: string; - showDateSelector?: boolean; - dateType?: string; - onDateTypeChange?: (type: string) => void; -}> = ({ title, showDateSelector = false, dateType = 'day', onDateTypeChange }) => { - return ( -
-
{title}
- {showDateSelector && ( -
-
onDateTypeChange && onDateTypeChange('day')} - > - 日 -
-
onDateTypeChange && onDateTypeChange('month')} - > - 月 -
-
onDateTypeChange && onDateTypeChange('year')} - > - 年 -
-
- )} -
- ); -}; +import ModuleTitle from '@/pages/Home_v_2504/components/common/ModuleTitle'; // 告警详情弹窗组件 const RestaurantOilAlarm: React.FC = () => { @@ -64,8 +29,6 @@ const RestaurantOilAlarm: React.FC = () => { { name: '油烟浓度', value: 0.222, unit: 'mg/m³' }, { name: '颗粒物浓度', value: 0.222, unit: 'mg/m³' }, { name: '非甲烷总烃', value: 0.222, unit: 'mg/m³' }, - // { name: '风机状态', unit: '' }, - // { name: '净化器状态', unit: '' }, { name: '风机状态', value: '开', unit: '' }, { name: '净化器状态', value: '关', unit: '' }, ]; diff --git a/src/pages/GlobalModalServices/modals/RestaurantOilFacility/index.less b/src/pages/GlobalModalServices/modals/RestaurantOilFacility/index.less new file mode 100644 index 00000000..431d153f --- /dev/null +++ b/src/pages/GlobalModalServices/modals/RestaurantOilFacility/index.less @@ -0,0 +1,171 @@ +.container { + width: 100%; + height: 100%; + box-sizing: border-box; +} + +.topRow { + margin-bottom: 24px; +} + +.enterpriseInfo { + width: 550px; + height: 246px; + background: rgba(57, 122, 183, 0.2); + border-radius: 20px; + position: relative; + + .infoContent { + height: 148px; + overflow-y: auto; + padding: 0 28px; + + /* 隐藏滚动条 */ + &::-webkit-scrollbar { + display: none; + } + scrollbar-width: none; + -ms-overflow-style: none; + } + + .scrollArea { + width: 100%; + } + + .infoItem { + display: flex; + align-items: flex-start; + + .label { + color: rgb(203, 237, 255); + font-family: 思源黑体; + font-size: 16px; + font-weight: 400; + line-height: 23px; + white-space: nowrap; + } + + .value { + color: rgb(255, 255, 255); + font-family: 思源黑体; + font-size: 16px; + font-weight: 400; + line-height: 23px; + flex: 1; + } + } +} + +.realTimeStatus { + width: 810px; + height: 250px; + background: rgba(57, 122, 183, 0.2); + border-radius: 20px; + position: relative; + + .statusCards { + padding: 0 0 0 20px; + } + + .statusCard { + width: 242px; + height: 70px; + background: rgba(57, 122, 183, 0.2); + border-radius: 20px; + display: flex; + align-items: center; + justify-content: flex-start; + padding: 11px 0 0 25px; + position: relative; + } +} + +.monitoringDetails { + width: 1387px; + height: 430px; + background: rgba(57, 122, 183, 0.2); + border-radius: 20px; + position: relative; + + .tableContainer { + padding: 0 20px; + height: calc(100% - 52px); + overflow: hidden; + + /* 自定义表格样式 */ + :global { + // 表格行样式 + .ant-table-row { + background: rgba(57, 122, 183, 0.2); + border-radius: 16px; + margin-bottom: 13px; + height: 50px; + } + + // 表格单元格样式 + .ant-table-cell { + border-bottom: none !important; + color: rgb(255, 255, 255); + font-family: 思源黑体; + font-size: 18px; + font-weight: 500; + line-height: 26px; + padding: 8px 16px; + } + + // 表头单元格样式 + .ant-table-thead .ant-table-cell { + color: rgb(188, 206, 233); + font-family: 微软雅黑; + font-size: 16px; + font-weight: 400; + line-height: 21px; + background: transparent; + border-bottom: none; + padding: 8px 26px; + } + + /* 隐藏表格滚动条样式 */ + .ant-table-body { + scrollbar-width: none; + -ms-overflow-style: none; + } + + .ant-table-body::-webkit-scrollbar { + display: none; + } + + .ant-table-scroll .ant-table-body-wrapper { + scrollbar-width: none; + -ms-overflow-style: none; + } + + .ant-table-scroll .ant-table-body-wrapper::-webkit-scrollbar { + display: none; + } + } + } +} + +.statusTag { + width: 50px; + height: 22px; + border-radius: 6px; + display: flex; + align-items: center; + justify-content: center; + font-family: 思源黑体; + font-size: 12px; + font-weight: 400; + line-height: 17px; +} + +.normalStatus { + background: rgba(71, 223, 155, 0.2); + color: rgb(33, 188, 92); +} + +.timeoutStatus { + background: rgba(255, 130, 130, 0.2); + color: rgb(255, 119, 119); +} \ No newline at end of file diff --git a/src/pages/GlobalModalServices/modals/RestaurantOilFacility/index.tsx b/src/pages/GlobalModalServices/modals/RestaurantOilFacility/index.tsx new file mode 100644 index 00000000..b82ff37b --- /dev/null +++ b/src/pages/GlobalModalServices/modals/RestaurantOilFacility/index.tsx @@ -0,0 +1,239 @@ +import React, { useState, useEffect } from 'react'; +import { Flex, Space } from 'antd'; +import styles from './index.less'; +import DescriptionItem from '@/components/DescriptionItem'; +import BlueTable from '@/components/BlueTable'; +import { ColumnsType } from 'antd/es/table'; +import ModuleTitle from '@/pages/Home_v_2504/components/common/ModuleTitle'; + +// 餐饮油烟设施弹窗组件 +const RestaurantOilFacility: React.FC = () => { + // 日期选择器状态 + const [dateType, setDateType] = useState('day'); + + // 企业详情数据 + const enterpriseInfo = { + enterpriseName: '辣斗拉火锅春熙路店', + deviceNum: '102305333220', + contactPerson: '李经理', + contactPhone: '13802232223', + address: '锦江区牛市口街道办事处双桂路99号', + }; + + // 实时运行状态数据 + const statusData = [ + { name: '油烟浓度', value: 0.222, unit: 'mg/m³' }, + { name: '颗粒物浓度', value: 0.222, unit: 'mg/m³' }, + { name: '非甲烷总烃', value: 0.222, unit: 'mg/m³' }, + { name: '风机状态', value: '开', unit: '' }, + { name: '净化器状态', value: '开', unit: '' }, + ]; + + // 监测详情数据 + interface MonitoringData { + id: string; + monitoringTime: string; + oilConcentration: string; + particleConcentration: string; + nmhc: string; + fanStatus: string; + purifierStatus: string; + status: string; + } + + const [monitoringData, setMonitoringData] = useState([]); + + // 监测详情表格列定义 + const columns: ColumnsType = [ + { + title: '序号', + dataIndex: 'id', + key: 'id', + width: 80, + }, + { + title: '监测时间', + dataIndex: 'monitoringTime', + key: 'monitoringTime', + width: 180, + }, + { + title: '油烟浓度 (mg/m³)', + dataIndex: 'oilConcentration', + key: 'oilConcentration', + width: 160, + }, + { + title: '颗粒物浓度 (mg/m³)', + dataIndex: 'particleConcentration', + key: 'particleConcentration', + width: 160, + }, + { + title: '非甲烷总烃 (mg/m³)', + dataIndex: 'nmhc', + key: 'nmhc', + width: 160, + }, + { + title: '风机状态', + dataIndex: 'fanStatus', + key: 'fanStatus', + width: 120, + }, + { + title: '净化器状态', + dataIndex: 'purifierStatus', + key: 'purifierStatus', + width: 120, + }, + { + title: '状态', + dataIndex: 'status', + key: 'status', + width: 100, + render: (text) => ( +
+ {text} +
+ ), + }, + ]; + + // 加载数据 + useEffect(() => { + // 生成监测详情数据 + const generateMonitoringData = () => { + const data: MonitoringData[] = []; + const now = new Date(); + const statusOptions = ['正常', '超时']; + const deviceStatusOptions = ['开', '关']; + + for (let i = 0; i < 20; i++) { + const monitoringTime = new Date(now.getTime() - i * 60 * 60 * 1000); + const formattedTime = monitoringTime.toLocaleString('zh-CN', { + month: '2-digit', + day: '2-digit', + hour: '2-digit', + minute: '2-digit', + second: '2-digit', + }); + + data.push({ + id: (i + 1).toString(), + monitoringTime: formattedTime, + oilConcentration: (Math.random() * 0.3 + 0.2).toFixed(3), + particleConcentration: (Math.random() * 0.3 + 0.2).toFixed(3), + nmhc: (Math.random() * 0.3 + 0.2).toFixed(3), + fanStatus: deviceStatusOptions[Math.floor(Math.random() * deviceStatusOptions.length)], + purifierStatus: deviceStatusOptions[Math.floor(Math.random() * deviceStatusOptions.length)], + status: statusOptions[Math.floor(Math.random() * statusOptions.length)], + }); + } + + setMonitoringData(data); + }; + + generateMonitoringData(); + }, [dateType]); + + const valueStyle = { + color: 'rgb(89, 238, 255)', + fontFamily: 'D-DIN', + fontSize: '24px', + fontWeight: 700, + } + const textValueStyle = { + ...valueStyle, + fontSize: '20px', + } + return ( +
+ + {/* 企业详情 */} +
+ +
+ +
+ 企业名称： + {enterpriseInfo.enterpriseName} +
+
+ 设备编号： + {enterpriseInfo.deviceNum} +
+
+ 联系人： + {enterpriseInfo.contactPerson} +
+
+ 联系电话： + {enterpriseInfo.contactPhone} +
+
+ 企业地址： + {enterpriseInfo.address} +
+ +
+
+ + {/* 实时运行状态 */} +
+ + + {statusData.map((item, index) => ( +
+ +
+ ))} + +
+ + + {/* 监测详情 */} +
+ +
+ +
+
+
+ ); +}; + +export default RestaurantOilFacility; \ No newline at end of file diff --git a/src/pages/GlobalModalServices/registry.tsx b/src/pages/GlobalModalServices/registry.tsx index e0961de1..6a0388af 100644 --- a/src/pages/GlobalModalServices/registry.tsx +++ b/src/pages/GlobalModalServices/registry.tsx @@ -50,6 +50,7 @@ import PipelineMonitor from './modals/PipelineMonitor'; import PipelineMonitorDetail from './modals/PipelineMonitorDetail'; import PipelinePassage from './modals/PipelinePassage'; import RestaurantOilAlarm from './modals/RestaurantOilAlarm'; +import RestaurantOilFacility from './modals/RestaurantOilFacility'; import SanitationDisp from './modals/SanitationDisp'; import SanitationEvent from './modals/SanitationEvent'; import SanitationResource from './modals/SanitationResource'; @@ -794,6 +795,19 @@ export default class Registry { defaultProps: {}, modal: RestaurantOilAlarm, }, + /** + * 餐饮油烟设施详情 + * @module RestaurantOilFacility + */ + RestaurantOilFacility: { + defaultConfig: { + w: 1452, + h: 848, + title: '餐饮油烟设施详情', + }, + defaultProps: {}, + modal: RestaurantOilFacility, + }, }; static get(modalKey: ModalKey) { diff --git a/src/pages/Home_v_2504/components/MapContainer/AreaSelector/index.tsx b/src/pages/Home_v_2504/components/MapContainer/AreaSelector/index.tsx index eccf2617..6500fc36 100644 --- a/src/pages/Home_v_2504/components/MapContainer/AreaSelector/index.tsx +++ b/src/pages/Home_v_2504/components/MapContainer/AreaSelector/index.tsx @@ -92,6 +92,12 @@ const AreaSelector: React.FC = () => { return; } + if (key === 'restaurant') { + // 点击餐饮企业按钮，显示弹窗 + dispatch.push('RestaurantOilFacility'); + return; + } + if (activeLevel1 === key) { // 如果点击当前已激活的按钮，则取消选中 setActiveLevel1(null); diff --git a/src/pages/Home_v_2504/components/common/ModuleTitle/index.less b/src/pages/Home_v_2504/components/common/ModuleTitle/index.less new file mode 100644 index 00000000..77eceab3 --- /dev/null +++ b/src/pages/Home_v_2504/components/common/ModuleTitle/index.less @@ -0,0 +1,43 @@ +.moduleTitle { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 21px; + + .title { + color: rgb(179, 214, 247); + font-family: 微软雅黑; + font-size: 20px; + font-weight: 700; + line-height: 26px; + margin: 26px 0 0 28px; + } + + .dateSelector { + display: flex; + gap: 8px; + margin-right: 33px; + margin-top: 18px; + + .dateItem { + width: 60px; + height: 30px; + background: rgb(18, 61, 102); + border-radius: 25px; + display: flex; + justify-content: center; + align-items: center; + color: rgb(97, 148, 199); + font-family: 'DingTalk JinBuTi'; + font-size: 16px; + font-weight: 400; + line-height: 19px; + cursor: pointer; + + &.active { + background: linear-gradient(180.00deg, rgb(28, 192, 255), rgb(82, 148, 255) 100%); + color: rgb(255, 255, 255); + } + } + } +} \ No newline at end of file diff --git a/src/pages/Home_v_2504/components/common/ModuleTitle/index.tsx b/src/pages/Home_v_2504/components/common/ModuleTitle/index.tsx new file mode 100644 index 00000000..606b1d37 --- /dev/null +++ b/src/pages/Home_v_2504/components/common/ModuleTitle/index.tsx @@ -0,0 +1,40 @@ +import React from 'react'; +import styles from './index.less'; + +// 模块标题组件 +const ModuleTitle: React.FC<{ + title: string; + showDateSelector?: boolean; + dateType?: string; + onDateTypeChange?: (type: string) => void; +}> = ({ title, showDateSelector = false, dateType = 'day', onDateTypeChange }) => { + return ( +
+
{title}
+ {showDateSelector && ( +
+
onDateTypeChange && onDateTypeChange('day')} + > + 日 +
+
onDateTypeChange && onDateTypeChange('month')} + > + 月 +
+
onDateTypeChange && onDateTypeChange('year')} + > + 年 +
+
+ )} +
+ ); +}; + +export default ModuleTitle; \ No newline at end of file -- GitLab