46 changed files with 1123 additions and 6 deletions
@ -0,0 +1,4 @@ |
|||
alter table t_resource_consumption |
|||
add resource_id int; |
|||
|
|||
comment on column t_resource_consumption.resource_id is '元数据id'; |
|||
|
After Width: | Height: | Size: 5.5 KiB |
|
After Width: | Height: | Size: 5.0 KiB |
|
After Width: | Height: | Size: 5.0 KiB |
|
After Width: | Height: | Size: 4.9 KiB |
|
After Width: | Height: | Size: 4.9 KiB |
|
After Width: | Height: | Size: 5.7 KiB |
|
After Width: | Height: | Size: 5.7 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 945 KiB |
|
After Width: | Height: | Size: 7.1 KiB |
|
After Width: | Height: | Size: 7.1 KiB |
|
After Width: | Height: | Size: 7.2 KiB |
|
After Width: | Height: | Size: 826 B |
|
After Width: | Height: | Size: 775 B |
|
After Width: | Height: | Size: 8.5 KiB |
|
After Width: | Height: | Size: 745 B |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 699 B |
|
After Width: | Height: | Size: 116 KiB |
|
After Width: | Height: | Size: 8.7 KiB |
|
After Width: | Height: | Size: 7.8 KiB |
|
After Width: | Height: | Size: 7.5 KiB |
|
After Width: | Height: | Size: 6.3 KiB |
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 56 KiB |
|
After Width: | Height: | Size: 7.3 KiB |
|
After Width: | Height: | Size: 19 KiB |
@ -0,0 +1,47 @@ |
|||
import React, { useEffect, useState } from 'react' |
|||
import CarouselList from './public/carousel-list'; |
|||
import { Tooltip } from 'antd'; |
|||
import { ApiTable, useFsRequest } from '$utils'; |
|||
import moment from 'moment'; |
|||
function AbnormalMonitoring(props) { |
|||
|
|||
const { data: logs = {} } = useFsRequest({ |
|||
url: ApiTable.getLogs, |
|||
query: { |
|||
logState: false |
|||
}, |
|||
// pollingInterval: 10000
|
|||
}); |
|||
|
|||
const dataSource = logs?.rows ? logs?.rows?.map(s => { |
|||
return [ |
|||
<div style={{ color: '#fff' }}> |
|||
<Tooltip placement="top" title={s?.acquisitionTask?.taskName}> |
|||
{s?.acquisitionTask?.taskName?.length > 20 ? s?.acquisitionTask?.taskNamesubstring(0, 20) + '...' : s?.acquisitionTask?.taskName} |
|||
</Tooltip> |
|||
</div>, |
|||
moment(s?.startTime).format('YYYY-MM-DD HH:mm:ss'), |
|||
moment(s?.endTime).valueOf() - moment(s?.startTime).valueOf() + '毫秒', |
|||
<div style={{ color: 'rgba(245, 27, 27, 1)' }}> |
|||
<Tooltip placement="top" title={s?.details}> |
|||
{s?.details?.length > 20 ? s?.details.substring(0, 20) + '...' : s?.details} |
|||
</Tooltip> |
|||
</div> |
|||
] |
|||
}) : [] |
|||
return <div style={{ height: 149, border: '1px solid #50c9d74d', backgroundImage: 'linear-gradient(180deg, rgba(0, 32, 74, 0) 3%, rgba(80, 201, 247, 0.1) 100%)' }}> |
|||
<div className='center-card-title' style={{ marginBottom: 6 }}><div className='_icon_left' />异常监控<div className='_icon_right' /></div> |
|||
<CarouselList |
|||
header={['任务名称', '采集时间', '耗时', '异常日志']} |
|||
data={dataSource} |
|||
rowNum={2} |
|||
height={100} |
|||
multiellipsis |
|||
// columnWidth={[200, 170, 120, 120]}
|
|||
/> |
|||
</div> |
|||
} |
|||
|
|||
export default AbnormalMonitoring; |
|||
|
|||
|
|||
@ -0,0 +1,19 @@ |
|||
import React, { useEffect, useState } from 'react' |
|||
import TableCard from './public/table-card'; |
|||
|
|||
function AccessData(props) { |
|||
|
|||
const renderBody = () => { |
|||
return '接入数据统计' |
|||
} |
|||
|
|||
return <TableCard |
|||
renderBody={renderBody()} |
|||
height={'100%'} |
|||
title={"接入数据统计"} |
|||
bodyPaddingTop={1} /> |
|||
} |
|||
|
|||
export default AccessData; |
|||
|
|||
|
|||
@ -0,0 +1,27 @@ |
|||
import React, { useEffect, useState } from 'react' |
|||
import TableCard from './public/table-card'; |
|||
import CarouselList from './public/carousel-list'; |
|||
|
|||
function AlarmList(props) { |
|||
const { cardHeight } = props; |
|||
const renderBody = () => { |
|||
return <CarouselList |
|||
header={['任务名称', '采集时间', '耗时', '异常日志']} |
|||
data={[['任务名称', '采集时间', '耗时', '异常日志'], ['任务名称', '采集时间', '耗时', '异常日志'], ['任务名称', '采集时间', '耗时', '异常日志'], ['任务名称', '采集时间', '耗时', '异常日志'], ['任务名称', '采集时间', '耗时', '异常日志'], ['任务名称', '采集时间', '耗时', '异常日志'], ['任务名称', '采集时间', '耗时', '异常日志'], ['任务名称', '采集时间', '耗时', '异常日志']]} |
|||
rowNum={6} |
|||
height={cardHeight - 42 - 13} |
|||
multiellipsis |
|||
// columnWidth={[200, 170, 120, 120]}
|
|||
/> |
|||
} |
|||
|
|||
return <TableCard |
|||
renderBody={renderBody()} |
|||
height={'100%'} |
|||
title={"预警列表"} |
|||
bodyPaddingTop={1} /> |
|||
} |
|||
|
|||
export default AlarmList; |
|||
|
|||
|
|||
@ -0,0 +1,19 @@ |
|||
import React, { useEffect, useState } from 'react' |
|||
import TableCard from './public/table-card'; |
|||
|
|||
function DataShare(props) { |
|||
|
|||
const renderBody = () => { |
|||
return '数据共享' |
|||
} |
|||
|
|||
return <TableCard |
|||
renderBody={renderBody()} |
|||
height={'100%'} |
|||
title={"数据共享"} |
|||
bodyPaddingTop={1} /> |
|||
} |
|||
|
|||
export default DataShare; |
|||
|
|||
|
|||
@ -0,0 +1,19 @@ |
|||
import React, { useEffect, useState } from 'react' |
|||
import TableCard from './public/table-card'; |
|||
|
|||
function DataTop5(props) { |
|||
|
|||
const renderBody = () => { |
|||
return '数据量TOP5单位' |
|||
} |
|||
|
|||
return <TableCard |
|||
renderBody={renderBody()} |
|||
height={'100%'} |
|||
title={"数据量TOP5单位"} |
|||
bodyPaddingTop={1} /> |
|||
} |
|||
|
|||
export default DataTop5; |
|||
|
|||
|
|||
@ -0,0 +1,19 @@ |
|||
import React, { useEffect, useState } from 'react' |
|||
import TableCard from './public/table-card'; |
|||
|
|||
function HotspotData(props) { |
|||
|
|||
const renderBody = () => { |
|||
return '热点数据' |
|||
} |
|||
|
|||
return <TableCard |
|||
renderBody={renderBody()} |
|||
height={'100%'} |
|||
title={"热点数据"} |
|||
bodyPaddingTop={1} /> |
|||
} |
|||
|
|||
export default HotspotData; |
|||
|
|||
|
|||
@ -0,0 +1,19 @@ |
|||
import React, { useEffect, useState } from 'react' |
|||
import TableCard from './public/table-card'; |
|||
|
|||
function NodeResource(props) { |
|||
|
|||
const renderBody = () => { |
|||
return '节点资源' |
|||
} |
|||
|
|||
return <TableCard |
|||
renderBody={renderBody()} |
|||
height={'100%'} |
|||
title={"节点资源"} |
|||
bodyPaddingTop={1} /> |
|||
} |
|||
|
|||
export default NodeResource; |
|||
|
|||
|
|||
@ -0,0 +1,35 @@ |
|||
/* 轮播列表组件 */ |
|||
import React from 'react'; |
|||
import ScrollBoard from './scrollBoard'; |
|||
// import { ScrollBoard } from '@jiaminghi/data-view-react';
|
|||
// import NoData from './no-data';
|
|||
import './index.less'; |
|||
function CarouselList(props) { |
|||
const { |
|||
header = [], data = [], rowNum = 4, height, columnWidth, multiellipsis, waitTime = 2000, ...restProps |
|||
} = props; |
|||
|
|||
const config = { |
|||
header, |
|||
rowNum, |
|||
headerBGC: 'rgba(81, 200, 247, 0.2)', |
|||
oddRowBGC: 'transparent', |
|||
evenRowBGC: 'transparent', |
|||
headerHeight: 30, |
|||
data, |
|||
waitTime, |
|||
columnWidth: columnWidth || [], |
|||
}; |
|||
|
|||
return data.length > 0 ? ( |
|||
<ScrollBoard |
|||
config={config} |
|||
style={{ height }} |
|||
className={multiellipsis ? 'scroll-board-multi' : 'scroll-board'} |
|||
// eslint-disable-next-line react/jsx-props-no-spreading
|
|||
{...restProps} |
|||
/> |
|||
) : null; |
|||
} |
|||
|
|||
export default CarouselList; |
|||
@ -0,0 +1,80 @@ |
|||
.opcityBackground { |
|||
background-color: rgba(8, 27, 55, 0.6); |
|||
} |
|||
|
|||
.card-title { |
|||
// background: linear-gradient(to bottom, #fafafb, #92cbff); |
|||
// background-clip: border-box; |
|||
// -webkit-background-clip: text; |
|||
color: #fff; |
|||
font-size: 22px; |
|||
font-family: YouSheBiaoTiHei; |
|||
padding-left: 20px; |
|||
// font-weight: 600; |
|||
} |
|||
|
|||
/* 滚动列表 */ |
|||
.scroll-board { |
|||
width: 533px; |
|||
height: 220px; |
|||
margin-top: 10px; |
|||
margin-left: 6px; |
|||
|
|||
.header { |
|||
height: 30px; |
|||
border-top: 1px solid #0047ba; |
|||
border-bottom: 1px solid #0047ba; |
|||
|
|||
.header-item { |
|||
// background: rgba(12, 49, 110, 0.3); |
|||
margin-right: 10px; |
|||
} |
|||
} |
|||
|
|||
.rows { |
|||
.row-item { |
|||
font-size: 16px; |
|||
} |
|||
|
|||
.row-item:hover { |
|||
background: linear-gradient(270deg, rgba(17, 183, 247, 0) 0%, rgba(17, 183, 247, 0.85) 100%); |
|||
color: #9ac8fc; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.scroll-board-multi { |
|||
padding: 5px 0px 5px; |
|||
color: rgba(204, 228, 255, 1) !important; |
|||
|
|||
.header { |
|||
display: flex; |
|||
flex-direction: row; |
|||
font-size: 12px !important; |
|||
color: rgba(204, 228, 255, 1) !important; |
|||
// border-bottom: 1px solid #124C79 !important; |
|||
} |
|||
|
|||
.rows { |
|||
color: rgba(204, 228, 255, 1) !important; |
|||
|
|||
.row-item { |
|||
border-bottom: 1px solid #124C79 !important; |
|||
} |
|||
|
|||
.row-item:hover { |
|||
background: linear-gradient(270deg, rgba(17, 183, 247, 0) 0%, rgba(17, 183, 247, 0.85) 100%); |
|||
color: #9ac8fc; |
|||
} |
|||
} |
|||
} |
|||
|
|||
._sorrow { |
|||
display: inline-block; |
|||
width: 15px; |
|||
height: 15px; |
|||
background: url('/assets/images/homePage/bigscreen/sorrow.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
margin-left: 13px; |
|||
} |
|||
@ -0,0 +1,469 @@ |
|||
import React, { |
|||
useEffect, useState, useRef, useMemo, forwardRef, |
|||
} from 'react'; |
|||
|
|||
import PropTypes from 'prop-types'; |
|||
|
|||
import classnames from 'classnames'; |
|||
|
|||
import { deepMerge } from '@jiaminghi/charts/lib/util/index'; |
|||
|
|||
import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'; |
|||
|
|||
import { useAutoResize, co } from '@jiaminghi/data-view-react'; |
|||
|
|||
import './style.less'; |
|||
|
|||
const defaultConfig = { |
|||
/** |
|||
* @description Board header |
|||
* @type {Array<String>} |
|||
* @default header = [] |
|||
* @example header = ['column1', 'column2', 'column3'] |
|||
*/ |
|||
header: [], |
|||
/** |
|||
* @description Board data |
|||
* @type {Array<Array>} |
|||
* @default data = [] |
|||
*/ |
|||
data: [], |
|||
/** |
|||
* @description Row num |
|||
* @type {Number} |
|||
* @default rowNum = 5 |
|||
*/ |
|||
rowNum: 5, |
|||
/** |
|||
* @description Header background color |
|||
* @type {String} |
|||
* @default headerBGC = '#00BAFF' |
|||
*/ |
|||
headerBGC: '#00BAFF', |
|||
/** |
|||
* @description Odd row background color |
|||
* @type {String} |
|||
* @default oddRowBGC = '#003B51' |
|||
*/ |
|||
oddRowBGC: '#003B51', |
|||
/** |
|||
* @description Even row background color |
|||
* @type {String} |
|||
* @default evenRowBGC = '#003B51' |
|||
*/ |
|||
evenRowBGC: '#0A2732', |
|||
/** |
|||
* @description Scroll wait time |
|||
* @type {Number} |
|||
* @default waitTime = 2000 |
|||
*/ |
|||
waitTime: 2000, |
|||
/** |
|||
* @description Header height |
|||
* @type {Number} |
|||
* @default headerHeight = 35 |
|||
*/ |
|||
headerHeight: 35, |
|||
/** |
|||
* @description Column width |
|||
* @type {Array<Number>} |
|||
* @default columnWidth = [] |
|||
*/ |
|||
columnWidth: [], |
|||
/** |
|||
* @description Column align |
|||
* @type {Array<String>} |
|||
* @default align = [] |
|||
* @example align = ['left', 'center', 'right'] |
|||
*/ |
|||
align: [], |
|||
/** |
|||
* @description Show index |
|||
* @type {Boolean} |
|||
* @default index = false |
|||
*/ |
|||
index: false, |
|||
/** |
|||
* @description index Header |
|||
* @type {String} |
|||
* @default indexHeader = '#' |
|||
*/ |
|||
indexHeader: '#', |
|||
/** |
|||
* @description Carousel type |
|||
* @type {String} |
|||
* @default carousel = 'single' |
|||
* @example carousel = 'single' | 'page' |
|||
*/ |
|||
carousel: 'single', |
|||
/** |
|||
* @description Pause scroll when mouse hovered |
|||
* @type {Boolean} |
|||
* @default hoverPause = true |
|||
* @example hoverPause = true | false |
|||
*/ |
|||
hoverPause: true, |
|||
}; |
|||
|
|||
function calcHeaderData({ header, index, indexHeader }) { |
|||
if (!header.length) { |
|||
return []; |
|||
} |
|||
|
|||
header = [...header]; |
|||
|
|||
if (index) header.unshift(indexHeader); |
|||
|
|||
return header; |
|||
} |
|||
|
|||
function calcRows({ |
|||
data, index, headerBGC, rowNum, |
|||
}) { |
|||
if (index) { |
|||
data = data.map((row, i) => { |
|||
row = [...row]; |
|||
|
|||
const indexTag = `<span class="index" style="background-color: ${headerBGC};">${i |
|||
+ 1}</span>`; |
|||
|
|||
row.unshift(indexTag); |
|||
|
|||
return row; |
|||
}); |
|||
} |
|||
|
|||
data = data.map((ceils, i) => ({ ceils, rowIndex: i })); |
|||
|
|||
const rowLength = data.length; |
|||
|
|||
if (rowLength > rowNum && rowLength < 2 * rowNum) { |
|||
data = [...data, ...data]; |
|||
} |
|||
|
|||
return data.map((d, i) => ({ ...d, scroll: i })); |
|||
} |
|||
|
|||
function calcAligns(mergedConfig, header) { |
|||
const columnNum = header.length; |
|||
|
|||
const aligns = new Array(columnNum).fill('left'); |
|||
|
|||
const { align } = mergedConfig; |
|||
|
|||
return deepMerge(aligns, align); |
|||
} |
|||
|
|||
const ScrollBoard = forwardRef(({ |
|||
onClick, config = {}, className, style, onMouseOver, |
|||
}, ref) => { |
|||
const { width, height, domRef } = useAutoResize(ref); |
|||
|
|||
const [state, setState] = useState({ |
|||
mergedConfig: null, |
|||
|
|||
header: [], |
|||
|
|||
rows: [], |
|||
|
|||
rowsShow: [], |
|||
|
|||
widths: [], |
|||
|
|||
heights: [], |
|||
|
|||
aligns: [], |
|||
}); |
|||
|
|||
const { |
|||
mergedConfig, header, rows, widths, heights, aligns, rowsShow, |
|||
} = state; |
|||
|
|||
const stateRef = useRef({ |
|||
...state, |
|||
rowsData: [], |
|||
avgHeight: 0, |
|||
animationIndex: 0, |
|||
}); |
|||
|
|||
Object.assign(stateRef.current, state); |
|||
|
|||
function onResize() { |
|||
if (!mergedConfig) return; |
|||
|
|||
const widths = calcWidths(mergedConfig, stateRef.current.rowsData); |
|||
|
|||
const heights = calcHeights(mergedConfig, header); |
|||
|
|||
const data = { widths, heights }; |
|||
|
|||
Object.assign(stateRef.current, data); |
|||
setState((state) => ({ ...state, ...data })); |
|||
} |
|||
const [init, setInit] = useState(true); |
|||
|
|||
function calcData() { |
|||
// const mergedConfig = deepMerge(
|
|||
// deepClone(defaultConfig, true),
|
|||
// config || {},
|
|||
// );
|
|||
const mergedConfig = { |
|||
...defaultConfig, |
|||
...config, |
|||
}; |
|||
|
|||
const header = calcHeaderData(mergedConfig); |
|||
|
|||
const rows = calcRows(mergedConfig); |
|||
|
|||
const widths = calcWidths(mergedConfig, stateRef.current.rowsData); |
|||
|
|||
const heights = calcHeights(mergedConfig, header); |
|||
|
|||
const aligns = calcAligns(mergedConfig, header); |
|||
|
|||
const data = { |
|||
mergedConfig, |
|||
header, |
|||
rows, |
|||
widths, |
|||
aligns, |
|||
heights: init ? heights : state.heights.concat(heights), |
|||
rowsShow: init ? rows : state.rowsShow, |
|||
}; |
|||
setInit(false); |
|||
Object.assign(stateRef.current, data, { |
|||
rowsData: rows, |
|||
animationIndex: stateRef.current.animationIndex, |
|||
}); |
|||
|
|||
setState((state) => ({ ...state, ...data })); |
|||
} |
|||
|
|||
function calcWidths({ columnWidth, header }, rowsData) { |
|||
const usedWidth = columnWidth.reduce((all, w) => all + w, 0); |
|||
|
|||
let columnNum = 0; |
|||
if (rowsData[0]) { |
|||
columnNum = rowsData[0].ceils.length; |
|||
} else if (header.length) { |
|||
columnNum = header.length; |
|||
} |
|||
|
|||
const avgWidth = (width - usedWidth) / (columnNum - columnWidth.length); |
|||
|
|||
const widths = new Array(columnNum).fill(avgWidth); |
|||
|
|||
return deepMerge(widths, columnWidth); |
|||
} |
|||
|
|||
function calcHeights({ headerHeight, rowNum, data }, header) { |
|||
let allHeight = height; |
|||
|
|||
if (header.length) allHeight -= headerHeight; |
|||
|
|||
const avgHeight = allHeight / rowNum; |
|||
|
|||
Object.assign(stateRef.current, { avgHeight }); |
|||
|
|||
return new Array(data.length).fill(avgHeight); |
|||
} |
|||
|
|||
function* animation(start = false) { |
|||
let { |
|||
avgHeight, |
|||
animationIndex, |
|||
mergedConfig: { waitTime, carousel, rowNum }, |
|||
rowsData, |
|||
} = stateRef.current; |
|||
|
|||
const rowLength = rowsData.length; |
|||
|
|||
if (start) yield new Promise((resolve) => setTimeout(resolve, waitTime)); |
|||
|
|||
const animationNum = carousel === 'single' ? 1 : rowNum; |
|||
|
|||
let rows = rowsData.slice(animationIndex); |
|||
rows.push(...rowsData.slice(0, animationIndex)); |
|||
rows = rows.slice(0, carousel === 'page' ? rowNum * 2 : rowNum + 1); |
|||
|
|||
const heights = new Array(rowLength).fill(avgHeight); |
|||
setState((state) => ({ |
|||
...state, rows, heights, rowsShow: rows, |
|||
})); |
|||
|
|||
yield new Promise((resolve) => setTimeout(resolve, 300)); |
|||
|
|||
animationIndex += animationNum; |
|||
|
|||
const back = animationIndex - rowLength; |
|||
if (back >= 0) animationIndex = back; |
|||
|
|||
const newHeights = [...heights]; |
|||
newHeights.splice(0, animationNum, ...new Array(animationNum).fill(0)); |
|||
|
|||
Object.assign(stateRef.current, { animationIndex }); |
|||
setState((state) => ({ ...state, heights: newHeights })); |
|||
} |
|||
|
|||
function emitEvent(handle, ri, ci, row, ceil) { |
|||
const { ceils, rowIndex } = row; |
|||
|
|||
handle && handle({ |
|||
row: ceils, ceil, rowIndex, columnIndex: ci, |
|||
}); |
|||
} |
|||
|
|||
function handleHover(enter, ri, ci, row, ceil) { |
|||
if (enter) emitEvent(onMouseOver, ri, ci, row, ceil); |
|||
|
|||
if (!mergedConfig.hoverPause) return; |
|||
|
|||
const { pause, resume } = task.current; |
|||
|
|||
enter && pause && resume ? pause() : resume && resume(); |
|||
} |
|||
|
|||
// updateRows(rows, animationIndex) {
|
|||
// const { mergedConfig, animationHandler, animation } = this
|
|||
// this.mergedConfig = {
|
|||
// ...mergedConfig,
|
|||
// data: [...rows]
|
|||
// }
|
|||
// this.needCalc = true
|
|||
// if (typeof animationIndex === 'number') this.animationIndex = animationIndex
|
|||
// if (!animationHandler) animation(true)
|
|||
// }
|
|||
|
|||
const getBackgroundColor = (rowIndex) => mergedConfig[rowIndex % 2 === 0 ? 'evenRowBGC' : 'oddRowBGC']; |
|||
|
|||
const task = useRef({}); |
|||
|
|||
useEffect(() => { |
|||
calcData(); |
|||
|
|||
let start = true; |
|||
|
|||
function* loop() { |
|||
while (true) { |
|||
yield* animation(start); |
|||
|
|||
start = false; |
|||
|
|||
const { waitTime } = stateRef.current.mergedConfig; |
|||
|
|||
yield new Promise((resolve) => setTimeout(resolve, waitTime - 300)); |
|||
} |
|||
} |
|||
|
|||
const { |
|||
mergedConfig: { rowNum }, |
|||
rows: rowsData, |
|||
} = stateRef.current; |
|||
|
|||
const rowLength = rowsData.length; |
|||
|
|||
if (rowNum >= rowLength) { |
|||
setState((prestate) => ({ |
|||
...prestate, rowsShow: state.rows, |
|||
})); |
|||
return; |
|||
} |
|||
|
|||
task.current = co(loop); |
|||
|
|||
return task.current.end; |
|||
}, [config, domRef.current]); |
|||
|
|||
useEffect(onResize, [width, height, domRef.current]); |
|||
|
|||
const classNames = useMemo(() => classnames('dv-scroll-board', className), [ |
|||
className, |
|||
]); |
|||
|
|||
return ( |
|||
<div className={classNames} style={style} ref={domRef}> |
|||
{!!header.length && !!mergedConfig && ( |
|||
<div |
|||
className="header" |
|||
style={{ backgroundColor: `${mergedConfig.headerBGC}` }} |
|||
> |
|||
{header.map((headerItem, i) => ( |
|||
<div |
|||
className="header-item" |
|||
key={`${headerItem}-${i}`} |
|||
style={{ |
|||
height: `${mergedConfig.headerHeight}px`, |
|||
lineHeight: `${mergedConfig.headerHeight}px`, |
|||
width: `${widths[i]}px`, |
|||
}} |
|||
align={aligns[i]} |
|||
dangerouslySetInnerHTML={{ __html: headerItem }} |
|||
/> |
|||
))} |
|||
</div> |
|||
)} |
|||
|
|||
{!!mergedConfig && ( |
|||
<div |
|||
className="rows" |
|||
style={{ |
|||
height: `${height |
|||
- (header.length ? mergedConfig.headerHeight : 0)}px`,
|
|||
}} |
|||
> |
|||
{rowsShow.map((row, ri) => ( |
|||
<div |
|||
className="row-item" |
|||
key={`${row.toString()}-${row.scroll}`} |
|||
style={{ |
|||
height: `${heights[ri]}px`, |
|||
lineHeight: `${heights[ri]}px`, |
|||
backgroundColor: `${getBackgroundColor(row.rowIndex)}`, |
|||
}} |
|||
> |
|||
{row.ceils.map((ceil, ci) => { |
|||
if (typeof (ceil) === 'string') { |
|||
return ( |
|||
<div |
|||
className="ceil" |
|||
key={`${ceil}-${ri}-${ci}`} |
|||
style={{ width: `${widths[ci]}px` }} |
|||
align={aligns[ci]} |
|||
dangerouslySetInnerHTML={{ __html: ceil }} |
|||
onClick={() => emitEvent(onClick, ri, ci, row, ceil)} |
|||
onMouseEnter={() => handleHover(true, ri, ci, row, ceil)} |
|||
onMouseLeave={() => handleHover(false)} |
|||
/> |
|||
); |
|||
} |
|||
return ( |
|||
<div |
|||
className="ceil" |
|||
style={{ width: `${widths[ci]}px` }} |
|||
align={aligns[ci]} |
|||
key={`${ri}-${ci}`} |
|||
onMouseEnter={() => handleHover(true, ri, ci, row, ceil)} |
|||
onMouseLeave={() => handleHover(false)} |
|||
> |
|||
{ceil} |
|||
</div> |
|||
); |
|||
})} |
|||
</div> |
|||
))} |
|||
</div> |
|||
)} |
|||
</div> |
|||
); |
|||
}); |
|||
|
|||
ScrollBoard.propTypes = { |
|||
config: PropTypes.object, |
|||
onClick: PropTypes.func, |
|||
onMouseOver: PropTypes.func, |
|||
className: PropTypes.string, |
|||
style: PropTypes.object, |
|||
}; |
|||
|
|||
export default ScrollBoard; |
|||
@ -0,0 +1,44 @@ |
|||
.dv-scroll-board { |
|||
position: relative; |
|||
width: 100%; |
|||
height: 100%; |
|||
color: #fff; |
|||
|
|||
.text { |
|||
padding: 0 10px; |
|||
box-sizing: border-box; |
|||
white-space: nowrap; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
} |
|||
|
|||
.header { |
|||
display: flex; |
|||
flex-direction: row; |
|||
font-size: 15px; |
|||
|
|||
.header-item { |
|||
.text; |
|||
transition: all 0.3s; |
|||
} |
|||
} |
|||
|
|||
.rows { |
|||
overflow: hidden; |
|||
|
|||
.row-item { |
|||
display: flex; |
|||
font-size: 14px; |
|||
transition: all 0.3s; |
|||
} |
|||
|
|||
.ceil { |
|||
.text; |
|||
} |
|||
|
|||
.index { |
|||
border-radius: 3px; |
|||
padding: 0px 3px; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,44 @@ |
|||
'use strict' |
|||
|
|||
import React from 'react' |
|||
import { Row, Col, Modal, Tooltip } from 'antd' |
|||
import './index.less' |
|||
|
|||
class TableCard extends React.Component { |
|||
|
|||
render() { |
|||
const { title, renderBody, height, width, bodyPaddingTop, subTitle, titlePaddingTop, margin, overflow, padding } = this.props |
|||
|
|||
const headerbg = { |
|||
background: 'url(/assets/images/homepage/bigscreen/header-title-bg.png) no-repeat', |
|||
backgroundSize: '100% 100%', |
|||
|
|||
} |
|||
return ( |
|||
<div style={{ height, width: '100%', margin: margin || "0px 0px 28px" }}> |
|||
<div style={{ |
|||
height: height, listStyle: 'none', overflow: overflow || 'hidden', |
|||
backgroundImage: 'linear-gradient(180deg, #00204a00 3%, #50c9f71a 100%)', |
|||
// ...bg
|
|||
}}> |
|||
<Row style={{ height: 42, paddingLeft: 24, paddingTop: '4px', wordBreak: 'keep-all', whiteSpace: 'nowrap', width: '100%', ...headerbg }}> |
|||
<Col span={8}> |
|||
<span className='card-title'>{title}</span><div className='_sorrow'/> |
|||
</Col> |
|||
<Col span={16} style={{ textAlign: 'right' }}> |
|||
{subTitle} |
|||
</Col> |
|||
</Row> |
|||
<div |
|||
style={{ |
|||
width: '100%', height: 2, |
|||
marginTop: titlePaddingTop || 10, marginBottom: bodyPaddingTop || 25, |
|||
}} /> |
|||
{renderBody} |
|||
</div> |
|||
</div> |
|||
) |
|||
} |
|||
} |
|||
export default TableCard |
|||
|
|||
@ -0,0 +1,222 @@ |
|||
.homepage { |
|||
width: 100%; |
|||
height: 100%; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
background: url('/assets/images/homePage/bigscreen/bg.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
overflow: hidden; |
|||
|
|||
._title { |
|||
width: 100%; |
|||
height: 88px; |
|||
background: url('/assets/images/homePage/bigscreen/top.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
._exit { |
|||
position: absolute; |
|||
right: 60px; |
|||
top: 38px; |
|||
// width: 16px; |
|||
// height: 16px; |
|||
cursor: pointer; |
|||
color: #C8F0FF; |
|||
display: flex; |
|||
|
|||
._icon { |
|||
display: inline-block; |
|||
width: 28px; |
|||
height: 28px; |
|||
background: url('/assets/images/homePage/bigscreen/exit.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
margin-right: 3px; |
|||
} |
|||
} |
|||
|
|||
.homepage-left { |
|||
// padding-top: 15px; |
|||
width: 21.8%; |
|||
height: 89.6%; |
|||
// background-color: red; |
|||
position: absolute; |
|||
top: 8.2%; |
|||
z-index: 300; |
|||
} |
|||
|
|||
.homepage-center { |
|||
width: 49.16%; |
|||
height: 150px; |
|||
// background-color: blueviolet; |
|||
position: absolute; |
|||
bottom: 2.5%; |
|||
left: 25.5%; |
|||
padding-left: 16px; |
|||
padding-right: 16px; |
|||
z-index: 400; |
|||
// background-color: rebeccapurple; |
|||
} |
|||
|
|||
.homepage-left-left { |
|||
left: 48px; |
|||
} |
|||
|
|||
.homepage-left-right { |
|||
right: 48px; |
|||
} |
|||
|
|||
} |
|||
|
|||
|
|||
.list { |
|||
list-style: none; |
|||
height: 100%; |
|||
} |
|||
|
|||
.list .child { |
|||
box-sizing: border-box; |
|||
opacity: 0; |
|||
transform: translateX(-300px); |
|||
animation: show .5s forwards; |
|||
// margin-bottom: 17px; |
|||
} |
|||
|
|||
.list .child.show { |
|||
animation-delay: 0s !important; |
|||
} |
|||
|
|||
.list .child.hide { |
|||
opacity: 1; |
|||
transform: translateX(0); |
|||
animation-name: hide; |
|||
animation-delay: 0s; |
|||
} |
|||
|
|||
/*animation-delay*/ |
|||
.list .child:not(.hide):nth-child(5n + 1) { |
|||
animation-delay: .3s; |
|||
} |
|||
|
|||
.list .child:not(.hide):nth-child(5n + 2) { |
|||
animation-delay: .6s; |
|||
} |
|||
|
|||
.list .child:not(.hide):nth-child(5n + 3) { |
|||
animation-delay: .9s; |
|||
} |
|||
|
|||
.list .child:not(.hide):nth-child(5n + 4) { |
|||
animation-delay: 1.2s; |
|||
} |
|||
|
|||
.list .child:not(.hide):nth-child(5n + 5) { |
|||
animation-delay: 1.5s; |
|||
} |
|||
|
|||
.list .child-right { |
|||
box-sizing: border-box; |
|||
opacity: 0; |
|||
transform: translateX(300px); |
|||
animation: show .5s forwards; |
|||
} |
|||
|
|||
.list .child-right.show { |
|||
animation-delay: 0s !important; |
|||
} |
|||
|
|||
.list .child-right.hide { |
|||
opacity: 1; |
|||
transform: translateX(0); |
|||
animation-name: hide; |
|||
animation-delay: 0s; |
|||
} |
|||
|
|||
/*animation-delay*/ |
|||
.list .child-right:not(.hide):nth-child(5n + 1) { |
|||
animation-delay: .3s; |
|||
} |
|||
|
|||
.list .child-right:not(.hide):nth-child(5n + 2) { |
|||
animation-delay: .6s; |
|||
} |
|||
|
|||
.list .child-right:not(.hide):nth-child(5n + 3) { |
|||
animation-delay: .9s; |
|||
} |
|||
|
|||
.list .child-right:not(.hide):nth-child(5n + 4) { |
|||
animation-delay: 1.2s; |
|||
} |
|||
|
|||
.list .child-right:not(.hide):nth-child(5n + 5) { |
|||
animation-delay: 1.5s; |
|||
} |
|||
|
|||
.list .child-top { |
|||
box-sizing: border-box; |
|||
opacity: 0; |
|||
transform: translateY(300px); |
|||
animation: show 1s forwards; |
|||
} |
|||
|
|||
.list .child-top.show { |
|||
animation-delay: 0s !important; |
|||
} |
|||
|
|||
.list .child-top.hide { |
|||
opacity: 1; |
|||
transform: translateY(0); |
|||
animation-name: hide; |
|||
animation-delay: 0s; |
|||
} |
|||
|
|||
|
|||
@keyframes show { |
|||
to { |
|||
opacity: 1; |
|||
transform: translateX(0); |
|||
} |
|||
} |
|||
|
|||
@keyframes hide { |
|||
to { |
|||
opacity: 0; |
|||
transform: translateX(100px); |
|||
max-height: 0; |
|||
margin: 0; |
|||
} |
|||
} |
|||
|
|||
.center-card-title { |
|||
height: 31px; |
|||
font-family: YouSheBiaoTiHei; |
|||
font-size: 24px; |
|||
color: #FFFFFF; |
|||
display: flex; |
|||
align-items: center; |
|||
margin-top: 5px; |
|||
|
|||
._icon_left { |
|||
width: 32px; |
|||
height: 17px; |
|||
background: url('/assets/images/homePage/bigscreen/center-left.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
margin-right: 11px; |
|||
margin-left: 10px; |
|||
} |
|||
|
|||
._icon_right { |
|||
width: 32px; |
|||
height: 17px; |
|||
background: url('/assets/images/homePage/bigscreen/center-right.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
margin-right: 11px; |
|||
margin-left: 10px; |
|||
} |
|||
} |
|||
Loading…
Reference in new issue