Browse Source

(*)大屏调整

master
peng.peng 1 year ago
parent
commit
5628819d77
  1. 19
      api/app/lib/controllers/homepage/index.js
  2. 2
      api/app/lib/index.js
  3. 62
      api/app/lib/models/quality_check_alarm.js
  4. 4
      api/app/lib/routes/homepage/index.js
  5. 30
      web/client/src/sections/homePage/components/alarmList.js
  6. 12
      web/client/src/sections/homePage/components/hotspotData.js

19
api/app/lib/controllers/homepage/index.js

@ -209,10 +209,27 @@ function getRestfulInfo(opts) {
} }
} }
function getQualityCheckAlarm(opts) {
return async function (ctx, next) {
const models = ctx.fs.dc.models;
try {
let alarms = await models.QualityCheckAlarm.findAll({})
ctx.status = 200;
ctx.body = alarms;
} catch (error) {
ctx.fs.logger.error(`path: ${ctx.path}, error: ${error}`);
ctx.status = 400;
ctx.body = { message: '获取预警列表失败' }
}
}
}
module.exports = { module.exports = {
getNodeResources, getNodeResources,
getDataTotalTop5, getDataTotalTop5,
getClusterInfo, getClusterInfo,
getRestfulInfo getRestfulInfo,
getQualityCheckAlarm
} }

2
api/app/lib/index.js

@ -99,5 +99,5 @@ module.exports.models = function (dc) {
DbStatistics.belongsTo(DataSource, { foreignKey: 'sourceId', targetKey: 'id' }); DbStatistics.belongsTo(DataSource, { foreignKey: 'sourceId', targetKey: 'id' });
DataSource.hasMany(DbStatistics, { foreignKey: 'sourceId', sourceKey: 'id' }) DataSource.hasMany(DbStatistics, { foreignKey: 'sourceId', sourceKey: 'id' })
RestfulApi.belongsTo(RestfulApiRecord, { foreignKey: 'restServiceId', targetKey: 'id' }); RestfulApiRecord.belongsTo(RestfulApi, { foreignKey: 'restServiceId', targetKey: 'id' });
}; };

62
api/app/lib/models/quality_check_alarm.js

@ -0,0 +1,62 @@
/* eslint-disable*/
'use strict';
module.exports = dc => {
const DataTypes = dc.ORM;
const sequelize = dc.orm;
const QualityCheckAlarm = sequelize.define("qualityCheckAlarm", {
id: {
type: DataTypes.BIGINT,
allowNull: false,
defaultValue: null,
comment: null,
primaryKey: true,
field: "id",
autoIncrement: true
},
key: {
type: DataTypes.TEXT,
allowNull: true,
defaultValue: null,
comment: null,
primaryKey: false,
field: "key",
autoIncrement: false,
unique: "idx_unique_alarm_key"
},
content: {
type: DataTypes.TEXT,
allowNull: true,
defaultValue: null,
comment: null,
primaryKey: false,
field: "content",
autoIncrement: false
},
level: {
type: DataTypes.BIGINT,
allowNull: true,
defaultValue: null,
comment: null,
primaryKey: false,
field: "level",
autoIncrement: false
},
time: {
type: DataTypes.DATE,
allowNull: true,
defaultValue: null,
comment: null,
primaryKey: false,
field: "time",
autoIncrement: false
}
}, {
tableName: "t_quality_check_alarm",
comment: "",
indexes: []
});
dc.models.QualityCheckAlarm = QualityCheckAlarm;
return QualityCheckAlarm;
};

4
api/app/lib/routes/homepage/index.js

@ -15,4 +15,8 @@ module.exports = function (app, router, opts, AuthCode) {
app.fs.api.logAttr['GET/homepage/restful/info'] = { content: '获取restful统计信息', visible: true }; app.fs.api.logAttr['GET/homepage/restful/info'] = { content: '获取restful统计信息', visible: true };
router.get('/homepage/restful/info', backups.getRestfulInfo(opts)) router.get('/homepage/restful/info', backups.getRestfulInfo(opts))
app.fs.api.logAttr['GET/homepage/alarms'] = { content: '获取预警列表', visible: true };
router.get('/homepage/alarms', backups.getQualityCheckAlarm(opts))
}; };

30
web/client/src/sections/homePage/components/alarmList.js

@ -2,28 +2,34 @@ import React, { useEffect, useState } from 'react'
import Box from './public/table-card'; import Box from './public/table-card';
import CarouselList from './public/carousel-list'; import CarouselList from './public/carousel-list';
import { Tooltip } from 'antd'; import { Tooltip } from 'antd';
import moment from 'moment';
import NoData from './public/noData';
import { useFsRequest } from '$utils';
function AlarmList(props) { function AlarmList(props) {
const { cardContentHeight } = props; const { cardContentHeight } = props;
const { data: alarms = [] } = useFsRequest({
url: 'homepage/alarms',
pollingInterval: 1000 * 60,
cacheKey: 'alarms',
});
const data = [
['预警内容预警内容预警内容预警内容预警内容', '一级', '2022-12-08 12:22:11'], const data = alarms.map(s => {
['预警内容预警内容预警内容预警内容预警内容', '二级', '2022-12-08 12:22:11'], return [
['预警内容预警内容预警内容预警内容预警内容', '三级', '2022-12-08 12:22:11'], s.content,
['预警内容预警内容预警内容预警内容预警内容', '四级', '2022-12-08 12:22:11'], s.level == 1 ? '一级' : s.level == 2 ? '二级' : s.level == 3 ? '三级' : '四级',
['预警内容预警内容预警内容预警内容预警内容', '一级', '2022-12-08 12:22:11'], moment(s.time).format('YYYY-MM-DD HH:mm:ss')
['预警内容预警内容预警内容预警内容预警内容', '三级', '2022-12-08 12:22:11'],
['预警内容预警内容预警内容预警内容预警内容', '四级', '2022-12-08 12:22:11'],
['预警内容预警内容预警内容预警内容预警内容', '二级', '2022-12-08 12:22:11'],
['预警内容预警内容预警内容预警内容预警内容', '一级', '2022-12-08 12:22:11'],
] ]
})
const renderBody = () => { const renderBody = () => {
return <CarouselList return <CarouselList
header={['预警内容', '预警等级', '预警时间']} header={['预警内容', '预警等级', '预警时间']}
data={data?.map(s => { data={data?.map(s => {
return [ return [
<Tooltip placement="top" title={s[0]}> <Tooltip placement="top" title={s[0]}>
{s[0].length > 20 ? s[0]?.taskNamesubstring(0, 20) + '...' : s[0]} {s[0].length > 20 ? s[0]?.substring(0, 20) + '...' : s[0]}
</Tooltip>, </Tooltip>,
<div style={{ color: s[1] == '一级' ? 'rgba(245, 27, 27, 1)' : s[1] == '二级' ? '#FF7900' : s[1] == '三级' ? '#FFCD00' : '#00DA9F' }}>{s[1]}</div>, <div style={{ color: s[1] == '一级' ? 'rgba(245, 27, 27, 1)' : s[1] == '二级' ? '#FF7900' : s[1] == '三级' ? '#FFCD00' : '#00DA9F' }}>{s[1]}</div>,
s[2] s[2]
@ -37,7 +43,7 @@ function AlarmList(props) {
} }
return <Box title={"预警列表"}> return <Box title={"预警列表"}>
{renderBody()} {alarms?.length > 0 ? renderBody() : <NoData />}
</Box> </Box>
} }

12
web/client/src/sections/homePage/components/hotspotData.js

@ -1,6 +1,6 @@
import React, { useEffect, useState } from 'react' import React, { useEffect, useState } from 'react'
import Box from './public/table-card'; import Box from './public/table-card';
import { Tooltip } from 'antd'; import NoData from './public/noData';
import './style.less'; import './style.less';
import { ApiTable, useFsRequest } from '$utils'; import { ApiTable, useFsRequest } from '$utils';
function HotspotData(props) { function HotspotData(props) {
@ -11,8 +11,9 @@ function HotspotData(props) {
cacheKey: 'restfulInfo', cacheKey: 'restfulInfo',
}); });
const top3 = restfulInfo?.top3 || [{ name: '-', count: '-' }, { name: '-', count: '-' }, { name: '-', count: '-' }] const top3 = restfulInfo?.top3
return <Box title={"热点数据"} bodyPaddingTop={25} > return <Box title={"热点数据"} bodyPaddingTop={25} >
{top3?.length > 0 ?
<div className='hotspot_data_container'> <div className='hotspot_data_container'>
<div className='_img'></div> <div className='_img'></div>
<div className='_top1'> <div className='_top1'>
@ -20,14 +21,19 @@ function HotspotData(props) {
<div className='hotspot_data_number'>{top3[0].count}</div> <div className='hotspot_data_number'>{top3[0].count}</div>
</div> </div>
<div className='_top2'> <div className='_top2'>
{top3?.length > 2 && <>
<span className='hotspot_title' title={top3[2].name}>{top3[2].name?.length > 6 ? top3[2].name.substring(0, 6) + '...' : top3[2].name}</span> <span className='hotspot_title' title={top3[2].name}>{top3[2].name?.length > 6 ? top3[2].name.substring(0, 6) + '...' : top3[2].name}</span>
<div className='hotspot_data_number'>{top3[2].count}</div> <div className='hotspot_data_number'>{top3[2].count}</div>
</>}
</div> </div>
<div className='_top3'> <div className='_top3'>
{top3?.length > 1 && <>
<span className='hotspot_title' title={top3[1].name}>{top3[1].name?.length > 6 ? top3[1].name.substring(0, 6) + '...' : top3[1].name}</span> <span className='hotspot_title' title={top3[1].name}>{top3[1].name?.length > 6 ? top3[1].name.substring(0, 6) + '...' : top3[1].name}</span>
<div className='hotspot_data_number'>{top3[1].count}</div> <div className='hotspot_data_number'>{top3[1].count}</div>
</>}
</div> </div>
</div> </div> : <NoData />
}
</Box> </Box>
} }

Loading…
Cancel
Save