正在显示
22 个修改的文件
包含
2123 行增加
和
200 行删除
... | ... | @@ -126,7 +126,8 @@ App({ |
126 | 126 | onshow_count: 0, |
127 | 127 | // baseUrl: "http://47.99.47.16:20000/", |
128 | 128 | // baseUrl: "http://47.96.75.229:20000/", |
129 | - baseUrl: "http://192.144.144.220:20000/", | |
129 | + // baseUrl: "http://192.144.144.220:20000/", | |
130 | + baseUrl: "http://154.8.229.55:20000/", | |
130 | 131 | // baseUrl: "https://api.workai.com.cn/", |
131 | 132 | OSSUrl: "",//"https://oss.workai.com.cn/", |
132 | 133 | userInfo: null, | ... | ... |
... | ... | @@ -27,7 +27,7 @@ |
27 | 27 | |
28 | 28 | .item_body { |
29 | 29 | width: 100%; |
30 | - height: 80rpx; | |
30 | + height: 90rpx; | |
31 | 31 | } |
32 | 32 | |
33 | 33 | .text_wrap{ |
... | ... | @@ -40,7 +40,7 @@ |
40 | 40 | |
41 | 41 | .text_black_28 { |
42 | 42 | font-family: PingFangSC-Regular; |
43 | - font-size: 26rpx; | |
43 | + font-size: 28rpx; | |
44 | 44 | color: #000; |
45 | 45 | line-height: 80rpx; |
46 | 46 | } |
... | ... | @@ -66,6 +66,12 @@ |
66 | 66 | color: #999; |
67 | 67 | } |
68 | 68 | |
69 | +.text_333_30 { | |
70 | + font-family: PingFangSC-Regular; | |
71 | + font-size: 30rpx; | |
72 | + color: #333; | |
73 | +} | |
74 | + | |
69 | 75 | .text_blue_28 { |
70 | 76 | font-family: PingFangSC-Regular; |
71 | 77 | font-size: 28rpx; |
... | ... | @@ -103,7 +109,7 @@ |
103 | 109 | width: 40rpx; |
104 | 110 | height: 40rpx; |
105 | 111 | float: right; |
106 | - margin-top: 20rpx; | |
112 | + margin-top: 24rpx; | |
107 | 113 | margin-left: 8rpx; |
108 | 114 | } |
109 | 115 | ... | ... |
1 | 1 | <template name="picker_cell_normal"> |
2 | 2 | <view class='item_body'> |
3 | - <text hidden='{{!isrequre}}' style='color:red;font-size: 28rpx;line-height: 80rpx;float:left'>*</text> | |
4 | - <view wx:if='{{isrequre}}'> | |
5 | - <text class='text_black_28 float_left'>{{label}}</text> | |
3 | + <text hidden='{{!isrequre}}' style='color:red;font-size: 30rpx;line-height: 90rpx;float:left'>*</text> | |
4 | + <view wx:if='{{isrequre||isblack}}'> | |
5 | + <text class='text_black_30 float_left' style='line-height: 90rpx;'>{{label}}</text> | |
6 | 6 | </view> |
7 | 7 | <view wx:else> |
8 | - <text class='text_666_28 float_left'>{{label}}</text> | |
8 | + <text class='text_666_30 float_left' style='line-height: 90rpx;'>{{label}}</text> | |
9 | 9 | </view> |
10 | 10 | <image class='arrow_wrap' src='/images/arrow_right.png'></image> |
11 | 11 | |
12 | 12 | <view class="weui-cell__bd"> |
13 | 13 | <picker mode="{{mode?mode:'selector'}}" range-key="{{range_key}}" range="{{values}}" fields="{{fields}}" start="{{start}}" end="{{end}}" bindchange="{{onChange}}" bindcolumnchange="{{onColumnChange}}" disabled="{{disabled}}" id='{{bindtype}}'> |
14 | - <!-- <view wx:if="{{selected&&disabled}}" class="text_999_28 float_right">{{selected}}</view> | |
15 | - <view wx:elif="{{selected}}" class="text_333_28 float_right ">{{selected}}</view> | |
16 | - <view wx:else class="text_999_28 float_right ">{{placeholder}}</view> --> | |
14 | + <!-- <view wx:if="{{selected&&disabled}}" class="text_999_30 float_right">{{selected}}</view> | |
15 | + <view wx:elif="{{selected}}" class="text_333_30 float_right ">{{selected}}</view> | |
16 | + <view wx:else class="text_999_30 float_right ">{{placeholder}}</view> --> | |
17 | 17 | |
18 | - <text wx:if="{{selected&&disabled}}" class="text_999_28 float_right">{{selected}}</text> | |
19 | - <text wx:elif="{{selected}}" class="text_333_28 float_right ">{{selected}}</text> | |
20 | - <text wx:else class="text_999_28 float_right ">{{placeholder}}</text> | |
18 | + <text wx:if="{{selected&&disabled}}" class="text_999_30 float_right" style='line-height: 90rpx;'>{{selected}}</text> | |
19 | + <text wx:elif="{{selected}}" class="text_333_30 float_right " style='line-height: 90rpx;'>{{selected}}</text> | |
20 | + <text wx:else class="text_999_30 float_right " style='line-height: 90rpx;'>{{placeholder}}</text> | |
21 | 21 | </picker> |
22 | 22 | </view> |
23 | 23 | </view> | ... | ... |
... | ... | @@ -11,6 +11,56 @@ Page({ |
11 | 11 | title_arr: ["添加子女", "添加继续教育", "添加老人", "添加大病医疗", "添加住房贷款利息"], |
12 | 12 | extrainfo_arr: ["请上传子女出生证明、学籍信息凭证、学费凭证、本人结婚证和分摊协议", "请上传学历学籍凭证", "请上传出生证明或关系证明、独生子女证、分摊协议、其他法定赡养人赡养证明", "请上传诊断书和医疗费用收据", "请上传首套房证明、还款证明、不动产登记证、结婚证和夫妻约定抵扣协议"], |
13 | 13 | cur_index:0, |
14 | + edudegreeData: { | |
15 | + label: '教育阶段', | |
16 | + bindtype: 'edu_degree', | |
17 | + selected: '', | |
18 | + isblack:'true', | |
19 | + values: ["小学", "初中", "高中", "大学"], | |
20 | + placeholder: '请选择教育阶段', | |
21 | + onChange: 'onPickerSelect' | |
22 | + }, | |
23 | + edutypeData: { | |
24 | + label: '教育类型', | |
25 | + bindtype: 'edu_type', | |
26 | + selected: '', | |
27 | + isblack: 'true', | |
28 | + values: ["学历教育", "技能职业资格", "专业职业资格"], | |
29 | + placeholder: '请选择教育类型', | |
30 | + onChange: 'onPickerSelect' | |
31 | + }, | |
32 | + olderrelativeData: { | |
33 | + label: '与老人的关系', | |
34 | + bindtype: 'older_relative', | |
35 | + selected: '', | |
36 | + isblack: 'true', | |
37 | + values: ["父子", "父女", "母子", "母女"], | |
38 | + placeholder: '请选择与老人的关系', | |
39 | + onChange: 'onPickerSelect' | |
40 | + }, | |
41 | + singlechildData:{ | |
42 | + label: '是否独生子女', | |
43 | + bindtype: 'single_child', | |
44 | + selected: '', | |
45 | + isblack: 'true', | |
46 | + values: ["是", "否"], | |
47 | + placeholder: '请选择是否独生子女', | |
48 | + onChange: 'onPickerSelect' | |
49 | + }, | |
50 | + reducedateData: { | |
51 | + label: '扣除时间', | |
52 | + bindtype: 'reduce_date', | |
53 | + selected: '', | |
54 | + isblack: 'true', | |
55 | + values: ["是", "否"], | |
56 | + placeholder: '请选择扣除时间', | |
57 | + onChange: 'onPickerSelect', | |
58 | + mode: "date", | |
59 | + fields: "month", | |
60 | + start: '1970-01', | |
61 | + }, | |
62 | + edu_lable:"", | |
63 | + long_reduce_date:0, | |
14 | 64 | img_path:"/images/upload_img.png" |
15 | 65 | }, |
16 | 66 | |
... | ... | @@ -77,6 +127,54 @@ Page({ |
77 | 127 | |
78 | 128 | }, |
79 | 129 | |
130 | + onPickerSelect: function (e) { | |
131 | + console.log('picker发送选择改变,携带值为', e) | |
132 | + switch (e.currentTarget.id) { | |
133 | + case 'edu_degree': | |
134 | + var edudegree_data = this.data.edudegreeData | |
135 | + edudegree_data.selected = edudegree_data.values[e.detail.value] | |
136 | + this.setData({ | |
137 | + edudegreeData: edudegree_data | |
138 | + }) | |
139 | + break; | |
140 | + case 'edu_type': | |
141 | + var edutypee_data = this.data.edutypeData | |
142 | + edutypee_data.selected = edutypee_data.values[e.detail.value] | |
143 | + this.setData({ | |
144 | + edu_lable: e.detail.value == 0 ?'school':'tech', | |
145 | + edutypeData: edutypee_data | |
146 | + }) | |
147 | + break; | |
148 | + case 'older_relative': | |
149 | + var olderrelative_data = this.data.olderrelativeData | |
150 | + olderrelative_data.selected = olderrelative_data.values[e.detail.value] | |
151 | + this.setData({ | |
152 | + olderrelativeData: olderrelative_data | |
153 | + }) | |
154 | + break; | |
155 | + case 'single_child': | |
156 | + var singlechild_data = this.data.singlechildData | |
157 | + singlechild_data.selected = singlechild_data.values[e.detail.value] | |
158 | + this.setData({ | |
159 | + singlechildData: singlechild_data | |
160 | + }) | |
161 | + break; | |
162 | + case 'reduce_date': | |
163 | + var reducedate_data = this.data.reducedateData | |
164 | + reducedate_data.selected = e.detail.value | |
165 | + console.log('birthdayChange', Date.parse(new Date(e.detail.value))) | |
166 | + this.setData({ | |
167 | + long_reduce_date: Date.parse(new Date(e.detail.value)) / 1000, | |
168 | + reducedateData: reducedate_data | |
169 | + }) | |
170 | + break; | |
171 | + } | |
172 | + // var educate_name = this.data.edu_array[e.detail.value] | |
173 | + // this.setData({ | |
174 | + // edu_name: educate_name | |
175 | + // }) | |
176 | + }, | |
177 | + | |
80 | 178 | goupload:function(e){ |
81 | 179 | console.log(e) |
82 | 180 | var that = this | ... | ... |
1 | 1 | <!--pages/main/addtionalreduce/addextrainfo/addextrainfo.wxml--> |
2 | +<import src="../../../common/picker_cell" /> | |
3 | + | |
2 | 4 | <scroll-view class='page'> |
3 | 5 | <view style='padding:0 30rpx'> |
4 | 6 | <!-- 添加子女 --> |
... | ... | @@ -23,37 +25,37 @@ |
23 | 25 | <input class='input_wrap float_right' placeholder-class='text_999_30 float_right' style='line-height: 90rpx;text-align: right' placeholder='请输入子女学籍号'></input> |
24 | 26 | </view> |
25 | 27 | <view class='divide_line_f5f5f5'></view> |
26 | - <view style='height:90rpx'> | |
27 | - <text class='text_black_30 float_left'>教育阶段</text> | |
28 | - <image class='arrow_wrap' src='/images/arrow_right.png'></image> | |
29 | - <text class='text_999_30 float_right' style='line-height: 90rpx;text-align:right'>请选择教育阶段</text> | |
30 | - </view> | |
28 | + | |
29 | + <!-- <picker bindchange="eduPickerChange" value="{{edu_name}}" range="{{edu_array}}"> | |
30 | + <view style='height:90rpx'> | |
31 | + <text class='text_black_30 float_left'>教育阶段</text> | |
32 | + <image class='arrow_wrap' src='/images/arrow_right.png'></image> | |
33 | + <text wx:if='{{!edu_name}}' class='text_999_30 float_right' style='line-height: 90rpx;text-align:right'>请选择教育阶段</text> | |
34 | + <text wx:else class='text_333_30 float_right' style='line-height: 90rpx;text-align:right'>{{edu_name}}</text> | |
35 | + </view> | |
36 | + </picker> --> | |
37 | + <template is="picker_cell_normal" data="{{...edudegreeData}}" /> | |
31 | 38 | <view class='divide_line_f5f5f5'></view> |
32 | 39 | <view style='height:90rpx'> |
33 | 40 | <text class='text_black_30 float_left'>扣除金额</text> |
34 | - <input class='input_wrap float_right' placeholder-class='text_999_30 float_right' style='line-height: 90rpx;text-align: right' placeholder='请输入扣除金额'></input> | |
41 | + <input class='input_wrap float_right' placeholder-class='text_999_30 float_right' style='line-height: 90rpx;;text-align: right' placeholder='请输入扣除金额'></input> | |
35 | 42 | </view> |
36 | 43 | <view class='divide_line_f5f5f5'></view> |
37 | - <view style='height:90rpx'> | |
44 | + <view style='height:90rpx;'> | |
38 | 45 | <text class='text_black_30 float_left'>扣除比例</text> |
39 | 46 | <input class='input_wrap float_right' placeholder-class='text_999_30 float_right' style='line-height: 90rpx;text-align: right' placeholder='请输入扣除比例'></input> |
40 | 47 | </view> |
41 | - <view class='divide_line_f5f5f5'></view> | |
42 | - <view style='height:90rpx'> | |
43 | - <text class='text_black_30 float_left'>扣除时间</text> | |
44 | - <image class='arrow_wrap' src='/images/arrow_right.png'></image> | |
45 | - <text class='text_999_30 float_right' style='line-height: 90rpx;text-align:right'>请选择扣除时间</text> | |
46 | - </view> | |
47 | 48 | </view> |
48 | 49 | <!-- 继续教育 --> |
49 | 50 | <view wx:if="{{cur_index==1}}"> |
50 | - <view style='height:90rpx'> | |
51 | + <!-- <view style='height:90rpx'> | |
51 | 52 | <text class='text_black_30 float_left'>教育类型</text> |
52 | 53 | <image class='arrow_wrap' src='/images/arrow_right.png'></image> |
53 | 54 | <text class='text_999_30 float_right' style='line-height: 90rpx;text-align:right'>请选择教育类型</text> |
54 | - </view> | |
55 | + </view> --> | |
56 | + <template is="picker_cell_normal" data="{{...edutypeData}}" /> | |
55 | 57 | <view class='divide_line_f5f5f5'></view> |
56 | - <view wx:if="{{lable!=0}}"> | |
58 | + <view wx:if="{{edu_lable=='school'}}"> | |
57 | 59 | <view style='height:90rpx'> |
58 | 60 | <text class='text_black_30 float_left'>学历教育阶段</text> |
59 | 61 | <input class='input_wrap float_right' placeholder-class='text_999_30 float_right' style='line-height: 90rpx;text-align: right' placeholder='请输入学历教育阶段'></input> |
... | ... | @@ -64,7 +66,7 @@ |
64 | 66 | <input class='input_wrap float_right' placeholder-class='text_999_30 float_right' style='line-height: 90rpx;text-align: right' placeholder='请输入学籍号'></input> |
65 | 67 | </view> |
66 | 68 | </view> |
67 | - <view wx:else> | |
69 | + <view wx:elif="{{edu_lable=='tech'}}"> | |
68 | 70 | <view style='height:90rpx'> |
69 | 71 | <text class='text_black_30 float_left'>职业资格名称</text> |
70 | 72 | <input class='input_wrap float_right' placeholder-class='text_999_30 float_right' style='line-height: 90rpx;text-align: right' placeholder='请输入职业资格名称'></input> |
... | ... | @@ -75,12 +77,6 @@ |
75 | 77 | <input class='input_wrap float_right' placeholder-class='text_999_30 float_right' style='line-height: 90rpx;text-align: right' placeholder='请输入职业资格编号'></input> |
76 | 78 | </view> |
77 | 79 | </view> |
78 | - <view class='divide_line_f5f5f5'></view> | |
79 | - <view style='height:90rpx'> | |
80 | - <text class='text_black_30 float_left'>扣除时间</text> | |
81 | - <image class='arrow_wrap' src='/images/arrow_right.png'></image> | |
82 | - <text class='text_999_30 float_right' style='line-height: 90rpx;text-align:right'>请选择扣除时间</text> | |
83 | - </view> | |
84 | 80 | </view> |
85 | 81 | |
86 | 82 | <!-- 赡养老人 --> |
... | ... | @@ -95,28 +91,24 @@ |
95 | 91 | <input class='input_wrap float_right' placeholder-class='text_999_30 float_right' style='line-height: 90rpx;text-align: right' placeholder='请输入老人身份证号'></input> |
96 | 92 | </view> |
97 | 93 | <view class='divide_line_f5f5f5'></view> |
98 | - <view style='height:90rpx'> | |
94 | + <!-- <view style='height:90rpx'> | |
99 | 95 | <text class='text_black_30 float_left'>与老人关系</text> |
100 | 96 | <image class='arrow_wrap' src='/images/arrow_right.png'></image> |
101 | 97 | <text class='text_999_30 float_right' style='line-height: 90rpx;text-align:right'>请选择与老人关系</text> |
102 | - </view> | |
98 | + </view> --> | |
99 | + <template is="picker_cell_normal" data="{{...olderrelativeData}}" /> | |
103 | 100 | <view class='divide_line_f5f5f5'></view> |
104 | - <view style='height:90rpx'> | |
101 | + <!-- <view style='height:90rpx'> | |
105 | 102 | <text class='text_black_30 float_left'>是否独生子女</text> |
106 | 103 | <image class='arrow_wrap' src='/images/arrow_right.png'></image> |
107 | 104 | <text class='text_999_30 float_right' style='line-height: 90rpx;text-align:right'>请选择是否独生子女</text> |
108 | - </view> | |
105 | + </view> --> | |
106 | + <template is="picker_cell_normal" data="{{...singlechildData}}" /> | |
109 | 107 | <view class='divide_line_f5f5f5'></view> |
110 | 108 | <view style='height:90rpx'> |
111 | 109 | <text class='text_black_30 float_left'>分摊比例</text> |
112 | 110 | <input class='input_wrap float_right' placeholder-class='text_999_30 float_right' style='line-height: 90rpx;text-align: right' placeholder='请输入分摊比例'></input> |
113 | 111 | </view> |
114 | - <view class='divide_line_f5f5f5'></view> | |
115 | - <view style='height:90rpx'> | |
116 | - <text class='text_black_30 float_left'>扣除时间</text> | |
117 | - <image class='arrow_wrap' src='/images/arrow_right.png'></image> | |
118 | - <text class='text_999_30 float_right' style='line-height: 90rpx;text-align:right'>请选择扣除时间</text> | |
119 | - </view> | |
120 | 112 | </view> |
121 | 113 | |
122 | 114 | <!-- 大病医疗 --> |
... | ... | @@ -125,12 +117,6 @@ |
125 | 117 | <text class='text_black_30 float_left'>扣除金额</text> |
126 | 118 | <input class='input_wrap float_right' placeholder-class='text_999_30 float_right' style='line-height: 90rpx;text-align: right' placeholder='请输入扣除金额'></input> |
127 | 119 | </view> |
128 | - <view class='divide_line_f5f5f5'></view> | |
129 | - <view style='height:90rpx'> | |
130 | - <text class='text_black_30 float_left'>扣除时间</text> | |
131 | - <image class='arrow_wrap' src='/images/arrow_right.png'></image> | |
132 | - <text class='text_999_30 float_right' style='line-height: 90rpx;text-align:right'>请选择扣除时间</text> | |
133 | - </view> | |
134 | 120 | </view> |
135 | 121 | |
136 | 122 | <!-- 住房 --> |
... | ... | @@ -144,14 +130,14 @@ |
144 | 130 | <text class='text_black_30 float_left'>配偶身份证号</text> |
145 | 131 | <input class='input_wrap float_right' placeholder-class='text_999_30 float_right' style='line-height: 90rpx;text-align: right' placeholder='请输入配偶身份证号'></input> |
146 | 132 | </view> |
147 | - <view class='divide_line_f5f5f5'></view> | |
148 | - <view style='height:90rpx'> | |
133 | + </view> | |
134 | + <view class='divide_line_f5f5f5'></view> | |
135 | + <!-- <view style='height:90rpx'> | |
149 | 136 | <text class='text_black_30 float_left'>扣除时间</text> |
150 | 137 | <image class='arrow_wrap' src='/images/arrow_right.png'></image> |
151 | 138 | <text class='text_999_30 float_right' style='line-height: 90rpx;text-align:right'>请选择扣除时间</text> |
152 | - </view> | |
153 | - </view> | |
154 | - | |
139 | + </view> --> | |
140 | + <template is="picker_cell_normal" data="{{...reducedateData}}" /> | |
155 | 141 | <view class='divide_line_f5f5f5'></view> |
156 | 142 | <view class='text_black_30 float_left'>上传材料</view> |
157 | 143 | </view> | ... | ... |
1 | 1 | // pages/main/advancepayment/home.js |
2 | +var format = require('../../../utils/util.js'); | |
2 | 3 | Page({ |
3 | 4 | |
4 | 5 | /** |
5 | 6 | * Page initial data |
6 | 7 | */ |
7 | 8 | data: { |
8 | - | |
9 | + choosed_date: '', | |
10 | + long_date: 0 | |
9 | 11 | }, |
10 | 12 | |
11 | 13 | /** |
12 | 14 | * Lifecycle function--Called when page load |
13 | 15 | */ |
14 | - onLoad: function (options) { | |
15 | - | |
16 | + onLoad: function(options) { | |
17 | + var mydate = new Date(); | |
18 | + this.setData({ | |
19 | + choosed_date: mydate.getFullYear() + "年" + (mydate.getMonth()+1)+"月", | |
20 | + long_date: mydate.getTime()/1000 | |
21 | + }) | |
16 | 22 | }, |
17 | 23 | |
18 | 24 | /** |
19 | 25 | * Lifecycle function--Called when page is initially rendered |
20 | 26 | */ |
21 | - onReady: function () { | |
27 | + onReady: function() { | |
22 | 28 | |
23 | 29 | }, |
24 | 30 | |
25 | 31 | /** |
26 | 32 | * Lifecycle function--Called when page show |
27 | 33 | */ |
28 | - onShow: function () { | |
34 | + onShow: function() { | |
35 | + | |
36 | + }, | |
29 | 37 | |
38 | + datePickerChange: function(e) { | |
39 | + console.log("e",e) | |
40 | + var datelong = Date.parse(new Date(e.detail.value))/1000 | |
41 | + console.log('datelong', datelong) | |
42 | + this.setData({ | |
43 | + long_date: datelong, | |
44 | + choosed_date: format.yearFormString(datelong) + "年" + format.monthFormString(datelong)+"月" | |
45 | + }) | |
30 | 46 | }, |
31 | 47 | |
32 | 48 | /** |
33 | 49 | * Lifecycle function--Called when page hide |
34 | 50 | */ |
35 | - onHide: function () { | |
51 | + onHide: function() { | |
36 | 52 | |
37 | 53 | }, |
38 | 54 | |
39 | 55 | /** |
40 | 56 | * Lifecycle function--Called when page unload |
41 | 57 | */ |
42 | - onUnload: function () { | |
58 | + onUnload: function() { | |
43 | 59 | |
44 | 60 | }, |
45 | 61 | |
46 | 62 | /** |
47 | 63 | * Page event handler function--Called when user drop down |
48 | 64 | */ |
49 | - onPullDownRefresh: function () { | |
65 | + onPullDownRefresh: function() { | |
50 | 66 | |
51 | 67 | }, |
52 | 68 | |
53 | 69 | /** |
54 | 70 | * Called when page reach bottom |
55 | 71 | */ |
56 | - onReachBottom: function () { | |
72 | + onReachBottom: function() { | |
57 | 73 | |
58 | 74 | }, |
59 | 75 | |
60 | 76 | /** |
61 | 77 | * Called when user click on the top right corner to share |
62 | 78 | */ |
63 | - onShareAppMessage: function () { | |
79 | + onShareAppMessage: function() { | |
64 | 80 | |
65 | 81 | } |
66 | 82 | }) |
\ No newline at end of file | ... | ... |
... | ... | @@ -2,13 +2,15 @@ |
2 | 2 | <view class='page'> |
3 | 3 | <scroll-view style='margin-bottom:40rpx'> |
4 | 4 | <view style='padding:30rpx;background:#ffffff'> |
5 | - <view> | |
6 | - <text class='text_gray_32'>当前选择月份</text> | |
7 | - <view class='float_right'> | |
8 | - <text class='text_gray_32'>2018年11月</text> | |
9 | - <image class='arrow_wrap' src='/images/arrow_right.png'></image> | |
5 | + <picker mode="date" fields="month" start="1970-01" end="2100-01" bindchange="datePickerChange"> | |
6 | + <view> | |
7 | + <text class='text_gray_32'>当前选择月份</text> | |
8 | + <view class='float_right'> | |
9 | + <text class='text_gray_32'>{{choosed_date}}</text> | |
10 | + <image class='arrow_wrap' src='/images/arrow_right.png'></image> | |
11 | + </view> | |
10 | 12 | </view> |
11 | - </view> | |
13 | + </picker> | |
12 | 14 | <view class='divide_line_f5f5f5'></view> |
13 | 15 | <view style='padding:30rpx 0'> |
14 | 16 | <text class='text_666_30 float_left'>累计工资税收</text> |
... | ... | @@ -100,6 +102,6 @@ |
100 | 102 | <text class='text_wrap_left'>实发工资</text> |
101 | 103 | <text class='text_wrap_right'>400000.00</text> |
102 | 104 | </view> |
103 | - </view> | |
105 | + </view> | |
104 | 106 | </scroll-view> |
105 | - </view> | |
\ No newline at end of file | ||
107 | +</view> | |
\ No newline at end of file | ... | ... |
1 | 1 | // pages/main/finalpayment/historydetail/historydetail.js |
2 | +var format = require('../../../../utils/util.js'); | |
2 | 3 | var wxCharts = require('../../../../utils/wxcharts02.js'); |
3 | 4 | var app = getApp(); |
4 | 5 | var pieChart = null; |
... | ... | @@ -8,13 +9,28 @@ Page({ |
8 | 9 | * Page initial data |
9 | 10 | */ |
10 | 11 | data: { |
11 | - | |
12 | + cur_index:0, | |
13 | + choosed_date: '', | |
14 | + long_date: 0 | |
12 | 15 | }, |
13 | 16 | |
14 | 17 | /** |
15 | 18 | * Lifecycle function--Called when page load |
16 | 19 | */ |
17 | 20 | onLoad: function (options) { |
21 | + console.log("options", options); | |
22 | + this.setData({ | |
23 | + cur_index: options.index | |
24 | + }) | |
25 | + | |
26 | + | |
27 | + var mydate = new Date(); | |
28 | + this.setData({ | |
29 | + choosed_date: mydate.getFullYear() + "年" + (mydate.getMonth() + 1) + "月", | |
30 | + long_date: mydate.getTime() / 1000 | |
31 | + }) | |
32 | + | |
33 | + | |
18 | 34 | var windowWidth = 320; |
19 | 35 | try { |
20 | 36 | var res = wx.getSystemInfoSync(); |
... | ... | @@ -24,24 +40,24 @@ Page({ |
24 | 40 | } |
25 | 41 | |
26 | 42 | pieChart = new wxCharts({ |
27 | - animation: false, | |
43 | + animation: true, | |
28 | 44 | canvasId: 'pieCanvas', |
29 | 45 | type: 'pie', |
30 | 46 | series: [{ |
31 | - name: '成交量2', | |
32 | - data: 35, | |
47 | + name: '专项附加扣除', | |
48 | + data: 435.00, | |
33 | 49 | }, { |
34 | - name: '成交量3', | |
35 | - data: 78, | |
50 | + name: '专项扣除', | |
51 | + data: 778.00, | |
36 | 52 | }, { |
37 | - name: '成交量4', | |
38 | - data: 63, | |
53 | + name: '法定扣除', | |
54 | + data: 363.00, | |
39 | 55 | }, { |
40 | - name: '成交量2', | |
41 | - data: 35, | |
56 | + name: '应纳税所得额', | |
57 | + data: 1035.00, | |
42 | 58 | }, { |
43 | - name: '成交量3', | |
44 | - data: 78, | |
59 | + name: '免税收入', | |
60 | + data: 1478.00, | |
45 | 61 | }], |
46 | 62 | width: windowWidth, |
47 | 63 | height: 280, |
... | ... | @@ -63,6 +79,16 @@ Page({ |
63 | 79 | |
64 | 80 | }, |
65 | 81 | |
82 | + datePickerChange: function (e) { | |
83 | + console.log("e", e) | |
84 | + var datelong = Date.parse(new Date(e.detail.value)) / 1000 | |
85 | + console.log('datelong', datelong) | |
86 | + this.setData({ | |
87 | + long_date: datelong, | |
88 | + choosed_date: format.yearFormString(datelong) + "年" + format.monthFormString(datelong) + "月" | |
89 | + }) | |
90 | + }, | |
91 | + | |
66 | 92 | /** |
67 | 93 | * Lifecycle function--Called when page hide |
68 | 94 | */ | ... | ... |
1 | 1 | <!--pages/main/finalpayment/historydetail/historydetail.wxml--> |
2 | 2 | <view class='page'> |
3 | +<picker mode="date" fields="month" start="1970-01" end="2100-01" bindchange="datePickerChange"> | |
3 | 4 | <view style='padding:30rpx;'> |
4 | 5 | <text class='text_gray_32'>当前选择月份</text> |
5 | 6 | <view class='float_right'> |
6 | - <text class='text_gray_32'>2018年</text> | |
7 | + <text class='text_gray_32'>{{choosed_date}}</text> | |
7 | 8 | <image class='arrow_wrap' style='margin-top: 8rpx' src='/images/arrow_right.png'></image> |
8 | 9 | </view> |
9 | 10 | </view> |
11 | + </picker> | |
10 | 12 | <view style='height:20rpx;width:100%;background:#f5f5f5'></view> |
11 | 13 | |
12 | 14 | <view style='padding-left:30rpx;background:#ffffff;height:100rpx;'> | ... | ... |
1 | +// pages/main/finalpayment/historylist/historylist.js | |
2 | +var format = require('../../../../utils/util.js'); | |
3 | +Page({ | |
4 | + | |
5 | + /** | |
6 | + * Page initial data | |
7 | + */ | |
8 | + data: { | |
9 | + datas: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}], | |
10 | + choosed_date: '', | |
11 | + long_date: 0 | |
12 | + }, | |
13 | + | |
14 | + /** | |
15 | + * Lifecycle function--Called when page load | |
16 | + */ | |
17 | + onLoad: function(options) { | |
18 | + var mydate = new Date(); | |
19 | + this.setData({ | |
20 | + choosed_date: mydate.getFullYear() + "年" + (mydate.getMonth() + 1) + "月", | |
21 | + long_date: mydate.getTime() / 1000 | |
22 | + }) | |
23 | + }, | |
24 | + | |
25 | + /** | |
26 | + * Lifecycle function--Called when page is initially rendered | |
27 | + */ | |
28 | + onReady: function() { | |
29 | + | |
30 | + }, | |
31 | + | |
32 | + /** | |
33 | + * Lifecycle function--Called when page show | |
34 | + */ | |
35 | + onShow: function() { | |
36 | + | |
37 | + }, | |
38 | + | |
39 | + datePickerChange: function(e) { | |
40 | + console.log("e", e) | |
41 | + var datelong = Date.parse(new Date(e.detail.value)) / 1000 | |
42 | + console.log('datelong', datelong) | |
43 | + this.setData({ | |
44 | + long_date: datelong, | |
45 | + choosed_date: format.yearFormString(datelong) + "年" + format.monthFormString(datelong) + "月" | |
46 | + }) | |
47 | + }, | |
48 | + | |
49 | + godetail:function(e){ | |
50 | + console.log("godetail", e); | |
51 | + wx.navigateTo({ | |
52 | + url: '../historydetail/historydetail?index=' + e.currentTarget.id, | |
53 | + }) | |
54 | + }, | |
55 | + | |
56 | + /** | |
57 | + * Lifecycle function--Called when page hide | |
58 | + */ | |
59 | + onHide: function() { | |
60 | + | |
61 | + }, | |
62 | + | |
63 | + /** | |
64 | + * Lifecycle function--Called when page unload | |
65 | + */ | |
66 | + onUnload: function() { | |
67 | + | |
68 | + }, | |
69 | + | |
70 | + /** | |
71 | + * Page event handler function--Called when user drop down | |
72 | + */ | |
73 | + onPullDownRefresh: function() { | |
74 | + | |
75 | + }, | |
76 | + | |
77 | + /** | |
78 | + * Called when page reach bottom | |
79 | + */ | |
80 | + onReachBottom: function() { | |
81 | + | |
82 | + }, | |
83 | + | |
84 | + /** | |
85 | + * Called when user click on the top right corner to share | |
86 | + */ | |
87 | + onShareAppMessage: function() { | |
88 | + | |
89 | + } | |
90 | +}) | |
\ No newline at end of file | ... | ... |
1 | +<!--pages/main/finalpayment/historylist/historylist.wxml--> | |
2 | +<view class='page'> | |
3 | + <picker mode="date" fields="month" start="1970-01" end="2100-01" bindchange="datePickerChange" style='background:#fff'> | |
4 | + <view style='padding:30rpx;'> | |
5 | + <text class='text_gray_32'>当前选择月份</text> | |
6 | + <view class='float_right'> | |
7 | + <text class='text_gray_32'>{{choosed_date}}</text> | |
8 | + <image class='arrow_wrap' src='/images/arrow_right.png'></image> | |
9 | + </view> | |
10 | + </view> | |
11 | + </picker> | |
12 | + <view style='height:20rpx;width:100%;background:#f5f5f5'></view> | |
13 | + <view class='view_bg_wrap' style='height:110rpx;background:#fff'> | |
14 | + <view style='flex:2;text-align:center;'> | |
15 | + <text style='font-size: 28rpx;color: #333'>月份</text> | |
16 | + </view> | |
17 | + <view style='flex:3;display:flex;flex-direction:column;padding-top:12rpx'> | |
18 | + <text style='font-size: 28rpx;color: #333;'>个人所得</text> | |
19 | + <text style='font-size: 24rpx;color: #999;'>(元)</text> | |
20 | + </view> | |
21 | + <view style='flex:3;display:flex;flex-direction:column;padding-top:12rpx'> | |
22 | + <text style='font-size: 28rpx;color: #333;'>应纳税所得额</text> | |
23 | + <text style='font-size: 24rpx;color: #999;'>(元)</text> | |
24 | + </view> | |
25 | + <view style='flex:3.5;display:flex;flex-direction:column;padding-top:12rpx'> | |
26 | + <text style='font-size: 28rpx;color: #333;'>应纳税额</text> | |
27 | + <text style='font-size: 24rpx;color: #999;'>(元)</text> | |
28 | + </view> | |
29 | + </view> | |
30 | + <view wx:for="{{datas}}" style='background:#fff'> | |
31 | + <view class='divide_line_f5f5f5' style='margin:20rpx 0'></view> | |
32 | + <view class='view_bg_wrap' bindtap='godetail' id='index'> | |
33 | + <view style='flex:2;text-align:center;'> | |
34 | + <text style='font-size: 28rpx;color: #999'>{{index+1}}月</text> | |
35 | + </view> | |
36 | + <view style='flex:3;display:flex;flex-direction:column;padding-top:12rpx'> | |
37 | + <text style='font-size: 24rpx;color: #999;'>工资薪金</text> | |
38 | + <text style='font-size: 28rpx;color: #999;'>30000.00</text> | |
39 | + <text style='font-size: 24rpx;color: #999;margin-top:8rpx'>薪酬所得</text> | |
40 | + <text style='font-size: 28rpx;color: #999;'>29100.00</text> | |
41 | + </view> | |
42 | + <view style='flex:3;display:flex;flex-direction:column;padding-top:12rpx'> | |
43 | + <text style='font-size: 28rpx;color: #999;'>500.00</text> | |
44 | + </view> | |
45 | + <view style='flex:2.7;display:flex;flex-direction:column;padding-top:12rpx'> | |
46 | + <text style='font-size: 28rpx;color: #999;'>198.00</text> | |
47 | + </view> | |
48 | + <view style='flex:0.8;'> | |
49 | + <image style='width: 40rpx;height: 40rpx;margin-top:12rpx' src='/images/arrow_right.png'></image> | |
50 | + </view> | |
51 | + </view> | |
52 | + </view> | |
53 | + <view style='height:2rpx;width:100%;background:#f5f5f5;margin-top:20rpx'></view> | |
54 | + | |
55 | +<view class='view_bg_wrap' style='height:90rpx;background:#fff;padding-bottom:100rpx'> | |
56 | + <view style='flex:2;padding-top:12rpx;text-align:center'> | |
57 | + <text style='font-size: 28rpx;color: #333'>总计</text> | |
58 | + </view> | |
59 | + <view style='flex:3;padding-top:12rpx'> | |
60 | + <text style='font-size: 28rpx;color: #333;'>19002.00</text> | |
61 | + </view> | |
62 | + <view style='flex:3;padding-top:12rpx'> | |
63 | + <text style='font-size: 28rpx;color: #333;'>3988.00</text> | |
64 | + </view> | |
65 | + <view style='flex:3.5;padding-top:12rpx'> | |
66 | + <text style='font-size: 28rpx;color: #333;'>1094.00</text> | |
67 | + </view> | |
68 | + </view> | |
69 | +</view> | |
\ No newline at end of file | ... | ... |
1 | +/* pages/main/finalpayment/historylist/historylist.wxss */ | |
2 | +.page { | |
3 | + background-color: #fcfcfc; | |
4 | +} | |
5 | + | |
6 | +.text_gray_32 { | |
7 | + font-size: 32rpx; | |
8 | + color: #6c7596; | |
9 | + font-family: PingFangSC-Semibold; | |
10 | +} | |
11 | + | |
12 | +.arrow_wrap { | |
13 | + position: relative; | |
14 | + width: 40rpx; | |
15 | + height: 40rpx; | |
16 | + align-self: center; | |
17 | + margin-top: 8rpx | |
18 | +} | |
19 | + | |
20 | +.view_bg_wrap { | |
21 | + display: flex; | |
22 | + width: 100%; | |
23 | + flex-wrap: nowrap; | |
24 | +} | |
\ No newline at end of file | ... | ... |
1 | 1 | // pages/main/finalpayment/home.js |
2 | -var wxCharts = require('../../../utils/wxcharts.js'); | |
2 | +var format = require('../../../utils/util.js'); | |
3 | +var wxCharts = require('../../../utils/wxcharts01.js'); | |
3 | 4 | var app = getApp(); |
4 | 5 | var pieChart = null; |
5 | 6 | Page({ |
... | ... | @@ -8,13 +9,21 @@ Page({ |
8 | 9 | * Page initial data |
9 | 10 | */ |
10 | 11 | data: { |
11 | - | |
12 | + choosed_date: '', | |
13 | + long_date: 0 | |
12 | 14 | }, |
13 | 15 | |
14 | 16 | /** |
15 | 17 | * Lifecycle function--Called when page load |
16 | 18 | */ |
17 | 19 | onLoad: function(options) { |
20 | + var mydate = new Date(); | |
21 | + this.setData({ | |
22 | + choosed_date: mydate.getFullYear() + "年" + (mydate.getMonth() + 1) + "月", | |
23 | + long_date: mydate.getTime() / 1000 | |
24 | + }) | |
25 | + | |
26 | + | |
18 | 27 | var windowWidth = 320; |
19 | 28 | try { |
20 | 29 | var res = wx.getSystemInfoSync(); |
... | ... | @@ -24,27 +33,45 @@ Page({ |
24 | 33 | } |
25 | 34 | |
26 | 35 | pieChart = new wxCharts({ |
27 | - animation: false, | |
36 | + animation: true, | |
28 | 37 | canvasId: 'pieCanvas', |
29 | 38 | type: 'pie', |
30 | 39 | series: [ { |
31 | - name: '成交量2', | |
40 | + name: '子女教育可扣除金额', | |
32 | 41 | data: 35, |
33 | 42 | }, { |
34 | - name: '成交量3', | |
43 | + name: '子女教育已扣除金额', | |
35 | 44 | data: 78, |
36 | - }, { | |
37 | - name: '成交量4', | |
38 | - data: 63, | |
39 | - }, { | |
40 | - name: '成交量2', | |
41 | - data: 35, | |
42 | - }, { | |
43 | - name: '成交量3', | |
44 | - data: 78, | |
45 | - }], | |
45 | + }, | |
46 | + { | |
47 | + name: '继续教育可扣除金额', | |
48 | + data: 35, | |
49 | + }, { | |
50 | + name: '继续教育已扣除金额', | |
51 | + data: 78, | |
52 | + }, | |
53 | + { | |
54 | + name: '赡养老人可扣除金额', | |
55 | + data: 35, | |
56 | + }, { | |
57 | + name: '赡养老人已扣除金额', | |
58 | + data: 78, | |
59 | + }, | |
60 | + { | |
61 | + name: '大病医疗可扣除金额', | |
62 | + data: 35, | |
63 | + }, { | |
64 | + name: '大病医疗已扣除金额', | |
65 | + data: 78, | |
66 | + }, { | |
67 | + name: '住房可扣除金额', | |
68 | + data: 35, | |
69 | + }, { | |
70 | + name: '住房已扣除金额', | |
71 | + data: 78, | |
72 | + },], | |
46 | 73 | width: windowWidth, |
47 | - height: 260, | |
74 | + height: 320, | |
48 | 75 | dataLabel: true, |
49 | 76 | }); |
50 | 77 | }, |
... | ... | @@ -71,10 +98,20 @@ Page({ |
71 | 98 | |
72 | 99 | gohistory: function (e) { |
73 | 100 | wx.navigateTo({ |
74 | - url: 'historydetail/historydetail', | |
101 | + url: 'historylist/historylist', | |
75 | 102 | }) |
76 | 103 | }, |
77 | 104 | |
105 | + datePickerChange: function (e) { | |
106 | + console.log("e", e) | |
107 | + var datelong = Date.parse(new Date(e.detail.value)) / 1000 | |
108 | + console.log('datelong', datelong) | |
109 | + this.setData({ | |
110 | + long_date: datelong, | |
111 | + choosed_date: format.yearFormString(datelong) + "年" + format.monthFormString(datelong) + "月" | |
112 | + }) | |
113 | + }, | |
114 | + | |
78 | 115 | /** |
79 | 116 | * Lifecycle function--Called when page hide |
80 | 117 | */ | ... | ... |
1 | 1 | <!--pages/main/finalpayment/home.wxml--> |
2 | 2 | <view class='page'> |
3 | - <scroll-view style='margin-bottom:40rpx'> | |
3 | + <scroll-view style='padding-bottom:200rpx'> | |
4 | 4 | <view style='background:#ffffff'> |
5 | + <picker mode="date" fields="month" start="1970-01" end="2100-01" bindchange="datePickerChange"> | |
5 | 6 | <view style='padding:30rpx;'> |
6 | 7 | <text class='text_gray_32'>当前选择月份</text> |
7 | 8 | <view class='float_right'> |
8 | - <text class='text_gray_32'>2018年11月</text> | |
9 | + <text class='text_gray_32'>{{choosed_date}}</text> | |
9 | 10 | <image class='arrow_wrap' src='/images/arrow_right.png'></image> |
10 | 11 | </view> |
11 | 12 | </view> |
13 | + </picker> | |
12 | 14 | <view class='divide_line_f5f5f5'></view> |
13 | 15 | <view style='margin: 30rpx;positive:relative;width:92%;height:454rpx'> |
14 | 16 | <image class=' payment_img_bg ' src='/images/payment_bg.png ' style='position:absolute;z-index: 1;'></image> |
... | ... | @@ -52,7 +54,7 @@ |
52 | 54 | </view> |
53 | 55 | </view> |
54 | 56 | <view class="container_wrap"> |
55 | - <canvas canvas-id="pieCanvas" class="canvas" style="height:300px" bindtouchstart="touchHandler"></canvas> | |
57 | + <canvas canvas-id="pieCanvas" class="canvas" style="height:330px" ></canvas> | |
56 | 58 | </view> |
57 | 59 | </scroll-view> |
58 | 60 | ... | ... |
... | ... | @@ -11,9 +11,9 @@ |
11 | 11 | <view class='data_list' hidden="{{isself}}"> |
12 | 12 | <view class='data_item'> |
13 | 13 | <view class='item_body'> |
14 | - <text style='color:red;font-size: 28rpx;line-height: 80rpx;float:left'>*</text> | |
15 | - <text class='text_black_28 float_left'>姓名</text> | |
16 | - <input class='input_wrap float_right' placeholder='请填写姓名' name='name' value='{{name}}' placeholder-class='text_999_28' maxlength='15'></input> | |
14 | + <text style='color:red;font-size: 30rpx;line-height: 90rpx;float:left'>*</text> | |
15 | + <text class='text_black_30 float_left' style='line-height: 90rpx'>姓名</text> | |
16 | + <input class='input_wrap float_right' placeholder='请填写姓名' name='name' value='{{name}}' placeholder-class='text_999_30' maxlength='15'></input> | |
17 | 17 | </view> |
18 | 18 | <view class="divide_line"></view> |
19 | 19 | <!-- <view class='item_body' bindtap='openpicker'> |
... | ... | @@ -44,16 +44,16 @@ |
44 | 44 | <view class='data_list'> |
45 | 45 | <view class='data_item'> |
46 | 46 | <view class='item_body' hidden="{{!isself}}"> |
47 | - <text style='color:red;font-size: 28rpx;line-height: 80rpx;float:left'>*</text> | |
48 | - <text class='text_black_28 float_left'>姓名</text> | |
49 | - <input class='input_wrap float_right' placeholder='请填写姓名' value='' placeholder-class='text_999_28' maxlength='15'></input> | |
47 | + <text style='color:red;font-size: 30rpx;line-height: 90rpx;float:left'>*</text> | |
48 | + <text class='text_black_30 float_left' style='line-height: 90rpx'>姓名</text> | |
49 | + <input class='input_wrap float_right' placeholder='请填写姓名' value='' placeholder-class='text_999_30' maxlength='15'></input> | |
50 | 50 | </view> |
51 | 51 | <view class="divide_line"></view> |
52 | 52 | |
53 | 53 | <view class='item_body'> |
54 | - <text style='color:red;font-size: 28rpx;line-height: 80rpx;float:left'>*</text> | |
55 | - <text class='text_black_28 float_left'>国籍(地区)</text> | |
56 | - <text class='text_999_28 float_right' >中国</text> | |
54 | + <text style='color:red;font-size: 30rpx;line-height: 90rpx;float:left'>*</text> | |
55 | + <text class='text_black_30 float_left' style='line-height: 90rpx'>国籍(地区)</text> | |
56 | + <text class='text_999_30 float_right' >中国</text> | |
57 | 57 | </view> |
58 | 58 | <view class="divide_line"></view> |
59 | 59 | |
... | ... | @@ -76,15 +76,15 @@ |
76 | 76 | <view class="divide_line"></view> |
77 | 77 | |
78 | 78 | <view class='item_body'> |
79 | - <text style='color:red;font-size: 28rpx;line-height: 80rpx;float:left'>*</text> | |
80 | - <text class='text_black_28 float_left'>证照号码</text> | |
79 | + <text style='color:red;font-size: 30rpx;line-height: 90rpx;float:left'>*</text> | |
80 | + <text class='text_black_30 float_left'style='line-height: 90rpx'>证照号码</text> | |
81 | 81 | <view wx:if="{{isIdCard}}" > |
82 | 82 | <image class='image_camera float_right' src='/images/camera.png' bindtap='getIdInfo'></image> |
83 | 83 | <!-- <text class='text_333_28 float_right'>{{card_number}}</text> --> |
84 | - <input class='input_wrap float_right' placeholder='请输入证件号码' placeholder-class='text_999_28' name='id_card_no' maxlength='24' value='{{card_number}}'></input> | |
84 | + <input class='input_wrap float_right' placeholder='请输入证件号码' placeholder-class='text_999_30' name='id_card_no' maxlength='24' value='{{card_number}}'></input> | |
85 | 85 | </view> |
86 | 86 | <view wx:else> |
87 | - <input class='input_wrap float_right' placeholder='请输入证件号码' placeholder-class='text_999_28' name='id_card_no' maxlength='24' value='{{card_number}}'></input> | |
87 | + <input class='input_wrap float_right' placeholder='请输入证件号码' placeholder-class='text_999_30' name='id_card_no' maxlength='24' value='{{card_number}}'></input> | |
88 | 88 | </view> |
89 | 89 | </view> |
90 | 90 | <view class="divide_line"></view> |
... | ... | @@ -129,8 +129,8 @@ |
129 | 129 | <template is="picker_cell_normal" data="{{...degreeData}}" /> |
130 | 130 | <view class="divide_line"></view> |
131 | 131 | <view class='item_body'> |
132 | - <text class='text_666_28 float_left'>纳税人识别号</text> | |
133 | - <input class='input_wrap float_right' name='taxpayer_no' type='number' placeholder-class='text_999_28' placeholder='请输入纳税人识别号' maxlength='24'></input> | |
132 | + <text class='text_666_30 float_left'style='line-height: 90rpx'>纳税人识别号</text> | |
133 | + <input class='input_wrap float_right' name='taxpayer_no' type='number' placeholder-class='text_999_30' placeholder='请输入纳税人识别号' maxlength='24'></input> | |
134 | 134 | </view> |
135 | 135 | <view class="divide_line"></view> |
136 | 136 | <!-- <view class='item_body'> |
... | ... | @@ -141,8 +141,8 @@ |
141 | 141 | <template is="picker_cell_normal" data="{{...disabilityInfo}}" /> |
142 | 142 | <view class="divide_line" hidden="{{disabilityInfo.selected!='是'}}"></view> |
143 | 143 | <view class='item_body' hidden="{{disabilityInfo.selected!='是'}}"> |
144 | - <text class='text_666_28 float_left'>残疾证号</text> | |
145 | - <input class='input_wrap float_right' name='disability_no' type='number' placeholder-class='text_999_28' placeholder='请输入残疾证号' maxlength='24'></input> | |
144 | + <text class='text_666_30 float_left'>残疾证号</text> | |
145 | + <input class='input_wrap float_right' name='disability_no' type='number' placeholder-class='text_999_30' placeholder='请输入残疾证号' maxlength='24'></input> | |
146 | 146 | </view> |
147 | 147 | <view class="divide_line"></view> |
148 | 148 | <!-- <view class='item_body'> |
... | ... | @@ -153,8 +153,8 @@ |
153 | 153 | <template is="picker_cell_normal" data="{{...lieshuInfo}}" /> |
154 | 154 | <view class="divide_line" hidden="{{lieshuInfo.selected!='是'}}"></view> |
155 | 155 | <view class='item_body' hidden="{{lieshuInfo.selected!='是'}}"> |
156 | - <text class='text_666_28 float_left'>烈属证号</text> | |
157 | - <input class='input_wrap float_right' name='martyr_family_no' type='number' placeholder-class='text_999_28' placeholder='请输入烈属证号' maxlength='24'></input> | |
156 | + <text class='text_666_30 float_left'>烈属证号</text> | |
157 | + <input class='input_wrap float_right' name='martyr_family_no' type='number' placeholder-class='text_999_30' placeholder='请输入烈属证号' maxlength='24'></input> | |
158 | 158 | </view> |
159 | 159 | <view class="divide_line"></view> |
160 | 160 | <!-- <view class='item_body'> |
... | ... | @@ -165,8 +165,8 @@ |
165 | 165 | <template is="picker_cell_normal" data="{{...lonelyolderInfo}}" /> |
166 | 166 | <view class="divide_line"></view> |
167 | 167 | <view class='item_body'> |
168 | - <text class='text_666_28 float_left'>备注</text> | |
169 | - <input class='input_wrap float_right' value='{{taxInfo.comment}}' name='comment' placeholder-class='text_999_28' placeholder='请输入备注' ></input> | |
168 | + <text class='text_666_30 float_left' style='line-height: 90rpx'>备注</text> | |
169 | + <input class='input_wrap float_right' value='{{taxInfo.comment}}' name='comment' placeholder-class='text_999_30' placeholder='请输入备注' ></input> | |
170 | 170 | </view> |
171 | 171 | </view> |
172 | 172 | </view> |
... | ... | @@ -188,7 +188,7 @@ |
188 | 188 | <view class='data_list'> |
189 | 189 | <view class='data_item'> |
190 | 190 | <view class='item_body'> |
191 | - <text style='color:red;font-size: 28rpx;line-height: 80rpx;float:left'>*</text> | |
191 | + <text style='color:red;font-size: 30rpx;line-height: 90rpx;float:left'>*</text> | |
192 | 192 | <text class='text_black_28 float_left'>联系电话</text> |
193 | 193 | <input class='input_wrap float_right' placeholder='请输入手机号' value='{{taxInfo.mobile}}' name='mobile' type='number' placeholder-class='text_999_28' maxlength='11'></input> |
194 | 194 | </view> |
... | ... | @@ -203,8 +203,8 @@ |
203 | 203 | <template is="picker_cell_normal" data="{{...contactaddressInfo}}" /> |
204 | 204 | <view class="divide_line"></view> |
205 | 205 | <view class='item_body'> |
206 | - <text class='text_666_28 float_left'>详细地址</text> | |
207 | - <input class='input_wrap float_right' name='contact_address_detail' placeholder-class='text_999_28' placeholder='请输入详细联系地址'></input> | |
206 | + <text class='text_666_30 float_left' style='line-height: 90rpx'>详细地址</text> | |
207 | + <input class='input_wrap float_right' name='contact_address_detail' placeholder-class='text_999_30' placeholder='请输入详细联系地址'></input> | |
208 | 208 | </view> |
209 | 209 | <view class="divide_line"></view> |
210 | 210 | <!-- <view class='item_body'> |
... | ... | @@ -215,13 +215,13 @@ |
215 | 215 | <template is="picker_cell_normal" data="{{...bankInfo}}" /> |
216 | 216 | <view class="divide_line"></view> |
217 | 217 | <view class='item_body'> |
218 | - <text class='text_666_28 float_left'>银行账号</text> | |
219 | - <input class='input_wrap float_right' name='bank_account' placeholder-class='text_999_28' placeholder='请输入银行账号' maxlength='24'></input> | |
218 | + <text class='text_666_30 float_left' style='line-height: 90rpx'>银行账号</text> | |
219 | + <input class='input_wrap float_right' name='bank_account' placeholder-class='text_999_30' placeholder='请输入银行账号' maxlength='24'></input> | |
220 | 220 | </view> |
221 | 221 | <view class="divide_line"></view> |
222 | 222 | <view class='item_body'> |
223 | - <text class='text_666_28 float_left'>电子邮箱</text> | |
224 | - <input class='input_wrap float_right' name='email' placeholder-class='text_999_28' placeholder='请输入电子邮箱' maxlength='20'></input> | |
223 | + <text class='text_666_30 float_left' style='line-height: 90rpx'>电子邮箱</text> | |
224 | + <input class='input_wrap float_right' name='email' placeholder-class='text_999_30' placeholder='请输入电子邮箱' maxlength='20'></input> | |
225 | 225 | </view> |
226 | 226 | <view class="divide_line"></view> |
227 | 227 | <!-- <view class='item_body'> |
... | ... | @@ -232,8 +232,8 @@ |
232 | 232 | <template is="picker_cell_normal" data="{{...currentaddressInfo}}" /> |
233 | 233 | <view class="divide_line"></view> |
234 | 234 | <view class='item_body'> |
235 | - <text class='text_666_28 float_left'>详细地址</text> | |
236 | - <input class='input_wrap float_right' name='current_address_detail' placeholder-class='text_999_28' placeholder='请输入详细居住地址'></input> | |
235 | + <text class='text_666_30 float_left' style='line-height: 90rpx'>详细地址</text> | |
236 | + <input class='input_wrap float_right' name='current_address_detail' placeholder-class='text_999_30' placeholder='请输入详细居住地址'></input> | |
237 | 237 | </view> |
238 | 238 | <view class="divide_line"></view> |
239 | 239 | <!-- <view class='item_body'> |
... | ... | @@ -244,8 +244,8 @@ |
244 | 244 | <template is="picker_cell_normal" data="{{...birthaddressInfo}}" /> |
245 | 245 | <view class="divide_line"></view> |
246 | 246 | <view class='item_body'> |
247 | - <text class='text_666_28 float_left'>详细地址</text> | |
248 | - <input class='input_wrap float_right' name='huji_address_detail' placeholder-class='text_999_28' placeholder='请输入详细户籍地址'></input> | |
247 | + <text class='text_666_30 float_left' style='line-height: 90rpx'>详细地址</text> | |
248 | + <input class='input_wrap float_right' name='huji_address_detail' placeholder-class='text_999_30' placeholder='请输入详细户籍地址'></input> | |
249 | 249 | </view> |
250 | 250 | <view class="divide_line"></view> |
251 | 251 | </view> |
... | ... | @@ -293,8 +293,8 @@ |
293 | 293 | <view hidden='{{!isshow03}}'> |
294 | 294 | <view class="divide_line"></view> |
295 | 295 | <view class='item_body'> |
296 | - <text class='text_666_28 float_left'>公司股本总额</text> | |
297 | - <input class='input_wrap float_right' name='company_equity_total' type='digit' placeholder-class='text_999_28' placeholder='请输入股本总额(保留两位小数)' maxlength='13'></input> | |
296 | + <text class='text_666_30 float_left'style='line-height: 90rpx'>公司股本总额</text> | |
297 | + <input class='input_wrap float_right' name='company_equity_total' type='digit' placeholder-class='text_999_30' placeholder='请输入股本总额(保留两位小数)' maxlength='13'></input> | |
298 | 298 | </view> |
299 | 299 | <view class="divide_line"></view> |
300 | 300 | <!-- <view class='item_body'> |
... | ... | @@ -313,8 +313,8 @@ |
313 | 313 | <template is="picker_cell_normal" data="{{...endDate}}" /> |
314 | 314 | <view class="divide_line"></view> |
315 | 315 | <view class='item_body'> |
316 | - <text class='text_666_28 float_left'>工号</text> | |
317 | - <input class='input_wrap float_right' name='employee_no' placeholder-class='text_999_28' placeholder='请输入工号' maxlength='24'></input> | |
316 | + <text class='text_666_30 float_left' style='line-height: 90rpx'>工号</text> | |
317 | + <input class='input_wrap float_right' name='employee_no' placeholder-class='text_999_30' placeholder='请输入工号' maxlength='24'></input> | |
318 | 318 | </view> |
319 | 319 | <view class="divide_line"></view> |
320 | 320 | <!-- <view class='item_body'> |
... | ... | @@ -325,8 +325,8 @@ |
325 | 325 | <template is="picker_cell_normal" data="{{...investpersonalInfo}}" /> |
326 | 326 | <view class="divide_line" ></view> |
327 | 327 | <view class='item_body' > |
328 | - <text class='text_666_28 float_left'>个人投资总额</text> | |
329 | - <input class='input_wrap float_right' name='personal_equity_total' type='digit' placeholder-class='text_999_28' placeholder='请输入个人投资总额(保留两位小数)' maxlength='13'></input> | |
328 | + <text class='text_666_30 float_left' style='line-height: 90rpx'>个人投资总额</text> | |
329 | + <input class='input_wrap float_right' name='personal_equity_total' type='digit' placeholder-class='text_999_30' placeholder='请输入个人投资总额(保留两位小数)' maxlength='13'></input> | |
330 | 330 | </view> |
331 | 331 | <view class="divide_line"></view> |
332 | 332 | </view> | ... | ... |
... | ... | @@ -7,7 +7,7 @@ |
7 | 7 | } |
8 | 8 | |
9 | 9 | .head_wrap { |
10 | - height: 70rpx; | |
10 | + height: 90rpx; | |
11 | 11 | background: #f7f9fd; |
12 | 12 | padding-right: 20rpx; |
13 | 13 | padding-left: 32rpx; |
... | ... | @@ -15,14 +15,14 @@ |
15 | 15 | |
16 | 16 | .head_red_star { |
17 | 17 | color: red; |
18 | - font-size: 28rpx; | |
19 | - line-height: 80rpx; | |
18 | + font-size: 30rpx; | |
19 | + line-height: 90rpx; | |
20 | 20 | } |
21 | 21 | |
22 | 22 | .head_text_wrap1 { |
23 | - line-height: 70rpx; | |
23 | + line-height: 90rpx; | |
24 | 24 | font-family: PingFangSC-Semibold; |
25 | - font-size: 14px; | |
25 | + font-size: 16px; | |
26 | 26 | color: #333; |
27 | 27 | letter-spacing: 0; |
28 | 28 | text-align: left; |
... | ... | @@ -39,12 +39,13 @@ |
39 | 39 | .head_image_wrap_down { |
40 | 40 | width: 28rpx; |
41 | 41 | height: 16rpx; |
42 | + margin-top: 40rpx; | |
42 | 43 | } |
43 | 44 | |
44 | 45 | .head_image_wrap_up { |
45 | 46 | width: 40rpx; |
46 | 47 | height: 40rpx; |
47 | - margin-top: 16rpx; | |
48 | + margin-top: 24rpx; | |
48 | 49 | } |
49 | 50 | |
50 | 51 | .data_list { |
... | ... | @@ -64,8 +65,8 @@ |
64 | 65 | |
65 | 66 | .input_wrap { |
66 | 67 | width: 500rpx; |
67 | - height: 80rpx; | |
68 | - font-size: 28rpx; | |
68 | + height: 90rpx; | |
69 | + font-size: 30rpx; | |
69 | 70 | color: #333; |
70 | 71 | text-align: right; |
71 | 72 | overflow: hidden; | ... | ... |
... | ... | @@ -11,8 +11,8 @@ |
11 | 11 | <view class='data_list' hidden="{{isself}}"> |
12 | 12 | <view class='data_item'> |
13 | 13 | <view class='item_body'> |
14 | - <text style='color:red;font-size: 28rpx;line-height: 80rpx;float:left'>*</text> | |
15 | - <text class='text_black_28 float_left'>姓名</text> | |
14 | + <text style='color:red;font-size: 30rpx;line-height: 90rpx;float:left'>*</text> | |
15 | + <text class='text_black_30 float_left' style='line-height: 90rpx'>姓名</text> | |
16 | 16 | <!-- <input class='input_wrap float_right' placeholder="{{taxInfo.certification_status=='active'&&name?name:'请输入姓名'}}" name='name' disabled="{{taxInfo.certification_status=='active'}}"></input> --> |
17 | 17 | |
18 | 18 | <input class='input_wrap float_right' hidden="{{taxInfo.certification_status=='active'}}" placeholder="请输入姓名" value='{{name}}' name='name' disabled="{{taxInfo.certification_status=='active'}}" maxlength='15' bindblur='bindinputname'></input> |
... | ... | @@ -47,19 +47,19 @@ |
47 | 47 | <view class='data_list'> |
48 | 48 | <view class='data_item'> |
49 | 49 | <view class='item_body' hidden="{{!isself}}"> |
50 | - <text style='color:red;font-size: 28rpx;line-height: 80rpx;float:left'>*</text> | |
51 | - <text class='text_black_28 float_left'>姓名</text> | |
50 | + <text style='color:red;font-size: 30rpx;line-height: 90rpx;float:left'>*</text> | |
51 | + <text class='text_black_30 float_left' style='line-height: 90rpx'>姓名</text> | |
52 | 52 | <!-- <input class='input_wrap float_right' placeholder-class='text_999_28' placeholder="{{taxInfo.certification_status=='active'&&name?name:'请输入姓名'}}" disabled="{{taxInfo.certification_status=='active'}}"></input> --> |
53 | 53 | |
54 | - <input class='input_wrap float_right' hidden="{{taxInfo.certification_status=='active'}}" placeholder="请输入姓名" value='{{name}}' disabled="{{taxInfo.certification_status=='active'}}" bindblur='bindinputname'></input> | |
55 | - <input hidden="{{taxInfo.certification_status!='active'}}" class='input_wrap float_right' placeholder="{{taxInfo.certification_status=='active'||name?name:'请输入姓名'}}" disabled="{{taxInfo.certification_status=='active'}}" bindblur='bindinputname'></input> | |
54 | + <input class='input_wrap float_right' hidden="{{taxInfo.certification_status=='active'}}" placeholder="请输入姓名" value='{{name}}' disabled="{{taxInfo.certification_status=='active'}}" bindblur='bindinputname' style='line-height: 90rpx'></input> | |
55 | + <input hidden="{{taxInfo.certification_status!='active'}}" class='input_wrap float_right' placeholder="{{taxInfo.certification_status=='active'||name?name:'请输入姓名'}}" disabled="{{taxInfo.certification_status=='active'}}" bindblur='bindinputname' style='line-height: 90rpx'></input> | |
56 | 56 | </view> |
57 | 57 | <view class="divide_line"></view> |
58 | 58 | |
59 | 59 | <view class='item_body'> |
60 | - <text style='color:red;font-size: 28rpx;line-height: 80rpx;float:left'>*</text> | |
61 | - <text class='text_black_28 float_left'>国籍(地区)</text> | |
62 | - <text class='text_999_28 float_right'>中国</text> | |
60 | + <text style='color:red;font-size: 30rpx;line-height: 90rpx;float:left'>*</text> | |
61 | + <text class='text_black_30 float_left' style='line-height: 90rpx'>国籍(地区)</text> | |
62 | + <text class='text_999_30 float_right' style='line-height: 90rpx'>中国</text> | |
63 | 63 | </view> |
64 | 64 | <view class="divide_line"></view> |
65 | 65 | |
... | ... | @@ -82,8 +82,8 @@ |
82 | 82 | <view class="divide_line"></view> |
83 | 83 | |
84 | 84 | <view class='item_body'> |
85 | - <text style='color:red;font-size: 28rpx;line-height: 80rpx;float:left'>*</text> | |
86 | - <text class='text_black_28 float_left'>证照号码</text> | |
85 | + <text style='color:red;font-size: 30rpx;line-height: 90rpx;float:left'>*</text> | |
86 | + <text class='text_black_30 float_left' style='line-height: 90rpx'>证照号码</text> | |
87 | 87 | <view wx:if="{{isIdCard}}"> |
88 | 88 | <image class='image_camera float_right' src='/images/camera.png' bindtap='getIdInfo' hidden="{{taxInfo.certification_status=='active'}}"></image> |
89 | 89 | <!-- <text class='text_333_28 float_right'>{{card_number}}</text> --> |
... | ... | @@ -139,8 +139,8 @@ |
139 | 139 | <template is="picker_cell_normal" data="{{...degreeData}}" /> |
140 | 140 | <view class="divide_line"></view> |
141 | 141 | <view class='item_body'> |
142 | - <text class='text_666_28 float_left'>纳税人识别号</text> | |
143 | - <input class='input_wrap float_right' name='taxpayer_no' type='number' value='{{taxInfo.taxpayer_no}}' placeholder-class='text_999_28' placeholder='请输入纳税人识别号' maxlength='24'></input> | |
142 | + <text class='text_666_30 float_left' style='line-height: 90rpx'>纳税人识别号</text> | |
143 | + <input class='input_wrap float_right' name='taxpayer_no' type='number' value='{{taxInfo.taxpayer_no}}' placeholder-class='text_999_30' placeholder='请输入纳税人识别号' maxlength='24'></input> | |
144 | 144 | </view> |
145 | 145 | <view class="divide_line"></view> |
146 | 146 | <!-- <view class='item_body'> |
... | ... | @@ -151,8 +151,8 @@ |
151 | 151 | <template is="picker_cell_normal" data="{{...disabilityInfo}}" /> |
152 | 152 | <view class="divide_line" hidden="{{disabilityInfo.selected!='是'}}"></view> |
153 | 153 | <view class='item_body' hidden="{{disabilityInfo.selected!='是'}}"> |
154 | - <text class='text_666_28 float_left'>残疾证号</text> | |
155 | - <input class='input_wrap float_right' name='disability_no' type='number' value='{{taxInfo.disability_no}}' placeholder-class='text_999_28' placeholder='请输入残疾证号' maxlength='24'></input> | |
154 | + <text class='text_666_30 float_left'>残疾证号</text> | |
155 | + <input class='input_wrap float_right' name='disability_no' type='number' value='{{taxInfo.disability_no}}' placeholder-class='text_999_30' placeholder='请输入残疾证号' maxlength='24'></input> | |
156 | 156 | </view> |
157 | 157 | <view class="divide_line"></view> |
158 | 158 | <!-- <view class='item_body'> |
... | ... | @@ -163,8 +163,8 @@ |
163 | 163 | <template is="picker_cell_normal" data="{{...lieshuInfo}}" /> |
164 | 164 | <view class="divide_line" hidden="{{lieshuInfo.selected!='是'}}"></view> |
165 | 165 | <view class='item_body' hidden="{{lieshuInfo.selected!='是'}}"> |
166 | - <text class='text_666_28 float_left'>烈属证号</text> | |
167 | - <input class='input_wrap float_right' name='martyr_family_no' type='number' value='{{taxInfo.martyr_family_no}}' placeholder-class='text_999_28' placeholder='请输入烈属证号' maxlength='24'></input> | |
166 | + <text class='text_666_30 float_left'>烈属证号</text> | |
167 | + <input class='input_wrap float_right' name='martyr_family_no' type='number' value='{{taxInfo.martyr_family_no}}' placeholder-class='text_999_30' placeholder='请输入烈属证号' maxlength='24'></input> | |
168 | 168 | </view> |
169 | 169 | <view class="divide_line"></view> |
170 | 170 | <!-- <view class='item_body'> |
... | ... | @@ -175,8 +175,8 @@ |
175 | 175 | <template is="picker_cell_normal" data="{{...lonelyolderInfo}}" /> |
176 | 176 | <view class="divide_line"></view> |
177 | 177 | <view class='item_body'> |
178 | - <text class='text_666_28 float_left'>备注</text> | |
179 | - <input class='input_wrap float_right' value='{{taxInfo.comment}}' name='comment' placeholder-class='text_999_28' placeholder='请输入备注'></input> | |
178 | + <text class='text_666_30 float_left' style='line-height: 90rpx'>备注</text> | |
179 | + <input class='input_wrap float_right' value='{{taxInfo.comment}}' name='comment' placeholder-class='text_999_30' placeholder='请输入备注'></input> | |
180 | 180 | </view> |
181 | 181 | </view> |
182 | 182 | </view> |
... | ... | @@ -199,7 +199,7 @@ |
199 | 199 | <view class='data_item'> |
200 | 200 | <view class='item_body'> |
201 | 201 | <text style='color:red;font-size: 28rpx;line-height: 80rpx;float:left'>*</text> |
202 | - <text class='text_black_28 float_left'>联系电话</text> | |
202 | + <text class='text_black_30 float_left' style='line-height: 90rpx'>联系电话</text> | |
203 | 203 | <input class='input_wrap float_right' hidden="{{isself||taxInfo.certification_status=='active'}}" placeholder="请输入手机号" value='{{mobile}}' name='mobile' type='number' disabled="{{taxInfo.certification_status=='active'||isself}}" maxlength='11' bindblur='bindinputmobile'></input> |
204 | 204 | |
205 | 205 | <input hidden="{{taxInfo.certification_status!='active'&&!isself}}" class='input_wrap float_right' placeholder="{{taxInfo.certification_status=='active'||mobile?mobile:'请输入手机号'}}" name='mobile' type='number' disabled="{{taxInfo.certification_status=='active'||isself}}" |
... | ... | @@ -216,8 +216,8 @@ |
216 | 216 | <template is="picker_cell_normal" data="{{...contactaddressInfo}}" /> |
217 | 217 | <view class="divide_line"></view> |
218 | 218 | <view class='item_body'> |
219 | - <text class='text_666_28 float_left'>详细地址</text> | |
220 | - <input class='input_wrap float_right' name='contact_address_detail' value='{{taxInfo.contact_address_detail}}' placeholder-class='text_999_28' placeholder='请输入详细联系地址'></input> | |
219 | + <text class='text_666_30 float_left' style='line-height: 90rpx'>详细地址</text> | |
220 | + <input class='input_wrap float_right' name='contact_address_detail' value='{{taxInfo.contact_address_detail}}' placeholder-class='text_999_30' placeholder='请输入详细联系地址'></input> | |
221 | 221 | </view> |
222 | 222 | <view class="divide_line"></view> |
223 | 223 | <!-- <view class='item_body'> |
... | ... | @@ -228,13 +228,13 @@ |
228 | 228 | <template is="picker_cell_normal" data="{{...bankInfo}}" /> |
229 | 229 | <view class="divide_line"></view> |
230 | 230 | <view class='item_body'> |
231 | - <text class='text_666_28 float_left'>银行账号</text> | |
232 | - <input class='input_wrap float_right' name='bank_account' value='{{taxInfo.bank_account}}' placeholder-class='text_999_28' placeholder='请输入银行账号' maxlength='24'></input> | |
231 | + <text class='text_666_30 float_left' style='line-height: 90rpx'>银行账号</text> | |
232 | + <input class='input_wrap float_right' name='bank_account' value='{{taxInfo.bank_account}}' placeholder-class='text_999_30' placeholder='请输入银行账号' maxlength='24'></input> | |
233 | 233 | </view> |
234 | 234 | <view class="divide_line"></view> |
235 | 235 | <view class='item_body'> |
236 | - <text class='text_666_28 float_left'>电子邮箱</text> | |
237 | - <input class='input_wrap float_right' name='email' value='{{taxInfo.email}}' placeholder='请输入电子邮箱' placeholder-class='text_999_28' maxlength='20'></input> | |
236 | + <text class='text_666_30 float_left' style='line-height: 90rpx'>电子邮箱</text> | |
237 | + <input class='input_wrap float_right' name='email' value='{{taxInfo.email}}' placeholder='请输入电子邮箱' placeholder-class='text_999_30' maxlength='20'></input> | |
238 | 238 | </view> |
239 | 239 | <view class="divide_line"></view> |
240 | 240 | <!-- <view class=' item_body '> |
... | ... | @@ -244,9 +244,9 @@ |
244 | 244 | </view> --> |
245 | 245 | <template is="picker_cell_normal" data="{{...currentaddressInfo}}" /> |
246 | 246 | <view class="divide_line"></view> |
247 | - <view class='item_body '> | |
248 | - <text class='text_666_28 float_left '>详细地址</text> | |
249 | - <input class='input_wrap float_right ' name='current_address_detail' value="{{taxInfo.current_address_detail}}" placeholder-class='text_999_28' placeholder='请输入详细居住地址'></input> | |
247 | + <view class='item_body'> | |
248 | + <text class='text_666_30 float_left ' style='line-height: 90rpx'>详细地址</text> | |
249 | + <input class='input_wrap float_right ' name='current_address_detail' value="{{taxInfo.current_address_detail}}" placeholder-class='text_999_30' placeholder='请输入详细居住地址'></input> | |
250 | 250 | </view> |
251 | 251 | <view class="divide_line"></view> |
252 | 252 | <!-- <view class='item_body '> |
... | ... | @@ -257,8 +257,8 @@ |
257 | 257 | <template is="picker_cell_normal" data="{{...birthaddressInfo}}" /> |
258 | 258 | <view class="divide_line"></view> |
259 | 259 | <view class='item_body '> |
260 | - <text class='text_666_28 float_left '>详细地址</text> | |
261 | - <input class='input_wrap float_right ' name='huji_address_detail' placeholder-class='text_999_28' placeholder='请输入详细户籍地址' value='{{huji_address_detail}}'></input> | |
260 | + <text class='text_666_30 float_left ' style='line-height: 90rpx'>详细地址</text> | |
261 | + <input class='input_wrap float_right ' name='huji_address_detail' placeholder-class='text_999_30' placeholder='请输入详细户籍地址' value='{{huji_address_detail}}'></input> | |
262 | 262 | </view> |
263 | 263 | <view class="divide_line"></view> |
264 | 264 | </view> |
... | ... | @@ -306,8 +306,8 @@ |
306 | 306 | <view hidden='{{!isshow03}}'> |
307 | 307 | <view class="divide_line"></view> |
308 | 308 | <view class='item_body '> |
309 | - <text class='text_666_28 float_left'>公司股本总额</text> | |
310 | - <input class='input_wrap float_right ' name='company_equity_total' type='digit' value='{{taxInfo.company_equity_total}}' placeholder-class='text_999_28' placeholder='请输入股本总额(保留两位小数)' maxlength='13' bindblur='companymoney'></input> | |
309 | + <text class='text_666_30 float_left' style='line-height: 90rpx'>公司股本总额</text> | |
310 | + <input class='input_wrap float_right ' name='company_equity_total' type='digit' value='{{taxInfo.company_equity_total}}' placeholder-class='text_999_30' placeholder='请输入股本总额(保留两位小数)' maxlength='13' bindblur='companymoney'></input> | |
311 | 311 | </view> |
312 | 312 | <view class="divide_line"></view> |
313 | 313 | <!-- <view class='item_body '> |
... | ... | @@ -327,8 +327,8 @@ |
327 | 327 | |
328 | 328 | <view class="divide_line"></view> |
329 | 329 | <view class='item_body '> |
330 | - <text class='text_666_28 float_left '>工号</text> | |
331 | - <input class='input_wrap float_right ' name='employee_no' value='{{taxInfo.employee_no}}' placeholder-class='text_999_28' placeholder='请输入工号' maxlength='20'></input> | |
330 | + <text class='text_666_30 float_left 'style='line-height: 90rpx'>工号</text> | |
331 | + <input class='input_wrap float_right ' name='employee_no' value='{{taxInfo.employee_no}}' placeholder-class='text_999_30' placeholder='请输入工号' maxlength='20'></input> | |
332 | 332 | </view> |
333 | 333 | <view class="divide_line"></view> |
334 | 334 | <!-- <view class='item_body '> |
... | ... | @@ -339,8 +339,8 @@ |
339 | 339 | <template is="picker_cell_normal" data="{{...investpersonalInfo}}" /> |
340 | 340 | <view class="divide_line"></view> |
341 | 341 | <view class='item_body'> |
342 | - <text class='text_666_28 float_left '>个人投资总额</text> | |
343 | - <input class='input_wrap float_right ' name='personal_equity_total' type='digit' value='{{taxInfo.personal_equity_total}}' placeholder-class='text_999_28' placeholder='请输入个人投资总额(保留两位小数)' maxlength='13' bindblur='personalmoney'></input> | |
342 | + <text class='text_666_30 float_left 'style='line-height: 90rpx'>个人投资总额</text> | |
343 | + <input class='input_wrap float_right ' name='personal_equity_total' type='digit' value='{{taxInfo.personal_equity_total}}' placeholder-class='text_999_30' placeholder='请输入个人投资总额(保留两位小数)' maxlength='13' bindblur='personalmoney'></input> | |
344 | 344 | </view> |
345 | 345 | <view class="divide_line"></view> |
346 | 346 | </view> | ... | ... |
... | ... | @@ -5,7 +5,7 @@ |
5 | 5 | } |
6 | 6 | |
7 | 7 | .head_wrap { |
8 | - height: 70rpx; | |
8 | + height: 90rpx; | |
9 | 9 | background: #f7f9fd; |
10 | 10 | padding-right: 20rpx; |
11 | 11 | padding-left: 32rpx; |
... | ... | @@ -13,14 +13,14 @@ |
13 | 13 | |
14 | 14 | .head_red_star { |
15 | 15 | color: red; |
16 | - font-size: 28rpx; | |
17 | - line-height: 80rpx; | |
16 | + font-size: 30rpx; | |
17 | + line-height: 90rpx; | |
18 | 18 | } |
19 | 19 | |
20 | 20 | .head_text_wrap1 { |
21 | - line-height: 70rpx; | |
21 | + line-height: 90rpx; | |
22 | 22 | font-family: PingFangSC-Semibold; |
23 | - font-size: 14px; | |
23 | + font-size: 16px; | |
24 | 24 | color: #333; |
25 | 25 | letter-spacing: 0; |
26 | 26 | text-align: left; |
... | ... | @@ -37,12 +37,13 @@ |
37 | 37 | .head_image_wrap_down { |
38 | 38 | width: 28rpx; |
39 | 39 | height: 16rpx; |
40 | + margin-top: 40rpx | |
40 | 41 | } |
41 | 42 | |
42 | 43 | .head_image_wrap_up { |
43 | 44 | width: 40rpx; |
44 | 45 | height: 40rpx; |
45 | - margin-top: 16rpx; | |
46 | + margin-top: 24rpx; | |
46 | 47 | } |
47 | 48 | |
48 | 49 | .data_list { |
... | ... | @@ -62,7 +63,7 @@ |
62 | 63 | |
63 | 64 | .input_wrap { |
64 | 65 | width: 500rpx; |
65 | - height: 80rpx; | |
66 | + height: 90rpx; | |
66 | 67 | font-size: 28rpx; |
67 | 68 | color: #333; |
68 | 69 | text-align: right; |
... | ... | @@ -76,7 +77,7 @@ |
76 | 77 | font-size: 26rpx; |
77 | 78 | color: #666; |
78 | 79 | text-align: right; |
79 | - line-height: 80rpx; | |
80 | + line-height: 90rpx; | |
80 | 81 | } |
81 | 82 | |
82 | 83 | .image_camera { | ... | ... |
utils/wxcharts01.js
0 → 100755
1 | +/* | |
2 | + * charts for WeChat small app v1.0 | |
3 | + * | |
4 | + * https://github.com/xiaolin3303/wx-charts | |
5 | + * 2016-11-28 | |
6 | + * | |
7 | + * Designed and built with all the love of Web | |
8 | + */ | |
9 | + | |
10 | +'use strict'; | |
11 | + | |
12 | +var config = { | |
13 | + yAxisWidth: 15, | |
14 | + yAxisSplit: 5, | |
15 | + xAxisHeight: 15, | |
16 | + xAxisLineHeight: 15, | |
17 | + legendHeight: 15, | |
18 | + yAxisTitleWidth: 15, | |
19 | + padding: 12, | |
20 | + columePadding: 3, | |
21 | + fontSize: 10, | |
22 | + dataPointShape: ['diamond', 'circle', 'triangle', 'rect'], | |
23 | + colors: ['#FF76A5', '#FF9FC0', '#00CFBC', '#4DDDD0', '#FFBB23','#FFCF65', '#2092FF','#63B2FF', '#6F39FF', '#9A74FF' ], | |
24 | + pieChartLinePadding: 25, | |
25 | + pieChartTextPadding: 15, | |
26 | + xAxisTextPadding: 3, | |
27 | + titleColor: '#333333', | |
28 | + titleFontSize: 20, | |
29 | + subtitleColor: '#999999', | |
30 | + subtitleFontSize: 15, | |
31 | + toolTipPadding: 3, | |
32 | + toolTipBackground: '#000000', | |
33 | + toolTipOpacity: 0.7, | |
34 | + toolTipLineHeight: 14, | |
35 | +}; | |
36 | + | |
37 | +// Object.assign polyfill | |
38 | +// https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign | |
39 | +function assign(target, varArgs) { | |
40 | + if (target == null) { | |
41 | + // TypeError if undefined or null | |
42 | + throw new TypeError('Cannot convert undefined or null to object'); | |
43 | + } | |
44 | + | |
45 | + var to = Object(target); | |
46 | + | |
47 | + for (var index = 1; index < arguments.length; index++) { | |
48 | + var nextSource = arguments[index]; | |
49 | + | |
50 | + if (nextSource != null) { | |
51 | + // Skip over if undefined or null | |
52 | + for (var nextKey in nextSource) { | |
53 | + // Avoid bugs when hasOwnProperty is shadowed | |
54 | + if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) { | |
55 | + to[nextKey] = nextSource[nextKey]; | |
56 | + } | |
57 | + } | |
58 | + } | |
59 | + } | |
60 | + return to; | |
61 | +} | |
62 | + | |
63 | +var util = { | |
64 | + toFixed: function toFixed(num, limit) { | |
65 | + limit = limit || 2; | |
66 | + if (this.isFloat(num)) { | |
67 | + num = num.toFixed(limit); | |
68 | + } | |
69 | + return num; | |
70 | + }, | |
71 | + isFloat: function isFloat(num) { | |
72 | + return num % 1 !== 0; | |
73 | + }, | |
74 | + approximatelyEqual: function approximatelyEqual(num1, num2) { | |
75 | + return Math.abs(num1 - num2) < 1e-10; | |
76 | + }, | |
77 | + isSameSign: function isSameSign(num1, num2) { | |
78 | + return Math.abs(num1) === num1 && Math.abs(num2) === num2 || Math.abs(num1) !== num1 && Math.abs(num2) !== num2; | |
79 | + }, | |
80 | + isSameXCoordinateArea: function isSameXCoordinateArea(p1, p2) { | |
81 | + return this.isSameSign(p1.x, p2.x); | |
82 | + }, | |
83 | + isCollision: function isCollision(obj1, obj2) { | |
84 | + obj1.end = {}; | |
85 | + obj1.end.x = obj1.start.x + obj1.width; | |
86 | + obj1.end.y = obj1.start.y - obj1.height; | |
87 | + obj2.end = {}; | |
88 | + obj2.end.x = obj2.start.x + obj2.width; | |
89 | + obj2.end.y = obj2.start.y - obj2.height; | |
90 | + var flag = obj2.start.x > obj1.end.x || obj2.end.x < obj1.start.x || obj2.end.y > obj1.start.y || obj2.start.y < obj1.end.y; | |
91 | + | |
92 | + return !flag; | |
93 | + } | |
94 | +}; | |
95 | + | |
96 | +function findRange(num, type, limit) { | |
97 | + if (isNaN(num)) { | |
98 | + throw new Error('[wxCharts] unvalid series data!'); | |
99 | + } | |
100 | + limit = limit || 10; | |
101 | + type = type ? type : 'upper'; | |
102 | + var multiple = 1; | |
103 | + while (limit < 1) { | |
104 | + limit *= 10; | |
105 | + multiple *= 10; | |
106 | + } | |
107 | + if (type === 'upper') { | |
108 | + num = Math.ceil(num * multiple); | |
109 | + } else { | |
110 | + num = Math.floor(num * multiple); | |
111 | + } | |
112 | + while (num % limit !== 0) { | |
113 | + if (type === 'upper') { | |
114 | + num++; | |
115 | + } else { | |
116 | + num--; | |
117 | + } | |
118 | + } | |
119 | + | |
120 | + return num / multiple; | |
121 | +} | |
122 | + | |
123 | +function calValidDistance(distance, chartData, config, opts) { | |
124 | + | |
125 | + var dataChartAreaWidth = opts.width - config.padding - chartData.xAxisPoints[0]; | |
126 | + var dataChartWidth = chartData.eachSpacing * opts.categories.length; | |
127 | + var validDistance = distance; | |
128 | + if (distance >= 0) { | |
129 | + validDistance = 0; | |
130 | + } else if (Math.abs(distance) >= dataChartWidth - dataChartAreaWidth) { | |
131 | + validDistance = dataChartAreaWidth - dataChartWidth; | |
132 | + } | |
133 | + return validDistance; | |
134 | +} | |
135 | + | |
136 | +function isInAngleRange(angle, startAngle, endAngle) { | |
137 | + function adjust(angle) { | |
138 | + while (angle < 0) { | |
139 | + angle += 2 * Math.PI; | |
140 | + } | |
141 | + while (angle > 2 * Math.PI) { | |
142 | + angle -= 2 * Math.PI; | |
143 | + } | |
144 | + | |
145 | + return angle; | |
146 | + } | |
147 | + | |
148 | + angle = adjust(angle); | |
149 | + startAngle = adjust(startAngle); | |
150 | + endAngle = adjust(endAngle); | |
151 | + if (startAngle > endAngle) { | |
152 | + endAngle += 2 * Math.PI; | |
153 | + if (angle < startAngle) { | |
154 | + angle += 2 * Math.PI; | |
155 | + } | |
156 | + } | |
157 | + | |
158 | + return angle >= startAngle && angle <= endAngle; | |
159 | +} | |
160 | + | |
161 | +function calRotateTranslate(x, y, h) { | |
162 | + var xv = x; | |
163 | + var yv = h - y; | |
164 | + | |
165 | + var transX = xv + (h - yv - xv) / Math.sqrt(2); | |
166 | + transX *= -1; | |
167 | + | |
168 | + var transY = (h - yv) * (Math.sqrt(2) - 1) - (h - yv - xv) / Math.sqrt(2); | |
169 | + | |
170 | + return { | |
171 | + transX: transX, | |
172 | + transY: transY | |
173 | + }; | |
174 | +} | |
175 | + | |
176 | +function createCurveControlPoints(points, i) { | |
177 | + | |
178 | + function isNotMiddlePoint(points, i) { | |
179 | + if (points[i - 1] && points[i + 1]) { | |
180 | + return points[i].y >= Math.max(points[i - 1].y, points[i + 1].y) || points[i].y <= Math.min(points[i - 1].y, points[i + 1].y); | |
181 | + } else { | |
182 | + return false; | |
183 | + } | |
184 | + } | |
185 | + | |
186 | + var a = 0.2; | |
187 | + var b = 0.2; | |
188 | + var pAx = null; | |
189 | + var pAy = null; | |
190 | + var pBx = null; | |
191 | + var pBy = null; | |
192 | + if (i < 1) { | |
193 | + pAx = points[0].x + (points[1].x - points[0].x) * a; | |
194 | + pAy = points[0].y + (points[1].y - points[0].y) * a; | |
195 | + } else { | |
196 | + pAx = points[i].x + (points[i + 1].x - points[i - 1].x) * a; | |
197 | + pAy = points[i].y + (points[i + 1].y - points[i - 1].y) * a; | |
198 | + } | |
199 | + | |
200 | + if (i > points.length - 3) { | |
201 | + var last = points.length - 1; | |
202 | + pBx = points[last].x - (points[last].x - points[last - 1].x) * b; | |
203 | + pBy = points[last].y - (points[last].y - points[last - 1].y) * b; | |
204 | + } else { | |
205 | + pBx = points[i + 1].x - (points[i + 2].x - points[i].x) * b; | |
206 | + pBy = points[i + 1].y - (points[i + 2].y - points[i].y) * b; | |
207 | + } | |
208 | + | |
209 | + // fix issue https://github.com/xiaolin3303/wx-charts/issues/79 | |
210 | + if (isNotMiddlePoint(points, i + 1)) { | |
211 | + pBy = points[i + 1].y; | |
212 | + } | |
213 | + if (isNotMiddlePoint(points, i)) { | |
214 | + pAy = points[i].y; | |
215 | + } | |
216 | + | |
217 | + return { | |
218 | + ctrA: { | |
219 | + x: pAx, | |
220 | + y: pAy | |
221 | + }, | |
222 | + ctrB: { | |
223 | + x: pBx, | |
224 | + y: pBy | |
225 | + } | |
226 | + }; | |
227 | +} | |
228 | + | |
229 | +function convertCoordinateOrigin(x, y, center) { | |
230 | + return { | |
231 | + x: center.x + x, | |
232 | + y: center.y - y | |
233 | + }; | |
234 | +} | |
235 | + | |
236 | +function avoidCollision(obj, target) { | |
237 | + if (target) { | |
238 | + // is collision test | |
239 | + while (util.isCollision(obj, target)) { | |
240 | + if (obj.start.x > 0) { | |
241 | + obj.start.y--; | |
242 | + } else if (obj.start.x < 0) { | |
243 | + obj.start.y++; | |
244 | + } else { | |
245 | + if (obj.start.y > 0) { | |
246 | + obj.start.y++; | |
247 | + } else { | |
248 | + obj.start.y--; | |
249 | + } | |
250 | + } | |
251 | + } | |
252 | + } | |
253 | + return obj; | |
254 | +} | |
255 | + | |
256 | +function fillSeriesColor(series, config) { | |
257 | + var index = 0; | |
258 | + return series.map(function(item) { | |
259 | + if (!item.color) { | |
260 | + item.color = config.colors[index]; | |
261 | + index = (index + 1) % config.colors.length; | |
262 | + } | |
263 | + return item; | |
264 | + }); | |
265 | +} | |
266 | + | |
267 | +function getDataRange(minData, maxData) { | |
268 | + var limit = 0; | |
269 | + var range = maxData - minData; | |
270 | + if (range >= 10000) { | |
271 | + limit = 1000; | |
272 | + } else if (range >= 1000) { | |
273 | + limit = 100; | |
274 | + } else if (range >= 100) { | |
275 | + limit = 10; | |
276 | + } else if (range >= 10) { | |
277 | + limit = 5; | |
278 | + } else if (range >= 1) { | |
279 | + limit = 1; | |
280 | + } else if (range >= 0.1) { | |
281 | + limit = 0.1; | |
282 | + } else { | |
283 | + limit = 0.01; | |
284 | + } | |
285 | + return { | |
286 | + minRange: findRange(minData, 'lower', limit), | |
287 | + maxRange: findRange(maxData, 'upper', limit) | |
288 | + }; | |
289 | +} | |
290 | + | |
291 | +function measureText(text) { | |
292 | + var fontSize = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 10; | |
293 | + | |
294 | + // wx canvas 未实现measureText方法, 此处自行实现 | |
295 | + text = String(text); | |
296 | + var text = text.split(''); | |
297 | + var width = 0; | |
298 | + text.forEach(function(item) { | |
299 | + if (/[a-zA-Z]/.test(item)) { | |
300 | + width += 7; | |
301 | + } else if (/[0-9]/.test(item)) { | |
302 | + width += 5.5; | |
303 | + } else if (/\./.test(item)) { | |
304 | + width += 2.7; | |
305 | + } else if (/-/.test(item)) { | |
306 | + width += 3.25; | |
307 | + } else if (/[\u4e00-\u9fa5]/.test(item)) { | |
308 | + width += 10; | |
309 | + } else if (/\(|\)/.test(item)) { | |
310 | + width += 3.73; | |
311 | + } else if (/\s/.test(item)) { | |
312 | + width += 2.5; | |
313 | + } else if (/%/.test(item)) { | |
314 | + width += 8; | |
315 | + } else { | |
316 | + width += 10; | |
317 | + } | |
318 | + }); | |
319 | + return width * fontSize / 10; | |
320 | +} | |
321 | + | |
322 | +function dataCombine(series) { | |
323 | + return series.reduce(function(a, b) { | |
324 | + return (a.data ? a.data : a).concat(b.data); | |
325 | + }, []); | |
326 | +} | |
327 | + | |
328 | +function getSeriesDataItem(series, index) { | |
329 | + var data = []; | |
330 | + series.forEach(function(item) { | |
331 | + if (item.data[index] !== null && typeof item.data[index] !== 'undefinded') { | |
332 | + var seriesItem = {}; | |
333 | + seriesItem.color = item.color; | |
334 | + seriesItem.name = item.name; | |
335 | + seriesItem.data = item.format ? item.format(item.data[index]) : item.data[index]; | |
336 | + data.push(seriesItem); | |
337 | + } | |
338 | + }); | |
339 | + | |
340 | + return data; | |
341 | +} | |
342 | + | |
343 | + | |
344 | + | |
345 | +function getMaxTextListLength(list) { | |
346 | + var lengthList = list.map(function(item) { | |
347 | + return measureText(item); | |
348 | + }); | |
349 | + return Math.max.apply(null, lengthList); | |
350 | +} | |
351 | + | |
352 | +function getToolTipData(seriesData, calPoints, index, categories) { | |
353 | + var option = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {}; | |
354 | + | |
355 | + var textList = seriesData.map(function(item) { | |
356 | + return { | |
357 | + text: option.format ? option.format(item, categories[index]) : item.name + ': ' + item.data, | |
358 | + color: item.color | |
359 | + }; | |
360 | + }); | |
361 | + var validCalPoints = []; | |
362 | + var offset = { | |
363 | + x: 0, | |
364 | + y: 0 | |
365 | + }; | |
366 | + calPoints.forEach(function(points) { | |
367 | + if (typeof points[index] !== 'undefinded' && points[index] !== null) { | |
368 | + validCalPoints.push(points[index]); | |
369 | + } | |
370 | + }); | |
371 | + validCalPoints.forEach(function(item) { | |
372 | + offset.x = Math.round(item.x); | |
373 | + offset.y += item.y; | |
374 | + }); | |
375 | + | |
376 | + offset.y /= validCalPoints.length; | |
377 | + return { | |
378 | + textList: textList, | |
379 | + offset: offset | |
380 | + }; | |
381 | +} | |
382 | + | |
383 | +function findCurrentIndex(currentPoints, xAxisPoints, opts, config) { | |
384 | + var offset = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0; | |
385 | + | |
386 | + var currentIndex = -1; | |
387 | + if (isInExactChartArea(currentPoints, opts, config)) { | |
388 | + xAxisPoints.forEach(function(item, index) { | |
389 | + if (currentPoints.x + offset > item) { | |
390 | + currentIndex = index; | |
391 | + } | |
392 | + }); | |
393 | + } | |
394 | + | |
395 | + return currentIndex; | |
396 | +} | |
397 | + | |
398 | +function isInExactChartArea(currentPoints, opts, config) { | |
399 | + return currentPoints.x < opts.width - config.padding && currentPoints.x > config.padding + config.yAxisWidth + config.yAxisTitleWidth && currentPoints.y > config.padding && currentPoints.y < opts.height - config.legendHeight - config.xAxisHeight - config.padding; | |
400 | +} | |
401 | + | |
402 | +function findPieChartCurrentIndex(currentPoints, pieData) { | |
403 | + var currentIndex = -1; | |
404 | + if (isInExactPieChartArea(currentPoints, pieData.center, pieData.radius)) { | |
405 | + var angle = Math.atan2(pieData.center.y - currentPoints.y, currentPoints.x - pieData.center.x); | |
406 | + angle = -angle; | |
407 | + for (var i = 0, len = pieData.series.length; i < len; i++) { | |
408 | + var item = pieData.series[i]; | |
409 | + if (isInAngleRange(angle, item._start_, item._start_ + item._proportion_ * 2 * Math.PI)) { | |
410 | + currentIndex = i; | |
411 | + break; | |
412 | + } | |
413 | + } | |
414 | + } | |
415 | + | |
416 | + return currentIndex; | |
417 | +} | |
418 | + | |
419 | +function isInExactPieChartArea(currentPoints, center, radius) { | |
420 | + return Math.pow(currentPoints.x - center.x, 2) + Math.pow(currentPoints.y - center.y, 2) <= Math.pow(radius, 2); | |
421 | +} | |
422 | + | |
423 | +function splitPoints(points) { | |
424 | + var newPoints = []; | |
425 | + var items = []; | |
426 | + points.forEach(function(item, index) { | |
427 | + if (item !== null) { | |
428 | + items.push(item); | |
429 | + } else { | |
430 | + if (items.length) { | |
431 | + newPoints.push(items); | |
432 | + } | |
433 | + items = []; | |
434 | + } | |
435 | + }); | |
436 | + if (items.length) { | |
437 | + newPoints.push(items); | |
438 | + } | |
439 | + | |
440 | + return newPoints; | |
441 | +} | |
442 | + | |
443 | +function calLegendData(series, opts, config) { | |
444 | + if (opts.legend === false) { | |
445 | + return { | |
446 | + legendList: [], | |
447 | + legendHeight: 0 | |
448 | + }; | |
449 | + } | |
450 | + var padding = 5; | |
451 | + var marginTop = 8; | |
452 | + var shapeWidth = 15; | |
453 | + var legendList = []; | |
454 | + var widthCount = 0; | |
455 | + var currentRow = []; | |
456 | + series.forEach(function(item) { | |
457 | + var itemWidth = 3 * padding + shapeWidth + measureText(item.name || 'undefinded'); | |
458 | + if (widthCount + itemWidth > opts.width) { | |
459 | + legendList.push(currentRow); | |
460 | + widthCount = itemWidth; | |
461 | + currentRow = [item]; | |
462 | + } else { | |
463 | + widthCount += itemWidth; | |
464 | + currentRow.push(item); | |
465 | + } | |
466 | + }); | |
467 | + if (currentRow.length) { | |
468 | + legendList.push(currentRow); | |
469 | + } | |
470 | + | |
471 | + return { | |
472 | + legendList: legendList, | |
473 | + legendHeight: legendList.length * (config.fontSize + marginTop) + padding | |
474 | + }; | |
475 | +} | |
476 | + | |
477 | +function calCategoriesData(categories, opts, config) { | |
478 | + var result = { | |
479 | + angle: 0, | |
480 | + xAxisHeight: config.xAxisHeight | |
481 | + }; | |
482 | + | |
483 | + var _getXAxisPoints = getXAxisPoints(categories, opts, config), | |
484 | + eachSpacing = _getXAxisPoints.eachSpacing; | |
485 | + | |
486 | + // get max length of categories text | |
487 | + | |
488 | + | |
489 | + var categoriesTextLenth = categories.map(function(item) { | |
490 | + return measureText(item); | |
491 | + }); | |
492 | + | |
493 | + var maxTextLength = Math.max.apply(this, categoriesTextLenth); | |
494 | + | |
495 | + if (maxTextLength + 2 * config.xAxisTextPadding > eachSpacing) { | |
496 | + result.angle = 45 * Math.PI / 180; | |
497 | + result.xAxisHeight = 2 * config.xAxisTextPadding + maxTextLength * Math.sin(result.angle); | |
498 | + } | |
499 | + | |
500 | + return result; | |
501 | +} | |
502 | + | |
503 | +function getPieDataPoints(series) { | |
504 | + var process = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1; | |
505 | + | |
506 | + var count = 0; | |
507 | + var _start_ = 0; | |
508 | + series.forEach(function(item) { | |
509 | + item.data = item.data === null ? 0 : item.data; | |
510 | + count += item.data; | |
511 | + }); | |
512 | + series.forEach(function(item) { | |
513 | + item.data = item.data === null ? 0 : item.data; | |
514 | + item._proportion_ = item.data / count * process; | |
515 | + }); | |
516 | + series.forEach(function(item) { | |
517 | + item._start_ = _start_; | |
518 | + _start_ += 2 * item._proportion_ * Math.PI; | |
519 | + }); | |
520 | + | |
521 | + return series; | |
522 | +} | |
523 | + | |
524 | +function getPieTextMaxLength(series) { | |
525 | + series = getPieDataPoints(series); | |
526 | + var maxLength = 0; | |
527 | + series.forEach(function(item) { | |
528 | + var text = item.format ? item.format(+item._proportion_.toFixed(2)) : util.toFixed(item._proportion_ * 100) + '%'; | |
529 | + maxLength = Math.max(maxLength, measureText(text)); | |
530 | + }); | |
531 | + | |
532 | + return maxLength; | |
533 | +} | |
534 | + | |
535 | +function fixColumeData(points, eachSpacing, columnLen, index, config, opts) { | |
536 | + return points.map(function(item) { | |
537 | + if (item === null) { | |
538 | + return null; | |
539 | + } | |
540 | + item.width = (eachSpacing - 2 * config.columePadding) / columnLen; | |
541 | + | |
542 | + if (opts.extra.column && opts.extra.column.width && +opts.extra.column.width > 0) { | |
543 | + // customer column width | |
544 | + item.width = Math.min(item.width, +opts.extra.column.width); | |
545 | + } else { | |
546 | + // default width should less tran 25px | |
547 | + // don't ask me why, I don't know | |
548 | + item.width = Math.min(item.width, 25); | |
549 | + } | |
550 | + item.x += (index + 0.5 - columnLen / 2) * item.width; | |
551 | + | |
552 | + return item; | |
553 | + }); | |
554 | +} | |
555 | + | |
556 | +function getXAxisPoints(categories, opts, config) { | |
557 | + var yAxisTotalWidth = config.yAxisWidth + config.yAxisTitleWidth; | |
558 | + var spacingValid = opts.width - 2 * config.padding - yAxisTotalWidth; | |
559 | + var dataCount = opts.enableScroll ? Math.min(5, categories.length) : categories.length; | |
560 | + var eachSpacing = spacingValid / dataCount; | |
561 | + | |
562 | + var xAxisPoints = []; | |
563 | + var startX = config.padding + yAxisTotalWidth; | |
564 | + var endX = opts.width - config.padding; | |
565 | + categories.forEach(function(item, index) { | |
566 | + xAxisPoints.push(startX + index * eachSpacing); | |
567 | + }); | |
568 | + if (opts.enableScroll === true) { | |
569 | + xAxisPoints.push(startX + categories.length * eachSpacing); | |
570 | + } else { | |
571 | + xAxisPoints.push(endX); | |
572 | + } | |
573 | + | |
574 | + return { | |
575 | + xAxisPoints: xAxisPoints, | |
576 | + startX: startX, | |
577 | + endX: endX, | |
578 | + eachSpacing: eachSpacing | |
579 | + }; | |
580 | +} | |
581 | + | |
582 | +function getDataPoints(data, minRange, maxRange, xAxisPoints, eachSpacing, opts, config) { | |
583 | + var process = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : 1; | |
584 | + | |
585 | + var points = []; | |
586 | + var validHeight = opts.height - 2 * config.padding - config.xAxisHeight - config.legendHeight; | |
587 | + data.forEach(function(item, index) { | |
588 | + if (item === null) { | |
589 | + points.push(null); | |
590 | + } else { | |
591 | + var point = {}; | |
592 | + point.x = xAxisPoints[index] + Math.round(eachSpacing / 2); | |
593 | + var height = validHeight * (item - minRange) / (maxRange - minRange); | |
594 | + height *= process; | |
595 | + point.y = opts.height - config.xAxisHeight - config.legendHeight - Math.round(height) - config.padding; | |
596 | + points.push(point); | |
597 | + } | |
598 | + }); | |
599 | + | |
600 | + return points; | |
601 | +} | |
602 | + | |
603 | +function getYAxisTextList(series, opts, config) { | |
604 | + var data = dataCombine(series); | |
605 | + // remove null from data | |
606 | + data = data.filter(function(item) { | |
607 | + return item !== null; | |
608 | + }); | |
609 | + var minData = Math.min.apply(this, data); | |
610 | + var maxData = Math.max.apply(this, data); | |
611 | + if (typeof opts.yAxis.min === 'number') { | |
612 | + minData = Math.min(opts.yAxis.min, minData); | |
613 | + } | |
614 | + if (typeof opts.yAxis.max === 'number') { | |
615 | + maxData = Math.max(opts.yAxis.max, maxData); | |
616 | + } | |
617 | + | |
618 | + // fix issue https://github.com/xiaolin3303/wx-charts/issues/9 | |
619 | + if (minData === maxData) { | |
620 | + var rangeSpan = maxData || 1; | |
621 | + minData -= rangeSpan; | |
622 | + maxData += rangeSpan; | |
623 | + } | |
624 | + | |
625 | + var dataRange = getDataRange(minData, maxData); | |
626 | + var minRange = dataRange.minRange; | |
627 | + var maxRange = dataRange.maxRange; | |
628 | + | |
629 | + var range = []; | |
630 | + var eachRange = (maxRange - minRange) / config.yAxisSplit; | |
631 | + | |
632 | + for (var i = 0; i <= config.yAxisSplit; i++) { | |
633 | + range.push(minRange + eachRange * i); | |
634 | + } | |
635 | + return range.reverse(); | |
636 | +} | |
637 | + | |
638 | +function calYAxisData(series, opts, config) { | |
639 | + | |
640 | + var ranges = getYAxisTextList(series, opts, config); | |
641 | + var yAxisWidth = config.yAxisWidth; | |
642 | + var rangesFormat = ranges.map(function(item) { | |
643 | + item = util.toFixed(item, 2); | |
644 | + item = opts.yAxis.format ? opts.yAxis.format(Number(item)) : item; | |
645 | + yAxisWidth = Math.max(yAxisWidth, measureText(item) + 5); | |
646 | + return item; | |
647 | + }); | |
648 | + if (opts.yAxis.disabled === true) { | |
649 | + yAxisWidth = 0; | |
650 | + } | |
651 | + | |
652 | + return { | |
653 | + rangesFormat: rangesFormat, | |
654 | + ranges: ranges, | |
655 | + yAxisWidth: yAxisWidth | |
656 | + }; | |
657 | +} | |
658 | + | |
659 | +function drawPointShape(points, color, shape, context) { | |
660 | + context.beginPath(); | |
661 | + context.setStrokeStyle("#ffffff"); | |
662 | + context.setLineWidth(1); | |
663 | + context.setFillStyle(color); | |
664 | + | |
665 | + if (shape === 'diamond') { | |
666 | + points.forEach(function(item, index) { | |
667 | + if (item !== null) { | |
668 | + context.moveTo(item.x, item.y - 4.5); | |
669 | + context.lineTo(item.x - 4.5, item.y); | |
670 | + context.lineTo(item.x, item.y + 4.5); | |
671 | + context.lineTo(item.x + 4.5, item.y); | |
672 | + context.lineTo(item.x, item.y - 4.5); | |
673 | + } | |
674 | + }); | |
675 | + } else if (shape === 'circle') { | |
676 | + points.forEach(function(item, index) { | |
677 | + if (item !== null) { | |
678 | + context.moveTo(item.x + 3.5, item.y); | |
679 | + context.arc(item.x, item.y, 4, 0, 2 * Math.PI, false); | |
680 | + } | |
681 | + }); | |
682 | + } else if (shape === 'rect') { | |
683 | + points.forEach(function(item, index) { | |
684 | + if (item !== null) { | |
685 | + context.moveTo(item.x - 3.5, item.y - 3.5); | |
686 | + context.rect(item.x - 3.5, item.y - 3.5, 7, 7); | |
687 | + } | |
688 | + }); | |
689 | + } else if (shape === 'triangle') { | |
690 | + points.forEach(function(item, index) { | |
691 | + if (item !== null) { | |
692 | + context.moveTo(item.x, item.y - 4.5); | |
693 | + context.lineTo(item.x - 4.5, item.y + 4.5); | |
694 | + context.lineTo(item.x + 4.5, item.y + 4.5); | |
695 | + context.lineTo(item.x, item.y - 4.5); | |
696 | + } | |
697 | + }); | |
698 | + } | |
699 | + context.closePath(); | |
700 | + context.fill(); | |
701 | + context.stroke(); | |
702 | +} | |
703 | + | |
704 | + | |
705 | +function drawPointText(points, series, config, context) { | |
706 | + // 绘制数据文案 | |
707 | + var data = series.data; | |
708 | + | |
709 | + context.beginPath(); | |
710 | + context.setFontSize(config.fontSize); | |
711 | + context.setFillStyle('#666666'); | |
712 | + points.forEach(function(item, index) { | |
713 | + if (item !== null) { | |
714 | + var formatVal = series.format ? series.format(data[index]) : data[index]; | |
715 | + context.fillText(formatVal, item.x - measureText(formatVal) / 2, item.y - 2); | |
716 | + } | |
717 | + }); | |
718 | + context.closePath(); | |
719 | + context.stroke(); | |
720 | +} | |
721 | + | |
722 | +function drawPieText(series, opts, config, context, radius, center) { | |
723 | + var lineRadius = radius + config.pieChartLinePadding; | |
724 | + var textObjectCollection = []; | |
725 | + var lastTextObject = null; | |
726 | + | |
727 | + var seriesConvert = series.map(function(item) { | |
728 | + var arc = 2 * Math.PI - (item._start_ + 2 * Math.PI * item._proportion_ / 2); | |
729 | + // var text = item.format ? item.format(+item._proportion_.toFixed(2)) : util.toFixed(item._proportion_ * 100) + '%'; | |
730 | + var text = item.data.toFixed(2); | |
731 | + var color = item.color; | |
732 | + return { | |
733 | + arc: arc, | |
734 | + text: text , | |
735 | + color: color | |
736 | + }; | |
737 | + }); | |
738 | + seriesConvert.forEach(function(item) { | |
739 | + // line end | |
740 | + var orginX1 = Math.cos(item.arc) * lineRadius; | |
741 | + var orginY1 = Math.sin(item.arc) * lineRadius; | |
742 | + | |
743 | + // line start | |
744 | + var orginX2 = Math.cos(item.arc) * radius; | |
745 | + var orginY2 = Math.sin(item.arc) * radius; | |
746 | + | |
747 | + // text start | |
748 | + var orginX3 = orginX1 >= 0 ? orginX1 + config.pieChartTextPadding : orginX1 - config.pieChartTextPadding; | |
749 | + var orginY3 = orginY1; | |
750 | + | |
751 | + var textWidth = measureText(item.text); | |
752 | + var startY = orginY3; | |
753 | + | |
754 | + if (lastTextObject && util.isSameXCoordinateArea(lastTextObject.start, { | |
755 | + x: orginX3 | |
756 | + })) { | |
757 | + if (orginX3 > 0) { | |
758 | + startY = Math.min(orginY3, lastTextObject.start.y); | |
759 | + } else if (orginX1 < 0) { | |
760 | + startY = Math.max(orginY3, lastTextObject.start.y); | |
761 | + } else { | |
762 | + if (orginY3 > 0) { | |
763 | + startY = Math.max(orginY3, lastTextObject.start.y); | |
764 | + } else { | |
765 | + startY = Math.min(orginY3, lastTextObject.start.y); | |
766 | + } | |
767 | + } | |
768 | + } | |
769 | + | |
770 | + if (orginX3 < 0) { | |
771 | + orginX3 -= textWidth; | |
772 | + } | |
773 | + | |
774 | + var textObject = { | |
775 | + lineStart: { | |
776 | + x: orginX2, | |
777 | + y: orginY2 | |
778 | + }, | |
779 | + lineEnd: { | |
780 | + x: orginX1, | |
781 | + y: orginY1 | |
782 | + }, | |
783 | + start: { | |
784 | + x: orginX3, | |
785 | + y: startY | |
786 | + }, | |
787 | + width: textWidth, | |
788 | + height: config.fontSize, | |
789 | + text: item.text, | |
790 | + color: item.color | |
791 | + }; | |
792 | + | |
793 | + lastTextObject = avoidCollision(textObject, lastTextObject); | |
794 | + textObjectCollection.push(lastTextObject); | |
795 | + }); | |
796 | + | |
797 | + textObjectCollection.forEach(function(item) { | |
798 | + var lineStartPoistion = convertCoordinateOrigin(item.lineStart.x, item.lineStart.y, center); | |
799 | + var lineEndPoistion = convertCoordinateOrigin(item.lineEnd.x, item.lineEnd.y, center); | |
800 | + var textPosition = convertCoordinateOrigin(item.start.x, item.start.y, center); | |
801 | + context.setLineWidth(1); | |
802 | + context.setFontSize(config.fontSize); | |
803 | + context.beginPath(); | |
804 | + context.setStrokeStyle(item.color); | |
805 | + context.setFillStyle(item.color); | |
806 | + context.moveTo(lineStartPoistion.x, lineStartPoistion.y); | |
807 | + var curveStartX = item.start.x < 0 ? textPosition.x + item.width : textPosition.x; | |
808 | + var textStartX = item.start.x < 0 ? textPosition.x - 5 : textPosition.x + 5; | |
809 | + context.quadraticCurveTo(lineEndPoistion.x, lineEndPoistion.y, curveStartX, textPosition.y); | |
810 | + context.moveTo(lineStartPoistion.x, lineStartPoistion.y); | |
811 | + context.stroke(); | |
812 | + context.closePath(); | |
813 | + context.beginPath(); | |
814 | + context.moveTo(textPosition.x + item.width, textPosition.y); | |
815 | + context.arc(curveStartX, textPosition.y, 2, 0, 2 * Math.PI); | |
816 | + context.closePath(); | |
817 | + context.fill(); | |
818 | + context.beginPath(); | |
819 | + context.setFillStyle('#666666'); | |
820 | + context.fillText(item.text, textStartX, textPosition.y + 3); | |
821 | + context.closePath(); | |
822 | + context.stroke(); | |
823 | + | |
824 | + context.closePath(); | |
825 | + }); | |
826 | +} | |
827 | + | |
828 | +function drawToolTipSplitLine(offsetX, opts, config, context) { | |
829 | + var startY = config.padding; | |
830 | + var endY = opts.height - config.padding - config.xAxisHeight - config.legendHeight; | |
831 | + context.beginPath(); | |
832 | + context.setStrokeStyle('#cccccc'); | |
833 | + context.setLineWidth(1); | |
834 | + context.moveTo(offsetX, startY); | |
835 | + context.lineTo(offsetX, endY); | |
836 | + context.stroke(); | |
837 | + context.closePath(); | |
838 | +} | |
839 | + | |
840 | +function drawToolTip(textList, offset, opts, config, context) { | |
841 | + var legendWidth = 4; | |
842 | + var legendMarginRight = 5; | |
843 | + var arrowWidth = 8; | |
844 | + var isOverRightBorder = false; | |
845 | + offset = assign({ | |
846 | + x: 0, | |
847 | + y: 0 | |
848 | + }, offset); | |
849 | + offset.y -= 8; | |
850 | + var textWidth = textList.map(function(item) { | |
851 | + return measureText(item.text); | |
852 | + }); | |
853 | + | |
854 | + var toolTipWidth = legendWidth + legendMarginRight + 4 * config.toolTipPadding + Math.max.apply(null, textWidth); | |
855 | + var toolTipHeight = 2 * config.toolTipPadding + textList.length * config.toolTipLineHeight; | |
856 | + | |
857 | + // if beyond the right border | |
858 | + if (offset.x - Math.abs(opts._scrollDistance_) + arrowWidth + toolTipWidth > opts.width) { | |
859 | + isOverRightBorder = true; | |
860 | + } | |
861 | + | |
862 | + // draw background rect | |
863 | + context.beginPath(); | |
864 | + context.setFillStyle(opts.tooltip.option.background || config.toolTipBackground); | |
865 | + context.setGlobalAlpha(config.toolTipOpacity); | |
866 | + if (isOverRightBorder) { | |
867 | + context.moveTo(offset.x, offset.y + 10); | |
868 | + context.lineTo(offset.x - arrowWidth, offset.y + 10 - 5); | |
869 | + context.lineTo(offset.x - arrowWidth, offset.y + 10 + 5); | |
870 | + context.moveTo(offset.x, offset.y + 10); | |
871 | + context.fillRect(offset.x - toolTipWidth - arrowWidth, offset.y, toolTipWidth, toolTipHeight); | |
872 | + } else { | |
873 | + context.moveTo(offset.x, offset.y + 10); | |
874 | + context.lineTo(offset.x + arrowWidth, offset.y + 10 - 5); | |
875 | + context.lineTo(offset.x + arrowWidth, offset.y + 10 + 5); | |
876 | + context.moveTo(offset.x, offset.y + 10); | |
877 | + context.fillRect(offset.x + arrowWidth, offset.y, toolTipWidth, toolTipHeight); | |
878 | + } | |
879 | + | |
880 | + context.closePath(); | |
881 | + context.fill(); | |
882 | + context.setGlobalAlpha(1); | |
883 | + | |
884 | + // draw legend | |
885 | + textList.forEach(function(item, index) { | |
886 | + context.beginPath(); | |
887 | + context.setFillStyle(item.color); | |
888 | + var startX = offset.x + arrowWidth + 2 * config.toolTipPadding; | |
889 | + var startY = offset.y + (config.toolTipLineHeight - config.fontSize) / 2 + config.toolTipLineHeight * index + config.toolTipPadding; | |
890 | + if (isOverRightBorder) { | |
891 | + startX = offset.x - toolTipWidth - arrowWidth + 2 * config.toolTipPadding; | |
892 | + } | |
893 | + context.fillRect(startX, startY, legendWidth, config.fontSize); | |
894 | + context.closePath(); | |
895 | + }); | |
896 | + | |
897 | + // draw text list | |
898 | + context.beginPath(); | |
899 | + context.setFontSize(config.fontSize); | |
900 | + context.setFillStyle('#ffffff'); | |
901 | + textList.forEach(function(item, index) { | |
902 | + var startX = offset.x + arrowWidth + 2 * config.toolTipPadding + legendWidth + legendMarginRight; | |
903 | + if (isOverRightBorder) { | |
904 | + startX = offset.x - toolTipWidth - arrowWidth + 2 * config.toolTipPadding + +legendWidth + legendMarginRight; | |
905 | + } | |
906 | + var startY = offset.y + (config.toolTipLineHeight - config.fontSize) / 2 + config.toolTipLineHeight * index + config.toolTipPadding; | |
907 | + context.fillText(item.text, startX, startY + config.fontSize); | |
908 | + }); | |
909 | + context.stroke(); | |
910 | + context.closePath(); | |
911 | +} | |
912 | + | |
913 | +function drawYAxisTitle(title, opts, config, context) { | |
914 | + var startX = config.xAxisHeight + (opts.height - config.xAxisHeight - measureText(title)) / 2; | |
915 | + context.save(); | |
916 | + context.beginPath(); | |
917 | + context.setFontSize(config.fontSize); | |
918 | + context.setFillStyle(opts.yAxis.titleFontColor || '#333333'); | |
919 | + context.translate(0, opts.height); | |
920 | + context.rotate(-90 * Math.PI / 180); | |
921 | + context.fillText(title, startX, config.padding + 0.5 * config.fontSize); | |
922 | + context.stroke(); | |
923 | + context.closePath(); | |
924 | + context.restore(); | |
925 | +} | |
926 | + | |
927 | +function drawToolTipBridge(opts, config, context, process) { | |
928 | + context.save(); | |
929 | + if (opts._scrollDistance_ && opts._scrollDistance_ !== 0 && opts.enableScroll === true) { | |
930 | + context.translate(opts._scrollDistance_, 0); | |
931 | + } | |
932 | + if (opts.tooltip && opts.tooltip.textList && opts.tooltip.textList.length && process === 1) { | |
933 | + drawToolTip(opts.tooltip.textList, opts.tooltip.offset, opts, config, context); | |
934 | + } | |
935 | + context.restore(); | |
936 | +} | |
937 | + | |
938 | +function drawXAxis(categories, opts, config, context) { | |
939 | + var _getXAxisPoints4 = getXAxisPoints(categories, opts, config), | |
940 | + xAxisPoints = _getXAxisPoints4.xAxisPoints, | |
941 | + startX = _getXAxisPoints4.startX, | |
942 | + endX = _getXAxisPoints4.endX, | |
943 | + eachSpacing = _getXAxisPoints4.eachSpacing; | |
944 | + | |
945 | + var startY = opts.height - config.padding - config.xAxisHeight - config.legendHeight; | |
946 | + var endY = startY + config.xAxisLineHeight; | |
947 | + | |
948 | + context.save(); | |
949 | + if (opts._scrollDistance_ && opts._scrollDistance_ !== 0) { | |
950 | + context.translate(opts._scrollDistance_, 0); | |
951 | + } | |
952 | + | |
953 | + context.beginPath(); | |
954 | + context.setStrokeStyle(opts.xAxis.gridColor || "#cccccc"); | |
955 | + | |
956 | + if (opts.xAxis.disableGrid !== true) { | |
957 | + if (opts.xAxis.type === 'calibration') { | |
958 | + xAxisPoints.forEach(function(item, index) { | |
959 | + if (index > 0) { | |
960 | + context.moveTo(item - eachSpacing / 2, startY); | |
961 | + context.lineTo(item - eachSpacing / 2, startY + 4); | |
962 | + } | |
963 | + }); | |
964 | + } else { | |
965 | + xAxisPoints.forEach(function(item, index) { | |
966 | + context.moveTo(item, startY); | |
967 | + context.lineTo(item, endY); | |
968 | + }); | |
969 | + } | |
970 | + } | |
971 | + context.closePath(); | |
972 | + context.stroke(); | |
973 | + | |
974 | + // 对X轴列表做抽稀处理 | |
975 | + var validWidth = opts.width - 2 * config.padding - config.yAxisWidth - config.yAxisTitleWidth; | |
976 | + var maxXAxisListLength = Math.min(categories.length, Math.ceil(validWidth / config.fontSize / 1.5)); | |
977 | + var ratio = Math.ceil(categories.length / maxXAxisListLength); | |
978 | + | |
979 | + categories = categories.map(function(item, index) { | |
980 | + return index % ratio !== 0 ? '' : item; | |
981 | + }); | |
982 | + | |
983 | + if (config._xAxisTextAngle_ === 0) { | |
984 | + context.beginPath(); | |
985 | + context.setFontSize(config.fontSize); | |
986 | + context.setFillStyle(opts.xAxis.fontColor || '#666666'); | |
987 | + categories.forEach(function(item, index) { | |
988 | + var offset = eachSpacing / 2 - measureText(item) / 2; | |
989 | + context.fillText(item, xAxisPoints[index] + offset, startY + config.fontSize + 5); | |
990 | + }); | |
991 | + context.closePath(); | |
992 | + context.stroke(); | |
993 | + } else { | |
994 | + categories.forEach(function(item, index) { | |
995 | + context.save(); | |
996 | + context.beginPath(); | |
997 | + context.setFontSize(config.fontSize); | |
998 | + context.setFillStyle(opts.xAxis.fontColor || '#666666'); | |
999 | + var textWidth = measureText(item); | |
1000 | + var offset = eachSpacing / 2 - textWidth; | |
1001 | + | |
1002 | + var _calRotateTranslate = calRotateTranslate(xAxisPoints[index] + eachSpacing / 2, startY + config.fontSize / 2 + 5, opts.height), | |
1003 | + transX = _calRotateTranslate.transX, | |
1004 | + transY = _calRotateTranslate.transY; | |
1005 | + | |
1006 | + context.rotate(-1 * config._xAxisTextAngle_); | |
1007 | + context.translate(transX, transY); | |
1008 | + context.fillText(item, xAxisPoints[index] + offset, startY + config.fontSize + 5); | |
1009 | + context.closePath(); | |
1010 | + context.stroke(); | |
1011 | + context.restore(); | |
1012 | + }); | |
1013 | + } | |
1014 | + | |
1015 | + context.restore(); | |
1016 | +} | |
1017 | + | |
1018 | +function drawYAxisGrid(opts, config, context) { | |
1019 | + var spacingValid = opts.height - 2 * config.padding - config.xAxisHeight - config.legendHeight; | |
1020 | + var eachSpacing = Math.floor(spacingValid / config.yAxisSplit); | |
1021 | + var yAxisTotalWidth = config.yAxisWidth + config.yAxisTitleWidth; | |
1022 | + var startX = config.padding + yAxisTotalWidth; | |
1023 | + var endX = opts.width - config.padding; | |
1024 | + | |
1025 | + var points = []; | |
1026 | + for (var i = 0; i < config.yAxisSplit; i++) { | |
1027 | + points.push(config.padding + eachSpacing * i); | |
1028 | + } | |
1029 | + points.push(config.padding + eachSpacing * config.yAxisSplit + 2); | |
1030 | + | |
1031 | + context.beginPath(); | |
1032 | + context.setStrokeStyle(opts.yAxis.gridColor || "#cccccc"); | |
1033 | + context.setLineWidth(1); | |
1034 | + points.forEach(function(item, index) { | |
1035 | + context.moveTo(startX, item); | |
1036 | + context.lineTo(endX, item); | |
1037 | + }); | |
1038 | + context.closePath(); | |
1039 | + context.stroke(); | |
1040 | +} | |
1041 | + | |
1042 | +function drawYAxis(series, opts, config, context) { | |
1043 | + if (opts.yAxis.disabled === true) { | |
1044 | + return; | |
1045 | + } | |
1046 | + | |
1047 | + var _calYAxisData4 = calYAxisData(series, opts, config), | |
1048 | + rangesFormat = _calYAxisData4.rangesFormat; | |
1049 | + | |
1050 | + var yAxisTotalWidth = config.yAxisWidth + config.yAxisTitleWidth; | |
1051 | + | |
1052 | + var spacingValid = opts.height - 2 * config.padding - config.xAxisHeight - config.legendHeight; | |
1053 | + var eachSpacing = Math.floor(spacingValid / config.yAxisSplit); | |
1054 | + var startX = config.padding + yAxisTotalWidth; | |
1055 | + var endX = opts.width - config.padding; | |
1056 | + var endY = opts.height - config.padding - config.xAxisHeight - config.legendHeight; | |
1057 | + | |
1058 | + // set YAxis background | |
1059 | + context.setFillStyle(opts.background || '#ffffff'); | |
1060 | + if (opts._scrollDistance_ < 0) { | |
1061 | + context.fillRect(0, 0, startX, endY + config.xAxisHeight + 5); | |
1062 | + } | |
1063 | + context.fillRect(endX, 0, opts.width, endY + config.xAxisHeight + 5); | |
1064 | + | |
1065 | + var points = []; | |
1066 | + for (var i = 0; i <= config.yAxisSplit; i++) { | |
1067 | + points.push(config.padding + eachSpacing * i); | |
1068 | + } | |
1069 | + | |
1070 | + context.stroke(); | |
1071 | + context.beginPath(); | |
1072 | + context.setFontSize(config.fontSize); | |
1073 | + context.setFillStyle(opts.yAxis.fontColor || '#666666'); | |
1074 | + rangesFormat.forEach(function(item, index) { | |
1075 | + var pos = points[index] ? points[index] : endY; | |
1076 | + context.fillText(item, config.padding + config.yAxisTitleWidth, pos + config.fontSize / 2); | |
1077 | + }); | |
1078 | + context.closePath(); | |
1079 | + context.stroke(); | |
1080 | + | |
1081 | + if (opts.yAxis.title) { | |
1082 | + drawYAxisTitle(opts.yAxis.title, opts, config, context); | |
1083 | + } | |
1084 | +} | |
1085 | + | |
1086 | +function drawLegend(series, opts, config, context) { | |
1087 | + if (!opts.legend) { | |
1088 | + return; | |
1089 | + } | |
1090 | + // each legend shape width 15px | |
1091 | + // the spacing between shape and text in each legend is the `padding` | |
1092 | + // each legend spacing is the `padding` | |
1093 | + // legend margin top `config.padding` | |
1094 | + | |
1095 | + var _calLegendData = calLegendData(series, opts, config), | |
1096 | + legendList = _calLegendData.legendList; | |
1097 | + | |
1098 | + var padding = 5; | |
1099 | + var marginTop = 12; | |
1100 | + var shapeWidth = 15; | |
1101 | + legendList.forEach(function(itemList, listIndex) { | |
1102 | + var width = 0; | |
1103 | + itemList.forEach(function(item) { | |
1104 | + item.name = item.name || 'undefined'; | |
1105 | + width += 3 * padding + measureText(item.name) + shapeWidth; | |
1106 | + }); | |
1107 | + var startX = (opts.width - width) / 2 + padding; | |
1108 | + var startY = opts.height - config.padding - config.legendHeight + listIndex * (config.fontSize + marginTop) + padding + marginTop; | |
1109 | + | |
1110 | + context.setFontSize(config.fontSize); | |
1111 | + itemList.forEach(function(item) { | |
1112 | + switch (opts.type) { | |
1113 | + case 'line': | |
1114 | + context.beginPath(); | |
1115 | + context.setLineWidth(1); | |
1116 | + context.setStrokeStyle(item.color); | |
1117 | + context.moveTo(startX - 2, startY + 5); | |
1118 | + context.lineTo(startX + 17, startY + 5); | |
1119 | + context.stroke(); | |
1120 | + context.closePath(); | |
1121 | + context.beginPath(); | |
1122 | + context.setLineWidth(1); | |
1123 | + context.setStrokeStyle('#ffffff'); | |
1124 | + context.setFillStyle(item.color); | |
1125 | + context.moveTo(startX + 7.5, startY + 5); | |
1126 | + context.arc(startX + 7.5, startY + 5, 4, 0, 2 * Math.PI); | |
1127 | + context.fill(); | |
1128 | + context.stroke(); | |
1129 | + context.closePath(); | |
1130 | + break; | |
1131 | + case 'pie': | |
1132 | + case 'ring': | |
1133 | + context.beginPath(); | |
1134 | + context.setFillStyle(item.color); | |
1135 | + context.moveTo(startX + 7.5, startY + 5); | |
1136 | + context.arc(startX + 7.5, startY + 5, 8, 0, 2 * Math.PI); | |
1137 | + context.closePath(); | |
1138 | + context.fill(); | |
1139 | + break; | |
1140 | + default: | |
1141 | + context.beginPath(); | |
1142 | + context.setFillStyle(item.color); | |
1143 | + context.moveTo(startX, startY); | |
1144 | + context.rect(startX, startY, 15, 10); | |
1145 | + context.closePath(); | |
1146 | + context.fill(); | |
1147 | + } | |
1148 | + startX += padding + shapeWidth; | |
1149 | + context.beginPath(); | |
1150 | + // context.setFillStyle(opts.extra.legendTextColor || '#333333'); | |
1151 | + context.setFillStyle( '#6C7596'); | |
1152 | + context.fillText(item.name, startX, startY + 9); | |
1153 | + context.closePath(); | |
1154 | + context.stroke(); | |
1155 | + startX += measureText(item.name) + 2 * padding; | |
1156 | + }); | |
1157 | + }); | |
1158 | +} | |
1159 | + | |
1160 | +function drawPieDataPoints(series, opts, config, context) { | |
1161 | + var process = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1; | |
1162 | + | |
1163 | + var pieOption = opts.extra.pie || {}; | |
1164 | + series = getPieDataPoints(series, process); | |
1165 | + var centerPosition = { | |
1166 | + x: opts.width / 2, | |
1167 | + y: (opts.height - config.legendHeight) / 2 | |
1168 | + }; | |
1169 | + var radius = Math.min(centerPosition.x - config.pieChartLinePadding - config.pieChartTextPadding - config._pieTextMaxLength_, centerPosition.y - config.pieChartLinePadding - config.pieChartTextPadding); | |
1170 | + if (opts.dataLabel) { | |
1171 | + radius -= 10; | |
1172 | + } else { | |
1173 | + radius -= 2 * config.padding; | |
1174 | + } | |
1175 | + series = series.map(function(eachSeries) { | |
1176 | + eachSeries._start_ += (pieOption.offsetAngle || 0) * Math.PI / 180; | |
1177 | + return eachSeries; | |
1178 | + }); | |
1179 | + series.forEach(function(eachSeries) { | |
1180 | + context.beginPath(); | |
1181 | + context.setLineWidth(2); | |
1182 | + context.setStrokeStyle('#ffffff'); | |
1183 | + context.setFillStyle(eachSeries.color); | |
1184 | + context.moveTo(centerPosition.x, centerPosition.y); | |
1185 | + context.arc(centerPosition.x, centerPosition.y, radius, eachSeries._start_, eachSeries._start_ + 2 * eachSeries._proportion_ * Math.PI); | |
1186 | + context.closePath(); | |
1187 | + context.fill(); | |
1188 | + if (opts.disablePieStroke == true) { | |
1189 | + context.stroke(); | |
1190 | + } | |
1191 | + }); | |
1192 | + | |
1193 | + if (opts.type === 'ring') { | |
1194 | + var innerPieWidth = radius * 0.6; | |
1195 | + if (typeof opts.extra.ringWidth === 'number' && opts.extra.ringWidth > 0) { | |
1196 | + innerPieWidth = Math.max(0, radius - opts.extra.ringWidth); | |
1197 | + } | |
1198 | + context.beginPath(); | |
1199 | + context.setFillStyle(opts.background || '#ffffff'); | |
1200 | + context.moveTo(centerPosition.x, centerPosition.y); | |
1201 | + context.arc(centerPosition.x, centerPosition.y, innerPieWidth, 0, 2 * Math.PI); | |
1202 | + context.closePath(); | |
1203 | + context.fill(); | |
1204 | + } | |
1205 | + | |
1206 | + if (opts.dataLabel !== false && process === 1) { | |
1207 | + // fix https://github.com/xiaolin3303/wx-charts/issues/132 | |
1208 | + var valid = false; | |
1209 | + for (var i = 0, len = series.length; i < len; i++) { | |
1210 | + if (series[i].data > 0) { | |
1211 | + valid = true; | |
1212 | + break; | |
1213 | + } | |
1214 | + } | |
1215 | + | |
1216 | + if (valid) { | |
1217 | + drawPieText(series, opts, config, context, radius, centerPosition); | |
1218 | + } | |
1219 | + } | |
1220 | + | |
1221 | + if (process === 1 && opts.type === 'ring') { | |
1222 | + drawRingTitle(opts, config, context); | |
1223 | + } | |
1224 | + | |
1225 | + return { | |
1226 | + center: centerPosition, | |
1227 | + radius: radius, | |
1228 | + series: series | |
1229 | + }; | |
1230 | +} | |
1231 | + | |
1232 | +function drawCanvas(opts, context) { | |
1233 | + context.draw(); | |
1234 | +} | |
1235 | + | |
1236 | +var Timing = { | |
1237 | + easeIn: function easeIn(pos) { | |
1238 | + return Math.pow(pos, 3); | |
1239 | + }, | |
1240 | + | |
1241 | + easeOut: function easeOut(pos) { | |
1242 | + return Math.pow(pos - 1, 3) + 1; | |
1243 | + }, | |
1244 | + | |
1245 | + easeInOut: function easeInOut(pos) { | |
1246 | + if ((pos /= 0.5) < 1) { | |
1247 | + return 0.5 * Math.pow(pos, 3); | |
1248 | + } else { | |
1249 | + return 0.5 * (Math.pow(pos - 2, 3) + 2); | |
1250 | + } | |
1251 | + }, | |
1252 | + | |
1253 | + linear: function linear(pos) { | |
1254 | + return pos; | |
1255 | + } | |
1256 | +}; | |
1257 | + | |
1258 | +function Animation(opts) { | |
1259 | + this.isStop = false; | |
1260 | + opts.duration = typeof opts.duration === 'undefined' ? 1000 : opts.duration; | |
1261 | + opts.timing = opts.timing || 'linear'; | |
1262 | + | |
1263 | + var delay = 17; | |
1264 | + | |
1265 | + var createAnimationFrame = function createAnimationFrame() { | |
1266 | + if (typeof requestAnimationFrame !== 'undefined') { | |
1267 | + return requestAnimationFrame; | |
1268 | + } else if (typeof setTimeout !== 'undefined') { | |
1269 | + return function(step, delay) { | |
1270 | + setTimeout(function() { | |
1271 | + var timeStamp = +new Date(); | |
1272 | + step(timeStamp); | |
1273 | + }, delay); | |
1274 | + }; | |
1275 | + } else { | |
1276 | + return function(step) { | |
1277 | + step(null); | |
1278 | + }; | |
1279 | + } | |
1280 | + }; | |
1281 | + var animationFrame = createAnimationFrame(); | |
1282 | + var startTimeStamp = null; | |
1283 | + var _step = function step(timestamp) { | |
1284 | + if (timestamp === null || this.isStop === true) { | |
1285 | + opts.onProcess && opts.onProcess(1); | |
1286 | + opts.onAnimationFinish && opts.onAnimationFinish(); | |
1287 | + return; | |
1288 | + } | |
1289 | + if (startTimeStamp === null) { | |
1290 | + startTimeStamp = timestamp; | |
1291 | + } | |
1292 | + if (timestamp - startTimeStamp < opts.duration) { | |
1293 | + var process = (timestamp - startTimeStamp) / opts.duration; | |
1294 | + var timingFunction = Timing[opts.timing]; | |
1295 | + process = timingFunction(process); | |
1296 | + opts.onProcess && opts.onProcess(process); | |
1297 | + animationFrame(_step, delay); | |
1298 | + } else { | |
1299 | + opts.onProcess && opts.onProcess(1); | |
1300 | + opts.onAnimationFinish && opts.onAnimationFinish(); | |
1301 | + } | |
1302 | + }; | |
1303 | + _step = _step.bind(this); | |
1304 | + | |
1305 | + animationFrame(_step, delay); | |
1306 | +} | |
1307 | + | |
1308 | +// stop animation immediately | |
1309 | +// and tigger onAnimationFinish | |
1310 | +Animation.prototype.stop = function() { | |
1311 | + this.isStop = true; | |
1312 | +}; | |
1313 | + | |
1314 | +function drawCharts(type, opts, config, context) { | |
1315 | + var _this = this; | |
1316 | + | |
1317 | + var series = opts.series; | |
1318 | + var categories = opts.categories; | |
1319 | + series = fillSeriesColor(series, config); | |
1320 | + | |
1321 | + var _calLegendData = calLegendData(series, opts, config), | |
1322 | + legendHeight = _calLegendData.legendHeight; | |
1323 | + | |
1324 | + config.legendHeight = legendHeight; | |
1325 | + | |
1326 | + var _calYAxisData = calYAxisData(series, opts, config), | |
1327 | + yAxisWidth = _calYAxisData.yAxisWidth; | |
1328 | + | |
1329 | + config.yAxisWidth = yAxisWidth; | |
1330 | + if (categories && categories.length) { | |
1331 | + var _calCategoriesData = calCategoriesData(categories, opts, config), | |
1332 | + xAxisHeight = _calCategoriesData.xAxisHeight, | |
1333 | + angle = _calCategoriesData.angle; | |
1334 | + | |
1335 | + config.xAxisHeight = xAxisHeight; | |
1336 | + config._xAxisTextAngle_ = angle; | |
1337 | + } | |
1338 | + if (type === 'pie' || type === 'ring') { | |
1339 | + config._pieTextMaxLength_ = opts.dataLabel === false ? 0 : getPieTextMaxLength(series); | |
1340 | + } | |
1341 | + | |
1342 | + var duration = opts.animation ? 1000 : 0; | |
1343 | + this.animationInstance && this.animationInstance.stop(); | |
1344 | + switch (type) { | |
1345 | + case 'ring': | |
1346 | + case 'pie': | |
1347 | + this.animationInstance = new Animation({ | |
1348 | + timing: 'easeInOut', | |
1349 | + duration: duration, | |
1350 | + onProcess: function onProcess(process) { | |
1351 | + _this.chartData.pieData = drawPieDataPoints(series, opts, config, context, process); | |
1352 | + drawLegend(opts.series, opts, config, context); | |
1353 | + drawCanvas(opts, context); | |
1354 | + }, | |
1355 | + onAnimationFinish: function onAnimationFinish() { | |
1356 | + _this.event.trigger('renderComplete'); | |
1357 | + } | |
1358 | + }); | |
1359 | + break; | |
1360 | + case 'radar': | |
1361 | + // this.animationInstance = new Animation({ | |
1362 | + // timing: 'easeInOut', | |
1363 | + // duration: duration, | |
1364 | + // onProcess: function onProcess(process) { | |
1365 | + // _this.chartData.radarData = drawRadarDataPoints(series, opts, config, context, process); | |
1366 | + // drawLegend(opts.series, opts, config, context); | |
1367 | + // drawCanvas(opts, context); | |
1368 | + // }, | |
1369 | + // onAnimationFinish: function onAnimationFinish() { | |
1370 | + // _this.event.trigger('renderComplete'); | |
1371 | + // } | |
1372 | + // }); | |
1373 | + break; | |
1374 | + } | |
1375 | +} | |
1376 | + | |
1377 | +// simple event implement | |
1378 | + | |
1379 | +function Event() { | |
1380 | + this.events = {}; | |
1381 | +} | |
1382 | + | |
1383 | +Event.prototype.addEventListener = function(type, listener) { | |
1384 | + this.events[type] = this.events[type] || []; | |
1385 | + this.events[type].push(listener); | |
1386 | +}; | |
1387 | + | |
1388 | +Event.prototype.trigger = function() { | |
1389 | + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { | |
1390 | + args[_key] = arguments[_key]; | |
1391 | + } | |
1392 | + | |
1393 | + var type = args[0]; | |
1394 | + var params = args.slice(1); | |
1395 | + if (!!this.events[type]) { | |
1396 | + this.events[type].forEach(function(listener) { | |
1397 | + try { | |
1398 | + listener.apply(null, params); | |
1399 | + } catch (e) { | |
1400 | + console.error(e); | |
1401 | + } | |
1402 | + }); | |
1403 | + } | |
1404 | +}; | |
1405 | + | |
1406 | +var Charts = function Charts(opts) { | |
1407 | + opts.title = opts.title || {}; | |
1408 | + opts.subtitle = opts.subtitle || {}; | |
1409 | + opts.yAxis = opts.yAxis || {}; | |
1410 | + opts.xAxis = opts.xAxis || {}; | |
1411 | + opts.extra = opts.extra || {}; | |
1412 | + opts.legend = opts.legend === false ? false : true; | |
1413 | + opts.animation = opts.animation === false ? false : true; | |
1414 | + var config$$1 = assign({}, config); | |
1415 | + config$$1.yAxisTitleWidth = opts.yAxis.disabled !== true && opts.yAxis.title ? config$$1.yAxisTitleWidth : 0; | |
1416 | + config$$1.pieChartLinePadding = opts.dataLabel === false ? 0 : config$$1.pieChartLinePadding; | |
1417 | + config$$1.pieChartTextPadding = opts.dataLabel === false ? 0 : config$$1.pieChartTextPadding; | |
1418 | + | |
1419 | + this.opts = opts; | |
1420 | + this.config = config$$1; | |
1421 | + this.context = wx.createCanvasContext(opts.canvasId); | |
1422 | + // store calcuated chart data | |
1423 | + // such as chart point coordinate | |
1424 | + this.chartData = {}; | |
1425 | + this.event = new Event(); | |
1426 | + this.scrollOption = { | |
1427 | + currentOffset: 0, | |
1428 | + startTouchX: 0, | |
1429 | + distance: 0 | |
1430 | + }; | |
1431 | + | |
1432 | + drawCharts.call(this, opts.type, opts, config$$1, this.context); | |
1433 | +}; | |
1434 | + | |
1435 | +Charts.prototype.updateData = function() { | |
1436 | + var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; | |
1437 | + | |
1438 | + this.opts.series = data.series || this.opts.series; | |
1439 | + this.opts.categories = data.categories || this.opts.categories; | |
1440 | + | |
1441 | + this.opts.title = assign({}, this.opts.title, data.title || {}); | |
1442 | + this.opts.subtitle = assign({}, this.opts.subtitle, data.subtitle || {}); | |
1443 | + | |
1444 | + drawCharts.call(this, this.opts.type, this.opts, this.config, this.context); | |
1445 | +}; | |
1446 | + | |
1447 | +Charts.prototype.stopAnimation = function() { | |
1448 | + this.animationInstance && this.animationInstance.stop(); | |
1449 | +}; | |
1450 | + | |
1451 | +Charts.prototype.addEventListener = function(type, listener) { | |
1452 | + this.event.addEventListener(type, listener); | |
1453 | +}; | |
1454 | + | |
1455 | +Charts.prototype.getCurrentDataIndex = function(e) { | |
1456 | + var touches = e.touches && e.touches.length ? e.touches : e.changedTouches; | |
1457 | + if (touches && touches.length) { | |
1458 | + var _touches$ = touches[0], | |
1459 | + x = _touches$.x, | |
1460 | + y = _touches$.y; | |
1461 | + | |
1462 | + if (this.opts.type === 'pie' || this.opts.type === 'ring') { | |
1463 | + return findPieChartCurrentIndex({ | |
1464 | + x: x, | |
1465 | + y: y | |
1466 | + }, this.chartData.pieData); | |
1467 | + } else if (this.opts.type === 'radar') { | |
1468 | + return findRadarChartCurrentIndex({ | |
1469 | + x: x, | |
1470 | + y: y | |
1471 | + }, this.chartData.radarData, this.opts.categories.length); | |
1472 | + } else { | |
1473 | + return findCurrentIndex({ | |
1474 | + x: x, | |
1475 | + y: y | |
1476 | + }, this.chartData.xAxisPoints, this.opts, this.config, Math.abs(this.scrollOption.currentOffset)); | |
1477 | + } | |
1478 | + } | |
1479 | + return -1; | |
1480 | +}; | |
1481 | + | |
1482 | +Charts.prototype.showToolTip = function(e) { | |
1483 | + var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; | |
1484 | + | |
1485 | + if (this.opts.type === 'line' || this.opts.type === 'area') { | |
1486 | + var index = this.getCurrentDataIndex(e); | |
1487 | + var currentOffset = this.scrollOption.currentOffset; | |
1488 | + | |
1489 | + var opts = assign({}, this.opts, { | |
1490 | + _scrollDistance_: currentOffset, | |
1491 | + animation: false | |
1492 | + }); | |
1493 | + if (index > -1) { | |
1494 | + var seriesData = getSeriesDataItem(this.opts.series, index); | |
1495 | + if (seriesData.length === 0) { | |
1496 | + drawCharts.call(this, opts.type, opts, this.config, this.context); | |
1497 | + } else { | |
1498 | + var _getToolTipData = getToolTipData(seriesData, this.chartData.calPoints, index, this.opts.categories, option), | |
1499 | + textList = _getToolTipData.textList, | |
1500 | + offset = _getToolTipData.offset; | |
1501 | + | |
1502 | + opts.tooltip = { | |
1503 | + textList: textList, | |
1504 | + offset: offset, | |
1505 | + option: option | |
1506 | + }; | |
1507 | + drawCharts.call(this, opts.type, opts, this.config, this.context); | |
1508 | + } | |
1509 | + } else { | |
1510 | + drawCharts.call(this, opts.type, opts, this.config, this.context); | |
1511 | + } | |
1512 | + } | |
1513 | +}; | |
1514 | + | |
1515 | +Charts.prototype.scrollStart = function(e) { | |
1516 | + if (e.touches[0] && this.opts.enableScroll === true) { | |
1517 | + this.scrollOption.startTouchX = e.touches[0].x; | |
1518 | + } | |
1519 | +}; | |
1520 | + | |
1521 | +Charts.prototype.scroll = function(e) { | |
1522 | + // TODO throtting... | |
1523 | + if (e.touches[0] && this.opts.enableScroll === true) { | |
1524 | + var _distance = e.touches[0].x - this.scrollOption.startTouchX; | |
1525 | + var currentOffset = this.scrollOption.currentOffset; | |
1526 | + | |
1527 | + var validDistance = calValidDistance(currentOffset + _distance, this.chartData, this.config, this.opts); | |
1528 | + | |
1529 | + this.scrollOption.distance = _distance = validDistance - currentOffset; | |
1530 | + var opts = assign({}, this.opts, { | |
1531 | + _scrollDistance_: currentOffset + _distance, | |
1532 | + animation: false | |
1533 | + }); | |
1534 | + | |
1535 | + drawCharts.call(this, opts.type, opts, this.config, this.context); | |
1536 | + } | |
1537 | +}; | |
1538 | + | |
1539 | +Charts.prototype.scrollEnd = function(e) { | |
1540 | + if (this.opts.enableScroll === true) { | |
1541 | + var _scrollOption = this.scrollOption, | |
1542 | + currentOffset = _scrollOption.currentOffset, | |
1543 | + distance = _scrollOption.distance; | |
1544 | + | |
1545 | + this.scrollOption.currentOffset = currentOffset + distance; | |
1546 | + this.scrollOption.distance = 0; | |
1547 | + } | |
1548 | +}; | |
1549 | + | |
1550 | +module.exports = Charts; | |
\ No newline at end of file | ... | ... |
请
注册
或
登录
后发表评论