diff --git a/src/layout/FullScreen.js b/src/layout/FullScreen.js index e48e392..fd7da70 100644 --- a/src/layout/FullScreen.js +++ b/src/layout/FullScreen.js @@ -44,6 +44,10 @@ class FullScreen extends React.Component { constructor(props) { super(props); this.state = { + safetySloganOne: "", + animationDuration: 20, + sliderColor: '#de4e58', + sliderSize: '24px', screenWidh: window.screen.width > 2000 ? true : false, nowDate: "", checkData: [ @@ -268,7 +272,7 @@ class FullScreen extends React.Component { // nowDate:this.getDate() // }) // },1000) - +this.getHomeTitle() this.completeChart(this.state.completeData); // this.completeChart(this.state.completeDatatwo); // this.completeChart(this.state.completeDatathree); @@ -296,6 +300,27 @@ class FullScreen extends React.Component { componentWillUnmount() { clearInterval(this.timer); } + getHomeTitle = () => { + var orgId = storage("lacal").getItem("webOrgId")?.val; //登录后有存储登录信息 + let json = initFilter(orgId); + this.props.dispatch({ + type: "app/getDataByPost", + payload: json, + url: "PF/HomeTitle/OrderPaged", + onComplete: (ret) => { + if (this._isMounted&&ret) { + this.setState({ + safetySloganOne: ret[0].TITLE, + // safetySloganOne: "1.安全方针：以人为本、关注健康、依法治企、安全发展。 2.安全理念：一切风险皆可控，一切事故皆可防！3.安全方针：以人为本、关注健康、依法治企、安全发展。4.安全方针：以人为本、关注健康、依法治企、安全发展。5.安全方针：以人为本、关注健康、依法治企、安全发展。 6.安全理念：一切风险皆可控，一切事故皆可防！7.安全方针：以人为本、关注健康、依法治企、安全发展。8.安全方针：以人为本、关注健康、依法治企、安全发展。", + animationDuration: ret[0].SECOND, + sliderColor: ret[0].COCOR, + sliderSize: ret[0].FONTSIZE + + }); + } + }, + }); + } getDate = () => { var myDate = new Date(); var year = myDate.getFullYear(); //获取当前年 @@ -923,6 +948,7 @@ class FullScreen extends React.Component { }; render() { + const { safetySloganOne, animationDuration, sliderColor, sliderSize } = this.state; return ( @@ -957,15 +983,17 @@ class FullScreen extends React.Component { }} >
-

- 安全方针：安全第一、综合治理、控制风险、科学发展 -                    - 安全理念：一切风险皆可控，一切事故皆可防！ -

-
+ className="slide-style" + style={{ + '--animation-duration': `${animationDuration}s`, // 动态设置动画时长 + '--slider-color': `${sliderColor}`, // 动态设置颜色 + '--slider-size': `${sliderSize}px`, // 动态设置颜色 + }} + > +

+ {safetySloganOne || '暂无公告'} +

+ {/* */} - {/* */} - {window.location.host == "121.41.2.71:8001" ? : ""} + + {/* {window.location.host == "121.41.2.71:8001" ? : ""} */} diff --git a/src/layout/Sider.js b/src/layout/Sider.js index e933b1e..82be6e5 100644 --- a/src/layout/Sider.js +++ b/src/layout/Sider.js @@ -8,7 +8,7 @@ import { MenuUnfoldOutlined, MenuFoldOutlined, } from "@ant-design/icons"; -import { Divider, Menu, Switch, Icon, Button } from "antd"; +import { Divider, Menu, Switch, Icon, Button, Modal } from "antd"; import { connect } from "dva"; import { withRouter, matchPath } from "dva/router"; import { Scrollbars } from "react-custom-scrollbars"; @@ -17,6 +17,12 @@ import { $consts } from "../plugins"; import "./sider.less"; import MenuItem from "antd/lib/menu/MenuItem"; import SubMenu from "antd/lib/menu/SubMenu"; +import FullScreenPage from "./FullScreen"; +import { + requestFullScreenMethod, +} from "../utils/common"; + + const Sider = (props) => { @@ -41,17 +47,61 @@ const Sider = (props) => { data[menuId] ? (data[menuId] = "") : (data[menuId] = menuId); setMenuShrink(data); }; - + const [showModal, setshowModal] = useState(false); + const escFunction = () => { + let isFull = !!( + document.fullscreen || + document.mozFullScreen || + document.webkitIsFullScreen || + document.webkitFullScreen || + document.msFullScreen + ); + if (isFull) { + // / + } else { + // requestFullScreenMethod(document.body); + setshowModal(false); + setActiveMenu(null); + } + }; + useEffect(() => { + // 监听退出全屏事件 --- chrome 用 esc 退出全屏并不会触发 keyup 事件 + document.addEventListener( + "webkitfullscreenchange", + escFunction + ); /* Chrome, Safari and Opera */ + document.addEventListener("mozfullscreenchange", escFunction); /* Firefox */ + document.addEventListener( + "fullscreenchange", + escFunction + ); /* Standard syntax */ + document.addEventListener( + "msfullscreenchange", + escFunction + ); /* IE / Edge */ + return () => { + //销毁时清除监听 + document.removeEventListener("webkitfullscreenchange", escFunction); + document.removeEventListener("mozfullscreenchange", escFunction); + document.removeEventListener("fullscreenchange", escFunction); + document.removeEventListener("MSFullscreenChange", escFunction); + }; + }, []); /** 回到首页 */ const navToHome = () => { setActiveMenu(null); props.history.push({ pathname: "/home" }); }; -const clickMenu = ()=>{ - collapsed===true?setCollapsed(false):setCollapsed(false) - - -} + const navToLarge = () => { + setActiveMenu('largeScreen'); + setshowModal(true); + requestFullScreenMethod(document.body); + } + const clickMenu = () => { + collapsed === true ? setCollapsed(false) : setCollapsed(false) + + + } /** 子菜单路由 */ const navToMenu = (menu) => { props.history.push({ pathname: `/main/${menu.ID}` }); @@ -160,11 +210,11 @@ const clickMenu = ()=>{ const toggleCollapsed = () => { setCollapsed(!collapsed); }; - useEffect(()=>{ - if(collapsed == false) { + useEffect(() => { + if (collapsed == false) { setCollapsed(true); } - },[props.repost]) + }, [props.repost]) // console.log(props.repost,'21312313213213123') /** 登录页隐藏 */ @@ -172,138 +222,162 @@ const clickMenu = ()=>{ return (
-
- { + setshowModal(false); }} - // defaultOpenKeys={['sub1']} - inlineIndent="16" - onClick={clickMenu} + onCancel={() => { + setshowModal(false); + }} + className="fullScreen" > - - {/* + +
+ + + {/* */} - - 首页 - - - - 常用菜单 - - - } - onTitleClick={clickMenu} - > - {favorMenus.map((menu2, index2) => { - return ( - handleActiveMenu(menu2)} - title={menu2.NAME} - > - + + 首页 + + + {/* */} + + 可视化大屏 + + + + 常用菜单 + - {menu2.NAME} - + } + onTitleClick={clickMenu} + > + {favorMenus.map((menu2, index2) => { + return ( + handleActiveMenu(menu2)} + title={menu2.NAME} + > + + + {menu2.NAME} + + ); + })} + + + {topMenus.menus.map((menu, index) => { + return ( + + + {menu.Node.NAME} + + + } + onTitleClick={() => { + setCurrMenu(menu.Node); + clickMenu() + }} + + > + {/* 二级 */} + {menu.Children.map((menu1, index1) => { + const isLevel4Menu = menu1.Children?.find( + (mc) => mc.Children?.length + ); + const childMenus = isLevel4Menu + ? [menu] + : menu.Children || []; + return ( + + + {menu1.Node.NAME} + + + } + > + {/* 三级 */} + {menu1.Children.map((menu3, index3) => { + return ( + + isLevel4Menu + ? navToBackend(menu3.Node) + : handleActiveMenu(menu3.Node) + } + title={menu3.Node.NAME} + > + + + {menu3.Node.NAME} + + ); + })} + + ); + })} + ); })} - + - {topMenus.menus.map((menu, index) => { - return ( - - - {menu.Node.NAME} - - - } - onTitleClick={() => { - setCurrMenu(menu.Node); - clickMenu() - }} - - > - {/* 二级 */} - {menu.Children.map((menu1, index1) => { - const isLevel4Menu = menu1.Children?.find( - (mc) => mc.Children?.length - ); - const childMenus = isLevel4Menu - ? [menu] - : menu.Children || []; - return ( - - - { menu1.Node.NAME} - - - } - > - {/* 三级 */} - {menu1.Children.map((menu3, index3) => { - return ( - - isLevel4Menu - ? navToBackend(menu3.Node) - : handleActiveMenu(menu3.Node) - } - title={menu3.Node.NAME} - > - - - {menu3.Node.NAME} - - ); - })} - - ); - })} - - ); - })} -
-
-
- -
- - +
+ +
+ +
); }; diff --git a/src/plugins/consts/services/route.ts b/src/plugins/consts/services/route.ts index f410ccf..db21b45 100644 --- a/src/plugins/consts/services/route.ts +++ b/src/plugins/consts/services/route.ts @@ -7,6 +7,10 @@ export default [ name: 'HOME', value: '/home' }, + { + name: 'GROUPHOME', + value: '/grouphome' + }, { name: 'MAIN', value: '/main/:menuId' diff --git a/src/routes/GroupHome.js b/src/routes/GroupHome.js index 7da9a1a..0368bb1 100644 --- a/src/routes/GroupHome.js +++ b/src/routes/GroupHome.js @@ -88,9 +88,16 @@ const contentStyle = { }; class GroupHome extends React.Component { + _isMounted = false; // 标记组件是否已挂载 + constructor(props) { super(props); this.state = { + noticeData: [], // 公告列表数据 + currentNoticePage: 1, // 当前公告页码 + noticePageSize: 4, // 每页公告数量（与图片一致，默认显示4条） + totalNoticeCount: 0, // 公告总数量 + activeNoticeTab: "all", // 活跃公告标签（全部/集团发布/公司发布，参考图片） isNaN: false, scoreVisible: false, scoreTotalVisible: false, @@ -101,8 +108,8 @@ class GroupHome extends React.Component { visible: false, safetySloganOne: "", animationDuration: 20, - sliderColor:'#de4e58', - sliderSize:'24px', + sliderColor: '#de4e58', + sliderSize: '24px', safetySloganTwo: "", noticeTitle: "", tmpData: {}, @@ -110,8 +117,8 @@ class GroupHome extends React.Component { pagination: {}, retData: [], chartData: [], - displayStr: null, - displayNum: 24, + displayStr: '', + displayNum: 16, columnData: [], columnFields: [], delayData: [], @@ -210,73 +217,62 @@ class GroupHome extends React.Component { } componentDidMount() { - if (localStorage.getItem("webOrgId") !== '00300000-0000-0000-0000-000000000000') { - history.replace('/home') + this._isMounted = true; // 组件挂载时设为true + const currentPath = this.props.location.pathname; + console.log(currentPath, '999') + if (localStorage.getItem("webOrgId") !== '00300000-0000-0000-0000-000000000000' && currentPath !== '/home') { + this.props.history.replace('/home') + return // props.history.push({ pathname: "/grouphome" }); } if (window.navigator.userAgent.indexOf("Windows") < 1) { window.location.replace(config.guideH5Host); openNotificationMobile("bottomRight"); - this.state.displayStr = "none"; - this.state.displayNum = 24; + return; // 阻止后续代码执行 //alert('手机'); - } else { - this.state.displayStr = ""; - this.state.displayNum = 16; - //alert('PC'); } - this.state.columns = [ - { - width: "450px", - title: "任务名称", - dataIndex: "NOTICE_TITLE", - key: "NOTICE_TITLE", - render: (text, record) => ( - - - this.showEditModal( - record.SOURCE_DATA_ID, - record.SOURCE_FORMCODE, - record.ID, - record.NOTICE_TITLE - ) - } - > - {record.NOTICE_TITLE} - - - ), - }, - { - title: "开始时间", - dataIndex: "TASK_STARTDT", - key: "TASK_STARTDT", - }, - { - title: "结束时间", - dataIndex: "TASK_ENDDT", - key: "TASK_ENDDT", - }, - { - title: "预警状态", - dataIndex: "NOTICE_TYPE", - key: "NOTICE_TYPE", - render: (text, record) => this.ShowState(record), - }, - ]; - this.getTeam(); - this.getHomeTitle() - //定时器功能，暂时不开启 - this.timerID = setInterval( - () => this.getBaseInfoData(1, this.state.tableKey, 5), - 120000 - ); - this.showModalSign(); - this.getBaseInfoData(1, 1, 5); - this.setMessageData(); - this.state.scoreNoneColumns = [ - { + this.setState({ + columns: [ + { + width: "450px", + title: "任务名称", + dataIndex: "NOTICE_TITLE", + key: "NOTICE_TITLE", + render: (text, record) => ( + + + this.showEditModal( + record.SOURCE_DATA_ID, + record.SOURCE_FORMCODE, + record.ID, + record.NOTICE_TITLE + ) + } + > + {record.NOTICE_TITLE} + + + ), + }, + { + title: "开始时间", + dataIndex: "TASK_STARTDT", + key: "TASK_STARTDT", + }, + { + title: "结束时间", + dataIndex: "TASK_ENDDT", + key: "TASK_ENDDT", + }, + { + title: "预警状态", + dataIndex: "NOTICE_TYPE", + key: "NOTICE_TYPE", + render: (text, record) => this.ShowState(record), + }, + ], + scoreNoneColumns: [{ width: "80px", title: "生产单元", dataIndex: "Nav_ProductionUnit.NAME", @@ -344,149 +340,279 @@ class GroupHome extends React.Component { })} ), + }], + scoreColumns: [ + { + width: "80px", + title: "生产单元", + dataIndex: "Nav_ProductionUnit.NAME", + key: "Nav_ProductionUnit.NAME", + }, + { + width: "80px", + title: "一级要素", + dataIndex: "Nav_Primary.NAME", + key: "Nav_Primary.NAME", + }, + { + width: "80px", + title: "二级要素", + dataIndex: "Nav_Second.NAME", + key: "Nav_Second.NAME", + }, + { + width: "80px", + title: "三级要素", + dataIndex: "Nav_Three.NAME", + key: "Nav_Three.NAME", + }, + { + width: "50px", + title: "考评项目", + dataIndex: "EVALUATION_ITEM", + key: "EVALUATION_ITEM", + render: (text, record) => ( + + { + this.props.app.enums?.PEEvaluationItemEnum.enums[ + record.EVALUATION_ITEM + ] + } + + ), + }, + { + // width: "500px", + title: "考评内容", + dataIndex: "CONTENTS", + key: "CONTENTS", + }, + { + width: "100px", + title: "评分办法", + dataIndex: "DESCRIPTION", + key: "DESCRIPTION", + }, + { + width: "50px", + title: "标准分", + dataIndex: "STANDARDIZED_SCORE", + key: "STANDARDIZED_SCORE", + }, + { + width: "50px", + title: "实得分", + dataIndex: "RESULT_SCORE", + key: "RESULT_SCORE", + }, + { + width: "200px", + title: "不符合说明", + dataIndex: "NON_CONFORMANCE", + key: "NON_CONFORMANCE", + }, + , + { + width: "80px", + title: "评价结论", + dataIndex: "EVALUATION_RESULT", + key: "EVALUATION_RESULT", + render: (text, record) => ( + + { + this.props.app.enums?.PEEvaluationResultEnum.enums[ + record.EVALUATION_RESULT + ] + } + + ), + }, + { + width: "100px", + title: "评价方法", + dataIndex: "Nav_EvaluationMethod", + key: "Nav_EvaluationMethod", + render: (text, record) => ( + + {record.Nav_EvaluationMethod && + record.Nav_EvaluationMethod?.map((item, i) => { + return ( + + + + ); + })} + + ), + }, + ], + scoreTotalColumns: [ + { + title: "生产单元", + dataIndex: "Nav_ProductionUnit.NAME", + key: "Nav_ProductionUnit.NAME", + }, + { + title: "标准化得分", + dataIndex: "NON_STANDARDIZED_SCORE", + key: "NON_STANDARDIZED_SCORE", + }, + { + title: "操作", + dataIndex: "", + key: "", + render: (text, record) => ( + + { + + {" "} + + + + } + + ), + }, + ] + }) + this.getTeam(); + this.getHomeTitle() + //定时器功能，暂时不开启 + this.timerID = setInterval( + () => { + if (this._isMounted) { + this.getBaseInfoData(1, this.state.tableKey, 5) + } }, - ]; - this.state.scoreColumns = [ - { - width: "80px", - title: "生产单元", - dataIndex: "Nav_ProductionUnit.NAME", - key: "Nav_ProductionUnit.NAME", - }, - { - width: "80px", - title: "一级要素", - dataIndex: "Nav_Primary.NAME", - key: "Nav_Primary.NAME", - }, - { - width: "80px", - title: "二级要素", - dataIndex: "Nav_Second.NAME", - key: "Nav_Second.NAME", - }, - { - width: "80px", - title: "三级要素", - dataIndex: "Nav_Three.NAME", - key: "Nav_Three.NAME", - }, - { - width: "50px", - title: "考评项目", - dataIndex: "EVALUATION_ITEM", - key: "EVALUATION_ITEM", - render: (text, record) => ( - - { - this.props.app.enums?.PEEvaluationItemEnum.enums[ - record.EVALUATION_ITEM - ] - } - - ), - }, - { - // width: "500px", - title: "考评内容", - dataIndex: "CONTENTS", - key: "CONTENTS", - }, - { - width: "100px", - title: "评分办法", - dataIndex: "DESCRIPTION", - key: "DESCRIPTION", - }, - { - width: "50px", - title: "标准分", - dataIndex: "STANDARDIZED_SCORE", - key: "STANDARDIZED_SCORE", - }, - { - width: "50px", - title: "实得分", - dataIndex: "RESULT_SCORE", - key: "RESULT_SCORE", - }, - { - width: "200px", - title: "不符合说明", - dataIndex: "NON_CONFORMANCE", - key: "NON_CONFORMANCE", - }, - , - { - width: "80px", - title: "评价结论", - dataIndex: "EVALUATION_RESULT", - key: "EVALUATION_RESULT", - render: (text, record) => ( - - { - this.props.app.enums?.PEEvaluationResultEnum.enums[ - record.EVALUATION_RESULT - ] - } - - ), - }, - { - width: "100px", - title: "评价方法", - dataIndex: "Nav_EvaluationMethod", - key: "Nav_EvaluationMethod", - render: (text, record) => ( - - {record.Nav_EvaluationMethod && - record.Nav_EvaluationMethod?.map((item, i) => { - return ( - - - - ); - })} - - ), - }, - ]; - this.state.scoreTotalColumns = [ - { - title: "生产单元", - dataIndex: "Nav_ProductionUnit.NAME", - key: "Nav_ProductionUnit.NAME", - }, - { - title: "标准化得分", - dataIndex: "NON_STANDARDIZED_SCORE", - key: "NON_STANDARDIZED_SCORE", - }, - { - title: "操作", - dataIndex: "", - key: "", - render: (text, record) => ( - - { - - {" "} - - - - } - - ), - }, - ]; + 120000 + ); + this.showModalSign(); + this.getBaseInfoData(1, 1, 5); + this.setMessageData(); + this.getNoticeData() } + componentWillUnmount() { - this.timerID && clearTimeout(this.timerID); + this._isMounted = false; // 组件卸载时设为false + if (this.timerID) { + clearInterval(this.timerID); + this.timerID = null; + } } + getNoticeData = () => { + const { currentNoticePage, noticePageSize, activeNoticeTab, mineType } = this.state; + const orgId = storage("lacal").getItem("webOrgId")?.val; + // 构建请求参数（按标签筛选：全部/集团/公司） + let json = initFilter(orgId, mineType); + extendRule(json, "pageNum", 1, currentNoticePage); + extendRule(json, "pageSize", 1, noticePageSize); + if (activeNoticeTab === "group") { + extendRule(json, "sourceType", 1, 1); // 1=集团发布 + } else if (activeNoticeTab === "company") { + extendRule(json, "sourceType", 1, 2); // 2=公司发布 + } + this.setState({ + noticeData: [ + { + id: "1", + title: "为表彰先进，树立榜样，激励广大员工积极进取，集团决定开展2023年度优秀员工评选工作...", + source: "集团发布", + date: "08-30", + readStatus: "未读", // 可选：未读/已读 + isImportant: true // 是否重要提醒 + }, + { + id: "2", + title: "根据国家法定节假日安排，结合公司实际情况，现将2023年国庆节放假安排通知如下...", + source: "公司发布", + date: "08-28", + readStatus: "已读", + isImportant: false + }, + { + id: "3", + title: "根据国家法定节假日安排，结合公司实际情况，现将2023年国庆节放假安排通知如下...", + source: "公司发布", + date: "08-28", + readStatus: "已读", + isImportant: false + }, + { + id: "4", + title: "根据国家法定节假日安排，结合公司实际情况，现将2023年国庆节放假安排通知如下...", + source: "公司发布", + date: "08-28", + readStatus: "已读", + isImportant: false + }, + { + id: "5", + title: "根据国家法定节假日安排，结合公司实际情况，现将2023年国庆节放假安排通知如下...", + source: "公司发布", + date: "08-28", + readStatus: "已读", + isImportant: false + }, + { + id: "6", + title: "根据国家法定节假日安排，结合公司实际情况，现将2023年国庆节放假安排通知如下...", + source: "公司发布", + date: "08-28", + readStatus: "已读", + isImportant: false + } + // 更多公告... + ], + totalNoticeCount: 10 // 公告总数 + }) + + // this.props.dispatch({ + // type: "app/getDataByPost", + // url: "PF/Notice/GetNoticeList", // 假设的公告列表接口，需替换为实际接口 + // payload: json, + // onlyData: false, + // onComplete: (data) => { + // if (data && data.IsSuccessful) { + // this.setState({ + // noticeData: data.Data.list, // 公告列表 + // totalNoticeCount: data.Data.total, // 公告总数 + // }); + // } + // }, + // }); + }; + // 公告页码切换 + changeNoticePage = (page) => { + const { totalNoticeCount, noticePageSize } = this.state; + // 边界判断：页码不能小于1，不能大于总页数 + if (page < 1 || page > Math.ceil(totalNoticeCount / noticePageSize)) return; + this.setState({ currentNoticePage: page }, () => { + this.getNoticeData(); // 切换页码后重新请求数据 + }); + }; + + // 公告标签切换（全部/集团发布/公司发布） + switchNoticeTab = (tabType) => { + this.setState({ + activeNoticeTab: tabType, + currentNoticePage: 1, // 切换标签时重置为第1页 + }, () => { + this.getNoticeData(); // 切换标签后重新请求数据 + }); + }; + + // 查看更多公告（跳转至公告详情页或展开全部） + viewMoreNotice = () => { + // 逻辑1：跳转至独立公告页面（推荐） + this.props.history.push({ pathname: "/noticeList", state: { tab: this.state.activeNoticeTab } }); + // 逻辑2：在当前页展开全部公告（备选） + // this.setState({ noticePageSize: this.state.totalNoticeCount }); + }; + showModalSign = () => { var userId = storage("lacal").getItem("userid")?.val; //登录后有存储登录信息 @@ -499,7 +625,7 @@ class GroupHome extends React.Component { url: "FM/User/UserSign", //验证是否有签名照 onComplete: (ret) => { //返回查询结果ret - if (ret) { + if (this._isMounted && ret) { //判断是否有记录 openNotification("topRight"); } @@ -514,13 +640,13 @@ class GroupHome extends React.Component { payload: json, url: "PF/HomeTitle/OrderPaged", onComplete: (ret) => { - if (ret) { + if (this._isMounted && ret) { this.setState({ safetySloganOne: ret[0].TITLE, // safetySloganOne: "1.安全方针：以人为本、关注健康、依法治企、安全发展。 2.安全理念：一切风险皆可控，一切事故皆可防！3.安全方针：以人为本、关注健康、依法治企、安全发展。4.安全方针：以人为本、关注健康、依法治企、安全发展。5.安全方针：以人为本、关注健康、依法治企、安全发展。 6.安全理念：一切风险皆可控，一切事故皆可防！7.安全方针：以人为本、关注健康、依法治企、安全发展。8.安全方针：以人为本、关注健康、依法治企、安全发展。", animationDuration: ret[0].SECOND, - sliderColor:ret[0].COCOR, - sliderSize:ret[0].FONTSIZE + sliderColor: ret[0].COCOR, + sliderSize: ret[0].FONTSIZE }); } @@ -539,7 +665,7 @@ class GroupHome extends React.Component { payload: json, url: "FM/User/Get", onComplete: (ret) => { - if (ret && ret.Nav_Department) { + if (this._isMounted && ret && ret.Nav_Department) { this.setState({ departmentName: ret.Nav_Department.NAME, deparmentType: ret.Nav_Department.DEPARTMENT_TYPE, @@ -723,7 +849,7 @@ class GroupHome extends React.Component { payload: json, onlyData: false, onComplete: (re) => { - if (re && re.IsSuccessful && re.Data.newData) { + if (this._isMounted && re && re.IsSuccessful && re.Data.newData) { this.state.tableData[0].total = re.Data.todoCount; this.state.tableData[1].total = re.Data.timeOverCount; this.state.tableData[2].total = re.Data.doneCount; @@ -1441,7 +1567,7 @@ class GroupHome extends React.Component { fade: true, }; // 在render方法中添加动态样式计算 - const { safetySloganOne, animationDuration,sliderColor,sliderSize } = this.state; + const { safetySloganOne, animationDuration, sliderColor, sliderSize } = this.state; const rowSelection = { onChange: (selectedRowKeys, selectedRows) => { @@ -1953,47 +2079,82 @@ class GroupHome extends React.Component { backgroundColor: "white", }} > -
-
- - 班组活动完成率 -
- {this.state.departmentCompletionData.length > 0 ? ( - -
this.showDetailModal("BI001_HOMEDETAIL")} - > - -
- - ) : null} -
-
+
- {this.state.departmentCompletionData.length > 0 ? ( - - ) : null} + +
+ {/* 公告栏标题栏：标题 + 标签 + 查看更多 */} +
+
+ 公告栏 + {/* 重要提醒标签（参考图片，有重要提醒时显示） */} + {this.state.noticeData.some(item => item.isImportant) && ( + 包含{this.state.noticeData.filter(item => item.isImportant).length}个重要提醒 + )} +
+
+ + + +
+ +
+ + {/* 公告标签切换（全部/集团发布/公司发布，参考图片） */} + + + {/* 公告列表 */} +
    + {this.state.noticeData.length > 0 ? ( + this.state.noticeData.map(notice => ( +
  • this.viewNoticeDetail(notice.id)} // 点击查看公告详情 + > +
    + {notice.title} + {notice.date} +
    +
    + {notice.source === 1 ? "集团发布" : "公司发布"} +
    +
    • + )) + ) : ( +
  • + 暂无公告数据 +
    • + )} +
+ +
+ + {/* */} + {/* 查看更多公告 */} + {/* */} +
+
{/* */} diff --git a/src/routes/Home.js b/src/routes/Home.js index d058f90..3e4f88c 100644 --- a/src/routes/Home.js +++ b/src/routes/Home.js @@ -88,6 +88,8 @@ const contentStyle = { }; class Home extends React.Component { + _isMounted = false; // 标记组件是否已挂载 + constructor(props) { super(props); this.state = { @@ -101,8 +103,8 @@ class Home extends React.Component { visible: false, safetySloganOne: "", animationDuration: 20, - sliderColor:'#de4e58', - sliderSize:'24px', + sliderColor: '#de4e58', + sliderSize: '24px', safetySloganTwo: "", noticeTitle: "", tmpData: {}, @@ -110,8 +112,8 @@ class Home extends React.Component { pagination: {}, retData: [], chartData: [], - displayStr: null, - displayNum: 24, + displayStr: '', + displayNum: 16, columnData: [], columnFields: [], delayData: [], @@ -210,73 +212,61 @@ class Home extends React.Component { } componentDidMount() { - if (localStorage.getItem("webOrgId") == '00300000-0000-0000-0000-000000000000') { - this.props.history.replace('/grouphome') + this._isMounted = true; // 组件挂载时设为true + const currentPath = this.props.location.pathname; + if (localStorage.getItem("webOrgId") == '00300000-0000-0000-0000-000000000000' && currentPath !== '/grouphome') { + this.props.history.replace('/grouphome') + return // props.history.push({ pathname: "/grouphome" }); } if (window.navigator.userAgent.indexOf("Windows") < 1) { window.location.replace(config.guideH5Host); openNotificationMobile("bottomRight"); - this.state.displayStr = "none"; - this.state.displayNum = 24; + return; // 阻止后续代码执行 //alert('手机'); - } else { - this.state.displayStr = ""; - this.state.displayNum = 16; - //alert('PC'); } - this.state.columns = [ - { - width: "450px", - title: "任务名称", - dataIndex: "NOTICE_TITLE", - key: "NOTICE_TITLE", - render: (text, record) => ( - - - this.showEditModal( - record.SOURCE_DATA_ID, - record.SOURCE_FORMCODE, - record.ID, - record.NOTICE_TITLE - ) - } - > - {record.NOTICE_TITLE} - - - ), - }, - { - title: "开始时间", - dataIndex: "TASK_STARTDT", - key: "TASK_STARTDT", - }, - { - title: "结束时间", - dataIndex: "TASK_ENDDT", - key: "TASK_ENDDT", - }, - { - title: "预警状态", - dataIndex: "NOTICE_TYPE", - key: "NOTICE_TYPE", - render: (text, record) => this.ShowState(record), - }, - ]; - this.getTeam(); - this.getHomeTitle() - //定时器功能，暂时不开启 - this.timerID = setInterval( - () => this.getBaseInfoData(1, this.state.tableKey, 5), - 120000 - ); - this.showModalSign(); - this.getBaseInfoData(1, 1, 5); - this.setMessageData(); - this.state.scoreNoneColumns = [ - { + this.setState({ + columns: [ + { + width: "450px", + title: "任务名称", + dataIndex: "NOTICE_TITLE", + key: "NOTICE_TITLE", + render: (text, record) => ( + + + this.showEditModal( + record.SOURCE_DATA_ID, + record.SOURCE_FORMCODE, + record.ID, + record.NOTICE_TITLE + ) + } + > + {record.NOTICE_TITLE} + + + ), + }, + { + title: "开始时间", + dataIndex: "TASK_STARTDT", + key: "TASK_STARTDT", + }, + { + title: "结束时间", + dataIndex: "TASK_ENDDT", + key: "TASK_ENDDT", + }, + { + title: "预警状态", + dataIndex: "NOTICE_TYPE", + key: "NOTICE_TYPE", + render: (text, record) => this.ShowState(record), + }, + ], + scoreNoneColumns: [{ width: "80px", title: "生产单元", dataIndex: "Nav_ProductionUnit.NAME", @@ -344,148 +334,166 @@ class Home extends React.Component { })} ), + }], + scoreColumns: [ + { + width: "80px", + title: "生产单元", + dataIndex: "Nav_ProductionUnit.NAME", + key: "Nav_ProductionUnit.NAME", + }, + { + width: "80px", + title: "一级要素", + dataIndex: "Nav_Primary.NAME", + key: "Nav_Primary.NAME", + }, + { + width: "80px", + title: "二级要素", + dataIndex: "Nav_Second.NAME", + key: "Nav_Second.NAME", + }, + { + width: "80px", + title: "三级要素", + dataIndex: "Nav_Three.NAME", + key: "Nav_Three.NAME", + }, + { + width: "50px", + title: "考评项目", + dataIndex: "EVALUATION_ITEM", + key: "EVALUATION_ITEM", + render: (text, record) => ( + + { + this.props.app.enums?.PEEvaluationItemEnum.enums[ + record.EVALUATION_ITEM + ] + } + + ), + }, + { + // width: "500px", + title: "考评内容", + dataIndex: "CONTENTS", + key: "CONTENTS", + }, + { + width: "100px", + title: "评分办法", + dataIndex: "DESCRIPTION", + key: "DESCRIPTION", + }, + { + width: "50px", + title: "标准分", + dataIndex: "STANDARDIZED_SCORE", + key: "STANDARDIZED_SCORE", + }, + { + width: "50px", + title: "实得分", + dataIndex: "RESULT_SCORE", + key: "RESULT_SCORE", + }, + { + width: "200px", + title: "不符合说明", + dataIndex: "NON_CONFORMANCE", + key: "NON_CONFORMANCE", + }, + , + { + width: "80px", + title: "评价结论", + dataIndex: "EVALUATION_RESULT", + key: "EVALUATION_RESULT", + render: (text, record) => ( + + { + this.props.app.enums?.PEEvaluationResultEnum.enums[ + record.EVALUATION_RESULT + ] + } + + ), + }, + { + width: "100px", + title: "评价方法", + dataIndex: "Nav_EvaluationMethod", + key: "Nav_EvaluationMethod", + render: (text, record) => ( + + {record.Nav_EvaluationMethod && + record.Nav_EvaluationMethod?.map((item, i) => { + return ( + + + + ); + })} + + ), + }, + ], + scoreTotalColumns: [ + { + title: "生产单元", + dataIndex: "Nav_ProductionUnit.NAME", + key: "Nav_ProductionUnit.NAME", + }, + { + title: "标准化得分", + dataIndex: "NON_STANDARDIZED_SCORE", + key: "NON_STANDARDIZED_SCORE", + }, + { + title: "操作", + dataIndex: "", + key: "", + render: (text, record) => ( + + { + + {" "} + + + + } + + ), + }, + ] + }) + this.getTeam(); + this.getHomeTitle() + //定时器功能，暂时不开启 + this.timerID = setInterval( + () => { + if (this._isMounted) { + this.getBaseInfoData(1, this.state.tableKey, 5) + } }, - ]; - this.state.scoreColumns = [ - { - width: "80px", - title: "生产单元", - dataIndex: "Nav_ProductionUnit.NAME", - key: "Nav_ProductionUnit.NAME", - }, - { - width: "80px", - title: "一级要素", - dataIndex: "Nav_Primary.NAME", - key: "Nav_Primary.NAME", - }, - { - width: "80px", - title: "二级要素", - dataIndex: "Nav_Second.NAME", - key: "Nav_Second.NAME", - }, - { - width: "80px", - title: "三级要素", - dataIndex: "Nav_Three.NAME", - key: "Nav_Three.NAME", - }, - { - width: "50px", - title: "考评项目", - dataIndex: "EVALUATION_ITEM", - key: "EVALUATION_ITEM", - render: (text, record) => ( - - { - this.props.app.enums?.PEEvaluationItemEnum.enums[ - record.EVALUATION_ITEM - ] - } - - ), - }, - { - // width: "500px", - title: "考评内容", - dataIndex: "CONTENTS", - key: "CONTENTS", - }, - { - width: "100px", - title: "评分办法", - dataIndex: "DESCRIPTION", - key: "DESCRIPTION", - }, - { - width: "50px", - title: "标准分", - dataIndex: "STANDARDIZED_SCORE", - key: "STANDARDIZED_SCORE", - }, - { - width: "50px", - title: "实得分", - dataIndex: "RESULT_SCORE", - key: "RESULT_SCORE", - }, - { - width: "200px", - title: "不符合说明", - dataIndex: "NON_CONFORMANCE", - key: "NON_CONFORMANCE", - }, - , - { - width: "80px", - title: "评价结论", - dataIndex: "EVALUATION_RESULT", - key: "EVALUATION_RESULT", - render: (text, record) => ( - - { - this.props.app.enums?.PEEvaluationResultEnum.enums[ - record.EVALUATION_RESULT - ] - } - - ), - }, - { - width: "100px", - title: "评价方法", - dataIndex: "Nav_EvaluationMethod", - key: "Nav_EvaluationMethod", - render: (text, record) => ( - - {record.Nav_EvaluationMethod && - record.Nav_EvaluationMethod?.map((item, i) => { - return ( - - - - ); - })} - - ), - }, - ]; - this.state.scoreTotalColumns = [ - { - title: "生产单元", - dataIndex: "Nav_ProductionUnit.NAME", - key: "Nav_ProductionUnit.NAME", - }, - { - title: "标准化得分", - dataIndex: "NON_STANDARDIZED_SCORE", - key: "NON_STANDARDIZED_SCORE", - }, - { - title: "操作", - dataIndex: "", - key: "", - render: (text, record) => ( - - { - - {" "} - - - - } - - ), - }, - ]; + 120000 + ); + this.showModalSign(); + this.getBaseInfoData(1, 1, 5); + this.setMessageData(); } componentWillUnmount() { - this.timerID && clearTimeout(this.timerID); + this._isMounted = false; // 组件卸载时设为false + if (this.timerID) { + clearInterval(this.timerID); + this.timerID = null; + } } showModalSign = () => { @@ -499,7 +507,7 @@ class Home extends React.Component { url: "FM/User/UserSign", //验证是否有签名照 onComplete: (ret) => { //返回查询结果ret - if (ret) { + if (this._isMounted&&ret) { //判断是否有记录 openNotification("topRight"); } @@ -514,13 +522,13 @@ class Home extends React.Component { payload: json, url: "PF/HomeTitle/OrderPaged", onComplete: (ret) => { - if (ret) { + if (this._isMounted&&ret) { this.setState({ safetySloganOne: ret[0].TITLE, // safetySloganOne: "1.安全方针：以人为本、关注健康、依法治企、安全发展。 2.安全理念：一切风险皆可控，一切事故皆可防！3.安全方针：以人为本、关注健康、依法治企、安全发展。4.安全方针：以人为本、关注健康、依法治企、安全发展。5.安全方针：以人为本、关注健康、依法治企、安全发展。 6.安全理念：一切风险皆可控，一切事故皆可防！7.安全方针：以人为本、关注健康、依法治企、安全发展。8.安全方针：以人为本、关注健康、依法治企、安全发展。", animationDuration: ret[0].SECOND, - sliderColor:ret[0].COCOR, - sliderSize:ret[0].FONTSIZE + sliderColor: ret[0].COCOR, + sliderSize: ret[0].FONTSIZE }); } @@ -539,7 +547,7 @@ class Home extends React.Component { payload: json, url: "FM/User/Get", onComplete: (ret) => { - if (ret && ret.Nav_Department) { + if (this._isMounted&&ret && ret.Nav_Department) { this.setState({ departmentName: ret.Nav_Department.NAME, deparmentType: ret.Nav_Department.DEPARTMENT_TYPE, @@ -723,7 +731,7 @@ class Home extends React.Component { payload: json, onlyData: false, onComplete: (re) => { - if (re && re.IsSuccessful && re.Data.newData) { + if (this._isMounted&&re && re.IsSuccessful && re.Data.newData) { this.state.tableData[0].total = re.Data.todoCount; this.state.tableData[1].total = re.Data.timeOverCount; this.state.tableData[2].total = re.Data.doneCount; @@ -1379,9 +1387,9 @@ class Home extends React.Component { ? "尾矿库" : this.state.mineType == 10 ? "选矿厂" - :this.state.mineType == 31 - ? "职能口": this.state.mineType == 32?"非金属" - : "露天矿"; + : this.state.mineType == 31 + ? "职能口" : this.state.mineType == 32 ? "非金属" + : "露天矿"; if (formCode == "BI054_HOMEDETAIL") { titleTemp += "安全检查次数统计（近12月）"; } else if (formCode == "BI055_HOMEDETAIL") { @@ -1441,7 +1449,7 @@ class Home extends React.Component { fade: true, }; // 在render方法中添加动态样式计算 - const { safetySloganOne, animationDuration,sliderColor,sliderSize } = this.state; + const { safetySloganOne, animationDuration, sliderColor, sliderSize } = this.state; const rowSelection = { onChange: (selectedRowKeys, selectedRows) => { diff --git a/src/routes/dashboard.css b/src/routes/dashboard.css index 7de966c..84f46cf 100644 --- a/src/routes/dashboard.css +++ b/src/routes/dashboard.css @@ -562,4 +562,143 @@ :global(.ant-select-combobox .ant-select-search__field) { z-index: auto !important; +} + +/* 公告栏容器样式 */ +:global(.notice-board-container) { + width: 100%; + height: 100%; + padding: 12px; + box-sizing: border-box; + background-color: #fff; + border-radius: 10px; + display: flex; + flex-direction: column; + +} + +/* 公告栏标题栏 */ +:global(.notice-board-header) { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 16px; +} + +:global(.notice-board-title) { + font-size: 16px; + font-weight: 600; + color: #333; + display: flex; + align-items: center; + white-space: nowrap; +} + +/* 重要提醒标签 */ +:global(.notice-important-tag) { + background-color: #ff4d4f; + color: #fff; + font-size: 12px; + padding: 2px 6px; + border-radius: 4px; + margin-left: 8px; +} + +/* 查看更多链接 */ +:global(.notice-view-more) { + font-size: 14px; + color: #1890ff; + cursor: pointer; + text-decoration: none; +} + +:global(.notice-view-more:hover) { + text-decoration: underline; +} + +/* 公告列表样式 */ +:global(.notice-list) { + list-style: none; + padding: 0; + margin: 0; + max-height: calc(100% - 60px); + overflow-y: auto; +} + +:global(.notice-item) { + padding: 10px 0; + border-bottom: 1px solid #f0f0f0; + cursor: pointer; + transition: background-color 0.2s; +} + +:global(.notice-item:hover) { + background-color: #fafafa; +} + +/* 公告内容行 */ +:global(.notice-item-content) { + display: flex; + justify-content: space-between; + align-items: flex-start; + margin-bottom: 4px; +} + +:global(.notice-item-title) { + font-size: 14px; + color: #333; + flex: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + margin-right: 8px; +} + +/* 未读公告标题样式 */ +:global(.notice-item.unread .notice-item-title) { + font-weight: 600; + color: #1890ff; +} + +:global(.notice-item-date) { + font-size: 12px; + color: #999; + white-space: nowrap; +} + +/* 公告来源样式 */ +:global(.notice-item-source) { + font-size: 12px; + color: #666; +} + +/* 分页控件样式 */ +:global(.notice-pagination) { + display: flex; + justify-content: center; + margin-top: 10px; +} + +:global(.notice-page-btn) { + width: 28px; + height: 28px; + line-height: 28px; + text-align: center; + border: 1px solid #d9d9d9; + border-radius: 4px; + margin: 0 4px; + cursor: pointer; + font-size: 14px; + color: #666; +} + +:global(.notice-page-btn.active) { + background-color: #1890ff; + color: #fff; + border-color: #1890ff; +} + +:global(.notice-page-btn:disabled) { + cursor: not-allowed; + opacity: 0.5; } \ No newline at end of file