Skip to content

H
hnyc-portrait
Commit 2bbd143e by zhaochengxiang
Options

移动端左右滑动

parent 5dcd0210
Showing with 77 additions and 38 deletions
README.md
湖南烟草客户画像
pc:http://localhost:3000/dashboard/3350a29b8fedcfebe3a40e4d12358626
http://localhost:3000/dashboard/5fff8ab3c32e9b1de8df1145d7131000
mobile:http://localhost:3000/m/dashboard/3350a29b8fedcfebe3a40e4d12358626
http://localhost:3000/m/dashboard/5fff8ab3c32e9b1de8df1145d7131000
用户id加密方式 AES（加密模式CBC 填充pkcs7padding 密码A930F2C3ACEA7B5B 偏移量B54480C3A296C334）+hex 参考链接:http://tool.chacuo.net/cryptaes
package.json
......@@ -10,15 +10,16 @@
"antd": "^3.26.0",
"axios": "^0.19.0",
"bizcharts": "^3.5.6",
"core-js": "^3.4.2",
"crypto-js": "^4.0.0",
"echarts": "^4.6.0",
"md5": "^2.2.1",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-router-dom": "^5.0.1",
"react-scripts": "^3.4.0",
"recharts": "^2.0.0-beta.1",
"echarts": "^4.6.0",
"core-js": "^3.4.2"
"swiper": "^5.3.7"
},
"scripts": {
"start": "react-scripts start",
......
src/view/Dashboard.css
......@@ -13,15 +13,21 @@
}
.degreeContent {
height: 235px;
height: 200px;
overflow: auto;
}
.radarContent {
height: 326px;
height: 238px;
}
.infoContentItem {
padding: 20px;
padding: 16px;
font-size:.9rem;
}
\ No newline at end of file
}
@media screen and (max-width: 375px) {
h3.ant-typography {
font-size: 18px;
}
}
src/view/Dashboard.jsx
......@@ -7,7 +7,7 @@ import Basic from './Radar.recharts';
import Pie from './Pie';
import Line from './Line';
import './Dashboard.css';
import { Layout, Row, Col, Card, Spin, Divider, Table, Select, Empty } from 'antd';
import { Layout, Row, Col, Card, Spin, Divider, Table, Select, Empty, ConfigProvider } from 'antd';
const { Content } = Layout;
const { Option } = Select;
......@@ -213,7 +213,7 @@ class Dashboard extends Component {
this.setState({ loadingTrend: true}, () => {
PostJSON("/data/json/queryByCriteria",{ payload: {
"userName":"root",
"tableModelId":"5e967f53ed72724be6c0bbe6",
"tableModelId":"5e9feb08abc30a63724d8eb9",
"whereCriterias":[{"operator":"eq","parameter":"lic_no","values":[_custId]}],
"orderByCriterias":[{"order":"DESC","parameter":"dt"}],
"pageNo":"1",
......@@ -283,22 +283,27 @@ class Dashboard extends Component {
let xAxis = [];
let series = [];
let unit = '';
trendData&&trendData.map((item,index) => {
xAxis.push(item.dt);
if (value === '0') {
series.push(item.month_order_s||'');
} else if (value === '1') {
series.push(item.once_order_num||'');
unit = item.once_order_num_unit||'';
} else if (value === '1') {
series.push(item.month_order_s||'');
unit = item.month_order_s_unit||'';
} else if (value === '2') {
series.push(item.out_pro_wgt||'');
unit = item.out_pro_wgt_unit||'';
} else if (value === '3') {
series.push(item.month_utilization_rate||'');
unit = item.month_utilization_rate_unit||'';
}
return item;
})
this.setState({ curTrendData:{xAxis:xAxis,series:series}, curTrendKey: value });
this.setState({ curTrendData:{xAxis:xAxis,series:series,unit:unit}, curTrendKey: value });
}
render() {
......@@ -336,13 +341,23 @@ class Dashboard extends Component {
</Row>
<Row className="border-bottom border-light infoContentItem">
<Col md={12}>
<div>客户状态</div>
<div className="text-primary">{data.custStatus||''}</div>
</Col>
<Col md={12}>
<div>档位</div>
<div className="text-primary">{data.custSeg||''}</div>
</Col>
</Row>
<Row className="border-bottom border-light infoContentItem">
<Col md={12}>
<div>批次</div>
<div className="text-primary">{data.custPeriodsName||''}</div>
</Col>
<Col md={12}>
<div>商圈类型</div>
<div className="text-primary">{data.custAreaType||''}</div>
</Col>
</Row>
<Row className="border-bottom border-light infoContentItem">
<Col md={12}>
......@@ -387,7 +402,7 @@ class Dashboard extends Component {
</Card>
</Col>
<Col md={8}>
<Card bordered={false} style={{marginBottom: '10px'}}>
<Card bordered={false} style={{marginBottom: '10px', paddingBottom: '0px'}}>
<h3 className="ant-typography text-primary">客户评级</h3>
<Spin spinning={loading}>
<div className="levelContent">
......@@ -396,7 +411,7 @@ class Dashboard extends Component {
}
</div>
</Spin>
<Divider />
<Divider style={{ margin:'10px 0' }} />
<Spin spinning={loading}>
<div className="radarContent">
{
......@@ -410,7 +425,11 @@ class Dashboard extends Component {
<Spin spinning={loading}>
<div className="degreeContent">
{
curDimension&&<Table dataSource={curDimension} columns={columns} pagination={false} />
curDimension&&(
<ConfigProvider renderEmpty={()=> <Empty description="无符合项" imageStyle={{height: 60}} />}>
<Table dataSource={curDimension} columns={columns} pagination={false} size="small" />
</ConfigProvider>
)
}
</div>
</Spin>
......@@ -418,9 +437,9 @@ class Dashboard extends Component {
</Col>
<Col md={8}>
<Card bordered={false} style={{marginBottom: '10px'}}>
<h3 className="ant-typography text-primary">订购品规TOP10</h3>
<h3 className="ant-typography text-primary">上月订购品规TOP10</h3>
<Spin spinning={loadingOrder}>
<div style={{ width: '100%', height: '325px', display: 'flex', alignItems: 'center',justifyContent: 'center' }}>
<div style={{ width: '100%', height: '300px', display: 'flex', alignItems: 'center',justifyContent: 'center' }}>
{ orderData.length===0&&<Empty />}
{ orderData.length!==0&&<Pie data={orderData} /> }
</div>
......@@ -429,7 +448,7 @@ class Dashboard extends Component {
<Card bordered={false}>
<div style={{display: 'flex',justifyContent: 'space-between'}}>
<h3 className="ant-typography text-primary">上季度走势图</h3>
<Select defaultValue={curTrendKey} style={{ width: 120 }} onChange={this.handleTrendChange}>
<Select defaultValue={curTrendKey} style={{ minWidth: 120 }} onChange={this.handleTrendChange}>
<Option value="0">次均订购量</Option>
<Option value="1">订单结构</Option>
<Option value="2">省外烟比例</Option>
......@@ -437,7 +456,7 @@ class Dashboard extends Component {
</Select>
</div>
<Spin spinning={loadingTrend}>
<div style={{ width: '100%', height: '325px', display: 'flex', alignItems: 'center',justifyContent: 'center' }}>
<div style={{ width: '100%', height: '200px', display: 'flex', alignItems: 'center',justifyContent: 'center' }}>
{ trendData.length===0&&<Empty />}
{ trendData.length!==0&&<Line data={curTrendData} /> }
</div>
......
src/view/Line.jsx
......@@ -24,7 +24,7 @@ class Line extends Component {
};
setChartOption= () => {
const { data } = this.props;
const { data, isMobile } = this.props;
var myChart = echarts.init(document.getElementById('line'));
myChart.setOption({
......@@ -33,7 +33,9 @@ class Line extends Component {
show: false,
},
tooltip: {
trigger: 'axis'
trigger: 'axis',
confine: (isMobile&&isMobile===true)?true:false,
formatter: `{b}<br/> {c}${data.unit}`
},
grid: {
left: '15%',
......@@ -57,6 +59,7 @@ class Line extends Component {
axisTick: {show: false},
axisLabel: {
color: '#999999',
fontSize: (isMobile&&isMobile===true)?'10':'12',
showMaxLabel: true
},
axisLine:{
......@@ -83,6 +86,8 @@ class Line extends Component {
},
axisLabel: {
color: '#999999',
fontSize: (isMobile&&isMobile===true)?'10':'12',
formatter: `{value}${data.unit}`
},
axisLine:{
lineStyle:{
......@@ -112,7 +117,7 @@ class Line extends Component {
render() {
return (
<React.Fragment>
<div id={"line"} style={{ width: '100%', height: '325px' }}>
<div id={"line"} style={{ width: '100%', height: '100%' }}>
</div>
</React.Fragment>
);
......
src/view/Pie.jsx
......@@ -4,7 +4,7 @@ import echarts from "echarts";
class Pie extends Component {
componentDidMount() {
const { data } = this.props;
const { data, isMobile } = this.props;
let legendData = [], pieData = [];
data.map((item,i) =>{
......@@ -23,28 +23,32 @@ class Pie extends Component {
myChart.setOption({
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
confine: (isMobile&&isMobile===true)?true:false,
formatter: '{b}: {c} ({d}%)'
},
legend: [
{
orient: 'vertical',
left: '0',
top: '20%',
data: legendData.slice(0,5)
top: '0%',
textStyle: {
fontSize: (isMobile&&isMobile===true)?10:12
},
data: legendData.slice(0,5),
},
{
orient: 'vertical',
right: '0',
top: '20%',
align: 'right',
data: legendData.slice(5,10)
},
left: '0',
bottom: '0%',
textStyle: {
fontSize: (isMobile&&isMobile===true)?10:12
},
data: legendData.slice(5,10),
}
],
series: [
{
name: '访问来源',
name: '',
type: 'pie',
radius: ['40%', '60%'],
radius: ['30%', '50%'],
avoidLabelOverlap: false,
label: {
normal: {
......@@ -85,7 +89,7 @@ class Pie extends Component {
render() {
return (
<React.Fragment>
<div id='pie' style={{ width: '100%', height: '325px' }}></div>
<div id='pie' style={{ width: '100%', height: '100%' }}></div>
</React.Fragment>
);
}
......
src/view/Radar.recharts.jsx
......@@ -43,10 +43,11 @@ class Basic extends React.Component {
];
return (<ResponsiveContainer
height={this.props.mobile ? 300: '100%'}
height={this.props.mobile ? 250: '100%'}
>
<RadarChart data={data}
outerRadius={this.props.mobile ? "60%": "70%" }
outerRadius={this.props.mobile ? "50%": "80%" }
style={{paddingTop: '20px'}}
>
<Tooltip isAnimationActive={false} />
<PolarGrid />
......
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