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