import { getPendingList } from '@/services/message'; import { getComparisonData } from '@/services/OperationManagement'; import { queryConditionSnapshot } from '@/services/SmartOps'; import { getToken, UnityAction } from '@/utils/utils'; import { LoadingOutlined } from '@ant-design/icons'; import { connect, useParams, useRequest } from '@umijs/max'; import { Popover } from 'antd'; import dayjs from 'dayjs'; import { useEffect, useState } from 'react'; import { getScadaPage } from '../../services/OperationManagement'; import styles from './index.less'; const HomePage = (props) => { const { projectId } = useParams(); const { data } = useRequest(queryConditionSnapshot, { defaultParams: [{ project_id: projectId }], pollingInterval: 10 * 1000, }); const getPositionPst = (e) => { const width = document.body.clientWidth; const height = document.body.clientHeight; const xPst = (e.clientX / width).toFixed(2); const yPst = (e.clientY / height).toFixed(2); return xPst + '-' + yPst; }; const webMouseEvent = { onMouseUp: (e) => { UnityAction.sendMsg('PointerOut', getPositionPst(e)); }, onMouseDown: (e) => { UnityAction.sendMsg('PointerIn', getPositionPst(e)); }, }; useEffect(() => { localStorage.width = document.documentElement.getBoundingClientRect().width; window.refreshRem(); document.body.style.backgroundColor = 'transparent'; }, []); return (
); }; const LeftContent = (props) => { const { data } = props; return (
{/* */} {/* */}
); }; const CenterContent = (props) => { const { data } = props; return (
{/* */}
); }; const RightContent = (props) => { const { data } = props; return (
{/* */} {/* */}
); }; const getValue = (str) => { const result = str?.match(/.*?(\d+(?:\.\d+)?)\D*$/); if (result && result[1]) return result[1]; return 0; }; // 水厂工况 const SmartWork = (props) => { const { data } = props; return (
UnityAction.sendMsg('menuItem', '工况管理')} > <div className={styles.scoreBox}> <div className={styles.circle}> <div className={styles.score}>{data?.score}</div> <div className={styles.grade}>{data?.grade}</div> </div> <div className={styles.scoreTitle}> 当前运行{data?.grade},可继续优化 </div> </div> <div className={styles.time}> {dayjs(data?.clac_time).format('YYYY-MM-DD HH:mm')} </div> </div> ); }; // 水量监测 const WaterAmt = (props) => { const { data } = props; const { projectId } = useParams(); return ( <div className={styles.waterAmt} onClick={() => UnityAction.sendMsg('menuItem', '水量监测')} > <Title title="水量监测" /> <div className={styles.boxTip}>当前进水稳定,出水稳定</div> <ul> <li> <div className={styles.value}>{getValue(data?.fwa)}</div> <div className={styles.btn1}>进水量(m³/h)</div> </li> <li> <div className={styles.value}>{getValue(data?.dwa)}</div> <div className={styles.btn2}>产水量(m³/h)</div> </li> </ul> </div> ); }; // 水质监测 const WaterQuality = (props) => { const { data } = props; const { projectId } = useParams(); return ( <div className={styles.waterQuality} onClick={() => UnityAction.sendMsg('menuItem', '水质监测')} > <Title title="水质监测" /> <div className={styles.boxTip}>水质监测较好</div> <ul> <li style={{ width: '60%' }}> <div className={styles.valueLong}>{getValue(data?.dtds)}</div> <div className={styles.btn1}>外供水电导率(µs/cm)</div> </li> <li style={{ width: '40%' }}> <div className={styles.valueLong}>{data?.dph || 0}</div> <div className={styles.btn2}>外供水(PH)</div> </li> </ul> </div> ); }; // 系统自检 const SelfInspection = connect(({ eqSelfInspection, loading }) => ({ autoReport: eqSelfInspection.autoReport, loading: loading.models['eqSelfInspection'], }))((props) => { const { autoReport, dispatch, loading } = props; const { projectId } = useParams(); const renderStatus = () => { if (loading) return <LoadingOutlined />; if (autoReport.Status > 0) { return ( <span className={styles.text} style={{ color: '#FE5850' }}> 异常 </span> ); } return ( <span className={styles.text} style={{ color: '' }}> 正常 </span> ); }; useEffect(() => { dispatch({ type: 'eqSelfInspection/getAutoPatrol', payload: { projectId, }, }); }, []); return ( <div className={styles.selfInspection} onClick={() => UnityAction.sendMsg('menuItem', '系统自检')} > <Title title="系统自检" /> <div className={styles.selfCon}> <div className={styles.circle}>{renderStatus()}</div> <div className={styles.texting}>自检中</div> </div> <div className={styles.time}> {dayjs(autoReport.CreatedTime).format('YYYY-MM-DD HH:mm')} </div> {/* <div className={styles.insTag}>自检中</div> */} {/* <div className={styles.insStatus}>{renderStatus()}</div> <div className={styles.time} style={{ marginBottom: 30 }}> {dayjs(autoReport.CreatedTime).format('YYYY-MM-DD HH:mm')} </div> */} </div> ); }); // 能耗监测 const Electric = (props) => { const { data } = props; const [open, setOpen] = useState(false); const content = ( <div className={styles.popoverContent}> <p>理论值规则:</p> <p>分为高/中/低温3档,</p> <p>高温为≥25℃,低温为<20℃,中温为≥20且<25℃</p> <p>当前温度为近一天平均温度</p> </div> ); return ( <div className={styles.electric} onClick={() => UnityAction.sendMsg('menuItem', '能耗监测')} > <Title title={'能耗监测'} /> <div className={`password-eye ${styles.eye} ${open ? 'open' : ''}`} onClick={(e) => { e.stopPropagation(); setOpen(!open); }} ></div> <ul> <li> <div className={styles.value}> {open ? getValue(data?.elec_unit) : '*****'} </div> <div className={styles.btn1}>吨水电耗</div> </li> <li> <div className={styles.value}> {/* {open ? getValue(data?.elec) : '*****'} */} 12312312 </div> <Popover title={content}> <div className={styles.btn1} onClick={(e) => e.stopPropagation()}> 理论值(KWh/m³) <i className={styles.iconAlert}></i> </div> </Popover> </li> </ul> </div> ); }; // 药耗监测 const Medicine = () => { const { projectId } = useParams(); const time = dayjs().format('YYYY-MM'); const [open, setOpen] = useState(false); const { data } = useRequest(getComparisonData, { defaultParams: [ { project_id: projectId, start: time, end: time, type: 1, flag: 1, }, ], formatResult(res) { return res[0]; }, }); const content = ( <div className={styles.popoverContent}> <p>理论值规则:</p> <p>分为高/中/低温3档,</p> <p>高温为≥25℃,低温为<20℃,中温为≥20且<25℃</p> <p>当前温度为近一天平均温度</p> </div> ); return ( <div className={styles.medicine} onClick={() => UnityAction.sendMsg('menuItem', '药耗监测')} > <Title title={'药耗监测'} /> <div className={`password-eye ${styles.eye} ${open ? 'open' : ''}`} onClick={(e) => { e.stopPropagation(); setOpen(!open); }} ></div> <ul> <li> <div className={styles.valueLong}> {open ? data?.value?.toFixed(2) : '*****'} </div> <Popover title={content}> <div className={styles.btn1} onClick={(e) => e.stopPropagation()}> 当月吨水药成本(元) <i className={styles.iconAlert}></i> </div> </Popover> </li> </ul> </div> ); }; // 工艺监控 const Scada = () => { const { projectId } = useParams(); const { data } = useRequest(getScadaPage, { defaultParams: [{ project_id: projectId }], formatResult: (res) => { let domain = location.host.includes('pad.greentech.com.cn') ? 'https://metawant.greentech.com.cn/' : 'http://47.96.12.136:8788/'; const token = getToken(); const pageList = res?.filter((item) => item.hide); const urls = pageList.map( (item) => `${domain}smart-water/scada/index.html#/3dview/${projectId}/${item.id}?JWT-TOKEN=${token}&hideTitle=true&pauseLoadRealTimeData=true`, ); return urls.splice(0, 1); }, }); return ( <div className={styles.scadaMain} onClick={() => UnityAction.sendMsg('menuItem', '工艺监控')} > <Title title="工艺监控" /> <div style={{ width: '707px', height: '279px' }}> {data?.map((url) => ( <iframe key={url} style={{ width: '707px', height: '279px', borderRadius: '0 0 44px 0', }} frameborder="0" src={url} /> ))} <div className={styles.mask}></div> </div> </div> ); }; // 待办事项 const Backlog = (props) => { const { projectId } = useParams(); const { data, loading } = useRequest(getPendingList, { defaultParams: [{ project_id: projectId }], }); const handleClick = (item) => { if (item.type === 0) { // task UnityAction.sendMsg('OpenTaskModal', `mandate_id=${item.origin_id}`); } else { // order UnityAction.sendMsg( 'OpenWorkOrderModal', `order_id=${item.origin_id}&order_type=${item.origin_type}`, ); } }; return ( <div className={styles.backlogMain} onClick={() => UnityAction.sendMsg('menuItem', '待办事项')} > <Title title={<div style={{ display: 'flex' }}>待办事项</div>} /> <div className={styles.backlog}> <div> {data?.map((item) => ( <div key={item.connect} className={styles.item} onClick={(e) => { e.stopPropagation(); handleClick(item); }} > <div className={styles.createTime}> {dayjs(item.time).format('MM-DD HH:mm')} </div> <div className={styles.titleCon}> <div className={styles.point} /> <div className={styles.titleText}>{item.title}</div> </div> <div className={styles.bottomCon}>{item.content}</div> </div> ))} </div> </div> </div> ); }; const Title = ({ title }) => { return ( <div className={styles.titleContent}> <div className={styles.line} /> <div className={styles.boxTitle}>{title}</div> </div> ); }; const Box = ({ title, children, onClick, small }) => { return ( <div className={`${styles.box} ${small ? '' : styles.boxH}`} onClick={onClick} > <div className={styles.titleContent}> <div className={styles.line} /> <div className={styles.boxTitle}>{title}</div> </div> {/* <span className={styles.boxTitle}> <div className={styles.line}></div> {title} </span> */} {children} </div> ); }; export default HomePage;