86 changed files with 3893 additions and 64 deletions
|
After Width: | Height: | Size: 8.5 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 242 B |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 9.5 MiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 1.3 MiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 1.5 MiB |
|
After Width: | Height: | Size: 450 KiB |
|
After Width: | Height: | Size: 353 KiB |
|
After Width: | Height: | Size: 257 KiB |
|
After Width: | Height: | Size: 192 KiB |
|
After Width: | Height: | Size: 253 KiB |
|
After Width: | Height: | Size: 188 KiB |
|
After Width: | Height: | Size: 251 KiB |
|
After Width: | Height: | Size: 185 KiB |
|
After Width: | Height: | Size: 63 KiB |
@ -0,0 +1,15 @@ |
|||
'use strict'; |
|||
|
|||
import { basicAction } from '@peace/utils' |
|||
import { ApiTable } from '$utils' |
|||
|
|||
// export function getMembers(orgId) {
|
|||
// return dispatch => basicAction({
|
|||
// type: 'get',
|
|||
// dispatch: dispatch,
|
|||
// actionType: 'GET_MEMBERS',
|
|||
// url: `${ApiTable.getEnterprisesMembers.replace('{enterpriseId}', orgId)}`,
|
|||
// msg: { error: '获取用户列表失败' },
|
|||
// reducer: { name: 'members' }
|
|||
// });
|
|||
// }
|
|||
@ -0,0 +1,7 @@ |
|||
'use strict'; |
|||
|
|||
import * as example from './example' |
|||
|
|||
export default { |
|||
...example, |
|||
} |
|||
@ -0,0 +1,45 @@ |
|||
import React from 'react' |
|||
import Box from './public/table-card'; |
|||
|
|||
function BasicInfo() { |
|||
|
|||
return <Box title={"基本信息"} > |
|||
<div className='_basic_info'> |
|||
<div className='_basic_row1'> |
|||
<div className='_item1' /> |
|||
<div className='_item2'> |
|||
<div className='_basictitlebg'> |
|||
<div className='_basic_title'>南昌县</div> |
|||
<span className='_basic_sub_title'>Nanchang county</span> |
|||
</div> |
|||
|
|||
<div className='_basic_text'> |
|||
<span>区域面积：</span> |
|||
<span className='_text_number_color'>1742.3km³</span> |
|||
</div> |
|||
|
|||
<div className='_basic_text'> |
|||
<span>人口：</span> |
|||
<span className='_text_number_color'>14.43万</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div className='_basic_row2'> |
|||
<div className='_item1'> |
|||
<span>社区数量</span> |
|||
<span className='_number'>53个</span> |
|||
</div> |
|||
<div className='basicinterval' /> |
|||
<div className='_item2'> |
|||
<span>房屋数量</span> |
|||
<span className='_number'>630座</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</Box> |
|||
} |
|||
|
|||
export default BasicInfo; |
|||
|
|||
|
|||
@ -0,0 +1,14 @@ |
|||
import React, { useEffect, useState } from 'react' |
|||
import Box from './public/table-card'; |
|||
import './style.less'; |
|||
|
|||
function CitySafty(props) { |
|||
|
|||
return <Box title={"城市安全"} > |
|||
城市安全 |
|||
</Box> |
|||
} |
|||
|
|||
export default CitySafty; |
|||
|
|||
|
|||
@ -0,0 +1,32 @@ |
|||
import React from 'react' |
|||
import Box from './public/table-card'; |
|||
|
|||
function Infrastructure(props) { |
|||
|
|||
const data = [ |
|||
{ name: '烟感设备', number: 32 }, |
|||
{ name: '温度设备', number: 32 }, |
|||
{ name: '摄像头设备', number: 32 }, |
|||
{ name: '电梯设备', number: 32 }, |
|||
] |
|||
return <Box title={"基础设施"} > |
|||
<div className='_basic_device'> |
|||
{ |
|||
data.map((s, index) => { |
|||
return <div className='_device_item'> |
|||
<div className={'_device_img' + (index + 1)} /> |
|||
<div className='_device_text'> |
|||
<div>{s.name}</div> |
|||
<div><span className='_device_number'>{s.number}</span> 个</div> |
|||
</div> |
|||
</div> |
|||
}) |
|||
} |
|||
|
|||
</div> |
|||
</Box> |
|||
} |
|||
|
|||
export default Infrastructure; |
|||
|
|||
|
|||
@ -0,0 +1,35 @@ |
|||
import React from 'react' |
|||
import Box from './public/table-card'; |
|||
|
|||
function PopulationDynamics() { |
|||
|
|||
const data = [ |
|||
{ title: '常驻人口', number: 447 }, |
|||
{ title: '流动人口', number: 447 }, |
|||
{ title: '境外人口', number: 447 }, |
|||
{ title: '未落户人口', number: 447 }, |
|||
{ title: '贫困人口', number: 447 }, |
|||
{ title: '老龄人口', number: 447 }, |
|||
] |
|||
return <Box title={"人口动态"} > |
|||
<div className='_person_trends'> |
|||
<div className='_person_tends_item1' /> |
|||
<div className='_person_tends_item2'> |
|||
{ |
|||
data.map(s => { |
|||
return <div className='_person_text'> |
|||
<div className='_person_title'>{s.title}</div> |
|||
<div className='_person_number'>{s.number}</div> |
|||
<span>万人</span> |
|||
</div> |
|||
}) |
|||
} |
|||
|
|||
</div> |
|||
</div> |
|||
</Box> |
|||
} |
|||
|
|||
export default PopulationDynamics; |
|||
|
|||
|
|||
@ -0,0 +1,33 @@ |
|||
/* 轮播列表组件 */ |
|||
import React from 'react'; |
|||
import ScrollBoard from './scrollBoard'; |
|||
import NoData from './noData'; |
|||
import './index.less'; |
|||
function CarouselList(props) { |
|||
const { |
|||
header = [], data = [], rowNum = 4, height, columnWidth, multiellipsis, waitTime = 2000, marginTop, ...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'} |
|||
{...restProps} |
|||
/> |
|||
) : <NoData marginTop={marginTop || 0} />; |
|||
} |
|||
|
|||
export default CarouselList; |
|||
@ -0,0 +1,77 @@ |
|||
.opcityBackground { |
|||
background-color: rgba(8, 27, 55, 0.6); |
|||
} |
|||
|
|||
.card-title { |
|||
height: 31px; |
|||
font-family: YouSheBiaoTiHei; |
|||
font-size: 24px; |
|||
color: #FFFFFF; |
|||
letter-spacing: 2px; |
|||
} |
|||
|
|||
/* 滚动列表 */ |
|||
.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,18 @@ |
|||
/* 公共模块暂无数据组件 */ |
|||
import React from 'react'; |
|||
import { Empty } from 'antd'; |
|||
|
|||
function NoData({ height = 180, marginTop = 0 }) { |
|||
return ( |
|||
<Empty |
|||
image="/assets/images/homePage/bigscreen/empty.png" |
|||
imageStyle={{ |
|||
height, |
|||
marginTop |
|||
}} |
|||
description={false} |
|||
/> |
|||
); |
|||
} |
|||
|
|||
export default NoData; |
|||
@ -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,35 @@ |
|||
'use strict' |
|||
|
|||
import React from 'react' |
|||
import './index.less' |
|||
class Box extends React.Component { |
|||
render() { |
|||
const { title, height = '100%', children, bodyPaddingTop = 1, titlePaddingTop, margin, overflow } = this.props |
|||
|
|||
const headerbg = { |
|||
background: 'url(/assets/images/homePage/bigscreen/headertitlebg.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', |
|||
|
|||
}}> |
|||
<div style={{ height: 42, paddingTop: '4px', wordBreak: 'keep-all', whiteSpace: 'nowrap', width: '100%', ...headerbg, }}> |
|||
<span className='card-title'>{title}</span> |
|||
</div> |
|||
<div style={{ |
|||
height: 'calc(100% - 42px)', |
|||
backgroundImage: 'linear-gradient(180deg, #04377ecc 1%, #001241 100%)', |
|||
}}> |
|||
{children} |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
) |
|||
} |
|||
} |
|||
export default Box |
|||
|
|||
@ -0,0 +1,31 @@ |
|||
import React, { useEffect, useState } from 'react' |
|||
import Box from './public/table-card'; |
|||
import './style.less'; |
|||
|
|||
function SpecialPerson(props) { |
|||
|
|||
const data = [ |
|||
{ name: '刑满释放', number: 447 }, |
|||
{ name: '社区矫正', number: 447 }, |
|||
{ name: '吸毒人员', number: 447 }, |
|||
{ name: '重点青少年', number: 447 }, |
|||
{ name: '艾滋病人', number: 447 }, |
|||
] |
|||
return <Box title={"特殊人群统计"}> |
|||
<div className='_special'> |
|||
{ |
|||
data.map((s, index) => { |
|||
return <div className={`_special_item _special_bg${index % 2 == 0 ? 1 : 2}`}> |
|||
<span>{s.name}</span> |
|||
<span><span className='_number'>{s.number}</span>人</span> |
|||
</div> |
|||
}) |
|||
} |
|||
|
|||
</div> |
|||
</Box> |
|||
} |
|||
|
|||
export default SpecialPerson; |
|||
|
|||
|
|||
@ -0,0 +1,286 @@ |
|||
@card-height: calc(100% - 42px - 13px); //左右卡片内容高度定义 目前卡片为等高 |
|||
|
|||
//基本信息 |
|||
._basic_info { |
|||
padding: 21px 7px 0px 12px; |
|||
|
|||
//第一行 |
|||
._basic_row1 { |
|||
display: flex; |
|||
width: 100%; |
|||
|
|||
._item1 { |
|||
width: 128px; |
|||
height: 125px; |
|||
background: url('/assets/images/homePage/communtity/basicimg.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
._item2 { |
|||
width: calc(100% - 128px); |
|||
height: 125px; |
|||
padding-left: 20px; |
|||
|
|||
._basictitlebg { |
|||
background: url('/assets/images/homePage/communtity/basictitlebg.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
width: 100%; |
|||
height: 17.5px; |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-around; |
|||
align-items: center; |
|||
|
|||
._basic_title { |
|||
font-family: YouSheBiaoTiHei; |
|||
font-size: 21px; |
|||
color: #FFFFFF; |
|||
letter-spacing: 0.74px; |
|||
width: 70px; |
|||
margin-top: -13px; |
|||
} |
|||
|
|||
._basic_sub_title { |
|||
font-family: YouSheBiaoTiHei; |
|||
font-size: 14px; |
|||
color: #C0E2FF; |
|||
letter-spacing: 0; |
|||
} |
|||
} |
|||
|
|||
._basic_text { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
padding-bottom: 14px; |
|||
border-bottom: 1px solid #c3e6ff69; |
|||
font-size: 14px; |
|||
color: #C0E2FF; |
|||
margin-top: 14px; |
|||
padding-left: 5px; |
|||
padding-right: 5px; |
|||
|
|||
._text_number_color { |
|||
font-family: D-DIN-Italic; |
|||
font-weight: DIN; |
|||
font-size: 16px; |
|||
color: #FFFFFF; |
|||
letter-spacing: 0.5px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
//第二行 |
|||
._basic_row2 { |
|||
width: 100%; |
|||
display: flex; |
|||
font-family: SourceHanSansCN-Medium; |
|||
font-weight: 500; |
|||
font-size: 13px; |
|||
color: #C0E2FF; |
|||
letter-spacing: 0; |
|||
margin-top: 19px; |
|||
background: url('/assets/images/homePage/communtity/basictextbg.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
height: 43px; |
|||
align-items: center; |
|||
|
|||
._item1 { |
|||
width: 50%; |
|||
display: flex; |
|||
justify-content: space-around; |
|||
} |
|||
|
|||
._item2 { |
|||
width: calc(50% - 1px); |
|||
display: flex; |
|||
justify-content: space-around; |
|||
} |
|||
|
|||
.basicinterval { |
|||
background: url('/assets/images/homePage/communtity/basicinterval.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
width: 1px; |
|||
height: 19px; |
|||
} |
|||
|
|||
._number { |
|||
font-family: YouSheBiaoTiHei; |
|||
font-size: 16px; |
|||
color: #FFFFFF; |
|||
letter-spacing: 0; |
|||
text-align: right; |
|||
} |
|||
} |
|||
} |
|||
|
|||
//人口动态 |
|||
._person_trends { |
|||
display: flex; |
|||
padding: 10px 18px 0px 10px; |
|||
height: 100%; |
|||
|
|||
._person_tends_item1 { |
|||
width: 123.5px; |
|||
height: 100%; |
|||
background: url('/assets/images/homePage/communtity/person.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
._person_tends_item2 { |
|||
width: calc(100% - 123.5px); |
|||
padding-left: 21px; |
|||
padding-top: 30px; |
|||
|
|||
._person_text { |
|||
margin-bottom: 10%; |
|||
background: url('/assets/images/homePage/communtity/personbg.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
width: 100%; |
|||
height: 15px; |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-around; |
|||
align-items: center; |
|||
padding-left: 10px; |
|||
padding-right: 8px; |
|||
font-family: YouSheBiaoTiHei; |
|||
font-size: 12px; |
|||
color: #C0E2FF; |
|||
letter-spacing: 0; |
|||
|
|||
._person_title { |
|||
width: 100px; |
|||
font-family: YouSheBiaoTiHei; |
|||
font-size: 16px; |
|||
color: #FFFFFF; |
|||
letter-spacing: 0.56px; |
|||
margin-top: -11px; |
|||
} |
|||
|
|||
._person_number { |
|||
width: calc(100% - 150px); |
|||
height: 28px; |
|||
font-family: D-DIN-Italic; |
|||
font-weight: Italic; |
|||
font-size: 28px; |
|||
color: #24DCF7; |
|||
letter-spacing: 0.98px; |
|||
margin-top: -37px; |
|||
text-align: right; |
|||
} |
|||
|
|||
} |
|||
} |
|||
} |
|||
|
|||
//基础设施 |
|||
._basic_device { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
height: 100%; |
|||
align-items: center; |
|||
|
|||
._device_item { |
|||
width: 50%; |
|||
height: 82px; |
|||
display: flex; |
|||
|
|||
._device_img1 { |
|||
width: 93.12px; |
|||
height: 82px; |
|||
background: url('/assets/images/homePage/communtity/smoke.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
._device_img2 { |
|||
width: 93.12px; |
|||
height: 82px; |
|||
background: url('/assets/images/homePage/communtity/temp.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
._device_img3 { |
|||
width: 93.12px; |
|||
height: 82px; |
|||
background: url('/assets/images/homePage/communtity/video.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
._device_img4 { |
|||
width: 93.12px; |
|||
height: 82px; |
|||
background: url('/assets/images/homePage/communtity/lift.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
._device_text { |
|||
color: #ECF7FF; |
|||
width: calc(100% - 94px); |
|||
display: flex; |
|||
align-items: center; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
|
|||
._device_number { |
|||
font-family: D-DIN-Italic; |
|||
font-weight: Italic; |
|||
font-size: 28px; |
|||
color: #29E4FF; |
|||
letter-spacing: 0; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
._special { |
|||
height: 100%; |
|||
padding-left: 16px; |
|||
padding-right: 9px; |
|||
|
|||
._special_item { |
|||
height: 19%; |
|||
margin-bottom: 0.6%; |
|||
display: flex; |
|||
font-family: YouSheBiaoTiHei; |
|||
font-size: 18px; |
|||
color: #ECF7FF; |
|||
letter-spacing: 0.4px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding-right: 3%; |
|||
padding-left: 15%; |
|||
|
|||
._number { |
|||
font-family: D-DIN-Italic; |
|||
font-weight: Italic; |
|||
font-size: 26px; |
|||
color: #24DCF7; |
|||
letter-spacing: 0; |
|||
} |
|||
} |
|||
|
|||
._special_bg1 { |
|||
background: url('/assets/images/homePage/communtity/special1.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
._special_bg2 { |
|||
background: url('/assets/images/homePage/communtity/special2.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
} |
|||
@ -0,0 +1,15 @@ |
|||
import React, { useEffect, useState } from 'react' |
|||
import Box from './public/table-card'; |
|||
import './style.less'; |
|||
|
|||
function DataTop5(props) { |
|||
|
|||
|
|||
return <Box title={"小区人流量排名"} bodyPaddingTop={1} > |
|||
小区人流量排名 |
|||
</Box> |
|||
} |
|||
|
|||
export default DataTop5; |
|||
|
|||
|
|||
@ -0,0 +1,3 @@ |
|||
export const mathRound = (number) => { |
|||
return number ? Math.round(number / 1000) / 10 : 0 |
|||
} |
|||
@ -0,0 +1,48 @@ |
|||
import React, { useEffect, useState } from 'react'; |
|||
import { connect } from 'react-redux'; |
|||
|
|||
const MAPDOMID = 'fs-amap-container'; |
|||
let map = null; |
|||
let interval = null; |
|||
function Map(props) { |
|||
const [delay, setDelay] = useState(true) |
|||
// 地图初始化
|
|||
const loadMap = () => { |
|||
map = new AMap.Map(MAPDOMID, { |
|||
center: [115.89, 28.68], |
|||
zoomEnable: true, |
|||
dragEnable: true, |
|||
viewMode: '3D', |
|||
pitch: 30, |
|||
labelzIndex: 130, |
|||
zoom: 18, |
|||
cursor: 'pointer', |
|||
mapStyle: 'amap://styles/4eb48d1ef0a024c73376fd2256d0b5a5', |
|||
}); |
|||
map.on('complete', () => { |
|||
setTimeout(() => { |
|||
setDelay(false) |
|||
}, 1000); |
|||
|
|||
}); |
|||
}; |
|||
|
|||
|
|||
// 初始化GIS 组件销毁清空定时器
|
|||
useEffect(() => { |
|||
loadMap(); |
|||
}, []); |
|||
|
|||
return ( |
|||
<> |
|||
{delay && <div style={{ |
|||
width: '100%', height: '100%', left: 0, top: 0, zIndex: 1000, background: '#02152f', position: 'absolute', |
|||
display: 'flex', alignItems: 'center', justifyContent: 'center' |
|||
}}> |
|||
</div>} |
|||
<div className="gis" id={MAPDOMID} /> |
|||
</> |
|||
); |
|||
} |
|||
|
|||
export default connect()(Map); |
|||
@ -0,0 +1,77 @@ |
|||
import React, { useEffect, useState } from 'react' |
|||
import { connect } from 'react-redux'; |
|||
import { push } from 'react-router-redux'; |
|||
import LeftTop from '../components/basic-info' |
|||
import LeftMiddle from '../components/population-dynamics' |
|||
import LeftBottom from '../components/infrastructure' |
|||
import RightTop from '../components/city-safty' |
|||
import RightMiddle from '../components/special-person' |
|||
import RightBottom from '../components/traffic-ranking' |
|||
import Gis from './gis'; |
|||
import './style.less' |
|||
|
|||
function homePage(props) { |
|||
const { dispatch } = props; |
|||
const childStyle = { height: '32%', color: '#fff', marginBottom: 17 } |
|||
const cardHeight = document.body.clientHeight * 0.896 * 0.32 |
|||
const cardContentHeight = cardHeight - 42 - 13 |
|||
return <> |
|||
<div className='homepage'> |
|||
<div className='_title'> |
|||
<div className='_title_text'> |
|||
<span>社区安全</span> |
|||
<div className='_title_dot'></div> |
|||
<span>流动人口</span> |
|||
</div> |
|||
<div onClick={() => { dispatch(push('/metadataManagement/latestMetadata')) }} className='_exit' >返回平台</div> |
|||
</div> |
|||
<div className='homepage-left homepage-left-left'> |
|||
<div className="list"> |
|||
<div className='child' style={childStyle}> |
|||
<LeftTop /> |
|||
</div> |
|||
<div className='child' style={childStyle}> |
|||
<LeftMiddle /> |
|||
</div> |
|||
<div className='child' style={childStyle}> |
|||
<LeftBottom cardContentHeight={cardContentHeight} /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div className='homepage-center'> |
|||
<Gis /> |
|||
</div> |
|||
<div className='homepage-left homepage-left-right'> |
|||
<div className="list"> |
|||
<div className='child-right' style={childStyle}> |
|||
<RightTop /> |
|||
</div> |
|||
<div className='child-right' style={childStyle}> |
|||
<RightMiddle cardContentHeight={cardContentHeight} /> |
|||
</div> |
|||
<div className='child-right' style={childStyle}> |
|||
<RightBottom /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</> |
|||
|
|||
|
|||
} |
|||
|
|||
function mapStateToProps(state) { |
|||
const { |
|||
auth, global |
|||
} = state; |
|||
return { |
|||
clientHeight: global.clientHeight, |
|||
actions: global.actions, |
|||
|
|||
}; |
|||
} |
|||
|
|||
export default connect(mapStateToProps)(homePage); |
|||
|
|||
|
|||
@ -0,0 +1,6 @@ |
|||
'use strict'; |
|||
|
|||
import homePage from './homePage'; |
|||
|
|||
|
|||
export default homePage ; |
|||
@ -0,0 +1,260 @@ |
|||
.homepage { |
|||
width: 100%; |
|||
height: 100%; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
background: url('/assets/images/homePage/communtity/bg.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
overflow: hidden; |
|||
// display: flex; |
|||
// flex-direction: column; |
|||
// justify-content: center; |
|||
// align-items: center; |
|||
padding-top: 5%; |
|||
|
|||
._title_text { |
|||
position: absolute; |
|||
top: 0%; |
|||
width: 100%; |
|||
height: 62px; |
|||
font-family: YouSheBiaoTiHei; |
|||
font-size: 48px; |
|||
color: #FFFFFF; |
|||
letter-spacing: 12px; |
|||
z-index: 300; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
._title_dot { |
|||
display: inline-block; |
|||
width: 8px; |
|||
height: 8px; |
|||
background-image: linear-gradient(180deg, #FFFFFF 0%, #0d71ef00 100%); |
|||
margin-left: 14px; |
|||
margin-right: 14px; |
|||
border-radius: 4px; |
|||
} |
|||
|
|||
} |
|||
|
|||
._exit { |
|||
position: absolute; |
|||
right: 60px; |
|||
top: 38px; |
|||
cursor: pointer; |
|||
color: #C8F0FF; |
|||
display: flex; |
|||
width: 102px; |
|||
height: 33px; |
|||
background: url('/assets/images/homePage/bigscreen/exit.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
padding-left: 35px; |
|||
align-items: center; |
|||
z-index: 400; |
|||
} |
|||
|
|||
.homepage-left { |
|||
width: 21.8%; |
|||
height: 84.6%; |
|||
position: absolute; |
|||
top: 10.1%; |
|||
z-index: 300; |
|||
} |
|||
|
|||
.homepage-center { |
|||
width: 93.9%; |
|||
height: 84%; |
|||
position: absolute; |
|||
top: 10.4%; |
|||
left: 58px; |
|||
padding-left: 16px; |
|||
padding-right: 16px; |
|||
z-index: 200; |
|||
|
|||
._top { |
|||
margin-top: 5%; |
|||
height: calc(100% - 200px); |
|||
background: url('/assets/images/homePage/bigscreen/centerbg.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
position: relative; |
|||
} |
|||
} |
|||
|
|||
.homepage-left-left { |
|||
left: 58px; |
|||
} |
|||
|
|||
.homepage-left-right { |
|||
right: 58px; |
|||
} |
|||
|
|||
} |
|||
|
|||
|
|||
.list { |
|||
list-style: none; |
|||
height: 100%; |
|||
} |
|||
|
|||
.list .child { |
|||
box-sizing: border-box; |
|||
opacity: 0; |
|||
transform: translateX(-300px); |
|||
animation: show .5s forwards; |
|||
} |
|||
|
|||
.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; |
|||
} |
|||
} |
|||
|
|||
.gis { |
|||
position: absolute; |
|||
width: 100vw; |
|||
height: calc(~"100% - 114px"); |
|||
left: 0; |
|||
top: 114px; |
|||
z-index: 0; |
|||
display: flex; |
|||
justify-content: center; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
@ -0,0 +1,15 @@ |
|||
'use strict'; |
|||
|
|||
import reducers from './reducers'; |
|||
import routes from './routes'; |
|||
import actions from './actions'; |
|||
import { getNavItem } from './nav-item'; |
|||
|
|||
export default { |
|||
key: 'communitysafty', |
|||
name: '首页', |
|||
reducers: reducers, |
|||
routes: routes, |
|||
actions: actions, |
|||
getNavItem: getNavItem |
|||
}; |
|||
@ -0,0 +1,11 @@ |
|||
import React from 'react'; |
|||
import { Link } from 'react-router-dom'; |
|||
import { Menu } from 'antd'; |
|||
import { HomeOutlined } from '@ant-design/icons'; |
|||
export function getNavItem(user) { |
|||
return ( |
|||
<Menu.Item key="communitysafty" icon={<HomeOutlined />}> |
|||
<Link to="/communitysafty">社区安全</Link> |
|||
</Menu.Item> |
|||
); |
|||
} |
|||
@ -0,0 +1,5 @@ |
|||
'use strict'; |
|||
|
|||
export default { |
|||
|
|||
} |
|||
@ -0,0 +1,13 @@ |
|||
'use strict'; |
|||
import homePage from './containers/index'; |
|||
|
|||
export default [{ |
|||
type: 'outer', |
|||
route: { |
|||
path: '/communitysafty', |
|||
key: 'communitysafty', |
|||
breadcrumb: '数据监控平台', |
|||
// 不设置 component 则面包屑禁止跳转
|
|||
component: homePage |
|||
} |
|||
}]; |
|||
@ -0,0 +1,74 @@ |
|||
import React, { useEffect, useState } from 'react' |
|||
import { connect } from 'react-redux'; |
|||
import { push } from 'react-router-redux'; |
|||
import AccessData from '../components/accessData' |
|||
import AlarmList from '../components/alarmList' |
|||
import DataShare from '../components/dataShare' |
|||
import DataTop5 from '../components/dataTop5' |
|||
import HotspotData from '../components/hotspotData' |
|||
import NodeResource from '../components/nodeResource' |
|||
import AbnormalMonitoring from '../components/abnormalMonitoring' |
|||
import CenterTop from '../components/centerTop' |
|||
import './style.less' |
|||
|
|||
function homePage(props) { |
|||
const { dispatch } = props; |
|||
const childStyle = { height: '32%', color: '#fff', marginBottom: 17 } |
|||
const cardHeight = document.body.clientHeight * 0.896 * 0.32 |
|||
const cardContentHeight = cardHeight - 42 - 13 |
|||
return <div className='homepage'> |
|||
<div className='_title'> |
|||
<div onClick={() => { dispatch(push('/metadataManagement/latestMetadata')) }} className='_exit' ><div className='_icon' />进入后台</div> |
|||
</div> |
|||
<div className='homepage-left homepage-left-left'> |
|||
<div className="list"> |
|||
<div className='child' style={childStyle}> |
|||
<AccessData /> |
|||
</div> |
|||
<div className='child' style={childStyle}> |
|||
<NodeResource /> |
|||
</div> |
|||
<div className='child' style={childStyle}> |
|||
<AlarmList cardContentHeight={cardContentHeight} /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div className='homepage-center'> |
|||
<CenterTop /> |
|||
<div className="list"> |
|||
<div className='child-top'> |
|||
<AbnormalMonitoring /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div className='homepage-left homepage-left-right'> |
|||
<div className="list"> |
|||
<div className='child-right' style={childStyle}> |
|||
<DataShare /> |
|||
</div> |
|||
<div className='child-right' style={childStyle}> |
|||
<DataTop5 cardContentHeight={cardContentHeight} /> |
|||
</div> |
|||
<div className='child-right' style={childStyle}> |
|||
<HotspotData /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
} |
|||
|
|||
function mapStateToProps(state) { |
|||
const { |
|||
auth, global |
|||
} = state; |
|||
return { |
|||
clientHeight: global.clientHeight, |
|||
actions: global.actions, |
|||
|
|||
}; |
|||
} |
|||
|
|||
export default connect(mapStateToProps)(homePage); |
|||
|
|||
|
|||
@ -0,0 +1,15 @@ |
|||
'use strict'; |
|||
|
|||
import { basicAction } from '@peace/utils' |
|||
import { ApiTable } from '$utils' |
|||
|
|||
// export function getMembers(orgId) {
|
|||
// return dispatch => basicAction({
|
|||
// type: 'get',
|
|||
// dispatch: dispatch,
|
|||
// actionType: 'GET_MEMBERS',
|
|||
// url: `${ApiTable.getEnterprisesMembers.replace('{enterpriseId}', orgId)}`,
|
|||
// msg: { error: '获取用户列表失败' },
|
|||
// reducer: { name: 'members' }
|
|||
// });
|
|||
// }
|
|||
@ -0,0 +1,7 @@ |
|||
'use strict'; |
|||
|
|||
import * as example from './example' |
|||
|
|||
export default { |
|||
...example, |
|||
} |
|||
@ -0,0 +1,49 @@ |
|||
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, |
|||
startTime: moment().subtract(7, 'days').format('YYYY-MM-DD HH:mm:ss'), |
|||
endTime: moment().format('YYYY-MM-DD HH:mm:ss') |
|||
}, |
|||
pollingInterval: 1000 * 60 |
|||
}); |
|||
|
|||
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 |
|||
marginTop={-50} |
|||
/> |
|||
</div> |
|||
} |
|||
|
|||
export default AbnormalMonitoring; |
|||
|
|||
|
|||
@ -0,0 +1,36 @@ |
|||
import React from 'react' |
|||
import Box from './public/table-card'; |
|||
import { useFsRequest } from '$utils'; |
|||
import { mathRound } from './util' |
|||
function AccessData() { |
|||
|
|||
const { data: accessdata = [] } = useFsRequest({ |
|||
url: 'homepage/accessdata', |
|||
pollingInterval: 1000 * 60, |
|||
cacheKey: 'accessdata', |
|||
}); |
|||
|
|||
|
|||
const renderBody = () => { |
|||
return <div className='access_data'> |
|||
<div className='_img'></div> |
|||
<div className='data_unit'> |
|||
数据单位<div className='data_number'>{!accessdata?.projects ? '-' : accessdata?.projects?.split(',')?.length}</div>个 |
|||
</div> |
|||
<div className='data_today'> |
|||
今日数据<div className='data_number'>{!accessdata?.res?.stat?.today ? '-' : accessdata?.res?.stat?.today > 1000 ? mathRound(accessdata?.res?.stat?.today) : accessdata?.res?.stat?.today}</div>{accessdata?.res?.stat?.today > 1000 ? '万条' : '条'} |
|||
</div> |
|||
<div className='data_total'> |
|||
数据总量<div className='data_number'>{accessdata?.res?.stat?.datas ? Math.round(accessdata?.res?.stat?.datas / 10000) : '-'}</div>万条 |
|||
</div> |
|||
</div> |
|||
} |
|||
|
|||
return <Box title={"接入数据统计"} > |
|||
{renderBody()} |
|||
</Box> |
|||
} |
|||
|
|||
export default AccessData; |
|||
|
|||
|
|||
@ -0,0 +1,52 @@ |
|||
import React 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 renderBody = () => { |
|||
return <CarouselList |
|||
header={['预警内容', '预警等级', '预警时间']} |
|||
data={data?.map(s => { |
|||
return [ |
|||
<Tooltip placement="top" title={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] |
|||
] |
|||
})} |
|||
rowNum={6} |
|||
height={cardContentHeight} |
|||
multiellipsis |
|||
columnWidth={[180, 80, 150]} |
|||
/> |
|||
} |
|||
|
|||
return <Box title={"预警列表"}> |
|||
{alarms?.length > 0 ? renderBody() : <NoData />} |
|||
</Box> |
|||
} |
|||
|
|||
export default AlarmList; |
|||
|
|||
|
|||
@ -0,0 +1,19 @@ |
|||
import React from 'react' |
|||
import './style.less' |
|||
|
|||
function CenterTop(props) { |
|||
|
|||
|
|||
return <div className='_top'> |
|||
<div className='center_top_data'> |
|||
<div className='_center_card1'>共享交换</div> |
|||
<div className='_center_card2'>数据监控</div> |
|||
<div className='_center_card3'>数据治理</div> |
|||
<div className='_center_card4'>数据采集</div> |
|||
</div> |
|||
</div> |
|||
} |
|||
|
|||
export default CenterTop; |
|||
|
|||
|
|||
@ -0,0 +1,54 @@ |
|||
import React from 'react' |
|||
import Box from './public/table-card'; |
|||
import { useFsRequest } from '$utils'; |
|||
import { mathRound } from './util'; |
|||
function DataShare(props) { |
|||
|
|||
const { data: dataTotal = {} } = useFsRequest({ |
|||
url: 'homepage/datatotal/top5', |
|||
pollingInterval: 1000 * 60, |
|||
cacheKey: 'datatotal', |
|||
}); |
|||
|
|||
const { data: restfulInfo = {} } = useFsRequest({ |
|||
url: 'homepage/restful/info', |
|||
pollingInterval: 1000 * 60, |
|||
cacheKey: 'restfulInfo', |
|||
}); |
|||
|
|||
const renderItem = (s) => { |
|||
return <div className='_item_content'> |
|||
<div className={'_item_icon' + s.key} /> |
|||
<div className='_item_text'> |
|||
{s.title} |
|||
<div className='number_container'> |
|||
<span className='_number'>{s.data}</span>{s.unit} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
} |
|||
|
|||
const leftData = [ |
|||
{ key: '1', data: mathRound(dataTotal?.total), unit: '万条', title: '共享库数据总量' }, |
|||
{ key: '2', data: restfulInfo?.total, unit: '次', title: '访问接口总次数' }, |
|||
{ key: '3', data: restfulInfo?.totalUser, unit: '个', title: '访问接口用户总数' }] |
|||
const rightData = [ |
|||
{ key: '2', data: restfulInfo?.todayTotal, unit: '次', title: '接口访问次数' }, |
|||
{ key: '3', data: restfulInfo?.todayUser, unit: '个', title: '访问接口用户总数' }] |
|||
|
|||
return <Box title={"数据共享"} > |
|||
<div className='data_share'> |
|||
<div className='_left_content'> |
|||
{leftData.map(s => renderItem(s))} |
|||
</div> |
|||
<div className='_right_content'> |
|||
<div className='_today_text'>今日</div> |
|||
{rightData.map(s => renderItem(s))} |
|||
</div> |
|||
</div> |
|||
</Box> |
|||
} |
|||
|
|||
export default DataShare; |
|||
|
|||
|
|||
@ -0,0 +1,262 @@ |
|||
import React, { useEffect, useState } from 'react' |
|||
import Box from './public/table-card'; |
|||
import ReactEcharts from 'echarts-for-react'; |
|||
import './style.less'; |
|||
import { useFsRequest } from '$utils'; |
|||
import { mathRound } from './util'; |
|||
import NoData from './public/noData'; |
|||
function DataTop5(props) { |
|||
const { cardContentHeight } = props; |
|||
const { data: dataTotal = {} } = useFsRequest({ |
|||
url: 'homepage/datatotal/top5', |
|||
pollingInterval: 1000 * 60, |
|||
cacheKey: 'datatotal', |
|||
}); |
|||
|
|||
const renderBody = () => { |
|||
let chartData = dataTotal?.top5?.map(x => { |
|||
return { |
|||
name: x?.dataSource?.resourceCatalog?.name, |
|||
value: mathRound(x.dbRecordCount), |
|||
} |
|||
}) || [] |
|||
|
|||
let options = { |
|||
xAxis: { |
|||
splitLine: { |
|||
show: false, |
|||
}, |
|||
axisLabel: { |
|||
show: false, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
splitArea: { show: false }, |
|||
axisLine: { |
|||
show: false, |
|||
}, |
|||
}, |
|||
tooltip: { |
|||
confine: true, |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
type: 'shadow', |
|||
}, |
|||
backgroundColor: 'rgba(13,30,44, 0.7)', |
|||
borderColor: 'rgba(3, 65, 118, 0.8)', |
|||
textStyle: { |
|||
color: '#fff', |
|||
}, |
|||
formatter: function (params) { |
|||
var name = params[0].name |
|||
if (name.length > 20) { |
|||
name = name.replace(/(.{20})/g, '$1<br>') // 每 30 个字符添加一个换行符
|
|||
} |
|||
var content = name |
|||
|
|||
return content + ' : <b>' + params[0].value + '</b>万条' |
|||
} |
|||
}, |
|||
grid: { |
|||
top: 13, |
|||
bottom: -10, |
|||
left: '5%', |
|||
}, |
|||
yAxis: { |
|||
inverse: true, |
|||
axisLine: { |
|||
show: false, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
axisLabel: { |
|||
textStyle: { |
|||
color: '#fff', |
|||
padding: [-5, 0, 35, 18], |
|||
}, |
|||
formatter(value, index) { |
|||
let str = '', num = 'TOP' + (index + 1) |
|||
let valueHandle = value.length > 10 ? value.substring(0, 10) + '...' : value |
|||
if (index === 0) { |
|||
str = '{a| ' + num + '}{title| ' + valueHandle + '}' |
|||
} else if (index === 1) { |
|||
str = '{b| ' + num + '}{title| ' + valueHandle + '}' |
|||
} else if (index === 2) { |
|||
str = '{c| ' + num + '}{title| ' + valueHandle + '}' |
|||
} else { |
|||
str = '{d| ' + num + '}{title| ' + valueHandle + '}' |
|||
} |
|||
return str |
|||
}, |
|||
rich: { |
|||
a: { |
|||
borderColor: '#EE6F7C', |
|||
borderWidth: 1, |
|||
borderRadius: [0, 10, 10, 0], |
|||
padding: [3.5, 10, 1, -13], |
|||
backgroundColor: 'rgba(238, 111, 124, 0.8)', |
|||
}, |
|||
b: { |
|||
borderColor: '#FFCF5F', |
|||
borderWidth: 1, |
|||
borderRadius: [0, 10, 10, 0], |
|||
padding: [3.5, 10, 1, -13], |
|||
backgroundColor: 'rgba(255, 207, 95, 0.7)', |
|||
}, |
|||
c: { |
|||
borderColor: '#00E8FF', |
|||
borderWidth: 1, |
|||
borderRadius: [0, 10, 10, 0], |
|||
padding: [3.5, 10, 1, -13], |
|||
backgroundColor: 'rgba(0, 232, 255, 0.7)', |
|||
}, |
|||
d: { |
|||
borderColor: '#1A90FF', |
|||
borderWidth: 1, |
|||
borderRadius: [0, 10, 10, 0], |
|||
padding: [3.5, 10, 1, -13], |
|||
backgroundColor: 'rgba(26, 144, 255, 0.7)', |
|||
}, |
|||
title: { |
|||
padding: [0, 0, 0, 3], |
|||
}, |
|||
}, |
|||
align: 'left', |
|||
}, |
|||
data: chartData.map((item) => item.name), |
|||
}, |
|||
series: [ |
|||
{ |
|||
type: 'pictorialBar', |
|||
symbol: 'rect', |
|||
symbolRotate: 30, |
|||
symbolRepeat: 'fixed', |
|||
symbolClip: true, |
|||
symbolOffset: [0, -1.5], |
|||
symbolSize: [2, 12], |
|||
symbolMargin: '3', |
|||
itemStyle: { |
|||
normal: { |
|||
color: '#000726', |
|||
}, |
|||
}, |
|||
label: { |
|||
show: true, |
|||
color: '#C8F0FF', |
|||
fontFamily: 'Bebas', |
|||
fontSize: 12, |
|||
offset: [-9, 1], |
|||
position: 'right', |
|||
formatter(params) { |
|||
let result = '' |
|||
switch (params.dataIndex) { |
|||
case 0: |
|||
result = '{img|}{index0|' + params.value + '}{unit|}' |
|||
break |
|||
case 1: |
|||
result = '{img|}{index1|' + params.value + '}{unit|}' |
|||
break |
|||
case 2: |
|||
result = '{img|}{index2|' + params.value + '}{unit|}' |
|||
break |
|||
default: |
|||
result = '{img|}{index3|' + params.value + '}{unit|}' |
|||
break |
|||
} |
|||
return result |
|||
}, |
|||
rich: { |
|||
img: { |
|||
height: 18, |
|||
width: 20, |
|||
// backgroundColor: { image: arrow },这个图片自己切，这里上传不了（加了一个尾巴的形状）
|
|||
}, |
|||
unit: { |
|||
color: '#C8F0FF', |
|||
fontSize: 11, |
|||
}, |
|||
index0: { |
|||
color: '#FFF', |
|||
fontFamily: 'Bebas', |
|||
padding: [-2, 2, 0, 0], |
|||
fontWeight: 'bold', |
|||
fontSize: 16, |
|||
}, |
|||
index1: { |
|||
color: '#FFF', |
|||
fontFamily: 'Bebas', |
|||
padding: [-2, 2, 0, 0], |
|||
fontWeight: 'bold', |
|||
fontSize: 16, |
|||
}, |
|||
index2: { |
|||
color: '#FFF', |
|||
fontFamily: 'Bebas', |
|||
padding: [-2, 2, 0, 0], |
|||
fontWeight: 'bold', |
|||
fontSize: 16, |
|||
}, |
|||
index3: { |
|||
color: '#FFF', |
|||
fontFamily: 'Bebas', |
|||
padding: [-2, 2, 0, 0], |
|||
fontWeight: 'bold', |
|||
fontSize: 16, |
|||
}, |
|||
}, |
|||
}, |
|||
symbolBoundingData: Math.max(...chartData.map((item) => item.value)) * 1.3, |
|||
data: chartData.map((item) => item.value), |
|||
z: 2, |
|||
}, |
|||
{ |
|||
type: 'bar', |
|||
barWidth: 10, |
|||
data: chartData.map((item) => item.value), |
|||
itemStyle: { |
|||
normal: { |
|||
color: '#54DEFA', |
|||
}, |
|||
}, |
|||
z: 1, |
|||
}, |
|||
{ |
|||
type: 'bar', |
|||
barGap: '-125%', // 设置外框粗细
|
|||
data: chartData.map((items) => Math.max(...chartData.map((item) => item.value)) * 1.3), |
|||
barWidth: 15, |
|||
itemStyle: { |
|||
color: 'none', |
|||
borderColor: '#979797', |
|||
}, |
|||
z: 0, |
|||
}, |
|||
], |
|||
}; |
|||
|
|||
return <ReactEcharts |
|||
option={options} |
|||
notMerge |
|||
lazyUpdate |
|||
style={{ height: cardContentHeight }} |
|||
/> |
|||
} |
|||
|
|||
return <Box title={"数据量TOP5单位"} bodyPaddingTop={1} > |
|||
{ |
|||
dataTotal?.top5?.length > 0 ? |
|||
<> |
|||
<div className='data_top5_unit'>数据量：万条</div> |
|||
{renderBody()} |
|||
</> |
|||
: <NoData /> |
|||
} |
|||
|
|||
</Box> |
|||
} |
|||
|
|||
export default DataTop5; |
|||
|
|||
|
|||
@ -0,0 +1,42 @@ |
|||
import React, { useEffect, useState } from 'react' |
|||
import Box from './public/table-card'; |
|||
import NoData from './public/noData'; |
|||
import './style.less'; |
|||
import { ApiTable, useFsRequest } from '$utils'; |
|||
function HotspotData(props) { |
|||
|
|||
const { data: restfulInfo = {} } = useFsRequest({ |
|||
url: 'homepage/restful/info', |
|||
pollingInterval: 1000 * 60, |
|||
cacheKey: 'restfulInfo', |
|||
}); |
|||
|
|||
const top3 = restfulInfo?.top3 |
|||
return <Box title={"热点数据"} bodyPaddingTop={25} > |
|||
{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 > 8 ? top3[0].name.substring(0, 8) + '...' : 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 > 8 ? top3[2].name.substring(0, 8) + '...' : 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 > 8 ? top3[1].name.substring(0, 8) + '...' : top3[1].name}</span> |
|||
<div className='hotspot_data_number'>{top3[1].count}</div> |
|||
</>} |
|||
</div> |
|||
</div> : <NoData /> |
|||
} |
|||
</Box> |
|||
} |
|||
|
|||
export default HotspotData; |
|||
|
|||
|
|||
@ -0,0 +1,39 @@ |
|||
import React, { useEffect, useState } from 'react' |
|||
import Box from './public/table-card'; |
|||
import { ApiTable, useFsRequest } from '$utils'; |
|||
import './style.less'; |
|||
function NodeResource(props) { |
|||
const { data: cluters = {} } = useFsRequest({ |
|||
url: 'homepage/datatotal/cluters', |
|||
pollingInterval: 1000 * 20, |
|||
}); |
|||
|
|||
const renderBody = () => { |
|||
return <div className='node-resource-container'> |
|||
<div className='_item'> |
|||
<div className='_noderesource_data'>{cluters?.disk}<span className='_percent'>%</span></div> |
|||
<div className='_noderesource_title'>硬盘</div> |
|||
<div className='disk_icon' /> |
|||
</div> |
|||
<div className='_item'> |
|||
<div className='_noderesource_data'>{cluters?.memory}<span className='_percent'>%</span></div> |
|||
<div className='_noderesource_title'>内存</div> |
|||
<div className='memory_icon' /> |
|||
</div> |
|||
<div className='_item'> |
|||
<div className='_noderesource_data'>{cluters?.cpu}<span className='_percent'>%</span></div> |
|||
<div className='_noderesource_title'>CPU</div> |
|||
<div className='cpu_icon' /> |
|||
</div> |
|||
</div> |
|||
|
|||
} |
|||
|
|||
return <Box title={"节点资源"} > |
|||
{renderBody()} |
|||
</Box> |
|||
} |
|||
|
|||
export default NodeResource; |
|||
|
|||
|
|||
@ -0,0 +1,33 @@ |
|||
/* 轮播列表组件 */ |
|||
import React from 'react'; |
|||
import ScrollBoard from './scrollBoard'; |
|||
import NoData from './noData'; |
|||
import './index.less'; |
|||
function CarouselList(props) { |
|||
const { |
|||
header = [], data = [], rowNum = 4, height, columnWidth, multiellipsis, waitTime = 2000, marginTop, ...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'} |
|||
{...restProps} |
|||
/> |
|||
) : <NoData marginTop={marginTop || 0} />; |
|||
} |
|||
|
|||
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,18 @@ |
|||
/* 公共模块暂无数据组件 */ |
|||
import React from 'react'; |
|||
import { Empty } from 'antd'; |
|||
|
|||
function NoData({ height = 180, marginTop = 0 }) { |
|||
return ( |
|||
<Empty |
|||
image="/assets/images/homePage/bigscreen/empty.png" |
|||
imageStyle={{ |
|||
height, |
|||
marginTop |
|||
}} |
|||
description={false} |
|||
/> |
|||
); |
|||
} |
|||
|
|||
export default NoData; |
|||
@ -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,34 @@ |
|||
'use strict' |
|||
|
|||
import React from 'react' |
|||
import './index.less' |
|||
class Box extends React.Component { |
|||
render() { |
|||
const { title, height = '100%', children, bodyPaddingTop = 1, titlePaddingTop, margin, overflow } = this.props |
|||
|
|||
const headerbg = { |
|||
background: 'url(/assets/images/homePage/bigscreen/headertitlebg.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%)', |
|||
}}> |
|||
<div style={{ height: 42, paddingLeft: 24, paddingTop: '4px', wordBreak: 'keep-all', whiteSpace: 'nowrap', width: '100%', ...headerbg }}> |
|||
<span className='card-title'>{title}</span><div className='_sorrow' /> |
|||
</div> |
|||
<div |
|||
style={{ |
|||
width: '100%', height: 2, |
|||
marginTop: titlePaddingTop || 10, marginBottom: bodyPaddingTop || 25, |
|||
}} /> |
|||
{children} |
|||
</div> |
|||
</div> |
|||
) |
|||
} |
|||
} |
|||
export default Box |
|||
|
|||
@ -0,0 +1,373 @@ |
|||
@card-height: calc(100% - 42px - 13px); //左右卡片内容高度定义 目前卡片为等高 |
|||
|
|||
//节点资源 |
|||
.node-resource-container { |
|||
display: flex; |
|||
height: @card-height; |
|||
width: 100%; |
|||
align-items: center; |
|||
|
|||
._item { |
|||
width: 33%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
|
|||
._noderesource_data { |
|||
font-family: D-DINExp-Bold; |
|||
font-weight: 600; |
|||
font-size: 24px; |
|||
color: #FFFFFF; |
|||
line-height: 43.2px; |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
._percent { |
|||
opacity: 0.8; |
|||
font-family: PingFangSC-Regular; |
|||
font-weight: 400; |
|||
font-size: 12px; |
|||
color: #C8F0FF; |
|||
text-align: left; |
|||
line-height: 24px; |
|||
} |
|||
} |
|||
|
|||
._noderesource_title { |
|||
font-family: YouSheBiaoTiHei; |
|||
font-size: 20px; |
|||
color: #D8F0FF; |
|||
letter-spacing: 1.54px; |
|||
text-align: center; |
|||
text-shadow: 0 0 10px rgba(0, 145, 255, 0.5); |
|||
margin-bottom: 17px; |
|||
} |
|||
|
|||
.disk_icon { |
|||
width: 68.73px; |
|||
height: 62.77px; |
|||
background: url('/assets/images/homePage/bigscreen/disk.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
.cpu_icon { |
|||
width: 68.73px; |
|||
height: 62.77px; |
|||
background: url('/assets/images/homePage/bigscreen/cpu.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
.memory_icon { |
|||
width: 68.73px; |
|||
height: 62.77px; |
|||
background: url('/assets/images/homePage/bigscreen/memory.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
} |
|||
} |
|||
|
|||
//接入数据统计 |
|||
.access_data { |
|||
display: flex; |
|||
height: @card-height; |
|||
width: 100%; |
|||
justify-content: center; |
|||
|
|||
font-family: PingFangSC-Regular; |
|||
font-weight: 400; |
|||
font-size: 14px; |
|||
color: #FFFFFF; |
|||
|
|||
._img { |
|||
width: 230px; |
|||
height: 95%; |
|||
background: url('/assets/images/homePage/bigscreen/accessdata.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
.data_unit { |
|||
position: absolute; |
|||
top: 27%; |
|||
right: 21%; |
|||
|
|||
.data_number { |
|||
line-height: 25px; |
|||
font-family: D-DINExp-Bold; |
|||
font-weight: 700; |
|||
font-size: 20px; |
|||
color: #3E86FF; |
|||
letter-spacing: 0; |
|||
} |
|||
} |
|||
|
|||
.data_today { |
|||
position: absolute; |
|||
bottom: 13%; |
|||
right: 79%; |
|||
text-align: right; |
|||
|
|||
.data_number { |
|||
line-height: 25px; |
|||
font-family: D-DINExp-Bold; |
|||
font-weight: 700; |
|||
font-size: 20px; |
|||
color: #00F6E4; |
|||
letter-spacing: 0; |
|||
} |
|||
} |
|||
|
|||
.data_total { |
|||
position: absolute; |
|||
bottom: 13%; |
|||
left: 79%; |
|||
|
|||
.data_number { |
|||
line-height: 25px; |
|||
font-family: D-DINExp-Bold; |
|||
font-weight: 700; |
|||
font-size: 20px; |
|||
color: #FFDC4E; |
|||
letter-spacing: 0; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.data_top5_unit { |
|||
position: absolute; |
|||
right: 4%; |
|||
top: 18%; |
|||
font-family: PingFangSC-Regular; |
|||
font-weight: 400; |
|||
font-size: 12px; |
|||
color: #C8F0FF; |
|||
} |
|||
|
|||
.hotspot_data_container { |
|||
display: flex; |
|||
height: @card-height; |
|||
width: 100%; |
|||
justify-content: center; |
|||
|
|||
font-family: PingFangSC-Regular; |
|||
font-weight: 400; |
|||
font-size: 14px; |
|||
color: #FFFFFF; |
|||
|
|||
._img { |
|||
width: 203px; |
|||
height: 80%; |
|||
background: url('/assets/images/homePage/bigscreen/hotspotdatabg.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
.hotspot_title { |
|||
padding: 2px; |
|||
padding-left: 6px; |
|||
padding-right: 6px; |
|||
background: rgba(77, 241, 227, 0.08); |
|||
border: 1px solid rgba(77, 241, 227, 0.1); |
|||
box-shadow: inset 0 0 20px 0 rgba(28, 185, 196, 0.23); |
|||
} |
|||
|
|||
|
|||
.hotspot_data_number { |
|||
font-family: D-DINExp-Bold; |
|||
font-weight: 700; |
|||
font-size: 18px; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
._top1 { |
|||
position: absolute; |
|||
top: 25%; |
|||
right: 63%; |
|||
text-align: right; |
|||
} |
|||
|
|||
._top2 { |
|||
position: absolute; |
|||
bottom: 22%; |
|||
right: 67%; |
|||
text-align: center; |
|||
} |
|||
|
|||
._top3 { |
|||
position: absolute; |
|||
bottom: 34%; |
|||
left: 73%; |
|||
} |
|||
} |
|||
|
|||
//数据共享 |
|||
.data_share { |
|||
display: flex; |
|||
height: @card-height; |
|||
|
|||
._left_content { |
|||
width: 50%; |
|||
height: 90%; |
|||
padding-left: 30px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
._right_content { |
|||
._today_text { |
|||
font-family: YouSheBiaoTiHei; |
|||
font-size: 24px; |
|||
color: #FFFFFF; |
|||
letter-spacing: 0.5px; |
|||
position: absolute; |
|||
right: 6%; |
|||
top: 21%; |
|||
} |
|||
|
|||
padding-top: 23px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
width: 47%; |
|||
height: 95%; |
|||
background: url(/assets/images/homePage/bigscreen/todaybg.png); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
justify-content: space-evenly; |
|||
align-items: center; |
|||
|
|||
} |
|||
|
|||
._item_content { |
|||
display: flex; |
|||
|
|||
|
|||
._item_icon1 { |
|||
width: 52px; |
|||
height: 52px; |
|||
background: url('/assets/images/homePage/bigscreen/1.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
._item_icon2 { |
|||
width: 52px; |
|||
height: 52px; |
|||
background: url('/assets/images/homePage/bigscreen/2.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
._item_icon3 { |
|||
width: 52px; |
|||
height: 52px; |
|||
background: url('/assets/images/homePage/bigscreen/3.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
._item_text { |
|||
color: #C8F0FF; |
|||
padding-left: 6px; |
|||
|
|||
.number_container { |
|||
._number { |
|||
font-family: D-DINExp-Bold; |
|||
font-weight: 700; |
|||
font-size: 22px; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-evenly; |
|||
width: 112px; |
|||
height: 28px; |
|||
background-image: linear-gradient(227deg, #3196AB 0%, #2091cd00 100%); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
//大屏中间上部分 |
|||
.center_top_data { |
|||
|
|||
._center_card1 { |
|||
width: 353px; |
|||
height: 74px; |
|||
font-family: YouSheBiaoTiHei; |
|||
font-size: 22px; |
|||
color: #FFFFFF; |
|||
letter-spacing: 0.46px; |
|||
text-align: center; |
|||
position: absolute; |
|||
top: -3%; |
|||
left: 32%; |
|||
background: url(/assets/images/homePage/bigscreen/centerdatabg1.png); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
._center_card2 { |
|||
width: 146px; |
|||
height: 35px; |
|||
font-family: YouSheBiaoTiHei; |
|||
font-size: 16px; |
|||
color: #35D0FF; |
|||
letter-spacing: 0.46px; |
|||
text-align: center; |
|||
position: absolute; |
|||
top: 26%; |
|||
left: 42%; |
|||
background: url(/assets/images/homePage/bigscreen/centerdatabg2.png); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
._center_card3 { |
|||
width: 146px; |
|||
height: 35px; |
|||
font-family: YouSheBiaoTiHei; |
|||
font-size: 16px; |
|||
color: #35D0FF; |
|||
letter-spacing: 0.46px; |
|||
text-align: center; |
|||
position: absolute; |
|||
top: 52%; |
|||
left: 42%; |
|||
background: url(/assets/images/homePage/bigscreen/centerdatabg2.png); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
._center_card4 { |
|||
width: 146px; |
|||
height: 35px; |
|||
font-family: YouSheBiaoTiHei; |
|||
font-size: 16px; |
|||
color: #35D0FF; |
|||
letter-spacing: 0.46px; |
|||
text-align: center; |
|||
position: absolute; |
|||
top: 74%; |
|||
left: 42%; |
|||
background: url(/assets/images/homePage/bigscreen/centerdatabg2.png); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
} |
|||
@ -0,0 +1,3 @@ |
|||
export const mathRound = (number) => { |
|||
return number ? Math.round(number / 1000) / 10 : 0 |
|||
} |
|||
@ -0,0 +1,74 @@ |
|||
import React, { useEffect, useState } from 'react' |
|||
import { connect } from 'react-redux'; |
|||
import { push } from 'react-router-redux'; |
|||
import AccessData from '../components/accessData' |
|||
import AlarmList from '../components/alarmList' |
|||
import DataShare from '../components/dataShare' |
|||
import DataTop5 from '../components/dataTop5' |
|||
import HotspotData from '../components/hotspotData' |
|||
import NodeResource from '../components/nodeResource' |
|||
import AbnormalMonitoring from '../components/abnormalMonitoring' |
|||
import CenterTop from '../components/centerTop' |
|||
import './style.less' |
|||
|
|||
function homePage(props) { |
|||
const { dispatch } = props; |
|||
const childStyle = { height: '32%', color: '#fff', marginBottom: 17 } |
|||
const cardHeight = document.body.clientHeight * 0.896 * 0.32 |
|||
const cardContentHeight = cardHeight - 42 - 13 |
|||
return <div className='homepage'> |
|||
<div className='_title'> |
|||
<div onClick={() => { dispatch(push('/metadataManagement/latestMetadata')) }} className='_exit' ><div className='_icon' />进入后台</div> |
|||
</div> |
|||
<div className='homepage-left homepage-left-left'> |
|||
<div className="list"> |
|||
<div className='child' style={childStyle}> |
|||
<AccessData /> |
|||
</div> |
|||
<div className='child' style={childStyle}> |
|||
<NodeResource /> |
|||
</div> |
|||
<div className='child' style={childStyle}> |
|||
<AlarmList cardContentHeight={cardContentHeight} /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div className='homepage-center'> |
|||
<CenterTop /> |
|||
<div className="list"> |
|||
<div className='child-top'> |
|||
<AbnormalMonitoring /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div className='homepage-left homepage-left-right'> |
|||
<div className="list"> |
|||
<div className='child-right' style={childStyle}> |
|||
<DataShare /> |
|||
</div> |
|||
<div className='child-right' style={childStyle}> |
|||
<DataTop5 cardContentHeight={cardContentHeight} /> |
|||
</div> |
|||
<div className='child-right' style={childStyle}> |
|||
<HotspotData /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
} |
|||
|
|||
function mapStateToProps(state) { |
|||
const { |
|||
auth, global |
|||
} = state; |
|||
return { |
|||
clientHeight: global.clientHeight, |
|||
actions: global.actions, |
|||
|
|||
}; |
|||
} |
|||
|
|||
export default connect(mapStateToProps)(homePage); |
|||
|
|||
|
|||
@ -0,0 +1,6 @@ |
|||
'use strict'; |
|||
|
|||
import homePage from './homePage'; |
|||
|
|||
|
|||
export default homePage ; |
|||
@ -0,0 +1,324 @@ |
|||
.homepage { |
|||
width: 100%; |
|||
height: 100%; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
background: url('/assets/images/homePage/enter/bg.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
overflow: hidden; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
padding-top: 5%; |
|||
|
|||
._enter_row1 { |
|||
height: 302px; |
|||
|
|||
._row1_item { |
|||
width: 1434px; |
|||
height: 241px; |
|||
// opacity: 0.8; |
|||
background: url('/assets/images/homePage/enter/row1.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
._row1_item:hover { |
|||
width: 1434px; |
|||
height: 302.6px; |
|||
background: url('/assets/images/homePage/enter/row1-select.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
|
|||
._enter_row2 { |
|||
height: 427px; |
|||
display: flex; |
|||
width: 100%; |
|||
padding-left: 4%; |
|||
|
|||
._row2_item1 { |
|||
width: 454px; |
|||
height: 371px; |
|||
// opacity: 0.8; |
|||
background: url('/assets/images/homePage/enter/row2-1.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
cursor: pointer; |
|||
margin-left: 60px; |
|||
} |
|||
|
|||
._row2_item1:hover { |
|||
background: url('/assets/images/homePage/enter/row2-1-select.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
._row2_item2 { |
|||
margin-left: 60px; |
|||
width: 454px; |
|||
height: 371px; |
|||
// opacity: 0.8; |
|||
background: url('/assets/images/homePage/enter/row2-2.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
._row2_item2:hover { |
|||
background: url('/assets/images/homePage/enter/row2-2-select.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
._row2_item3 { |
|||
margin-left: 60px; |
|||
width: 454px; |
|||
height: 371px; |
|||
// opacity: 0.8; |
|||
background: url('/assets/images/homePage/enter/row2-3.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
._row2_item3:hover { |
|||
background: url('/assets/images/homePage/enter/row2-3-select.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
|
|||
._enter_title { |
|||
position: absolute; |
|||
top: 4%; |
|||
left: 3%; |
|||
width: 575.35px; |
|||
height: 78px; |
|||
background: url('/assets/images/homePage/enter/title.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
._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; |
|||
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 { |
|||
width: 21.8%; |
|||
height: 89.6%; |
|||
position: absolute; |
|||
top: 8.2%; |
|||
z-index: 300; |
|||
} |
|||
|
|||
.homepage-center { |
|||
width: 49.16%; |
|||
height: 89.6%; |
|||
position: absolute; |
|||
bottom: 2.4%; |
|||
left: 25.5%; |
|||
padding-left: 16px; |
|||
padding-right: 16px; |
|||
z-index: 400; |
|||
|
|||
._top { |
|||
margin-top: 5%; |
|||
height: calc(100% - 200px); |
|||
background: url('/assets/images/homePage/bigscreen/centerbg.png'); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
position: relative; |
|||
} |
|||
} |
|||
|
|||
.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; |
|||
} |
|||
|
|||
.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; |
|||
} |
|||
} |
|||
@ -0,0 +1,15 @@ |
|||
'use strict'; |
|||
|
|||
import reducers from './reducers'; |
|||
import routes from './routes'; |
|||
import actions from './actions'; |
|||
import { getNavItem } from './nav-item'; |
|||
|
|||
export default { |
|||
key: 'waterprevention', |
|||
name: '首页', |
|||
reducers: reducers, |
|||
routes: routes, |
|||
actions: actions, |
|||
getNavItem: getNavItem |
|||
}; |
|||
@ -0,0 +1,11 @@ |
|||
import React from 'react'; |
|||
import { Link } from 'react-router-dom'; |
|||
import { Menu } from 'antd'; |
|||
import { HomeOutlined } from '@ant-design/icons'; |
|||
export function getNavItem(user) { |
|||
return ( |
|||
<Menu.Item key="waterprevention" icon={<HomeOutlined />}> |
|||
<Link to="/waterprevention">数据监控平台</Link> |
|||
</Menu.Item> |
|||
); |
|||
} |
|||
@ -0,0 +1,5 @@ |
|||
'use strict'; |
|||
|
|||
export default { |
|||
|
|||
} |
|||
@ -0,0 +1,13 @@ |
|||
'use strict'; |
|||
import homePage from './containers/index'; |
|||
|
|||
export default [{ |
|||
type: 'outer', |
|||
route: { |
|||
path: '/waterprevention', |
|||
key: 'waterprevention', |
|||
breadcrumb: '数据监控平台', |
|||
// 不设置 component 则面包屑禁止跳转
|
|||
component: homePage |
|||
} |
|||
}]; |
|||
Loading…
Reference in new issue