Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Contribute to GitLab
Sign in
Toggle navigation
W
WX_h5
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
godwithdh
WX_h5
Commits
6854e9e3
Commit
6854e9e3
authored
Dec 27, 2019
by
张锡奇
Browse files
Options
Browse Files
Download
Plain Diff
Merge branch 'master' of
ssh://47.110.145.204:2222/godwithdh/wx_h5
parents
5da6d8f9
24810931
Hide whitespace changes
Inline
Side-by-side
Showing
9 changed files
with
507 additions
and
108 deletions
+507
-108
search.vue
src/components/search.vue
+1
-1
apiMap.js
src/libs/apiMap.js
+3
-2
util.js
src/libs/util.js
+106
-0
Repayment.vue
src/view/tiip/IntReportForms/Repayment.vue
+20
-11
cost.vue
src/view/tiip/IntReportForms/cost.vue
+127
-11
empAna.vue
src/view/tiip/IntReportForms/empAna.vue
+34
-30
index.vue
src/view/tiip/IntReportForms/index.vue
+1
-1
revenue.vue
src/view/tiip/IntReportForms/revenue.vue
+161
-11
salesStatistics.vue
src/view/tiip/IntReportForms/salesStatistics.vue
+54
-41
No files found.
src/components/search.vue
View file @
6854e9e3
...
...
@@ -24,7 +24,7 @@
<div
class=
"Title"
>
日期范围
</div>
<div
style=
"flex:1;display:flex;"
class=
"DATE"
>
<div
class=
"padding-left-15 dateTime"
>
<datetime
v-model=
"search.dBeginDate"
format=
"YYYY-MM-DD"
@
on-confirm=
"searchData($event,1)"
></datetime>
<datetime
:end-date=
"search.dEndDate"
v-model=
"search.dBeginDate"
format=
"YYYY-MM-DD"
@
on-confirm=
"searchData($event,1)"
></datetime>
<!--
<i
class=
'iconfont icon-right'
></i>
-->
</div>
<span
class=
"line"
/>
...
...
src/libs/apiMap.js
View file @
6854e9e3
...
...
@@ -65,10 +65,11 @@ const methodMap = {
/**
* tiip 小程序
*/
getT
t
ipTotalamount
:{
url
:
'/bianalysis/totalamount/'
,
method
:
'get'
,
host
:
"default"
},
getT
t
ipSellinfo
:{
url
:
'/bianalysis/sellinfo/'
,
method
:
'get'
,
host
:
"default"
},
getT
i
ipTotalamount
:{
url
:
'/bianalysis/totalamount/'
,
method
:
'get'
,
host
:
"default"
},
getT
i
ipSellinfo
:{
url
:
'/bianalysis/sellinfo/'
,
method
:
'get'
,
host
:
"default"
},
getTiipSalesinfo
:{
url
:
'/bianalysis/salesinfo/'
,
method
:
'get'
,
host
:
"default"
},
getTiipPayinfo
:{
url
:
"/bianalysis/payinfo/"
,
method
:
"get"
,
host
:
"default"
},
getTiipReceiveinfo
:{
url
:
"/bianalysis/receiveinfo/"
,
method
:
"get"
,
host
:
"default"
},
getTiipReceive
:{
url
:
"/bianalysis/receivemoney/"
,
method
:
"get"
,
host
:
"default"
},
getTiipCost
:{
url
:
"/bianalysis/costanalysis/"
,
method
:
"get"
,
host
:
"default"
},
...
...
src/libs/util.js
View file @
6854e9e3
...
...
@@ -383,6 +383,112 @@ util.getDate = (type) => {
break
;
}
}
//自动生成颜色
util
.
Colors
=
function
(
hslLength
){
this
.
hslLength
=
hslLength
?
hslLength
:
1
;
this
.
cArray
=
[
"0"
,
"1"
,
"2"
,
"3"
,
"4"
,
"5"
,
"6"
,
"7"
,
"8"
,
"9"
,
"A"
,
"B"
,
"C"
,
"D"
,
"E"
,
"F"
];
this
.
hslArray
=
[];
};
//返回颜色数组
util
.
Colors
.
prototype
.
rgbArray
=
function
()
{
var
self
=
this
;
this
.
hslArray
=
this
.
getHslArray
();
if
(
!
self
.
hslArray
.
length
)
return
[];
var
rgbArray
=
self
.
hslArray
.
map
(
function
(
item
)
{
return
self
.
hslToRgb
.
apply
(
this
,
item
);
});
return
rgbArray
.
map
(
function
(
item
)
{
return
{
//三原色值
value
:
item
,
//16进制的颜色
hex
:
self
.
rgbToHexadecimal
(
item
),
//rgb颜色
rgb
:
item
.
toString
(),
}
});
};
/**
* RGB颜色转为16进制
* @param {Object} item rgb颜色数组
*/
util
.
Colors
.
prototype
.
rgbToHexadecimal
=
function
(
item
)
{
if
(
item
&&
item
.
length
==
3
){
var
a
=
item
[
0
],
b
=
item
[
1
],
c
=
item
[
2
],
d
=
"#"
,
cArray
=
this
.
cArray
;
d
+=
cArray
[
Math
.
floor
(
a
/
16
)]
+
""
+
cArray
[
a
%
16
]
+
""
;
d
+=
cArray
[
Math
.
floor
(
b
/
16
)]
+
""
+
cArray
[
b
%
16
]
+
""
;
d
+=
cArray
[
Math
.
floor
(
c
/
16
)]
+
""
+
cArray
[
c
%
16
]
+
""
;
return
d
;
}
};
/**
* HSL颜色值转换为RGB
* H,S,L 设定在 [0, 1] 之间
* R,G,B 返回在 [0, 255] 之间
*
* @param H 色相
* @param S 饱和度
* @param L 亮度
* @returns Array RGB色值
*/
util
.
Colors
.
prototype
.
hslToRgb
=
function
(
H
,
S
,
L
)
{
var
R
,
G
,
B
;
if
(
+
S
===
0
)
{
R
=
G
=
B
=
L
;
// 饱和度为0 为灰色
}
else
{
var
hue2Rgb
=
function
(
p
,
q
,
t
)
{
if
(
t
<
0
)
t
+=
1
;
if
(
t
>
1
)
t
-=
1
;
if
(
t
<
1
/
6
)
return
p
+
(
q
-
p
)
*
6
*
t
;
if
(
t
<
1
/
2
)
return
q
;
if
(
t
<
2
/
3
)
return
p
+
(
q
-
p
)
*
(
2
/
3
-
t
)
*
6
;
return
p
;
};
var
Q
=
L
<
0.5
?
L
*
(
1
+
S
)
:
L
+
S
-
L
*
S
;
var
P
=
2
*
L
-
Q
;
R
=
hue2Rgb
(
P
,
Q
,
H
+
1
/
3
);
G
=
hue2Rgb
(
P
,
Q
,
H
);
B
=
hue2Rgb
(
P
,
Q
,
H
-
1
/
3
);
}
return
[
Math
.
round
(
R
*
255
),
Math
.
round
(
G
*
255
),
Math
.
round
(
B
*
255
)];
};
// 获取随机HSL
util
.
Colors
.
prototype
.
randomHsl
=
function
()
{
var
H
=
Math
.
random
();
var
S
=
Math
.
random
();
var
L
=
Math
.
random
();
return
[
H
,
S
,
L
];
},
// 获取HSL数组
util
.
Colors
.
prototype
.
getHslArray
=
function
()
{
var
HSL
=
[];
var
hslLength
=
this
.
hslLength
?
this
.
hslLength
:
1
;
for
(
var
i
=
0
;
i
<
hslLength
;
i
++
)
{
var
ret
=
this
.
randomHsl
();
// 颜色相邻颜色差异须大于 0.25
if
(
i
>
0
&&
Math
.
abs
(
ret
[
0
]
-
HSL
[
i
-
1
][
0
])
<
0.25
)
{
i
--
;
continue
;
// 重新获取随机色
}
ret
[
1
]
=
0.7
+
(
ret
[
1
]
*
0.2
);
// [0.7 - 0.9] 排除过灰颜色
ret
[
2
]
=
0.4
+
(
ret
[
2
]
*
0.3
);
// [0.4 - 0.8] 排除过亮过暗色
// 数据转化到小数点后两位
ret
=
ret
.
map
(
function
(
item
)
{
return
parseFloat
(
item
.
toFixed
(
2
));
});
HSL
.
push
(
ret
);
}
return
HSL
;
};
// util.pageReturn = function(){
// /*微信自带返回按钮,不刷新,刷新页面start*/
// if (util.isIos()) {
...
...
src/view/tiip/IntReportForms/Repayment.vue
View file @
6854e9e3
...
...
@@ -33,7 +33,7 @@
}
>tr{
>td{
padding:5px
2
px;
padding:5px
3
px;
}
>td:not(:first-child){
border-left:1px solid #ddd;
...
...
@@ -42,7 +42,7 @@
border-bottom:1px solid #ddd;
}
}
>tr:nth-child(2n)>td{ background:#00C4FF;color:#fff; }
//
>tr:nth-child(2n)>td{ background:#00C4FF;color:#fff; }
}
}
</
style
>
...
...
@@ -78,7 +78,7 @@
</div>
<table
class=
"DATA"
>
<tr>
<td>
#
</td>
<td>
序号
</td>
<td>
回款目标
</td>
<td>
回款金额
</td>
<td>
客户
</td>
...
...
@@ -161,9 +161,6 @@ export default {
})
},
methods
:{
renderChart
(){
},
number
(
val
){
return
(
Math
.
round
((
val
||
0
)
*
100
)
/
100
).
toLocaleString
()
},
...
...
@@ -177,10 +174,16 @@ export default {
value
.
set1
[
0
]
&&
(
this
.
value1
=
value
.
set1
[
0
])
this
.
value2
=
value
.
set2
||
[]
this
.
value3
=
value
.
set3
||
[]
var
isOver
=
false
var
isOver
=
0
this
.
value2
.
forEach
(
v
=>
{
if
(
v
[
"回款金额"
]
>
10000
||
v
[
"回款目标"
]
>
10000
||
v
[
"回款金额"
]
<-
10000
||
v
[
"回款目标"
]
<-
10000
){
isOver
=
true
if
(
Math
.
abs
(
v
[
"回款金额"
])
>
10000
||
Math
.
abs
(
v
[
"回款目标"
])
>
10000
){
isOver
=
isOver
<=
1
?
1
:
isOver
}
if
(
Math
.
abs
(
v
[
"回款金额"
])
>
100000
||
Math
.
abs
(
v
[
"回款目标"
])
>
100000
){
isOver
=
isOver
<=
2
?
2
:
isOver
}
if
(
Math
.
abs
(
v
[
"回款金额"
])
>
1000000
||
Math
.
abs
(
v
[
"回款目标"
])
>
1000000
){
isOver
=
3
}
})
...
...
@@ -196,10 +199,10 @@ export default {
yAxis
:{
type
:
'value'
,
boundaryGap
:
[
0
,
0.01
],
name
:
isOver
?
'(万元)'
:
''
,
name
:
isOver
?
`(
${
String
(
isOver
).
replace
(
'2'
,
'十'
).
replace
(
'3'
,
'百'
)}
万元)`
:
''
,
axisLabel
:{
formatter
(
v
){
return
isOver
?
Math
.
round
(
v
/
100
)
/
100
:
v
;
return
isOver
?
Math
.
round
(
v
/
(
isOver
==
1
?
100
:(
isOver
==
2
?
1000
:
10000
))
)
/
100
:
v
;
}
},
},
...
...
@@ -207,11 +210,17 @@ export default {
name
:
'回款金额'
,
type
:
'bar'
,
data
:
this
.
value2
.
map
(
v
=>
v
[
"回款金额"
]),
itemStyle
:{
color
:
"#1F12F7"
}
},
{
name
:
'回款目标'
,
type
:
'bar'
,
data
:
this
.
value2
.
map
(
v
=>
v
[
"回款目标"
]),
itemStyle
:{
color
:
"#3BA5EF"
}
}
]
},
this
.
option
))
},
...
...
src/view/tiip/IntReportForms/cost.vue
View file @
6854e9e3
...
...
@@ -7,6 +7,16 @@
color:#fff;
text-align: center;
}
.iCard{
position:relative;
}
.noData{
position:absolute;
top:40px;
>img{
width:100%;
}
}
}
</
style
>
<
template
>
...
...
@@ -14,7 +24,7 @@
<searchComponent
:search=
"search"
/>
<div
class=
"iCard"
>
<div
class=
"head"
>
当月总费用进度情况(万)
</div>
<div
ref=
"chart1"
:style=
"
{height:'2
4
0px',opacity:value1.length>0?1:0}"/>
<div
ref=
"chart1"
:style=
"
{height:'2
2
0px',opacity:value1.length>0?1:0}"/>
<div
class=
"noData"
v-if=
"value1.length
<
=
0
"
>
<img
src=
"@/assets/noData.jpg"
>
</div>
...
...
@@ -86,24 +96,130 @@ export default {
this
.
value2
=
value
.
set2
||
[]
this
.
value3
=
value
.
set3
||
[]
this
.
drawBar
(
this
.
chart1
,
this
.
value1
.
map
(
v
=>
{
this
.
value1
.
length
>
0
&&
this
.
drawBar
(
this
.
chart1
,
this
.
value1
.
map
(
v
=>
{
return
{
name
:
v
.
sChargeTypeName
,
value
:
v
.
nAmount
}
}))
this
.
drawLing
(
this
.
chart2
,
this
.
value2
.
map
(
v
=>
{
// return{
// name:v.
// }
}))
this
.
drawLing
()
this
.
value2
.
length
>
0
&&
this
.
drawLing
(
this
.
chart2
,
this
.
value2
,
Object
.
keys
(
this
.
value2
[
0
]).
filter
(
v
=>
v
!=
"nMonth"
))
this
.
value3
.
length
>
0
&&
this
.
drawLing
(
this
.
chart3
,
this
.
value3
,
Object
.
keys
(
this
.
value3
[
0
]).
filter
(
v
=>
v
!=
"nMonth"
))
},
drawLing
(
chart
,
data
){
drawLing
(
chart
,
data
,
title
){
chart
.
setOption
({
tooltip
:
{
trigger
:
'axis'
,
axisPointer
:
{
type
:
'cross'
,
crossStyle
:
{
color
:
'#111'
}
}
},
legend
:
{
data
:
title
,
x
:
'left'
},
grid
:{
left
:
'2%'
,
// 与容器左侧的距离
right
:
'2%'
,
// 与容器右侧的距离
top
:
30
,
height
:
200
,
containLabel
:
true
},
xAxis
:[{
type
:
"category"
,
data
:
data
.
map
(
v
=>
v
.
nMonth
),
axisPointer
:
{
type
:
'shadow'
},
axisTick
:
{
alignWithLabel
:
true
},
axisLabel
:
{
interval
:
0
},
}],
yAxis
:{
type
:
"value"
},
series
:
title
.
map
(
v1
=>
{
return
{
name
:
v1
,
type
:
"line"
,
data
:
data
.
map
(
v2
=>
v2
[
v1
])
}
}),
dataZoom
:
[{
type
:
'inside'
,
show
:
true
,
//flase直接隐藏图形
xAxisIndex
:
[
0
],
left
:
'9%'
,
//滚动条靠左侧的百分比
start
:
0
,
//滚动条的起始位置
end
:
(
window
.
innerWidth
*
1.35
)
/
data
.
length
//滚动条的截止位置(按比例分割你的柱状图x轴长度)
}],
})
},
drawBar
(
chart
,
data
){
chart
.
setOption
({
tooltip
:{
trigger
:
"axis"
,
axisPointer
:{
type
:
"cross"
,
crossStyle
:{
color
:
"#111"
}
}
},
grid
:
{
left
:
'2%'
,
// 与容器左侧的距离
right
:
'2%'
,
// 与容器右侧的距离
top
:
10
,
height
:
200
,
containLabel
:
true
},
xAxis
:
{
type
:
'category'
,
data
:
data
.
map
(
v
=>
v
.
name
),
axisPointer
:
{
type
:
'shadow'
},
axisTick
:
{
alignWithLabel
:
true
},
axisLabel
:
{
interval
:
0
},
},
yAxis
:{
type
:
"value"
,
axisLine
:{
lineStyle
:{
color
:
'#5CADFF'
,
}
}
},
series
:{
type
:
"bar"
,
data
:
data
.
map
(
v
=>
v
.
value
),
barWidth
:
32
,
color
:
new
this
.
$echarts
.
graphic
.
LinearGradient
(
0.5
,
0
,
0.5
,
1
,
[{
offset
:
0
,
color
:
'#708bf6'
},
{
offset
:
1
,
color
:
'#00B2EE'
}])
},
dataZoom
:
[{
type
:
'inside'
,
show
:
true
,
//flase直接隐藏图形
xAxisIndex
:
[
0
],
left
:
'9%'
,
//滚动条靠左侧的百分比
start
:
0
,
//滚动条的起始位置
end
:
(
window
.
innerWidth
*
1.35
)
/
data
.
length
//滚动条的截止位置(按比例分割你的柱状图x轴长度)
}],
})
},
},
...
...
src/view/tiip/IntReportForms/empAna.vue
View file @
6854e9e3
...
...
@@ -35,21 +35,21 @@
<div
class=
"CONTENT"
>
<div
class=
"iCard"
ref=
"chart1"
>
<p>
前十名员工(联动)
</p>
<canvas
id=
"chart1"
v-
show
=
"chartData1.length > 0"
width=
"400"
height=
"260"
style=
"width:100%;height:240px; touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
></canvas>
<canvas
id=
"chart1"
v-
if
=
"chartData1.length > 0"
width=
"400"
height=
"260"
style=
"width:100%;height:240px; touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
></canvas>
<div
class=
"noData"
v-if=
"chartData1.length
<
=
0
"
>
<img
src=
"@/assets/noData.jpg"
class=
"_img"
alt=
""
>
</div>
</div>
<div
class=
"iCard"
ref=
"chart2"
>
<p>
{{
title
}}
每月回款率
</p>
<canvas
id=
"chart2"
v-
show
=
"chartData2.length > 0"
width=
"400"
height=
"260"
style=
"width:100%;height:240px;"
></canvas>
<canvas
id=
"chart2"
v-
if
=
"chartData2.length > 0"
width=
"400"
height=
"260"
style=
"width:100%;height:240px;"
></canvas>
<div
class=
"noData"
v-if=
"chartData2.length
<
=
0
"
>
<img
src=
"@/assets/noData.jpg"
class=
"_img"
alt=
""
>
</div>
</div>
<div
class=
"iCard"
ref=
"chart3"
>
<p>
{{
title
}}
按月统计订单金额
</p>
<canvas
id=
"chart3"
v-
show
=
"chartData3.length > 0"
width=
"400"
height=
"260"
style=
"width:100%;height:240px;"
></canvas>
<canvas
id=
"chart3"
v-
if
=
"chartData3.length > 0"
width=
"400"
height=
"260"
style=
"width:100%;height:240px;"
></canvas>
<div
class=
"noData"
v-if=
"chartData3.length
<
=
0
"
>
<img
src=
"@/assets/noData.jpg"
class=
"_img"
alt=
""
>
</div>
...
...
@@ -164,38 +164,42 @@ export default {
}
},
async
getData
(){
var
res
=
await
this
.
request
(
"getTipSalesinfo"
,{
var
res
=
await
this
.
request
(
"getTi
i
pSalesinfo"
,{
data
:{
dStartDate
:
this
.
search
.
dBeginDate
,
dEndDate
:
this
.
search
.
dEndDate
,
sSalesName
:
"环思软件"
,
}
},
"加载中"
,{})
this
.
title
=
res
.
set1
&&
res
.
set1
[
0
]
&&
res
.
set1
[
0
].
sSalesName
this
.
chartData1
=
res
.
set1
&&
res
.
set1
.
map
(
v
=>
{
return
{
sSalesName
:
v
.
sSalesName
,
nAmount
:
v
.
nAmount
,
iSalesId
:
v
.
sSalesName
,
}
})
||
[]
this
.
tempChartData2
=
res
.
set2
&&
res
.
set2
.
map
(
v
=>
{
return
{
nPaydAmount
:
v
.
nPaydAmount
,
sMonth
:
v
.
sMonth
,
iSalesId
:
v
.
sSalesName
,
}
})
||
[];
this
.
tempChartData3
=
res
.
set3
&&
res
.
set3
.
map
(
v
=>
{
return
{
iSalesId
:
v
.
sSalesName
,
sMonth
:
v
.
sMonth
,
nAmount
:
v
.
nAmount
,
}
})
||
[];
this
.
chartData2
=
res
.
set2
&&
res
.
set2
.
filter
(
v
=>
this
.
chartData1
.
length
>
0
&&
v
.
iSalesId
==
this
.
chartData1
[
0
].
iSalesId
)
||
[]
this
.
chartData3
=
res
.
set3
&&
res
.
set3
.
filter
(
v
=>
this
.
chartData1
.
length
>
0
&&
v
.
iSalesId
==
this
.
chartData1
[
0
].
iSalesId
)
||
[]
if
(
res
.
set1
.
length
>
0
){
this
.
title
=
res
.
set1
[
0
].
sSalesName
this
.
chartData1
=
res
.
set1
.
map
(
v
=>
{
return
{
sSalesName
:
v
.
sSalesName
,
nAmount
:
v
.
nAmount
,
iSalesId
:
v
.
sSalesName
,
}
})
}
if
(
res
.
set2
.
length
>
0
){
this
.
tempChartData2
=
res
.
set2
.
map
(
v
=>
{
return
{
nPaydAmount
:
v
.
nPaydAmount
,
sMonth
:
v
.
sMonth
,
iSalesId
:
v
.
sSalesName
,
}
})
this
.
chartData2
=
this
.
tempChartData2
.
filter
(
v
=>
this
.
chartData1
.
length
>
0
&&
v
.
iSalesId
==
this
.
chartData1
[
0
].
iSalesId
)
}
if
(
res
.
set3
.
length
>
0
){
this
.
tempChartData3
=
res
.
set3
.
map
(
v
=>
{
return
{
iSalesId
:
v
.
sSalesName
,
sMonth
:
v
.
sMonth
,
nAmount
:
v
.
nAmount
,
}
})
this
.
chartData3
=
this
.
tempChartData3
.
filter
(
v
=>
this
.
chartData1
.
length
>
0
&&
v
.
iSalesId
==
this
.
chartData1
[
0
].
iSalesId
)
}
},
},
}
...
...
src/view/tiip/IntReportForms/index.vue
View file @
6854e9e3
...
...
@@ -171,7 +171,7 @@ export default {
},
methods
:{
async
init
(){
var
res
=
await
this
.
request
(
"getTipTotalamount"
,{},
"加载中"
,{})
var
res
=
await
this
.
request
(
"getTi
i
pTotalamount"
,{},
"加载中"
,{})
this
.
list
=
[
{
child
:[
...
...
src/view/tiip/IntReportForms/revenue.vue
View file @
6854e9e3
<
style
lang=
"less"
>
@import url("../../../styles/common.less");
#revenue{
.DATA{
width:100%;
>tr{
>td{
padding:8px 4px;
&:first-child{
width:50px;
&>div>span{
background: rgb(146, 190, 7);
box-shadow: 2px 2px 3px rgba(146, 190, 7,0.3);
color: #fff;
border-radius: 50%;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
padding: 0 5px;
font-size: 17px;
}
}
&:last-child{
text-align: right;
}
}
&:not(:first-child)>td{
border-bottom:1px solid #ddd;
&:first-child>div>span{
width:20px;
height:20px;
font-size:10px;
background:rgb(var(--color,'245, 104, 96'));
box-shadow: 2px 2px 3px rgba(var(--color,'245, 104, 96'),0.3);
}
&:nth-child(n+3){
color:#777;
}
}
&.active{
background:#f2f2f2;
}
}
}
}
</
style
>
<
template
>
<div
id=
"revenue"
>
<tab
active-color=
"#708BF6"
>
<tab-item
:selected=
"tabIndex=='getTiipReceiveinfo'"
@
on-item-click=
"tabIndex='getTiipReceiveinfo'"
>
收入
</tab-item>
<tab-item
:selected=
"tabIndex=='getTiipPayinfo'"
@
on-item-click=
"tabIndex='getTiipPayinfo'"
>
支出
</tab-item>
</tab>
<searchComponent
:search=
'search'
/>
<div
class=
"iCard"
>
<div
class=
"iCard"
style=
"margin-bottom:8px;"
>
<div
ref=
'chart'
style=
"width:100%;height:150px;"
/>
<table>
<table
class=
"DATA"
>
<tr>
<td><div>
<span>
支
</span>
</div></td>
<td><div>
<span>
总支出
</span>
</div></td>
<td><div></div></td>
<td><div>
<span>
{{
allPay
}}
</span>
</div></td>
<td><div>
<span>
{{
allPay
.
toLocaleString
()
}}
</span>
</div></td>
</tr>
<tr
v-for=
"(v,k) in list"
:key=
"k"
@
click=
"select(k)"
:class=
"
{active:selectIndex==k}">
<td><div>
<span
:style=
"
{'--color':colorList[k].rgb}">
{{
v
.
name
.
slice
(
0
,
1
)
}}
</span>
</div></td>
<td><div>
<span>
{{
v
.
name
}}
</span>
</div></td>
<td><div>
<span>
{{
v
.
percent
}}
%
</span>
</div></td>
<td><div>
<span>
{{
v
.
value
.
toLocaleString
()
}}
</span>
</div></td>
</tr>
</table>
</div>
...
...
@@ -22,13 +77,14 @@
import
Util
from
'@/libs/util.js'
import
{
Confirm
}
from
'vux'
import
searchComponent
from
'@/components/search'
import
echarts
from
'echarts'
;
import
{
Tab
,
TabItem
}
from
'vux'
export
default
{
name
:
"revenue"
,
components
:{
searchComponent
},
components
:{
searchComponent
,
Tab
,
TabItem
},
data
(){
return
{
tabIndex
:
"getTiipReceiveinfo"
,
search
:{
dBeginDate
:
Util
.
dateFormat
(
new
Date
(),
'yyyy-MM-01'
),
dEndDate
:
Util
.
dateFormat
(
new
Date
(),
'yyyy-MM-dd'
),
...
...
@@ -36,12 +92,14 @@ export default {
chart
:
null
,
list
:[],
colorList
:[],
allPay
:
0
,
selectIndex
:
-
1
,
}
},
mounted
(){
this
.
$nextTick
(()
=>
{
this
.
chart
=
this
.
$echarts
.
init
(
this
.
$refs
.
chart
)
this
.
init
(
)
this
.
searchData
()
})
...
...
@@ -51,17 +109,109 @@ export default {
})
},
methods
:{
init
(){
this
.
chart
=
this
.
$echarts
.
init
(
this
.
$refs
.
chart
)
this
.
chart
.
getZr
().
on
(
"click"
,
v
=>
{
if
(
v
.
target
){
this
.
select
(
v
.
target
.
dataIndex
)
}
else
{
this
.
select
(
-
1
)
}
})
},
async
searchData
(){
this
.
list
=
await
this
.
request
(
"getTipPayinfo"
,{
var
value
=
await
this
.
request
(
this
.
tabIndex
,{
data
:{
dStartDate
:
this
.
search
.
dBeginDate
,
dEndDate
:
this
.
search
.
dEndDate
}
},
"加载中"
,{})
if
(
this
.
tabIndex
==
"getTiipReceiveinfo"
){
this
.
list
=
value
.
set1
.
filter
(
v
=>
v
.
nAmount
!=
0
&&
v
.
sReceivableType
).
map
(
v
=>
{
return
{
name
:
v
.
sReceivableType
,
value
:
v
.
nAmount
,
}
})
}
else
{
this
.
list
=
value
.
set1
.
filter
(
v
=>
v
.
nAmount
!=
0
&&
v
.
sPayableType
).
map
(
v
=>
{
return
{
name
:
v
.
sPayableType
,
value
:
v
.
nAmount
,
}
})
}
this
.
colorList
=
new
Util
.
Colors
(
this
.
list
.
length
).
rgbArray
()
this
.
allPay
=
0
// this.list.forEach(v=>{
// this.allPay+=v.nAmount
// })
this
.
list
.
forEach
(
v
=>
this
.
allPay
+=
v
.
value
)
this
.
allPay
=
Math
.
round
(
this
.
allPay
*
100
)
/
100
this
.
list
.
forEach
(
v
=>
{
v
.
percent
=
Math
.
round
(
v
.
value
/
this
.
allPay
*
10000
)
/
100
})
this
.
chart
.
setOption
({
tooltip
:{
trigger
:
'item'
,
formatter
:
"{a} <br/>{b} : {c} ({d}%)"
,
position
:[
10
,
10
],
},
color
:
this
.
colorList
.
map
(
v
=>
v
.
hex
),
series
:[
{
name
:
'访问来源'
,
type
:
'pie'
,
radius
:
[
'60%'
,
'80%'
],
avoidLabelOverlap
:
false
,
label
:
{
normal
:
{
show
:
false
,
position
:
'center'
,
formatter
(
v
){
return
v
.
name
+
"
\n
"
+
v
.
value
+
"
\n
("
+
v
.
percent
+
"%)"
;
},
},
emphasis
:
{
show
:
true
,
textStyle
:
{
fontSize
:
'10'
,
fontWeight
:
'bold'
}
}
},
labelLine
:
{
normal
:
{
show
:
true
}
},
data
:
this
.
list
.
map
(
v
=>
{
return
{
name
:
v
.
name
,
value
:
v
.
value
}
}),
}
],
})
},
select
(
index
){
this
.
selectIndex
=
index
this
.
list
.
forEach
((
v
,
i
)
=>
{
this
.
chart
.
dispatchAction
({
type
:
"downplay"
,
seriesIndex
:
i
})
})
if
(
index
>=
0
){
this
.
chart
.
dispatchAction
({
type
:
"highlight"
,
dataIndex
:
index
})
}
},
},
watch
:{
tabIndex
(){
this
.
searchData
()
},
},
}
...
...
src/view/tiip/IntReportForms/salesStatistics.vue
View file @
6854e9e3
...
...
@@ -167,8 +167,9 @@ export default {
this
.
resize
(
this
.
chart6
,
1.35
)
})
})
this
.
searchData
();
this
.
$nextTick
(()
=>
{
this
.
searchData
();
})
this
.
global
.
$off
(
'searchData'
);
this
.
global
.
$on
(
'searchData'
,()
=>
{
...
...
@@ -229,12 +230,12 @@ export default {
this
.
showValue
()
},
async
getChartData
(){
var
value
=
await
this
.
request
(
'getTipSellinfo'
,{
var
value
=
await
this
.
request
(
'getTi
i
pSellinfo'
,{
params
:{
dStartDate
:
this
.
search
.
dBeginDate
,
dEndDate
:
this
.
search
.
dEndDate
}
},
true
,{
iProjectId
:
this
.
iProjectId
})
},
"加载中"
,{
iProjectId
:
this
.
iProjectId
})
Object
.
assign
(
this
.
chartData
,{
nOrderSameRatio
:
Math
.
round
((
value
.
set1
&&
value
.
set1
[
0
]
&&
value
.
set1
[
0
].
nOrderSameRatio
||
0
)
*
100
)
/
100
,
nOrderRingRatio
:
Math
.
round
((
value
.
set2
&&
value
.
set2
[
0
]
&&
value
.
set2
[
0
].
nOrderRingRatio
||
0
)
*
100
)
/
100
,
...
...
@@ -246,8 +247,18 @@ export default {
iSellCount
:
value
.
set4
&&
value
.
set4
[
0
]
&&
value
.
set4
[
0
].
iSellCount
||
0
,
nSellAmount
:(
Math
.
round
((
value
.
set4
&&
value
.
set4
[
0
]
&&
value
.
set4
[
0
].
nSellAmount
||
0
)
/
100
)
/
100
).
toLocaleString
(),
},
set5
:
typeof
value
.
set5
==
'object'
&&
value
.
set5
.
length
>
0
&&
value
.
set5
||
[],
set6
:
typeof
value
.
set6
==
'object'
&&
value
.
set6
.
length
>
0
&&
value
.
set6
||
[],
set5
:
typeof
value
.
set5
==
'object'
&&
value
.
set5
.
length
>
0
&&
value
.
set5
.
map
(
v
=>
{
return
{
name
:
v
.
sCustomerName
,
value
:
v
.
nAmount
}
})
||
[],
set6
:
typeof
value
.
set6
==
'object'
&&
value
.
set6
.
length
>
0
&&
value
.
set6
.
map
(
v
=>
{
return
{
name
:
v
.
sSampleMaterialNo
,
value
:
v
.
nAmount
}
})
||
[],
})
},
...
...
@@ -399,27 +410,28 @@ export default {
}
}
},
toolbox
:
{
feature
:
{
// dataView: {show: true, readOnly: false},
// magicType: {show: true, type: ['line', 'bar']},
restore
:
{
show
:
true
},
// saveAsImage: {show: true}
},
},
//
toolbox: {
//
feature: {
//
// dataView: {show: true, readOnly: false},
//
// magicType: {show: true, type: ['line', 'bar']},
//
restore: {show: true},
//
// saveAsImage: {show: true}
//
},
//
},
grid
:
{
left
:
'2%'
,
// 与容器左侧的距离
right
:
'2%'
,
// 与容器右侧的距离
height
:
160
,
top
:
"40"
,
height
:
180
,
containLabel
:
true
},
legend
:
{
data
:[
'金额'
,
'数量'
],
x
:
'left'
},
//
legend: {
//
data:['金额','数量'],
//
x: 'left'
//
},
xAxis
:
[{
type
:
'category'
,
data
:
data
.
value
.
map
(
v
=>
v
.
sCustomerN
ame
),
data
:
data
.
value
.
map
(
v
=>
v
.
n
ame
),
axisPointer
:
{
type
:
'shadow'
},
...
...
@@ -427,7 +439,8 @@ export default {
alignWithLabel
:
true
},
axisLabel
:
{
interval
:
0
interval
:
0
,
rotate
:
-
15
,
},
}],
yAxis
:
[
...
...
@@ -444,20 +457,20 @@ export default {
}
}
},
{
type
:
'value'
,
name
:
'数量'
,
scale
:
true
,
axisLabel
:
{
formatter
:
'{value}'
}
}
//
{
//
type: 'value',
//
name: '数量',
//
scale:true,
//
axisLabel: {
//
formatter: '{value}'
//
}
//
}
],
series
:
[
{
name
:
'金额'
,
type
:
'bar'
,
data
:
data
.
value
.
map
(
v
=>
v
.
nAmount
),
data
:
data
.
value
.
map
(
v
=>
v
.
value
),
barWidth
:
32
,
color
:
new
echarts
.
graphic
.
LinearGradient
(
0.5
,
0
,
0.5
,
1
,
[{
offset
:
0
,
...
...
@@ -467,17 +480,17 @@ export default {
color
:
'#00B2EE'
}])
},
{
name
:
'数量'
,
type
:
'line'
,
yAxisIndex
:
1
,
data
:
data
.
value
.
map
(
v
=>
v
.
nQty
),
itemStyle
:{
normal
:{
color
:
'#708bf6'
}
}
}
//
{
//
name:'数量',
//
type:'line',
//
yAxisIndex: 1,
//
data:data.value.map(v=>v.nQty),
//
itemStyle:{
//
normal:{
//
color:'#708bf6'
//
}
//
}
//
}
],
dataZoom
:
[{
type
:
'inside'
,
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment