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. 32
      web/client/src/sections/homePage/components/alarmList.js
  6. 40
      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 = {
getNodeResources,
getDataTotalTop5,
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' });
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 };
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))
};

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

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

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

Loading…
Cancel
Save