|
@@ -6,7 +6,7 @@ import { AtTabs, AtTabsPane, AtProgress } from 'taro-ui'
|
6
|
6
|
import "taro-ui/dist/style/components/tabs.scss"
|
7
|
7
|
import "taro-ui/dist/style/components/progress.scss";
|
8
|
8
|
import { savePoint, updatePoint } from '@services/common'
|
9
|
|
-import { querySexInfo } from '@services/person'
|
|
9
|
+import { querySexInfo, getEchartDailyInfo, getEchartMonthInfo } from '@services/person'
|
10
|
10
|
import { connect } from '@tarojs/redux'
|
11
|
11
|
import LineChart from "../../../components/charts/Line";
|
12
|
12
|
|
|
@@ -22,14 +22,15 @@ export default class analysis extends Taro.Component {
|
22
|
22
|
current: 0,
|
23
|
23
|
recordId: undefined, // 埋点ID
|
24
|
24
|
sexInfo: [],
|
|
25
|
+ checkedWhich: 0,
|
25
|
26
|
chartInfo: [
|
26
|
|
- { name: '周一', value: '26' },
|
27
|
|
- { name: '周二', value: '84' },
|
28
|
|
- { name: '周三', value: '107' },
|
29
|
|
- { name: '周四', value: '93' },
|
30
|
|
- { name: '周五', value: '127' },
|
31
|
|
- { name: '周六', value: '64' },
|
32
|
|
- { name: '周日', value: '94' },
|
|
27
|
+ // { name: '周一', value: '26' },
|
|
28
|
+ // { name: '周二', value: '84' },
|
|
29
|
+ // { name: '周三', value: '107' },
|
|
30
|
+ // { name: '周四', value: '93' },
|
|
31
|
+ // { name: '周五', value: '127' },
|
|
32
|
+ // { name: '周六', value: '64' },
|
|
33
|
+ // { name: '周日', value: '94' },
|
33
|
34
|
]
|
34
|
35
|
}
|
35
|
36
|
|
|
@@ -71,65 +72,126 @@ export default class analysis extends Taro.Component {
|
71
|
72
|
sexInfo: res || []
|
72
|
73
|
})
|
73
|
74
|
})
|
74
|
|
- const chartData = [
|
75
|
|
- { value: 335, name: '直接访问' },
|
76
|
|
- { value: 310, name: '邮件营销' },
|
77
|
|
- { value: 234, name: '联盟广告' },
|
78
|
|
- { value: 135, name: '视频广告' },
|
79
|
|
- { value: 1548, name: '搜索引擎' }
|
80
|
|
- ];
|
|
75
|
+ getEchartDailyInfo('new').then(res => {
|
|
76
|
+ let arr = []
|
|
77
|
+ res.map((item, index) => {
|
|
78
|
+ arr.push({ value: item.customerNum, name: item.day })
|
|
79
|
+ })
|
|
80
|
+ console.log(arr, "88888888888888888888888888888888888")
|
|
81
|
+ this.setState({
|
|
82
|
+ chartInfo: arr || []
|
|
83
|
+ })
|
|
84
|
+ })
|
|
85
|
+ }
|
|
86
|
+ changeDailyMonth(inx) {
|
|
87
|
+ const { current } = this.state
|
|
88
|
+ const params = current == 0 ? 'new' : current == 1 ? 'follow' : 'visite'
|
|
89
|
+ if (inx == 0) {
|
|
90
|
+ getEchartDailyInfo(params).then(res => {
|
|
91
|
+
|
|
92
|
+
|
|
93
|
+ let arr = []
|
|
94
|
+ res.map((item, index) => {
|
|
95
|
+ arr.push({ value: item.customerNum, name: item.day })
|
|
96
|
+ })
|
|
97
|
+ console.log(arr, "88888888888888888888888888888888888")
|
|
98
|
+ this.setState({
|
|
99
|
+ chartInfo: arr || []
|
|
100
|
+ })
|
|
101
|
+ })
|
|
102
|
+ } else {
|
|
103
|
+ getEchartMonthInfo(params).then(res => {
|
|
104
|
+
|
|
105
|
+ this.setState({
|
|
106
|
+ })
|
|
107
|
+ })
|
|
108
|
+ }
|
|
109
|
+ this.setState({
|
|
110
|
+ checkedWhich: inx
|
|
111
|
+ })
|
81
|
112
|
|
82
|
113
|
}
|
83
|
114
|
|
84
|
115
|
render() {
|
85
|
116
|
|
86
|
117
|
const tabList = [{ title: '新增客户' }, { title: '跟进客户' }, { title: '到访客户' }]
|
87
|
|
- const { sexInfo, chartInfo } = this.state
|
|
118
|
+ const dailyMonth = ['日', '月']
|
|
119
|
+ const { sexInfo, chartInfo, checkedWhich, current } = this.state
|
88
|
120
|
|
89
|
121
|
return (
|
90
|
122
|
<View>
|
91
|
|
- <AtTabs className="tab-bar" current={this.state.current} tabList={tabList} onClick={this.handleClick.bind(this)}>
|
92
|
|
- <AtTabsPane current={this.state.current} index={0} >
|
|
123
|
+ <AtTabs className="tab-bar" current={current} tabList={tabList} onClick={this.handleClick.bind(this)}>
|
|
124
|
+ <AtTabsPane current={current} index={0} >
|
93
|
125
|
<View>
|
94
|
|
- <View style="width:90vw;height:600rpx">
|
|
126
|
+ <View style="height:'40rpx;position: relative;">
|
|
127
|
+ <View className="daily-month" >
|
|
128
|
+ {
|
|
129
|
+ dailyMonth.map((item, index) => (
|
|
130
|
+ <View key={index + 'daily'} className={checkedWhich == index ? 'checked' : 'item'} onClick={this.changeDailyMonth.bind(this, index)}>
|
|
131
|
+ {item}
|
|
132
|
+ </View>))
|
|
133
|
+ }
|
|
134
|
+ </View>
|
|
135
|
+ </View>
|
|
136
|
+ <View style="width:100vw;height:530rpx">
|
95
|
137
|
<LineChart source={chartInfo} />
|
96
|
138
|
</View>
|
97
|
|
-
|
98
|
139
|
<View style="height:20rpx;background:#f5f5f5;"> </View>
|
99
|
140
|
<View style="padding: 40rpx;">
|
100
|
141
|
<View style="font-size: 36rpx;color: #666;margin-bottom:20rpx;">性别</View>
|
101
|
|
- {
|
102
|
|
- sexInfo.map((item, index) => (
|
103
|
|
- <View key={index + 'sex3'} style="display: flex;align-items: center;"><View style="font-size: 32rpx;color: #666;min-width:80rpx">{item.genderType == 1 ? '男' : item.genderType == 2 ? '女' : '未知'}</View><AtProgress percent={(item.percentage * 100).toFixed(2)} strokeWidth={6} color={item.genderType == 1 ? '#BB9C79' : item.genderType == 2 ? '#F6B61D' : '#A2A2A2'} /></View>
|
104
|
|
- ))
|
|
142
|
+ {sexInfo.map((item, index) => (
|
|
143
|
+ <View key={index + 'sex1'} style="display: flex;align-items: center;"><View style="font-size: 32rpx;color: #666;min-width:80rpx">{item.genderType == 1 ? '男' : item.genderType == 2 ? '女' : '未知'}</View><AtProgress percent={(item.percentage * 100).toFixed(2)} strokeWidth={6} color={item.genderType == 1 ? '#BB9C79' : item.genderType == 2 ? '#F6B61D' : '#A2A2A2'} /></View>
|
|
144
|
+ ))
|
105
|
145
|
}
|
106
|
146
|
</View>
|
107
|
147
|
</View>
|
108
|
148
|
</AtTabsPane>
|
109
|
|
- <AtTabsPane current={this.state.current} index={1}>
|
|
149
|
+ <AtTabsPane current={current} index={1}>
|
110
|
150
|
<View>
|
111
|
|
- <LineChart />
|
|
151
|
+ <View style="height:'40rpx;position: relative;">
|
|
152
|
+ <View className="daily-month" >
|
|
153
|
+ {
|
|
154
|
+ dailyMonth.map((item, index) => (
|
|
155
|
+ <View key={index + 'month'} className={checkedWhich == index ? 'checked' : 'item'} onClick={this.changeDailyMonth.bind(this, index)}>
|
|
156
|
+ {item}
|
|
157
|
+ </View>))
|
|
158
|
+ }
|
|
159
|
+ </View>
|
|
160
|
+ </View>
|
|
161
|
+ <View style="width:100vw;height:520rpx">
|
|
162
|
+ <LineChart source={chartInfo} />
|
|
163
|
+ </View>
|
112
|
164
|
<View style="height:20rpx;background:#f5f5f5;"> </View>
|
113
|
165
|
<View style="padding: 40rpx;">
|
114
|
166
|
<View style="font-size: 36rpx;color: #666;margin-bottom:20rpx;">性别</View>
|
115
|
|
- {
|
116
|
|
- sexInfo.map((item, index) => (
|
117
|
|
- <View key={index + 'sex3'} style="display: flex;align-items: center;"><View style="font-size: 32rpx;color: #666;min-width:80rpx">{item.genderType == 1 ? '男' : item.genderType == 2 ? '女' : '未知'}</View><AtProgress percent={(item.percentage * 100).toFixed(2)} strokeWidth={6} color={item.genderType == 1 ? '#BB9C79' : item.genderType == 2 ? '#F6B61D' : '#A2A2A2'} /></View>
|
118
|
|
- ))
|
|
167
|
+ {sexInfo.map((item, index) => (
|
|
168
|
+ <View key={index + 'sex2'} style="display: flex;align-items: center;"><View style="font-size: 32rpx;color: #666;min-width:80rpx">{item.genderType == 1 ? '男' : item.genderType == 2 ? '女' : '未知'}</View><AtProgress percent={(item.percentage * 100).toFixed(2)} strokeWidth={6} color={item.genderType == 1 ? '#BB9C79' : item.genderType == 2 ? '#F6B61D' : '#A2A2A2'} /></View>
|
|
169
|
+ ))
|
119
|
170
|
}
|
120
|
171
|
</View>
|
121
|
172
|
</View>
|
122
|
173
|
</AtTabsPane>
|
123
|
|
- <AtTabsPane current={this.state.current} index={2}>
|
|
174
|
+ <AtTabsPane current={current} index={2}>
|
124
|
175
|
<View>
|
125
|
|
- <LineChart />
|
|
176
|
+ <View style="height:'40rpx;position: relative;">
|
|
177
|
+ <View className="daily-month" >
|
|
178
|
+ {
|
|
179
|
+ dailyMonth.map((item, index) => (
|
|
180
|
+ <View key={index + 'day'} className={checkedWhich == index ? 'checked' : 'item'} onClick={this.changeDailyMonth.bind(this, index)}>
|
|
181
|
+ {item}
|
|
182
|
+ </View>))
|
|
183
|
+ }
|
|
184
|
+ </View>
|
|
185
|
+ </View>
|
|
186
|
+ <View style="width:100vw;height:520rpx">
|
|
187
|
+ <LineChart source={chartInfo} />
|
|
188
|
+ </View>
|
126
|
189
|
<View style="height:20rpx;background:#f5f5f5;"> </View>
|
127
|
190
|
<View style="padding: 40rpx;">
|
128
|
191
|
<View style="font-size: 36rpx;color: #666;margin-bottom:20rpx;">性别</View>
|
129
|
|
- {
|
130
|
|
- sexInfo.map((item, index) => (
|
131
|
|
- <View key={index + 'sex3'} style="display: flex;align-items: center;"><View style="font-size: 32rpx;color: #666;min-width:80rpx">{item.genderType == 1 ? '男' : item.genderType == 2 ? '女' : '未知'}</View><AtProgress percent={(item.percentage * 100).toFixed(2)} strokeWidth={6} color={item.genderType == 1 ? '#BB9C79' : item.genderType == 2 ? '#F6B61D' : '#A2A2A2'} /></View>
|
132
|
|
- ))
|
|
192
|
+ {sexInfo.map((item, index) => (
|
|
193
|
+ <View key={index + 'sex3'} style="display: flex;align-items: center;"><View style="font-size: 32rpx;color: #666;min-width:80rpx">{item.genderType == 1 ? '男' : item.genderType == 2 ? '女' : '未知'}</View><AtProgress percent={(item.percentage * 100).toFixed(2)} strokeWidth={6} color={item.genderType == 1 ? '#BB9C79' : item.genderType == 2 ? '#F6B61D' : '#A2A2A2'} /></View>
|
|
194
|
+ ))
|
133
|
195
|
}
|
134
|
196
|
</View>
|
135
|
197
|
</View>
|