|
After Width: | Height: | Size: 222 B |
|
After Width: | Height: | Size: 12 MiB |
|
Before Width: | Height: | Size: 1.5 MiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 113 KiB |
|
After Width: | Height: | Size: 87 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 9.7 KiB |
|
After Width: | Height: | Size: 9.0 KiB |
|
After Width: | Height: | Size: 9.2 KiB |
|
After Width: | Height: | Size: 8.8 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 9.7 KiB |
|
After Width: | Height: | Size: 5.6 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 5.6 KiB |
|
After Width: | Height: | Size: 160 KiB |
|
After Width: | Height: | Size: 51 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 9.2 KiB |
|
After Width: | Height: | Size: 9.9 KiB |
|
After Width: | Height: | Size: 9.1 KiB |
|
After Width: | Height: | Size: 9.4 KiB |
|
After Width: | Height: | Size: 8.7 KiB |
|
After Width: | Height: | Size: 9.5 KiB |
|
After Width: | Height: | Size: 8.9 KiB |
@ -1,45 +1,43 @@ |
|||
'use strict' |
|||
|
|||
import React from 'react' |
|||
import React, { useState } from 'react' |
|||
import './index.less' |
|||
class Box extends React.Component { |
|||
render() { |
|||
const { title, height = '100%', children, margin, overflow, subtitle, subtitleSelect } = this.props |
|||
function Box(props) { |
|||
const [range, setRange] = useState('week'); |
|||
const { title, height = '100%', children, margin, overflow, subtitle, subtitleSelect } = 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, }}> |
|||
<div className='box_header_bg' > |
|||
<span className='card-title'>{title}</span> |
|||
|
|||
{subtitle && <div className='subtitle_'> |
|||
<div className='_item_select'>本周</div> |
|||
<div className='_item'>本月</div> |
|||
<div className='_item'>本年</div> |
|||
{[ |
|||
{ key: 'week', name: '本周' }, |
|||
{ key: 'month', name: '本月' }, |
|||
{ key: 'year', name: '本年' } |
|||
].map(s => { |
|||
return <div |
|||
onClick={() => { setRange(s.key) }} |
|||
className={range == s.key ? '_item_select' : '_item'}>{s.name}</div> |
|||
})} |
|||
</div>} |
|||
|
|||
{subtitleSelect && <div className='subtitle_' style={{ textAlign: 'right' }}> |
|||
{subtitleSelect} |
|||
</div>} |
|||
</div> |
|||
<div style={{ |
|||
height: 'calc(100% - 42px)', |
|||
backgroundImage: 'linear-gradient(180deg, #04377ecc 1%, #001241 100%)', |
|||
}}> |
|||
<div className='children-container'> |
|||
{children} |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
) |
|||
} |
|||
} |
|||
|
|||
export default Box |
|||
|
|||
|
|||
@ -0,0 +1,130 @@ |
|||
115.921049, 28.559176 |
|||
115.926542, 28.559327 |
|||
115.921218, 28.555168 |
|||
115.926311, 28.55532 |
|||
export const heatmapData = { |
|||
"type": "FeatureCollection", |
|||
"features": [ |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 6 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.921049, 28.559176 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 3 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.922049, 28.556176 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 2 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.923049, 28.556176 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 2 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.924049, 28.557176 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 5 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.925049, 28.558176 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 7 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.926049, 28.556176 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 8 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.92365, 28.557404 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 8 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.92465, 28.555404 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 8 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.92465, 28.556404 |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"type": "Feature", |
|||
"properties": { |
|||
"count": 8 |
|||
}, |
|||
"geometry": { |
|||
"type": "Point", |
|||
"coordinates": [ |
|||
115.92565, 28.557404 |
|||
] |
|||
} |
|||
}, |
|||
] |
|||
} |
|||
|
|||
@ -1,74 +0,0 @@ |
|||
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,22 @@ |
|||
import React, { useEffect, useState } from 'react' |
|||
import moment from 'moment'; |
|||
|
|||
function Weather() { |
|||
|
|||
return <div className='_weather_container'> |
|||
<div className='column1'> |
|||
<div>{moment().format('YYYY-MM-DD')}</div> |
|||
<div style={{ fontSize: 14 }}>{moment().format('HH:mm:ss')}</div> |
|||
</div> |
|||
<div className='_divider'></div> |
|||
<div className='weather_icon'></div> |
|||
<div className='column2'> |
|||
<div>晴转多云</div> |
|||
<div style={{ fontSize: 14 }}>18~26℃</div> |
|||
</div> |
|||
</div> |
|||
} |
|||
|
|||
export default Weather; |
|||
|
|||
|
|||