diff --git a/api/config.js b/api/config.js index c535356..3c6fc92 100644 --- a/api/config.js +++ b/api/config.js @@ -41,6 +41,8 @@ args.option('qndmn', 'qiniuDomain'); // clickHouse args.option('clickHouseUrl', 'clickHouse Url'); args.option('clickHousePort', 'clickHouse Port'); +args.option('clickHouseUser', 'clickHouse user'); +args.option('clickHousePassword', 'clickHouse password'); args.option('clickHouseAnxincloud', 'clickHouse 安心云数据库名称'); args.option('clickHousePepEmis', 'clickHouse 项企数据库名称'); args.option('clickHouseProjectManage', 'clickHouse 项目管理数据库名称'); @@ -101,7 +103,7 @@ const QINIU_SK = process.env.ANXINCLOUD_QINIU_SECRETKEY || flags.qnsk; // clickHouse const CLICKHOUST_URL = process.env.CLICKHOUST_URL || flags.clickHouseUrl const CLICKHOUST_PORT = process.env.CLICKHOUST_PORT || flags.clickHousePort -const CLICKHOUST_USER = process.env.CLICKHOUST_USER || flags.clickHouseUser +const CLICKHOUST_USER = process.env.CLICKHOUST_USER || flags.clickHouseUser const CLICKHOUST_PASSWORD = process.env.CLICKHOUST_PASSWORD || flags.clickHousePassword const CLICKHOUST_ANXINCLOUD = process.env.CLICKHOUST_ANXINCLOUD || flags.clickHouseAnxincloud const CLICKHOUST_PEP_EMIS = process.env.CLICKHOUST_PEP_EMIS || flags.clickHousePepEmis diff --git a/web/client/src/layout/components/header/index.jsx b/web/client/src/layout/components/header/index.jsx index 3cb721b..261490c 100644 --- a/web/client/src/layout/components/header/index.jsx +++ b/web/client/src/layout/components/header/index.jsx @@ -108,7 +108,12 @@ const Header = (props) => { src="/assets/images/install/long_logo.png" style={{ display: "inline-block", width: 200, height: 40, marginLeft: -24, cursor: 'pointer' }} onClick={() => { - window.open('/projectGroup/statistic', '_blank'); + let projectGroup = JSON.parse(localStorage.getItem('project_group')) + if (projectGroup && projectGroup?.find(v => v.userId == user?.id)) { + window.open('/projectGroup/bigscreen', '_blank') + } else { + window.open('/projectGroup/statistic', '_blank') + } }} /> ), diff --git a/web/client/src/sections/projectGroup/actions/group.js b/web/client/src/sections/projectGroup/actions/group.js index e7d2b18..f60a956 100644 --- a/web/client/src/sections/projectGroup/actions/group.js +++ b/web/client/src/sections/projectGroup/actions/group.js @@ -43,4 +43,16 @@ export function groupStatistic () { msg: { error: "获取项目分组统计信息失败" }, reducer: { name: "groupStatistic", params: { noClear: true } }, }); +} + +export function groupStatisticOnline (query = {}) { + return (dispatch) => basicAction({ + type: "get", + dispatch: dispatch, + query, + actionType: "GET_GROPUP_STATISTICS_ONLINE`", + url: `${ApiTable.groupStatisticOnline}`, + msg: { error: "获取项目分组在线率统计信息失败" }, + reducer: { name: "groupStatisticOnline", params: { noClear: true } }, + }); } \ No newline at end of file diff --git a/web/client/src/sections/projectGroup/components/card.jsx b/web/client/src/sections/projectGroup/components/card.jsx index 6bc761c..11475fc 100644 --- a/web/client/src/sections/projectGroup/components/card.jsx +++ b/web/client/src/sections/projectGroup/components/card.jsx @@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from 'react'; import { connect } from 'react-redux'; const Card = (props) => { - const { title } = props + const { title, style = {} } = props return (
{ borderRadius: 4, // filter: 'blur(5px)', padding: '6px 4px', + ...style }}>
{ boxShadow: '0 0 4px 1px #2C66F3' }} />
-
+
{props?.children}
diff --git a/web/client/src/sections/projectGroup/components/header.jsx b/web/client/src/sections/projectGroup/components/header.jsx index 62a08fe..68e7d2b 100644 --- a/web/client/src/sections/projectGroup/components/header.jsx +++ b/web/client/src/sections/projectGroup/components/header.jsx @@ -4,7 +4,8 @@ import { Skeleton, Button, Pagination, Form, Popconfirm, Table, Toast } from '@d import moment from "moment"; const Header = (props) => { - const { dispatch, actions, weatherRealtime } = props + const { dispatch, actions, user,match, weatherRealtime, history } = props + const [date, setDate] = useState(moment()); const dayMap = { 0: '日', 1: '一', 2: '二', 3: '三', 4: '四', 5: '五', 6: '六' } const weatherMap = { @@ -71,7 +72,9 @@ const Header = (props) => { padding: '0 24px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}> - 运维中台大屏 + + {match?.path == '/projectGroup/bigscreen' ? `${JSON.parse(localStorage.getItem('project_group'))?.find(v => v.userId == user?.id)?.name}数据统计大屏` : '运维中台大屏'} + @@ -110,19 +113,26 @@ const Header = (props) => { {weatherMap[weatherRealtime?.skycon]}
-
-
- - 返回后台 -
+ + {match?.path == '/projectGroup/bigscreen' ? <> +
+
{ + history.push({ pathname: `/projectGroup/statistic`, }) + }}> + + 返回后台 +
+ + : <> + } +
) } - function mapStateToProps (state) { const { auth, global, weatherRealtime } = state; return { diff --git a/web/client/src/sections/projectGroup/containers/bigscreen.jsx b/web/client/src/sections/projectGroup/containers/bigscreen.jsx index 3f12b24..9eea52a 100644 --- a/web/client/src/sections/projectGroup/containers/bigscreen.jsx +++ b/web/client/src/sections/projectGroup/containers/bigscreen.jsx @@ -4,33 +4,134 @@ import Header from '../components/header'; import Body from '../components/body' import Card from '../components/card' import '../style.less' +import ReactECharts from 'echarts-for-react'; +import moment from 'moment' + + + +const Bigscreen = ({ dispatch, actions, user, match, history, clientHeight, groupStatisticOnline }) => { -const Bigscreen = ({ dispatch, actions, user, history, clientHeight }) => { - useEffect(() => { - let projectGroupId = localStorage.getItem('project_group_id') - console.log(projectGroupId); - }) + let groupId = JSON.parse(localStorage.getItem('project_group'))?.find(v => user?.id == v.userId)?.projectGroupId + console.log(); + dispatch(actions.projectGroup.groupStatisticOnline({ groupId })) + }, []) + console.log(groupStatisticOnline); return (
-
+
- - 123 - +
+
+
+ +
+ + +
+ + +
+ + +
+ +
+ +
+ + v.name) || [], + right: '10%', + textStyle: { + color: '#FFF', + }, + }, + xAxis: { + type: 'time', + // name: "时间", + boundaryGap: false, + minInterval: 1000 * 60, + + }, + yAxis: { + type: 'value', + name: "单位：A", + areaStyle: { + color: '#FFF', + }, + }, + series: groupStatisticOnline?.map(v => ({ + type: 'line', + name: v.name, + smooth: true, + areaStyle: { + color: '#0e9cff26', + }, + data: v.online?.map(f => [moment(f.collect_time).format('YYYY-MM-DD HH'), f.rate]) || [] + })) || [] + }} + notMerge={true} + lazyUpdate={true} + style={{ width: "100%", height: "100%" }} + theme={'ReactEChart'} + /> +
+ + +
+
+ +
+ + +
+ + +
+ +
+ +
+ +
+
) } function mapStateToProps (state) { - const { auth, global, } = state; + const { auth, global, groupStatisticOnline } = state; return { user: auth.user, actions: global.actions, clientHeight: global.clientHeight, + groupStatisticOnline: groupStatisticOnline?.data }; } diff --git a/web/client/src/sections/projectGroup/containers/statistic.jsx b/web/client/src/sections/projectGroup/containers/statistic.jsx index 95a4bd5..a560eaa 100644 --- a/web/client/src/sections/projectGroup/containers/statistic.jsx +++ b/web/client/src/sections/projectGroup/containers/statistic.jsx @@ -26,10 +26,25 @@ const Statistic = ({ dispatch, actions, user, history, loading, groupStatistic, key: 'name', width: "30%", render: (text, row) =>
{ - localStorage.setItem('project_group_id', row.id) - history.push({ - pathname: `/projectGroup/bigscreen`, - }) + //将每个人最后观看项目集大屏的id储存起来，以便下次直接跳转到大屏 + let projectGroup = JSON.parse(localStorage.getItem('project_group')) + if (!projectGroup) { + localStorage.setItem('project_group', JSON.stringify([{ userId: user?.id, projectGroupId: row?.id, name: row?.name }])) + } else { + let findOne = projectGroup?.find(v => v.userId == user?.id) + if (findOne) { + projectGroup?.forEach(v => { + if (v.userId == user?.id) { + v.projectGroupId = row?.id + v.name = row?.name + } + }) + } else { + projectGroup.push({ userId: user?.id, projectGroupId: row?.id, name: row?.name }) + } + localStorage.setItem('project_group', JSON.stringify(projectGroup)) + } + history.push({ pathname: `/projectGroup/bigscreen`, }) }}>{text}
}, { title: '项目集类型', diff --git a/web/client/src/utils/webapi.js b/web/client/src/utils/webapi.js index 2fade7a..22281a0 100644 --- a/web/client/src/utils/webapi.js +++ b/web/client/src/utils/webapi.js @@ -38,7 +38,8 @@ export const ApiTable = { //项目分组 projectGroup: 'project/group', - groupStatistic:'project/group/statistic', + groupStatistic: 'project/group/statistic', + groupStatisticOnline: 'project/group/statistic/online', //告警 getProjectPoms: 'project/poms', //获取已绑定项目