|
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' |
'use strict' |
||||
|
|
||||
import React from 'react' |
import React, { useState } from 'react' |
||||
import './index.less' |
import './index.less' |
||||
class Box extends React.Component { |
function Box(props) { |
||||
render() { |
const [range, setRange] = useState('week'); |
||||
const { title, height = '100%', children, margin, overflow, subtitle, subtitleSelect } = this.props |
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 ( |
return ( |
||||
<div style={{ height, width: '100%', margin: margin || "0px 0px 28px" }}> |
<div style={{ height, width: '100%', margin: margin || "0px 0px 28px" }}> |
||||
<div style={{ |
<div style={{ |
||||
height: height, listStyle: 'none', overflow: overflow || 'hidden', |
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> |
<span className='card-title'>{title}</span> |
||||
|
|
||||
{subtitle && <div className='subtitle_'> |
{subtitle && <div className='subtitle_'> |
||||
<div className='_item_select'>本周</div> |
{[ |
||||
<div className='_item'>本月</div> |
{ key: 'week', name: '本周' }, |
||||
<div className='_item'>本年</div> |
{ 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>} |
</div>} |
||||
|
|
||||
{subtitleSelect && <div className='subtitle_' style={{ textAlign: 'right' }}> |
{subtitleSelect && <div className='subtitle_' style={{ textAlign: 'right' }}> |
||||
{subtitleSelect} |
{subtitleSelect} |
||||
</div>} |
</div>} |
||||
</div> |
</div> |
||||
<div style={{ |
<div className='children-container'> |
||||
height: 'calc(100% - 42px)', |
|
||||
backgroundImage: 'linear-gradient(180deg, #04377ecc 1%, #001241 100%)', |
|
||||
}}> |
|
||||
{children} |
{children} |
||||
</div> |
</div> |
||||
|
|
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
) |
) |
||||
} |
} |
||||
} |
|
||||
export default Box |
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; |
||||
|
|
||||
|
|
||||