Commit 4a7fadad authored by afc163's avatar afc163

update monitor page style

parent 7dc26cf5
...@@ -4,15 +4,22 @@ import equal from '../equal'; ...@@ -4,15 +4,22 @@ import equal from '../equal';
const { Shape } = G2; const { Shape } = G2;
const primaryColor = '#2F9CFF';
const backgroundColor = '#F0F2F5';
/* eslint no-underscore-dangle: 0 */ /* eslint no-underscore-dangle: 0 */
class Gauge extends PureComponent { class Gauge extends PureComponent {
componentDidMount() { componentDidMount() {
this.renderChart(); setTimeout(() => {
this.renderChart();
}, 10);
} }
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
if (!equal(this.props, nextProps)) { if (!equal(this.props, nextProps)) {
this.renderChart(nextProps); setTimeout(() => {
this.renderChart(nextProps);
}, 10);
} }
} }
...@@ -27,7 +34,7 @@ class Gauge extends PureComponent { ...@@ -27,7 +34,7 @@ class Gauge extends PureComponent {
} }
initChart(nextProps) { initChart(nextProps) {
const { title, color = '#00b1f8' } = nextProps || this.props; const { title, color = primaryColor } = nextProps || this.props;
Shape.registShape('point', 'dashBoard', { Shape.registShape('point', 'dashBoard', {
drawShape(cfg, group) { drawShape(cfg, group) {
...@@ -103,7 +110,9 @@ class Gauge extends PureComponent { ...@@ -103,7 +110,9 @@ class Gauge extends PureComponent {
} }
renderChart(nextProps) { renderChart(nextProps) {
const { height, color = '#00b1f8', bgColor = '#d3f3fe', title, percent, format } = nextProps || this.props; const {
height, color = primaryColor, bgColor = backgroundColor, title, percent, format,
} = nextProps || this.props;
const data = [{ name: title, value: percent }]; const data = [{ name: title, value: percent }];
if (this.chart) { if (this.chart) {
...@@ -139,11 +148,13 @@ class Gauge extends PureComponent { ...@@ -139,11 +148,13 @@ class Gauge extends PureComponent {
min: 0, min: 0,
max: 100, max: 100,
tickCount: 6, tickCount: 6,
subTick: false,
}); });
chart.axis('value', { chart.axis('value', {
subTick: false,
tickLine: { tickLine: {
stroke: color, stroke: color,
lineWidth: 2,
value: -14,
}, },
labelOffset: -12, labelOffset: -12,
formatter: format, formatter: format,
...@@ -154,7 +165,7 @@ class Gauge extends PureComponent { ...@@ -154,7 +165,7 @@ class Gauge extends PureComponent {
/* eslint no-shadow: 0 */ /* eslint no-shadow: 0 */
function draw(data) { function draw(data) {
const val = data[0].value; const val = data[0].value;
const lineWidth = 18; const lineWidth = 12;
chart.guide().clear(); chart.guide().clear();
chart.guide().arc(() => { chart.guide().arc(() => {
......
...@@ -204,11 +204,11 @@ class Pie extends Component { ...@@ -204,11 +204,11 @@ class Pie extends Component {
style={{ marginLeft: left, opacity: left ? 1 : 0 }} style={{ marginLeft: left, opacity: left ? 1 : 0 }}
> >
{ {
subTitle && <h4>{subTitle}</h4> subTitle && <h4 className="pie-sub-title">{subTitle}</h4>
} }
{ {
// eslint-disable-next-line // eslint-disable-next-line
total && <p dangerouslySetInnerHTML={{ __html: total }} /> total && <p className="pie-stat" dangerouslySetInnerHTML={{ __html: total }} />
} }
</div> </div>
) )
......
...@@ -29,21 +29,14 @@ class WaterWave extends PureComponent { ...@@ -29,21 +29,14 @@ class WaterWave extends PureComponent {
resize = () => { resize = () => {
const { height } = this.props; const { height } = this.props;
const realWidth = this.root.parentNode.offsetWidth; const { offsetWidth } = this.root.parentNode;
if (realWidth < this.props.height) { this.setState({
const radio = realWidth / height; radio: offsetWidth < height ? offsetWidth / height : 1,
this.setState({ });
radio,
});
} else {
this.setState({
radio: 1,
});
}
} }
renderChart() { renderChart() {
const { percent, color = '#19AFFA' } = this.props; const { percent, color = '#1890FF' } = this.props;
const data = percent / 100; const data = percent / 100;
const self = this; const self = this;
...@@ -61,7 +54,7 @@ class WaterWave extends PureComponent { ...@@ -61,7 +54,7 @@ class WaterWave extends PureComponent {
const cR = radius - (lineWidth); const cR = radius - (lineWidth);
ctx.beginPath(); ctx.beginPath();
ctx.lineWidth = lineWidth; ctx.lineWidth = lineWidth * 2;
const axisLength = canvasWidth - (lineWidth); const axisLength = canvasWidth - (lineWidth);
const unit = axisLength / 8; const unit = axisLength / 8;
...@@ -108,7 +101,11 @@ class WaterWave extends PureComponent { ...@@ -108,7 +101,11 @@ class WaterWave extends PureComponent {
ctx.lineTo(xOffset + axisLength, canvasHeight); ctx.lineTo(xOffset + axisLength, canvasHeight);
ctx.lineTo(xOffset, canvasHeight); ctx.lineTo(xOffset, canvasHeight);
ctx.lineTo(startPoint[0], startPoint[1]); ctx.lineTo(startPoint[0], startPoint[1]);
ctx.fillStyle = color;
const gradient = ctx.createLinearGradient(0, 0, 0, 170);
gradient.addColorStop(0, '#ffffff');
gradient.addColorStop(1, '#1890FF');
ctx.fillStyle = gradient;
ctx.fill(); ctx.fill();
ctx.restore(); ctx.restore();
} }
...@@ -137,7 +134,7 @@ class WaterWave extends PureComponent { ...@@ -137,7 +134,7 @@ class WaterWave extends PureComponent {
ctx.restore(); ctx.restore();
ctx.clip(); ctx.clip();
ctx.fillStyle = '#108ee9'; ctx.fillStyle = '#1890FF';
} }
} else { } else {
if (data >= 0.85) { if (data >= 0.85) {
...@@ -181,7 +178,14 @@ class WaterWave extends PureComponent { ...@@ -181,7 +178,14 @@ class WaterWave extends PureComponent {
const { percent, title, height } = this.props; const { percent, title, height } = this.props;
return ( return (
<div className={styles.waterWave} ref={n => (this.root = n)} style={{ transform: `scale(${radio})` }}> <div className={styles.waterWave} ref={n => (this.root = n)} style={{ transform: `scale(${radio})` }}>
<canvas ref={n => (this.node = n)} width={height} height={height} /> <div style={{ width: height, height, overflow: 'hidden' }}>
<canvas
className={styles.waterWaveCanvasWrapper}
ref={n => (this.node = n)}
width={height * 2}
height={height * 2}
/>
</div>
<div className={styles.text} style={{ width: height }}> <div className={styles.text} style={{ width: height }}>
{ {
title && <span>{title}</span> title && <span>{title}</span>
......
...@@ -22,4 +22,8 @@ ...@@ -22,4 +22,8 @@
font-size: 24px; font-size: 24px;
} }
} }
.waterWaveCanvasWrapper {
transform: scale(.5);
transform-origin: 0 0;
}
} }
...@@ -68,7 +68,7 @@ export default class Monitor extends PureComponent { ...@@ -68,7 +68,7 @@ export default class Monitor extends PureComponent {
</Col> </Col>
</Row> </Row>
<div className={styles.mapChart}> <div className={styles.mapChart}>
<img src="https://gw.alipayobjects.com/zos/rmsportal/LYbCPIWLeUrdWSpVvKIL.png" alt="map" /> <img src="https://gw.alipayobjects.com/zos/rmsportal/HBWnDEUXCnGnGrRfrpKa.png" alt="map" />
</div> </div>
</Card> </Card>
</Col> </Col>
...@@ -105,11 +105,12 @@ export default class Monitor extends PureComponent { ...@@ -105,11 +105,12 @@ export default class Monitor extends PureComponent {
</Col> </Col>
</Row> </Row>
<Row gutter={24}> <Row gutter={24}>
<Col xl={8} lg={24} sm={24} xs={24}> <Col xl={12} lg={24} sm={24} xs={24}>
<Card <Card
title="各品类占比" title="各品类占比"
style={{ marginBottom: 24 }} style={{ marginBottom: 24 }}
bordered={false} bordered={false}
className={styles.pieCard}
> >
<Row gutter={4} style={{ padding: '18px 0 19px 0' }}> <Row gutter={4} style={{ padding: '18px 0 19px 0' }}>
<Col span={8}> <Col span={8}>
...@@ -119,6 +120,7 @@ export default class Monitor extends PureComponent { ...@@ -119,6 +120,7 @@ export default class Monitor extends PureComponent {
subTitle="中式快逐" subTitle="中式快逐"
total="28%" total="28%"
height={129} height={129}
lineWidth={2}
/> />
</Col> </Col>
<Col span={8}> <Col span={8}>
...@@ -129,6 +131,7 @@ export default class Monitor extends PureComponent { ...@@ -129,6 +131,7 @@ export default class Monitor extends PureComponent {
subTitle="θ₯Ώι€" subTitle="θ₯Ώι€"
total="22%" total="22%"
height={129} height={129}
lineWidth={2}
/> />
</Col> </Col>
<Col span={8}> <Col span={8}>
...@@ -139,12 +142,13 @@ export default class Monitor extends PureComponent { ...@@ -139,12 +142,13 @@ export default class Monitor extends PureComponent {
subTitle="火锅" subTitle="火锅"
total="32%" total="32%"
height={129} height={129}
lineWidth={2}
/> />
</Col> </Col>
</Row> </Row>
</Card> </Card>
</Col> </Col>
<Col xl={8} lg={12} sm={24} xs={24} style={{ marginBottom: 24 }}> <Col xl={6} lg={12} sm={24} xs={24} style={{ marginBottom: 24 }}>
<Card title="ηƒ­ι—¨ζœη΄’" bordered={false} bodyStyle={{ overflow: 'hidden' }}> <Card title="ηƒ­ι—¨ζœη΄’" bordered={false} bodyStyle={{ overflow: 'hidden' }}>
<TagCloud <TagCloud
data={tags} data={tags}
...@@ -152,8 +156,8 @@ export default class Monitor extends PureComponent { ...@@ -152,8 +156,8 @@ export default class Monitor extends PureComponent {
/> />
</Card> </Card>
</Col> </Col>
<Col xl={8} lg={12} sm={24} xs={24} style={{ marginBottom: 24 }}> <Col xl={6} lg={12} sm={24} xs={24} style={{ marginBottom: 24 }}>
<Card title="衄源剩余" bodyStyle={{ textAlign: 'center' }} bordered={false}> <Card title="衄源剩余" bodyStyle={{ textAlign: 'center', fontSize: 0 }} bordered={false}>
<WaterWave <WaterWave
height={161} height={161}
title="θ‘₯贴衄金剩余" title="θ‘₯贴衄金剩余"
......
...@@ -9,6 +9,10 @@ ...@@ -9,6 +9,10 @@
} }
} }
.pieCard :global(.pie-stat) {
font-size: 24px!important;
}
@media screen and (max-width: @screen-lg) { @media screen and (max-width: @screen-lg) {
.mapChart { .mapChart {
height: auto; height: auto;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment