diff --git a/web/client/src/sections/console/containers/console.jsx b/web/client/src/sections/console/containers/console.jsx index c976973..913161c 100644 --- a/web/client/src/sections/console/containers/console.jsx +++ b/web/client/src/sections/console/containers/console.jsx @@ -12,519 +12,528 @@ let memberScrollbar; let equipmentScrollbar; let webScrollbar; let problemsScrollbar; +let alarmScrollbar; const Console = (props) => { - const { dispatch, actions, user, loading, socket } = props - const stationList = [ - 'url(/assets/images/console/lan_1.png)', - 'url(/assets/images/console/lv_1.png)', - 'url(/assets/images/console/huang_1.png)', - 'url(/assets/images/console/hong_1.png)' - ] - const [timelineList, setTimelineList] = useState(['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''])//最新动态列表 + const { dispatch, actions, user, loading, socket } = props + const stationList = [ + 'url(/assets/images/console/lan_1.png)', + 'url(/assets/images/console/lv_1.png)', + 'url(/assets/images/console/huang_1.png)', + 'url(/assets/images/console/hong_1.png)' + ] + const [timelineList, setTimelineList] = useState(['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''])//最新动态列表 - const [memberList, setMemberList] = useState(['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''])//相关成员列表 + const [memberList, setMemberList] = useState(['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''])//相关成员列表 - const [equipmentList, setEquipmentList] = useState(['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''])//平台设备接入列表 + const [equipmentList, setEquipmentList] = useState(['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''])//平台设备接入列表 - const [webList, setWebList] = useState(['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''])//关联web应用列表 + const [webList, setWebList] = useState(['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''])//关联web应用列表 - const [problemsList, setProblemsList] = useState(['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''])//异常&问题列表 - useEffect(() => { - // ACTION 示例 - // dispatch(actions.example.getMembers(user.orgId)) - }, []) - useEffect(() => { - newScrollbar = new PerfectScrollbar("#news", { - suppressScrollX: true, - }); - const domProject = document.getElementById("news"); - if (domProject && newScrollbar) { - newScrollbar.update(); - } - overviewScrollbar = new PerfectScrollbar("#overview", { - suppressScrollY: true, - }); - const domProject1 = document.getElementById("overview"); - if (domProject1 && overviewScrollbar) { - overviewScrollbar.update(); - } - memberScrollbar = new PerfectScrollbar("#member", { - suppressScrollX: true, - }); - const domProject2 = document.getElementById("member"); - if (domProject2 && memberScrollbar) { - memberScrollbar.update(); - } - equipmentScrollbar = new PerfectScrollbar("#equipment", { - suppressScrollX: true, - }); - const domProject3 = document.getElementById("equipment"); - if (domProject3 && equipmentScrollbar) { - equipmentScrollbar.update(); - } - webScrollbar = new PerfectScrollbar("#web", { - suppressScrollX: true, - }); - const domProject4 = document.getElementById("web"); - if (domProject4 && webScrollbar) { - webScrollbar.update(); - } - problemsScrollbar = new PerfectScrollbar("#problems", { - suppressScrollX: true, - }); - const domProject5 = document.getElementById("problems"); - if (domProject5 && problemsScrollbar) { - problemsScrollbar.update(); - } + const [problemsList, setProblemsList] = useState(['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''])//异常&问题列表 + useEffect(() => { + // ACTION 示例 + // dispatch(actions.example.getMembers(user.orgId)) + }, []) + useEffect(() => { + newScrollbar = new PerfectScrollbar("#news", { + suppressScrollX: true, + }); + const domProject = document.getElementById("news"); + if (domProject && newScrollbar) { + newScrollbar.update(); + } + overviewScrollbar = new PerfectScrollbar("#overview", { + suppressScrollY: true, + }); + const domProject1 = document.getElementById("overview"); + if (domProject1 && overviewScrollbar) { + overviewScrollbar.update(); + } + memberScrollbar = new PerfectScrollbar("#member", { + suppressScrollX: true, + }); + const domProject2 = document.getElementById("member"); + if (domProject2 && memberScrollbar) { + memberScrollbar.update(); + } + equipmentScrollbar = new PerfectScrollbar("#equipment", { + suppressScrollX: true, + }); + const domProject3 = document.getElementById("equipment"); + if (domProject3 && equipmentScrollbar) { + equipmentScrollbar.update(); + } + webScrollbar = new PerfectScrollbar("#web", { + suppressScrollX: true, + }); + const domProject4 = document.getElementById("web"); + if (domProject4 && webScrollbar) { + webScrollbar.update(); + } + problemsScrollbar = new PerfectScrollbar("#problems", { + suppressScrollX: true, + }); + const domProject5 = document.getElementById("problems"); + if (domProject5 && problemsScrollbar) { + problemsScrollbar.update(); + } + alarmScrollbar = new PerfectScrollbar("#alarm", { + suppressScrollY: true, + }); + const domProject6 = document.getElementById("alarm"); + if (domProject6 && alarmScrollbar) { + alarmScrollbar.update(); + } - // ACTION 示例 - // dispatch(actions.example.getMembers(user.orgId)) - }) + // ACTION 示例 + // dispatch(actions.example.getMembers(user.orgId)) + }) - // websocket 使用测试 - // useEffect(() => { - // console.log(socket) - // if (socket) { - // socket.on('TEST', function (msg) { - // console.info(msg); - // }); - // return () => { - // socket.off("TEST"); - // } - // } + // websocket 使用测试 + // useEffect(() => { + // console.log(socket) + // if (socket) { + // socket.on('TEST', function (msg) { + // console.info(msg); + // }); + // return () => { + // socket.off("TEST"); + // } + // } - // }, [socket]) + // }, [socket]) - return ( - <> -
- {/* 头部 */} -
-
-
- HI，欢迎回来，行业服务部 + return ( + <> +
+ {/* 头部 */} +
+
+
+ HI，欢迎回来，行业服务部 +
+
+ 刘昊然！ +
+
+
+ +
+
+ {/* 主体 */} +
+ {/* 左边 */} +
+ {/* 工作台和统计概览 */} +
+ {/* 我的工作台 */} +
+
+
+
我的工作台
+
MY WORK STATION
+
+
+ setSetup(true)} />
-
- 刘昊然！ +
+
+
+
+
+ 剩余问题: +
+
+ 122 +
+
+
+
+ 今日新增问题: +
+
+
+ 12223 +
+
+ +
+
+
+
+
+ 今日处理: +
+
+ 3 +
+
-
-
- -
-
- {/* 主体 */} -
- {/* 左边 */} -
- {/* 工作台和统计概览 */} -
- {/* 我的工作台 */} -
-
-
-
我的工作台
-
MY WORK STATION
-
-
- setSetup(true)} /> -
-
-
-
-
-
- 剩余问题: -
-
- 122 -
+ {/* 循环类型 */} +
+ {stationList.map((item, index) => { + return ( +
+
+
+ 关注的项目 + (个) +
+
+
112
+
进行中
+
-
-
- 今日新增问题: -
-
-
- 12223 -
-
- -
-
+
+ ) + }) + } +
+
+ {/* 统计概览 */} +
+
+
+
统计概览
+
STATISTICAL OVERVIEW
+
+
+ setSetup(true)} /> +
+
+
+
+ {/* 项目里程碑 */} +
+
+ 项目里程碑 +
+
+
+
+ 立项时间：
-
-
- 今日处理: -
-
- 3 -
+
+ 2022-5-12
-
- {/* 循环类型 */} - { - stationList.map((item, index) => { - return ( -
-
-
- 关注的项目 - (个) -
-
-
112
-
进行中
-
-
-
- ) - }) - } -
- {/* 统计概览 */} -
-
-
-
统计概览
-
STATISTICAL OVERVIEW
-
-
- setSetup(true)} /> -
-
-
-
- {/* 项目里程碑 */} -
-
- 项目里程碑 -
-
-
-
- 立项时间： -
-
- 2022-5-12 -
-
-
-
- 施工时间： -
-
- 2022-5-12至2022-12-12 -
-
-
-
-
-
- 内验时间： -
-
- 2023-1-18 -
-
-
-
- 外验时间： -
-
- 2023-3-18 -
-
-
-
-
- 工程维保时间： -
-
- 2022-11-11 -
-
-
-
-
- 售后维修时间： -
-
- 2022-11-11至2023-12-14 -
-
- 进行中 -
+
+
+
+ 施工时间：
- {/* 相关成员 */} -
-
- 相关成员 -
-
- {memberList.map((item, index) => { - return ( -
-
-
- 成员 -
-
- 刘昊然 -
-
- （负责人） -
-
-
- 行业服务部 -
-
- ) - })} -
+
+ 2022-5-12至2022-12-12
- {/* 平台设备接入 */} -
-
- 平台设备接入 -
-
- { - equipmentList.map((item, index) => { - return ( -
-
- 5阶ZK1高清摄球机 -
-
- 视频 -
-
- 网络 - {/* 网络 */} -
-
- 在线 -
- {/*
- 掉线 -
*/} -
- ) - }) - } -
+
+
+
+
+
+ 内验时间： +
+
+ 2023-1-18
- {/* 关联web应用 */} -
-
- 关联web应用 -
-
- { - webList.map((item, index) => { - return ( -
-
-
- web应用 -
-
- superchangnan.anxiny -
-
-
- 第三方 -
-
- ) - }) - } -
+
+
+
+ 外验时间：
- {/* 异常&问题 */} -
-
- 异常&问题 -
-
- { - problemsList.map((item, index) => { - return ( -
-
- 【告警源A】数据信息中断，诊断为 服务异常，请前往确认 -
-
- 2022-05-21 15:23:41 -
-
- ) - }) - } -
+
+ 2023-3-18
-
-
+
+
+
+
+ 工程维保时间： +
+
+ 2022-11-11 +
+
+
+
+
+ 售后维修时间： +
+
+ 2022-11-11至2023-12-14 +
+
+ 进行中 +
+
+ {/* 相关成员 */} +
+
+ 相关成员 +
+
+ {memberList.map((item, index) => { + return ( +
+
+
+ 成员 +
+
+ 刘昊然 +
+
+ （负责人） +
+
+
+ 行业服务部 +
+
+ ) + })} +
+
+ {/* 平台设备接入 */} +
+
+ 平台设备接入 +
+
+ { + equipmentList.map((item, index) => { + return ( +
+
+ 5阶ZK1高清摄球机 +
+
+ 视频 +
+
+ 网络 + {/* 网络 */} +
+
+ 在线 +
+ {/*
+ 掉线 +
*/} +
+ ) + }) + } +
+
+ {/* 关联web应用 */} +
+
+ 关联web应用 +
+
+ { + webList.map((item, index) => { + return ( +
+
+
+ web应用 +
+
+ superchangnan.anxiny +
+
+
+ 第三方 +
+
+ ) + }) + } +
+
+ {/* 异常&问题 */} +
+
+ 异常&问题 +
+
+ { + problemsList.map((item, index) => { + return ( +
+
+ 【告警源A】数据信息中断，诊断为 服务异常，请前往确认 +
+
+ 2022-05-21 15:23:41 +
+
+ ) + }) + } +
+
+
+
+
+
+ {/* BI分析模块 */} +
+
+
+
我的工作台
+
MY WORK STATION
+
+
+ setSetup(true)} />
-
- {/* BI分析模块 */} -
-
-
-
我的工作台
-
MY WORK STATION
-
-
- setSetup(true)} /> -
-
+
+
+
+ {/* 右边 */} +
+ {/* 最新动态 */} +
+
+
+
+
最新动态
+
RECENT NEWS
-
- {/* 右边 */} -
- {/* 最新动态 */} -
-
-
-
-
最新动态
-
RECENT NEWS
-
-
- setSetup(true)} /> -
-
-
- - {timelineList.map((item, index) => { - return ( - - A项目DTU设备状态异常，诊断为离线 - - ) - })} - -
+
+ setSetup(true)} />
- {/* 我常用的工具 */} -
-
-
-
-
我常用的工具
-
MY USUAL TOOLS
-
-
-
- - - - -
-
- -
+
+
+ + {timelineList.map((item, index) => { + return ( + + A项目DTU设备状态异常，诊断为离线 + + ) + })} + +
+
+ {/* 我常用的工具 */} +
+
+
+
+
我常用的工具
+
MY USUAL TOOLS
-
-
+
+
+ + + + +
+
+ +
+
+
- - ) +
+ + ) } function mapStateToProps (state) { - const { auth, global, members, webSocket } = state; - return { - // loading: members.isRequesting, - // user: auth.user, - // actions: global.actions, - // members: members.data, - // socket: webSocket.socket - }; + const { auth, global, members, webSocket } = state; + return { + // loading: members.isRequesting, + // user: auth.user, + // actions: global.actions, + // members: members.data, + // socket: webSocket.socket + }; } export default connect(mapStateToProps)(Console);