Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
M
Muse
Project
Project
Details
Activity
Releases
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
罗超
Muse
Commits
2c383fd7
Commit
2c383fd7
authored
Oct 18, 2019
by
华国豪
🙄
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
销售数据统计
parent
9e5fdfd3
Hide whitespace changes
Inline
Side-by-side
Showing
7 changed files
with
1591 additions
and
312 deletions
+1591
-312
App.vue
src/App.vue
+1
-2
dataLook.vue
src/components/viitto/dataLook.vue
+14
-2
lineChart.vue
src/components/viitto/lineChart.vue
+217
-294
lineChart2.vue
src/components/viitto/lineChart2.vue
+79
-14
saleDataLook.vue
src/components/viitto/saleDataLook.vue
+756
-0
saleLineChart.vue
src/components/viitto/saleLineChart.vue
+518
-0
router.js
src/router.js
+6
-0
No files found.
src/App.vue
View file @
2c383fd7
...
...
@@ -38,8 +38,7 @@ export default {
<
style
>
@import
'./assets/global/font.css'
;
@import
'//at.alicdn.com/t/font_988027_pm4p4dmbxwe.css'
;
@import
'//at.alicdn.com/t/font_635492_i78o4snnnqp.css'
;
@import
'//at.alicdn.com/t/font_988027_icjaw26gr1.css'
;
@import
'./assets/global/global.css'
;
body
,
html
{
padding
:
0px
;
...
...
src/components/viitto/dataLook.vue
View file @
2c383fd7
...
...
@@ -586,18 +586,22 @@
</el-col>
</el-row>
<el-row>
<lineChart
v-if=
"chartShow"
:zoom=
"zoom"
:preferpriceList=
"preferpriceList"
:guestnumList=
"guestnumList"
:clickcountList=
"clickcountList"
:ordercountList=
"ordercountList"
:unitpriceList=
"unitpriceList"
:day_total_guestprice=
"day_total_guestprice"
:dateList=
"dateList"
/>
<lineChart
v-if=
"chartShow && (!RB_Branch_id || RB_Branch_id !== 0)"
:zoom=
"zoom"
:inquireList=
"inquireList"
:preferpriceList=
"preferpriceList"
:guestnumList=
"guestnumList"
:clickcountList=
"clickcountList"
:ordercountList=
"ordercountList"
:unitpriceList=
"unitpriceList"
:day_total_guestprice=
"day_total_guestprice"
:dateList=
"dateList"
/>
<lineChart2
v-if=
"chartShow && RB_Branch_id == 0"
:zoom=
"zoom"
:inquireList=
"inquireList"
:preferpriceList=
"preferpriceList"
:guestnumList=
"guestnumList"
:clickcountList=
"clickcountList"
:ordercountList=
"ordercountList"
:unitpriceList=
"unitpriceList"
:day_total_guestprice=
"day_total_guestprice"
:dateList=
"dateList"
/>
<!--
<lineChart2
v-if=
"chartShow"
:zoom=
"zoom"
:inquireList=
"inquireList"
:preferpriceList=
"preferpriceList"
:guestnumList=
"guestnumList"
:clickcountList=
"clickcountList"
:ordercountList=
"ordercountList"
:unitpriceList=
"unitpriceList"
:day_total_guestprice=
"day_total_guestprice"
:dateList=
"dateList"
/>
-->
</el-row>
</div>
</div>
</
template
>
<
script
>
import
lineChart
from
"./lineChart2"
;
import
lineChart
from
"./lineChart"
;
import
lineChart2
from
"./lineChart2"
;
import
lineChartK
from
"./lineChartK"
;
export
default
{
components
:
{
lineChart
,
lineChart2
,
lineChartK
},
data
(){
...
...
@@ -644,6 +648,7 @@ export default {
day_order_statics
:
[],
day_click_statics
:
[],
day_history_preferprice
:
[],
inquireList
:
[],
zoom
:
1
,
day_line_statics
:
[],
day_total_guestprice
:
{},
...
...
@@ -655,6 +660,7 @@ export default {
Status
:
0
,
},
companyList
:
[],
RB_Branch_id
:
null
}
},
watch
:
{
...
...
@@ -662,6 +668,10 @@ export default {
this
.
loadRegionChild
(
nv
)
},
},
created
(){
let
user
=
localStorage
.
user
?
JSON
.
parse
(
localStorage
.
user
)
:
''
if
(
user
)
{
this
.
RB_Branch_id
=
user
.
RB_Branch_id
}
this
.
apipost
(
"line_post_GetAllList_V2"
,
{
LineDirection
:
0
},
res
=>
{
if
(
res
.
data
.
resultCode
==
1
)
{
let
data
=
res
.
data
.
data
;
...
...
@@ -763,6 +773,8 @@ export default {
this
.
ordercountList
=
data
.
day_guestprice
.
ordercountList
// 时间
this
.
dateList
=
data
.
day_guestprice
.
dateList
// 询价
this
.
inquireList
=
data
.
day_guestprice
.
inquireList
// 合计
this
.
day_total_guestprice
=
data
.
day_total_guestprice
[
0
]
this
.
chartShow
=
true
;
...
...
src/components/viitto/lineChart.vue
View file @
2c383fd7
...
...
@@ -30,8 +30,6 @@
</div>
</
template
>
<
script
>
let
preferpriceList
=
[],
guestnumList
=
[],
clickcountList
=
[],
ordercountList
=
[],
unitpriceList
=
[],
day_total_guestprice
=
[],
dateList
=
[];
let
myChart
=
null
export
default
{
props
:[
'preferpriceList'
,
...
...
@@ -41,6 +39,7 @@ export default {
'unitpriceList'
,
'day_total_guestprice'
,
'dateList'
,
'inquireList'
,
'zoom'
],
data
(){
...
...
@@ -49,17 +48,10 @@ export default {
},
created
(){
},
mounted
()
{
myChart
=
this
.
$echarts
.
init
(
this
.
$refs
.
myecharts
);
preferpriceList
=
this
.
preferpriceList
guestnumList
=
this
.
guestnumList
clickcountList
=
this
.
clickcountList
ordercountList
=
this
.
ordercountList
unitpriceList
=
this
.
unitpriceList
day_total_guestprice
=
this
.
day_total_guestprice
dateList
=
this
.
dateList
this
.
init
()
},
methods
:{
init
()
{
let
myChart
=
this
.
$echarts
.
init
(
this
.
$refs
.
myecharts
);
var
dataAxis
=
[];
let
_this
=
this
;
let
option
=
{
...
...
@@ -86,9 +78,9 @@ export default {
{
show
:
true
,
realtime
:
true
,
start
:
9
9
,
start
:
9
0
,
end
:
100
,
xAxisIndex
:
[
0
,
1
],
xAxisIndex
:
[
0
,
1
,
2
,
3
],
textStyle
:
{
color
:
"#ffffff"
},
...
...
@@ -101,10 +93,9 @@ export default {
{
type
:
'inside'
,
realtime
:
true
,
start
:
9
9
,
start
:
9
0
,
end
:
100
,
xAxisIndex
:
[
0
,
1
],
bottom
:
0
,
xAxisIndex
:
[
0
,
1
,
2
,
3
],
textStyle
:
{
color
:
"#ffffff"
},
...
...
@@ -121,79 +112,70 @@ export default {
},
grid
:
[{
left
:
50
,
right
:
50
,
// height: '17%'
left
:
80
,
right
:
10
,
top
:
'5%'
,
height
:
'16%'
},
{
left
:
80
,
right
:
10
,
top
:
'28%'
,
height
:
'16%'
},
{
left
:
80
,
right
:
10
,
top
:
'51%'
,
height
:
'16%'
},
{
left
:
80
,
right
:
10
,
top
:
'74%'
,
height
:
'16%'
}
// , {
// left: 50,
// right: 50,
// top: '31%',
// height: '17%'
// }, {
// left: 50,
// right: 50,
// top: '55%',
// height: '17%'
// }, {
// left: 50,
// right: 50,
// top: '80%',
// height: '17%'
// }
],
xAxis
:
[
{
{
gridIndex
:
0
,
type
:
'category'
,
boundaryGap
:
false
,
data
:
dateList
,
// "show": false,
axisLabel
:
{
color
:
'#fff'
,
formatter
:
function
(
value
,
index
)
{
return
value
.
substring
(
0
,
10
);
}
},
data
:
_this
.
dateList
,
position
:
'bottom'
,
"show"
:
false
,
},
{
gridIndex
:
1
,
type
:
'category'
,
boundaryGap
:
false
,
data
:
_this
.
dateList
,
position
:
'bottom'
,
"show"
:
false
,
},
{
gridIndex
:
2
,
type
:
'category'
,
boundaryGap
:
false
,
data
:
dateList
,
data
:
_this
.
dateList
,
position
:
'bottom'
,
"show"
:
false
,
},
// {
// gridIndex: 1,
// type : 'category',
// boundaryGap : false,
// data: _this.dateList,
// position: 'bottom',
// "show": false
// },
// {
// gridIndex: 2,
// type : 'category',
// boundaryGap : false,
// data: _this.dateList,
// position: 'bottom',
// "show": false,
// },
// {
// gridIndex: 3,
// type : 'category',
// boundaryGap : false,
// data: _this.dateList,
// position: 'bottom',
// "show": true,
// axisLabel: {
// color: '#fff',
// },
// }
{
gridIndex
:
3
,
type
:
'category'
,
boundaryGap
:
false
,
data
:
_this
.
dateList
,
position
:
'bottom'
,
"show"
:
true
,
axisLabel
:
{
color
:
'#fff'
,
},
}
],
yAxis
:
[
{
gridIndex
:
0
,
name
:
'
人数 '
+
_this
.
day_total_guestprice
.
GuestNum
+
'人'
,
{
gridIndex
:
0
,
name
:
'
报名单数 '
+
_this
.
day_total_guestprice
.
OrderCount
,
type
:
'value'
,
inverse
:
false
,
splitLine
:
{
lineStyle
:
{
color
:
'#30374E'
,
...
...
@@ -202,98 +184,77 @@ export default {
},
nameTextStyle
:
{
color
:
'#ffffff'
,
padding
:
[
0
,
0
,
0
,
6
0
],
padding
:
[
0
,
0
,
0
,
8
0
],
fontSize
:
18
},
axisLabel
:
{
color
:
'#34C69C'
,
color
:
'#3FD2F3'
,
}
},
{
gridIndex
:
1
,
name
:
'收客人头数 '
+
_this
.
day_total_guestprice
.
GuestNum
,
type
:
'value'
,
inverse
:
false
,
splitLine
:
{
lineStyle
:
{
color
:
'#30374E'
,
type
:
'dashed'
}
},
nameTextStyle
:
{
color
:
'#ffffff'
,
padding
:
[
0
,
0
,
0
,
80
],
fontSize
:
18
},
axisLabel
:
{
color
:
'#32ff7e'
,
}
},
{
gridIndex
:
0
,
name
:
'价格'
,
type
:
'value'
,
position
:
'right'
,
splitLine
:
{
show
:
false
,
lineStyle
:
{
color
:
'#30374E'
,
type
:
'dashed'
gridIndex
:
2
,
name
:
'产品点击 '
+
_this
.
day_total_guestprice
.
ClickCount
,
type
:
'value'
,
inverse
:
false
,
splitLine
:
{
lineStyle
:
{
color
:
'#30374E'
,
type
:
'dashed'
}
},
nameTextStyle
:
{
color
:
'#ffffff'
,
padding
:
[
10
,
0
,
0
,
110
],
fontSize
:
18
},
axisLabel
:
{
color
:
'#EE4454'
,
}
},
nameTextStyle
:
{
color
:
'#ffffff'
,
padding
:
[
0
,
60
,
0
,
0
],
fontSize
:
18
},
axisLabel
:
{
color
:
'#12BBFF'
,
},
},
// {
// gridIndex: 1,
// name : '成交总量 ¥'+ _this.day_total_guestprice.PreferPrice +'元',
// type : 'value',
// inverse: false,
// splitLine: {
// lineStyle: {
// color: '#30374E',
// type: 'dashed'
// }
// },
// nameTextStyle: {
// color: '#ffffff',
// padding: [0, 0, 0, 160],
// fontSize: 18
// },
// axisLabel: {
// color: '#F5AF19',
// }
// },
// {
// gridIndex: 2,
// name : '报名单数 '+ _this.day_total_guestprice.OrderCount,
// type : 'value',
// inverse: false,
// splitLine: {
// lineStyle: {
// color: '#30374E',
// type: 'dashed'
// }
// },
// nameTextStyle: {
// color: '#ffffff',
// padding: [0, 0, 0, 80],
// fontSize: 18
// },
// axisLabel: {
// color: '#3FD2F3',
// }
// },
// {
// gridIndex: 3,
// name : '产品点击 '+ _this.day_total_guestprice.ClickCount,
// type : 'value',
// inverse: false,
// splitLine: {
// lineStyle: {
// color: '#30374E',
// type: 'dashed'
// }
// },
// nameTextStyle: {
// color: '#ffffff',
// padding: [10, 0, 0, 110],
// fontSize: 18
// },
// axisLabel: {
// color: '#EE4454',
// }
// }
{
gridIndex
:
3
,
name
:
'询价统计 '
+
_this
.
day_total_guestprice
.
InquireCount
,
type
:
'value'
,
inverse
:
false
,
splitLine
:
{
lineStyle
:
{
color
:
'#30374E'
,
type
:
'dashed'
}
},
nameTextStyle
:
{
color
:
'#ffffff'
,
padding
:
[
10
,
0
,
0
,
110
],
fontSize
:
18
},
axisLabel
:
{
color
:
'rgb(106, 176, 76)'
,
}
}
],
series
:
[
{
name
:
'
人
数'
,
name
:
'
报名单
数'
,
type
:
'line'
,
xAxisIndex
:
0
,
yAxisIndex
:
0
,
...
...
@@ -301,160 +262,122 @@ export default {
hoverAnimation
:
true
,
smooth
:
true
,
showSymbol
:
false
,
data
:
guestnum
List
,
data
:
_this
.
ordercount
List
,
itemStyle
:
{
borderWidth
:
2
,
color
:
'#
0F56FF
'
,
shadowBlur
:
10
,
color
:
'#
3FD2F3
'
,
shadowBlur
:
5
,
shadowColor
:
'rgba(255,250,0,1)'
},
sampling
:
'average'
,
lineStyle
:
{
color
:
"#
12BBFF
"
,
shadowBlur
:
0
,
width
:
2
,
// shadowColor: "#0F56FF
"
color
:
"#
9345F8
"
,
shadowBlur
:
2
,
width
:
1
,
shadowColor
:
"#3FD2F3
"
},
areaStyle
:
{
normal
:
{
color
:
new
this
.
$echarts
.
graphic
.
LinearGradient
(
0
,
0
,
0
,
1
,
[
{
offset
:
0
,
color
:
"rgba(1
8,187,255
,1)"
},
{
offset
:
1
,
color
:
"rgba(15,86,255
,0)"
}
{
offset
:
0
,
color
:
"rgba(1
47,69,248
,1)"
},
{
offset
:
.
8
,
color
:
"rgba(147,69,248
,0)"
}
])
}
},
tooltip
:
{
formatter
:
'{b}: {c}'
}
},
,
{
name
:
'价格'
,
type
:
'line'
,
xAxisIndex
:
1
,
yAxisIndex
:
1
,
symbolSize
:
2
,
hoverAnimation
:
true
,
smooth
:
true
,
// symbol: 'none',
showSymbol
:
false
,
data
:
unitpriceList
,
sampling
:
'average'
,
itemStyle
:
{
borderWidth
:
2
,
color
:
'#44D6AC'
,
shadowBlur
:
10
,
shadowColor
:
'rgba(255,250,0,1)'
},
lineStyle
:
{
color
:
"#A7DE8A"
,
shadowBlur
:
0
,
width
:
2
,
// shadowColor: "#44D6AC"
},
areaStyle
:
{
normal
:
{
color
:
new
this
.
$echarts
.
graphic
.
LinearGradient
(
0
,
0
,
0
,
1
,
[
{
offset
:
0
,
color
:
"rgba(167,222,138,1)"
},
{
offset
:
1
,
color
:
"rgba(167,222,138,0)"
}
])
}
},
name
:
'收客人头数'
,
type
:
'line'
,
xAxisIndex
:
1
,
yAxisIndex
:
1
,
symbolSize
:
2
,
hoverAnimation
:
true
,
smooth
:
true
,
showSymbol
:
false
,
data
:
_this
.
guestnumList
,
itemStyle
:
{
borderWidth
:
2
,
color
:
'#3FD2F3'
,
shadowBlur
:
5
,
shadowColor
:
'rgba(255,250,0,1)'
},
lineStyle
:
{
color
:
"#32ff7e"
,
shadowBlur
:
2
,
width
:
1
,
shadowColor
:
"#3ae374"
},
areaStyle
:
{
normal
:
{
color
:
new
this
.
$echarts
.
graphic
.
LinearGradient
(
0
,
0
,
0
,
1
,
[
{
offset
:
0
,
color
:
"rgba(50, 255, 126,1)"
},
{
offset
:
.
8
,
color
:
"rgba(50, 255, 126,0)"
}
])
}
},
},
// {
// name:'成交总量',
// type:'line',
// xAxisIndex: 2,
// yAxisIndex: 2,
// symbolSize: 2,
// hoverAnimation: true,
// smooth: true,
// showSymbol: false,
// data: _this.preferpriceList,
// itemStyle: {
// borderWidth: 2,
// color: '#F5AF19',
// shadowBlur: 10,
// shadowColor: 'rgba(255,250,0,1)'
// },
// lineStyle: {
// color: "#F5AF19",
// shadowBlur: 10,
// width: 5,
// shadowColor: "#F5AF19"
// },
// areaStyle: {
// normal: {
// color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
// { offset: 0, color: "rgba(245,175,25,1)" },
// { offset: 1, color: "rgba(245,175,25,0)" }
// ])
// }
// },
// }
// ,
// {
// name:'报名单数',
// type:'line',
// xAxisIndex: 3,
// yAxisIndex: 3,
// symbolSize: 2,
// hoverAnimation: true,
// smooth: true,
// showSymbol: false,
// data: _this.ordercountList,
// itemStyle: {
// borderWidth: 2,
// color: '#3FD2F3',
// shadowBlur: 10,
// shadowColor: 'rgba(255,250,0,1)'
// },
// lineStyle: {
// color: "#9345F8",
// shadowBlur: 10,
// width: 5,
// shadowColor: "#3FD2F3"
// },
// areaStyle: {
// normal: {
// color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
// { offset: 0, color: "rgba(147,69,248,1)" },
// { offset: 1, color: "rgba(147,69,248,0)" }
// ])
// }
// },
// }
// ,
// {
// name:'产品点击',
// type:'line',
// xAxisIndex: 4,
// yAxisIndex: 4,
// symbolSize: 2,
// hoverAnimation: true,
// smooth: true,
// showSymbol: false,
// data: _this.clickcountList,
// itemStyle: {
// borderWidth: 2,
// color: '#EE4454',
// shadowBlur: 10,
// shadowColor: 'rgba(255,250,0,1)'
// },
// lineStyle: {
// color: "#FFAA85",
// width: 5,
// shadowBlur: 10,
// shadowColor: "#EE4454"
// },
// areaStyle: {
// normal: {
// color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
// { offset: 0, color: "rgba(239,71,86,1)" },
// { offset: 1, color: "rgba(239,71,86,0)" }
// ])
// }
// },
// }
{
name
:
'产品点击'
,
type
:
'line'
,
xAxisIndex
:
2
,
yAxisIndex
:
2
,
symbolSize
:
2
,
hoverAnimation
:
true
,
smooth
:
true
,
showSymbol
:
false
,
data
:
_this
.
clickcountList
,
itemStyle
:
{
borderWidth
:
2
,
color
:
'#EE4454'
,
shadowBlur
:
5
,
shadowColor
:
'rgba(255,250,0,1)'
},
lineStyle
:
{
color
:
"#FFAA85"
,
width
:
1
,
shadowBlur
:
2
,
shadowColor
:
"#EE4454"
},
areaStyle
:
{
normal
:
{
color
:
new
this
.
$echarts
.
graphic
.
LinearGradient
(
0
,
0
,
0
,
1
,
[
{
offset
:
0
,
color
:
"rgba(239,71,86,1)"
},
{
offset
:
.
8
,
color
:
"rgba(239,71,86,0)"
}
])
}
},
},
{
name
:
'询价统计'
,
type
:
'line'
,
xAxisIndex
:
3
,
yAxisIndex
:
3
,
symbolSize
:
2
,
hoverAnimation
:
true
,
smooth
:
true
,
showSymbol
:
false
,
data
:
_this
.
inquireList
,
itemStyle
:
{
borderWidth
:
2
,
color
:
"rgb(106, 176, 76)"
,
shadowBlur
:
5
,
shadowColor
:
'rgba(255,250,0,1)'
},
lineStyle
:
{
color
:
"rgb(106, 176, 76)"
,
width
:
1
,
shadowBlur
:
2
,
shadowColor
:
"rgb(106, 176, 76)"
,
},
areaStyle
:
{
normal
:
{
color
:
new
this
.
$echarts
.
graphic
.
LinearGradient
(
0
,
0
,
0
,
1
,
[
{
offset
:
0
,
color
:
"rgba(106, 176, 76,1)"
},
{
offset
:
.
8
,
color
:
"rgba(106, 176, 76,0)"
}
])
}
},
}
]
}
myChart
.
setOption
(
option
);
...
...
src/components/viitto/lineChart2.vue
View file @
2c383fd7
...
...
@@ -20,12 +20,12 @@
.PINGFANG
{
font-family
:
"PINGFANG REGULAR"
;
}
.myecharts
{
height
:
1
00%
;
.myecharts
S
{
height
:
1
100px
!important
;
}
</
style
>
<
template
>
<div
class=
"myecharts"
ref=
"myecharts"
>
<div
class=
"myecharts
myechartsS
"
ref=
"myecharts"
>
</div>
</
template
>
...
...
@@ -39,6 +39,7 @@ export default {
'unitpriceList'
,
'day_total_guestprice'
,
'dateList'
,
'inquireList'
,
'zoom'
],
data
(){
...
...
@@ -79,7 +80,7 @@ export default {
realtime
:
true
,
start
:
90
,
end
:
100
,
xAxisIndex
:
[
0
,
1
,
2
,
3
],
xAxisIndex
:
[
0
,
1
,
2
,
3
,
4
],
textStyle
:
{
color
:
"#ffffff"
},
...
...
@@ -94,7 +95,7 @@ export default {
realtime
:
true
,
start
:
90
,
end
:
100
,
xAxisIndex
:
[
0
,
1
,
2
,
3
],
xAxisIndex
:
[
0
,
1
,
2
,
3
,
4
],
textStyle
:
{
color
:
"#ffffff"
},
...
...
@@ -113,23 +114,28 @@ export default {
grid
:
[{
left
:
80
,
right
:
10
,
top
:
'
5%
'
,
height
:
'1
6%
'
top
:
'
40px
'
,
height
:
'1
50px
'
},
{
left
:
80
,
right
:
10
,
top
:
'2
8%
'
,
height
:
'1
6%
'
top
:
'2
50px
'
,
height
:
'1
50px
'
},
{
left
:
80
,
right
:
10
,
top
:
'
51%
'
,
height
:
'1
6%
'
top
:
'
460px
'
,
height
:
'1
50px
'
},
{
left
:
80
,
right
:
10
,
top
:
'74%'
,
height
:
'16%'
top
:
'670px'
,
height
:
'150px'
},
{
left
:
80
,
right
:
10
,
top
:
'880px'
,
height
:
'150px'
}
],
xAxis
:
[
...
...
@@ -163,6 +169,14 @@ export default {
boundaryGap
:
false
,
data
:
_this
.
dateList
,
position
:
'bottom'
,
"show"
:
false
,
},
{
gridIndex
:
4
,
type
:
'category'
,
boundaryGap
:
false
,
data
:
_this
.
dateList
,
position
:
'bottom'
,
"show"
:
true
,
axisLabel
:
{
color
:
'#fff'
,
...
...
@@ -212,7 +226,7 @@ export default {
},
{
gridIndex
:
2
,
name
:
'收客人头数 '
+
_this
.
day_total_guestprice
.
OrderCount
,
name
:
'收客人头数 '
+
_this
.
day_total_guestprice
.
GuestNum
,
type
:
'value'
,
inverse
:
false
,
splitLine
:
{
...
...
@@ -249,6 +263,26 @@ export default {
axisLabel
:
{
color
:
'#EE4454'
,
}
},
{
gridIndex
:
4
,
name
:
'询价统计 '
+
_this
.
day_total_guestprice
.
InquireCount
,
type
:
'value'
,
inverse
:
false
,
splitLine
:
{
lineStyle
:
{
color
:
'#30374E'
,
type
:
'dashed'
}
},
nameTextStyle
:
{
color
:
'#ffffff'
,
padding
:
[
10
,
0
,
0
,
110
],
fontSize
:
18
},
axisLabel
:
{
color
:
'rgb(106, 176, 76)'
,
}
}
],
series
:
[
...
...
@@ -377,6 +411,37 @@ export default {
])
}
},
},
{
name
:
'询价统计'
,
type
:
'line'
,
xAxisIndex
:
4
,
yAxisIndex
:
4
,
symbolSize
:
2
,
hoverAnimation
:
true
,
smooth
:
true
,
showSymbol
:
false
,
data
:
_this
.
inquireList
,
itemStyle
:
{
borderWidth
:
2
,
color
:
"rgb(106, 176, 76)"
,
shadowBlur
:
5
,
shadowColor
:
'rgba(255,250,0,1)'
},
lineStyle
:
{
color
:
"rgb(106, 176, 76)"
,
width
:
1
,
shadowBlur
:
2
,
shadowColor
:
"rgb(106, 176, 76)"
,
},
areaStyle
:
{
normal
:
{
color
:
new
this
.
$echarts
.
graphic
.
LinearGradient
(
0
,
0
,
0
,
1
,
[
{
offset
:
0
,
color
:
"rgba(106, 176, 76,1)"
},
{
offset
:
.
8
,
color
:
"rgba(106, 176, 76,0)"
}
])
}
},
}
]
}
...
...
src/components/viitto/saleDataLook.vue
0 → 100644
View file @
2c383fd7
<
style
>
.dataLook
{
height
:
100%
;
width
:
100%
;
background-color
:
#1D243D
;
}
.dataLook
.nav
{
padding
:
25px
45px
;
background-color
:
#252D48
;
}
.dataLook
.nav
.name
{
font-size
:
30px
;
font-weight
:
700
;
color
:
#fff
;
text-align
:
right
;
font-family
:
'pingfangR'
;
}
.pingfangR
{
font-family
:
'pingfangR'
;
}
.type-box
>
div
{
background
:
rgba
(
19
,
25
,
44
,
1
);
box-shadow
:
0px
0px
5px
0px
rgba
(
2
,
3
,
6
,
.55
);
border-radius
:
6px
6px
6px
6px
;
float
:
left
;
}
.danris
{
padding
:
6px
25px
;
font-size
:
20px
;
font-family
:
'pingfangR'
;
font-weight
:
bold
;
color
:
rgba
(
254
,
254
,
255
,
1
);
text-shadow
:
1px
2px
2px
rgba
(
0
,
95
,
106
,
1
);
width
:
50%
;
float
:
left
;
cursor
:
pointer
;
}
.danris.active
{
background
:
linear-gradient
(
90deg
,
rgba
(
147
,
69
,
248
,
1
),
rgba
(
63
,
210
,
243
,
1
));
box-shadow
:
1px
2px
4px
0px
rgba
(
23
,
29
,
48
,
1
);
border-radius
:
6px
;
}
.xilie
{
display
:
flex
;
align-items
:
center
;
}
.xilie
>
div
:nth-child
(
1
)
{
width
:
30%
;
background
:
rgba
(
106
,
116
,
146
,
.35
);
border-radius
:
20px
0px
0px
20px
;
padding
:
10px
20px
9px
;
box-sizing
:
border-box
;
color
:
rgba
(
254
,
254
,
255
,
1
);
text-align
:
center
;
}
.xilie
>
div
:nth-child
(
2
)
{
width
:
70%
;
background
:
rgba
(
22
,
28
,
49
,
.55
);
border-radius
:
0
20px
20px
0
;
overflow
:
hidden
;
}
.xilie
>
div
:nth-child
(
2
)
.el-select
,
.xilie
>
div
:nth-child
(
2
)
.el-date-editor.el-input
{
width
:
100%
;
}
.xilie
>
div
:nth-child
(
2
)
.el-input--suffix
.el-input__inner
{
border-radius
:
0
;
}
.xilie
>
div
:nth-child
(
2
)
input
{
background
:
rgba
(
22
,
28
,
49
,
.5
);
border
:
none
!important
;
}
.dataLook
.content
{
height
:
88%
;
/* height: calc(100vh - 122px); */
padding
:
30px
40px
;
box-sizing
:
border-box
;
overflow
:
hidden
;
overflow-y
:
auto
;
}
.dataLook
.content
.el-row
,
.dataLook
.content
.el-row
.el-col
{
height
:
100%
;
}
.right-data
{
background
:
linear-gradient
(
0deg
,
rgba
(
29
,
34
,
63
,
1
),
rgba
(
46
,
56
,
85
,
1
));
border-radius
:
20px
;
height
:
100%
;
overflow-y
:
auto
;
overflow-x
:
hidden
;
position
:
relative
;
}
.right-data
::-webkit-scrollbar
,
.content
::-webkit-scrollbar
,
.el-cascader-menu
::-webkit-scrollbar
{
/*滚动条整体样式*/
width
:
6px
;
/*高宽分别对应横竖滚动条的尺寸*/
height
:
47px
;
}
.right-data
::-webkit-scrollbar-thumb
,
.content
::-webkit-scrollbar-thumb
,
.el-cascader-menu
::-webkit-scrollbar-thumb
{
/*滚动条里面小方块*/
border-radius
:
4px
;
background
:
rgba
(
106
,
116
,
146
,
.35
);
}
.right-data
::-webkit-scrollbar-track
,
.content
::-webkit-scrollbar-track
,
.el-cascader-menu
::-webkit-scrollbar-track
{
/*滚动条里面轨道*/
border-radius
:
4px
;
background
:
#252D48
;
}
.tab
span
{
display
:
inline-block
;
width
:
128px
;
height
:
38px
;
background
:
linear-gradient
(
135deg
,
rgba
(
90
,
96
,
124
,
1
),
rgba
(
46
,
52
,
81
,
1
));
border-radius
:
0
19px
19px
0px
;
text-align
:
center
;
line-height
:
38px
;
color
:
#8089B4
;
font-size
:
20px
;
}
.item-box
{
display
:
flex
;
justify-content
:
space-between
;
padding
:
20px
;
}
.item-box
.item
>
div
:nth-child
(
1
)
{
font-size
:
18px
;
font-family
:
'pingfangR'
;
font-weight
:
400
;
color
:
rgba
(
73
,
78
,
99
,
1
);
}
.item-box
.item
>
div
:nth-child
(
2
)
{
font-size
:
36px
;
font-family
:
'pingfangR'
;
font-weight
:
400
;
color
:
rgba
(
255
,
255
,
255
,
1
);
}
.item-box
.item
>
div
:nth-child
(
2
)
img
{
position
:
relative
;
top
:
-25px
;
left
:
0
;
}
.red-color
{
color
:
rgba
(
255
,
255
,
255
,
1
);
background
:
linear-gradient
(
0deg
,
rgba
(
255
,
133
,
133
,
1
)
0%
,
rgba
(
238
,
68
,
84
,
1
)
100%
);
-webkit-background-clip
:
text
;
-webkit-text-fill-color
:
transparent
;
}
.gree-color
{
color
:
rgba
(
255
,
255
,
255
,
1
);
background
:
linear-gradient
(
0deg
,
rgba
(
167
,
222
,
138
,
1
)
0%
,
rgba
(
68
,
214
,
172
,
1
)
100%
);
-webkit-background-clip
:
text
;
-webkit-text-fill-color
:
transparent
;
}
.org-color
{
color
:
rgba
(
255
,
255
,
255
,
1
);
background
:
linear-gradient
(
180deg
,
rgba
(
244
,
121
,
22
,
1
)
0%
,
rgba
(
245
,
175
,
25
,
1
)
100%
);
-webkit-background-clip
:
text
;
-webkit-text-fill-color
:
transparent
;
}
.bl-color
{
color
:
rgba
(
255
,
255
,
255
,
1
);
background
:
linear-gradient
(
180deg
,
rgba
(
255
,
108
,
176
,
1
)
0%
,
rgba
(
255
,
147
,
109
,
1
)
100%
);
-webkit-background-clip
:
text
;
-webkit-text-fill-color
:
transparent
;
}
.pink-color
{
color
:
rgba
(
255
,
255
,
255
,
1
);
background
:
linear-gradient
(
180deg
,
rgba
(
147
,
69
,
248
,
1
)
0%
,
rgba
(
63
,
210
,
243
,
1
)
100%
);
-webkit-background-clip
:
text
;
-webkit-text-fill-color
:
transparent
;
}
.sub
{
font-size
:
20px
;
}
.width-100
{
width
:
100%
;
}
.open-btn
{
position
:
absolute
;
left
:
0
;
color
:
#3A4158
;
top
:
45%
;
height
:
60px
;
line-height
:
60px
;
background
:
rgba
(
13
,
18
,
36
,
.5
);
border-radius
:
6px
0
0
6px
;
width
:
20px
;
text-align
:
center
;
cursor
:
pointer
;
}
.el-cascader-menus
{
border
:
none
!important
;
}
.el-cascader-menu
{
background-color
:
#1d243d
!important
;
}
.el-cascader-menu__item
,
.el-cascader-menu__item.is-active
{
color
:
white
!important
;
}
.el-cascader-menu__item
:focus:not
(
:active
),
.el-cascader-menu__item
:hover
{
background-color
:
#252D48
!important
;
}
.el-popper
[
x-placement
^=
bottom
]
.popper__arrow
::after
{
border-bottom-color
:
#1d243d
;
}
.el-cascader-menu
{
border
:
0
!important
;
}
.my-drawer
{
padding
:
100px
0
60px
0
;
background-color
:
transparent
!important
;
}
.my-drawer
.el-drawer__header
{
display
:
none
;
}
.my-drawer
.el-drawer__open
.el-drawer.rtl
{
background-color
:
transparent
;
}
.my-drawer
.el-drawer__body
{
height
:
100%
;
}
.el-cascader__dropdown
{
border
:
none
!important
}
.el-cascader-node
:not
(
.is-disabled
)
:focus
,
.el-cascader-node
:not
(
.is-disabled
)
:hover
{
background-color
:
#252D48
!important
;
}
.company-class
{
background-color
:
rgb
(
29
,
36
,
61
)
!important
;
border-color
:
rgb
(
29
,
36
,
61
)
!important
;
}
.company-class
.el-select-dropdown__item.hover
,
.company-class
.el-select-dropdown__item
:hover
{
background-color
:
#252D48
!important
;
}
</
style
>
<
template
>
<div
class=
"dataLook"
v-loading=
"!loding"
>
<div
class=
"nav"
>
<el-row
:gutter=
"70"
>
<el-col
:span=
"18"
>
<el-row
:gutter=
"70"
>
<el-col
:span=
"8"
>
<div
class=
"xilie"
>
<div>
公司
</div>
<div>
<el-select
v-model=
"outbranchid"
placeholder=
"请选择"
@
change=
"init"
popper-class=
"company-class"
>
<el-option
label=
"不限"
:value=
"-1"
></el-option>
<el-option
v-for=
"item in companyList"
:key=
"item.Id"
:label=
"item.BName"
:value=
"item.Id"
>
</el-option>
</el-select>
</div>
</div>
</el-col>
<el-col
:span=
"8"
>
<div
class=
"xilie"
>
<div>
销售
</div>
<div>
<el-cascader
class=
"width-100"
:options=
"lineList"
:props=
"
{ checkStrictly: true }" v-model="selectedRegion" change-on-select/>
</div>
</div>
</el-col>
</el-row>
</el-col>
<el-col
:span=
"6"
class=
"name"
>
印象之旅线路看板
</el-col>
</el-row>
</div>
<div
class=
"content"
>
<el-row
:gutter=
"40"
style=
"margin-bottom: 20px;"
>
<el-col
:span=
"22"
>
<lineChart
v-if=
"chartShow"
:zoom=
"zoom"
:preferpriceList=
"preferpriceList"
:guestnumList=
"guestnumList"
:clickcountList=
"clickcountList"
:ordercountList=
"ordercountList"
:unitpriceList=
"unitpriceList"
:day_total_guestprice=
"day_total_guestprice"
:dateList=
"dateList"
/>
</el-col>
<el-col
:span=
"2"
style=
"position: relative;"
>
<div
class=
"open-btn"
@
click=
"drawer = true"
>
<i
class=
"iconfont icon-zhankai1"
style=
"color: white"
v-if=
"!rightShow"
></i>
<i
class=
"iconfont icon-zhankai-"
v-else
></i>
</div>
<div
class=
"right-data"
>
<!-- 报名人数 -->
<div>
<div
class=
"tab pingfangR"
><span>
报名人数
</span></div>
</div>
<div
class=
"item-box"
v-if=
"day_avg_num && day_avg_num.length > 0"
>
<div
class=
"item"
>
<div>
5日平均
</div>
<div>
{{
(
day_avg_num
[
0
].
OrderAvgCount
+
''
).
split
(
'.'
)[
0
]
}}
<img
src=
"../../assets/img/viitto/lvsedian.png"
alt=
""
>
</div>
</div>
<!--
<div
class=
"item"
>
<div>
20日平均
</div>
<div>
{{
(
day_avg_num
[
2
].
OrderAvgCount
+
''
).
split
(
'.'
)[
0
]
}}
<img
src=
"../../assets/img/viitto/hongsedian.png"
alt=
""
>
</div>
</div>
<div
class=
"item"
>
<div>
60日平均
</div>
<div>
{{
(
day_avg_num
[
3
].
OrderAvgCount
+
''
).
split
(
'.'
)[
0
]
}}
<img
src=
"../../assets/img/viitto/hongsedian.png"
alt=
""
>
</div>
</div>
-->
</div>
<!-- 线路占比 -->
<div>
<div
class=
"tab pingfangR"
><span>
线路占比
</span></div>
</div>
<div
class=
"item-box"
v-if=
"day_line_statics && day_line_statics.length > 0"
>
<div
class=
"item"
>
<div>
30日平均
</div>
<div>
{{
day_line_statics
[
0
].
OrderPercent
*
100
}}
<span
class=
"sub"
>
%
</span><img
src=
"../../assets/img/viitto/lvsedian.png"
alt=
""
>
</div>
</div>
<!--
<div
class=
"item"
>
<div>
60日平均
</div>
<div>
{{
day_line_statics
[
1
].
OrderPercent
*
100
}}
<span
class=
"sub"
>
%
</span><img
src=
"../../assets/img/viitto/hongsedian.png"
alt=
""
>
</div>
</div>
<div
class=
"item"
>
<div>
90日平均
</div>
<div>
{{
day_line_statics
[
1
].
OrderPercent
*
100
}}
<span
class=
"sub"
>
%
</span><img
src=
"../../assets/img/viitto/hongsedian.png"
alt=
""
>
</div>
</div>
-->
</div>
<!-- 报名单 -->
<div>
<div
class=
"tab pingfangR"
><span>
报名单
</span></div>
</div>
<div
class=
"item-box"
v-if=
"day_order_statics && day_order_statics.length > 0"
>
<div
class=
"item"
>
<div>
当日
</div>
<div
class=
"bl-color"
>
{{
(
day_order_statics
[
0
].
OrderCount
+
''
).
split
(
'.'
)[
0
]
}}
</div>
</div>
<!--
<div
class=
"item"
>
<div>
5日平均
</div>
<div>
{{
(
day_order_statics
[
1
].
OrderCount
+
''
).
split
(
'.'
)[
0
]
}}
</div>
</div>
<div
class=
"item"
>
<div>
10日平均
</div>
<div>
{{
(
day_order_statics
[
2
].
OrderCount
+
''
).
split
(
'.'
)[
0
]
}}
</div>
</div>
-->
</div>
<!-- 产品点击 -->
<div>
<div
class=
"tab pingfangR"
><span>
产品点击
</span></div>
</div>
<div
class=
"item-box"
v-if=
"day_click_statics && day_click_statics.length > 0"
>
<div
class=
"item"
>
<div>
当日
</div>
<div
class=
"pink-color"
>
{{
(
day_click_statics
[
0
].
ClickCount
+
''
).
split
(
'.'
)[
0
]
}}
</div>
</div>
<!--
<div
class=
"item"
>
<div>
5日平均
</div>
<div>
{{
(
day_click_statics
[
1
].
ClickCount
+
''
).
split
(
'.'
)[
0
]
}}
</div>
</div>
<div
class=
"item"
>
<div>
10日平均
</div>
<div>
{{
(
day_click_statics
[
2
].
ClickCount
+
''
).
split
(
'.'
)[
0
]
}}
</div>
</div>
-->
</div>
<!-- 历史卖价 -->
<div>
<div
class=
"tab pingfangR"
><span>
历史卖价
</span></div>
</div>
<div
class=
"item-box"
v-if=
"day_history_price && day_history_price.length > 0"
>
<div
class=
"item"
>
<div>
最高
</div>
<div
class=
"red-color"
>
{{
Math
.
round
(
day_history_price
[
0
].
MaxPrice
*
100
)
/
100
}}
<span
class=
"sub"
></span>
</div>
</div>
<!--
<div
class=
"item"
>
<div>
最低
</div>
<div>
{{
Math
.
round
(
day_history_price
[
0
].
MinPrice
*
100
)
/
100
}}
<span
class=
"sub"
></span>
</div>
</div>
<div
class=
"item"
>
<div>
平均
</div>
<div
class=
"gree-color"
>
{{
Math
.
round
(
day_history_price
[
0
].
AvgPrice
*
100
)
/
100
}}
<span
class=
"sub"
></span>
</div>
</div>
-->
</div>
<!-- 成交量 -->
<div>
<div
class=
"tab pingfangR"
><span>
成交量
</span></div>
</div>
<div
class=
"item-box"
v-if=
"day_history_preferprice && day_history_preferprice.length > 0"
>
<div
class=
"item"
>
<div>
最高
</div>
<div
class=
"org-color"
>
{{
day_history_preferprice
[
0
].
MaxPreferPrice
}}
<span
class=
"sub"
></span>
</div>
</div>
<!--
<div
class=
"item"
>
<div>
最低
</div>
<div>
{{
day_history_preferprice
[
0
].
MinPreferPrice
}}
<span
class=
"sub"
></span>
</div>
</div>
<div
class=
"item"
>
<div>
平均
</div>
<div>
{{
day_history_preferprice
[
0
].
AvgPreferPrice
}}
<span
class=
"sub"
></span>
</div>
</div>
-->
</div>
</div>
<el-drawer
custom-class=
"my-drawer"
:show-close=
"false"
:visible
.
sync=
"drawer"
:direction=
"direction"
:before-close=
"handleClose"
>
<div
class=
"right-data"
>
<!-- 报名人数 -->
<div>
<div
class=
"tab pingfangR"
><span>
报名人数
</span></div>
</div>
<div
class=
"item-box"
v-if=
"day_avg_num && day_avg_num.length > 0"
>
<div
class=
"item"
>
<div>
5日平均
</div>
<div>
{{
(
day_avg_num
[
0
].
OrderAvgCount
+
''
).
split
(
'.'
)[
0
]
}}
<img
src=
"../../assets/img/viitto/lvsedian.png"
alt=
""
>
</div>
</div>
<div
class=
"item"
>
<div>
20日平均
</div>
<div>
{{
(
day_avg_num
[
2
].
OrderAvgCount
+
''
).
split
(
'.'
)[
0
]
}}
<img
src=
"../../assets/img/viitto/hongsedian.png"
alt=
""
>
</div>
</div>
<div
class=
"item"
>
<div>
60日平均
</div>
<div>
{{
(
day_avg_num
[
3
].
OrderAvgCount
+
''
).
split
(
'.'
)[
0
]
}}
<img
src=
"../../assets/img/viitto/hongsedian.png"
alt=
""
>
</div>
</div>
</div>
<!-- 线路占比 -->
<div>
<div
class=
"tab pingfangR"
><span>
线路占比
</span></div>
</div>
<div
class=
"item-box"
v-if=
"day_line_statics && day_line_statics.length > 0"
>
<div
class=
"item"
>
<div>
30日平均
</div>
<div>
{{
Math
.
round
(
day_line_statics
[
0
].
OrderPercent
*
10000
)
/
100
}}
<span
class=
"sub"
>
%
</span><img
src=
"../../assets/img/viitto/lvsedian.png"
alt=
""
>
</div>
</div>
<div
class=
"item"
>
<div>
60日平均
</div>
<div>
{{
Math
.
round
(
day_line_statics
[
1
].
OrderPercent
*
10000
)
/
100
}}
<span
class=
"sub"
>
%
</span><img
src=
"../../assets/img/viitto/hongsedian.png"
alt=
""
>
</div>
</div>
<div
class=
"item"
>
<div>
90日平均
</div>
<div>
{{
Math
.
round
(
day_line_statics
[
2
].
OrderPercent
*
10000
)
/
100
}}
<span
class=
"sub"
>
%
</span><img
src=
"../../assets/img/viitto/hongsedian.png"
alt=
""
>
</div>
</div>
</div>
<!-- 报名单 -->
<div>
<div
class=
"tab pingfangR"
><span>
报名单
</span></div>
</div>
<div
class=
"item-box"
v-if=
"day_order_statics && day_order_statics.length > 0"
>
<div
class=
"item"
>
<div>
当日
</div>
<div
class=
"bl-color"
>
{{
(
day_order_statics
[
0
].
OrderCount
+
''
).
split
(
'.'
)[
0
]
}}
</div>
</div>
<div
class=
"item"
>
<div>
5日平均
</div>
<div>
{{
(
day_order_statics
[
1
].
OrderCount
+
''
).
split
(
'.'
)[
0
]
}}
</div>
</div>
<div
class=
"item"
>
<div>
10日平均
</div>
<div>
{{
(
day_order_statics
[
2
].
OrderCount
+
''
).
split
(
'.'
)[
0
]
}}
</div>
</div>
</div>
<!-- 产品点击 -->
<div>
<div
class=
"tab pingfangR"
><span>
产品点击
</span></div>
</div>
<div
class=
"item-box"
v-if=
"day_click_statics && day_click_statics.length > 0"
>
<div
class=
"item"
>
<div>
当日
</div>
<div
class=
"pink-color"
>
{{
(
day_click_statics
[
0
].
ClickCount
+
''
).
split
(
'.'
)[
0
]
}}
</div>
</div>
<div
class=
"item"
>
<div>
5日平均
</div>
<div>
{{
(
day_click_statics
[
1
].
ClickCount
+
''
).
split
(
'.'
)[
0
]
}}
</div>
</div>
<div
class=
"item"
>
<div>
10日平均
</div>
<div>
{{
(
day_click_statics
[
2
].
ClickCount
+
''
).
split
(
'.'
)[
0
]
}}
</div>
</div>
</div>
<!-- 历史卖价 -->
<div>
<div
class=
"tab pingfangR"
><span>
历史卖价
</span></div>
</div>
<div
class=
"item-box"
v-if=
"day_history_price && day_history_price.length > 0"
>
<div
class=
"item"
>
<div>
最高
</div>
<div
class=
"red-color"
>
{{
Math
.
round
(
day_history_price
[
0
].
MaxPrice
*
100
)
/
100
}}
<span
class=
"sub"
></span>
</div>
</div>
<div
class=
"item"
>
<div>
最低
</div>
<div>
{{
Math
.
round
(
day_history_price
[
0
].
MinPrice
*
100
)
/
100
}}
<span
class=
"sub"
></span>
</div>
</div>
<div
class=
"item"
>
<div>
平均
</div>
<div
class=
"gree-color"
>
{{
Math
.
round
(
day_history_price
[
0
].
AvgPrice
*
100
)
/
100
}}
<span
class=
"sub"
></span>
</div>
</div>
</div>
<!-- 成交量 -->
<div>
<div
class=
"tab pingfangR"
><span>
成交量
</span></div>
</div>
<div
class=
"item-box"
v-if=
"day_history_preferprice && day_history_preferprice.length > 0"
>
<div
class=
"item"
>
<div>
最高
</div>
<div
class=
"org-color"
>
{{
day_history_preferprice
[
0
].
MaxPreferPrice
}}
<span
class=
"sub"
></span>
</div>
</div>
<div
class=
"item"
>
<div>
最低
</div>
<div>
{{
day_history_preferprice
[
0
].
MinPreferPrice
}}
<span
class=
"sub"
></span>
</div>
</div>
<div
class=
"item"
>
<div>
平均
</div>
<div>
{{
day_history_preferprice
[
0
].
AvgPreferPrice
}}
<span
class=
"sub"
></span>
</div>
</div>
</div>
</div>
</el-drawer>
</el-col>
</el-row>
</div>
</div>
</
template
>
<
script
>
import
lineChart
from
"./saleLineChart"
;
export
default
{
components
:
{
lineChart
},
data
(){
return
{
drawer
:
false
,
direction
:
'rtl'
,
rightShow
:
false
,
selectedRegion
:
[],
navActive
:
0
,
options
:
[],
value
:
''
,
value1
:
''
,
StartTime
:
''
,
day_avg_num
:
[],
day_history_price
:
[{}],
clickcountList
:
[],
guestnumList
:
[],
preferpriceList
:
[],
ordercountList
:
[],
unitpriceList
:
[],
dateList
:
[],
chartShow
:
false
,
lineList
:
[],
prolineId
:
0
,
slineId
:
0
,
LineTeamList
:
[],
day_order_statics
:
[],
day_click_statics
:
[],
day_history_preferprice
:
[],
zoom
:
1
,
day_line_statics
:
[],
day_total_guestprice
:
{},
loding
:
false
,
outbranchid
:
-
1
,
companyMsg
:{
RB_Group_Id
:
'0'
,
Status
:
0
,
},
companyList
:
[],
}
},
watch
:
{
selectedRegion
(
nv
)
{
this
.
loadRegionChild
(
nv
)
},
},
created
(){
this
.
apipost
(
"line_post_GetAllList_V2"
,
{
LineDirection
:
0
},
res
=>
{
if
(
res
.
data
.
resultCode
==
1
)
{
let
data
=
res
.
data
.
data
;
data
.
map
(
x
=>
{
x
.
label
=
x
.
LineName
,
x
.
value
=
x
.
LineID
,
x
.
children
=
[]
})
this
.
lineList
=
data
}
});
},
mounted
()
{
let
Height
=
window
.
innerHeight
this
.
zoom
=
Math
.
round
((
Height
/
1080
)
*
100
)
/
100
var
day2
=
new
Date
();
day2
.
setTime
(
day2
.
getTime
());
var
s2
=
day2
.
getFullYear
()
+
"-"
+
(
day2
.
getMonth
()
+
1
)
+
"-"
+
day2
.
getDate
();
this
.
StartTime
=
s2
;
this
.
init
()
this
.
getCompany
()
// setTimeout(() => {
// this.init()
// }, 1000);
},
methods
:{
getCompany
(){
//公司
this
.
apipost
(
'admin_get_BranchGetList'
,
{},
res
=>
{
let
data
=
res
.
data
.
data
;
this
.
companyList
=
data
;
})
},
handleClose
(
done
)
{
done
();
},
loadRegionChild
(
regionIdArr
)
{
let
lineId
=
0
,
slineId
=
0
;
if
(
regionIdArr
.
length
==
1
)
{
lineId
=
regionIdArr
[
0
]
}
else
{
lineId
=
regionIdArr
[
0
]
slineId
=
regionIdArr
[
1
]
}
this
.
prolineId
=
lineId
this
.
slineId
=
slineId
this
.
init
()
this
.
apipost
(
"team_post_GetList"
,
{
lineID
:
lineId
,
isTOOP
:
1
},
res
=>
{
if
(
res
.
data
.
resultCode
==
1
)
{
let
data
=
res
.
data
.
data
;
data
.
map
(
x
=>
{
x
.
value
=
x
.
LtID
x
.
label
=
x
.
LtName
})
this
.
lineList
.
map
(
x
=>
{
if
(
x
.
value
==
lineId
)
{
x
.
children
=
data
}
})
}
});
}
,
init
(){
this
.
loding
=
false
;
this
.
chartShow
=
false
;
let
url
=
'http://47.96.23.199:5001/api/order/get_single_data'
let
url2
=
"http://47.96.23.199:5001/api/order/get_single_data_v2"
let
msg
=
{
startdate
:
this
.
StartTime
,
lineid
:
this
.
prolineId
,
ltid
:
this
.
slineId
,
outbranchid
:
this
.
outbranchid
}
this
.
getOutherData
(
url
,
msg
)
},
getOutherData
:
function
(
url
,
msg
){
this
.
apiRequest
(
url
,{
msg
:
msg
},
r
=>
{
if
(
r
.
data
.
resultCode
==
1
){
let
data
=
r
.
data
.
data
;
this
.
day_avg_num
=
data
.
day_avg_num
this
.
day_history_price
=
data
.
day_history_price
this
.
day_order_statics
=
data
.
day_order_statics
this
.
day_click_statics
=
data
.
day_click_statics
this
.
day_history_preferprice
=
data
.
day_history_preferprice
this
.
day_line_statics
=
data
.
day_line_statics
// 点击
this
.
clickcountList
=
data
.
day_guestprice
.
clickcountList
// 人数
this
.
guestnumList
=
data
.
day_guestprice
.
guestnumList
// 钱
this
.
unitpriceList
=
data
.
day_guestprice
.
unitpriceList
// 成交
this
.
preferpriceList
=
data
.
day_guestprice
.
preferpriceList
// 报名单
this
.
ordercountList
=
data
.
day_guestprice
.
ordercountList
// 时间
this
.
dateList
=
data
.
day_guestprice
.
dateList
// 合计
this
.
day_total_guestprice
=
data
.
day_total_guestprice
[
0
]
this
.
chartShow
=
true
;
this
.
$forceUpdate
()
}
else
{
this
.
Error
(
r
.
data
.
message
);
}
this
.
loding
=
true
;
});
},
setNavActive
:
function
(
n
){
this
.
navActive
=
n
}
}
}
</
script
>
\ No newline at end of file
src/components/viitto/saleLineChart.vue
0 → 100644
View file @
2c383fd7
<
style
>
@font-face
{
font-family
:
"PINGFANG EXTRALIGHT"
;
src
:
url("../../assets/fonts/PINGFANG EXTRALIGHT.TTF")
format
(
"truetype"
);
/* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
font-style
:
normal
;
font-weight
:
normal
;
}
@font-face
{
font-family
:
"PINGFANG REGULAR"
;
src
:
url("../../assets/fonts/PINGFANG REGULAR.TTF")
format
(
"truetype"
);
/* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
font-style
:
normal
;
font-weight
:
normal
;
}
@font-face
{
font-family
:
"MADA-MEDIUM"
;
src
:
url("../../assets/fonts/MADA-MEDIUM.TTF")
format
(
"truetype"
);
/* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
font-style
:
normal
;
font-weight
:
normal
;
}
.PINGFANG
{
font-family
:
"PINGFANG REGULAR"
;
}
.myecharts-sale
{
height
:
100%
;
}
.myecharts-sale
{
height
:
1480px
;
}
</
style
>
<
template
>
<div
class=
"myecharts-sale"
ref=
"myecharts"
>
</div>
</
template
>
<
script
>
export
default
{
props
:[
'preferpriceList'
,
'guestnumList'
,
'clickcountList'
,
'ordercountList'
,
'unitpriceList'
,
'day_total_guestprice'
,
'dateList'
,
'zoom'
],
data
(){
return
{
}
},
created
(){
},
mounted
()
{
this
.
init
()
},
methods
:{
init
()
{
let
myChart
=
this
.
$echarts
.
init
(
this
.
$refs
.
myecharts
);
var
dataAxis
=
[];
let
_this
=
this
;
let
option
=
{
textStyle
:
{
fontFamily
:
'PINGFANG REGULAR'
,
},
tooltip
:
{
trigger
:
'axis'
,
axisPointer
:
{
animation
:
true
,
type
:
'cross'
,
label
:
{
backgroundColor
:
'#E62382'
,
},
lineStyle
:
{
width
:
4
,
color
:
'rgba(255,255,255,.1)'
}
},
backgroundColor
:
'#E62382'
,
confine
:
true
,
},
dataZoom
:
[
{
show
:
true
,
realtime
:
true
,
start
:
90
,
end
:
100
,
xAxisIndex
:
[
0
,
1
,
2
,
3
,
4
,
5
],
textStyle
:
{
color
:
"#ffffff"
},
dataBackground
:
{
lineStyle
:
{
color
:
'#ffffff'
}
}
},
{
type
:
'inside'
,
realtime
:
true
,
start
:
90
,
end
:
100
,
xAxisIndex
:
[
0
,
1
,
2
,
3
,
4
,
5
],
textStyle
:
{
color
:
"#ffffff"
},
dataBackground
:
{
lineStyle
:
{
color
:
'#ffffff'
}
}
}
],
axisPointer
:
{
snap
:
true
,
link
:
{
xAxisIndex
:
'all'
}
},
grid
:
[{
left
:
80
,
right
:
10
,
top
:
'40px'
,
height
:
'180px'
},
{
left
:
80
,
right
:
10
,
top
:
'280px'
,
height
:
'180px'
},
{
left
:
80
,
right
:
10
,
top
:
'520px'
,
height
:
'180px'
},
{
left
:
80
,
right
:
10
,
top
:
'760px'
,
height
:
'180px'
},
{
left
:
80
,
right
:
10
,
top
:
'1000px'
,
height
:
'180px'
},
{
left
:
80
,
right
:
10
,
top
:
'1240px'
,
height
:
'180px'
}
],
xAxis
:
[
{
gridIndex
:
0
,
type
:
'category'
,
boundaryGap
:
false
,
data
:
_this
.
dateList
,
position
:
'bottom'
,
"show"
:
false
},
{
gridIndex
:
1
,
type
:
'category'
,
boundaryGap
:
false
,
data
:
_this
.
dateList
,
position
:
'bottom'
,
"show"
:
false
,
},
{
gridIndex
:
2
,
type
:
'category'
,
boundaryGap
:
false
,
data
:
_this
.
dateList
,
position
:
'bottom'
,
"show"
:
false
,
},
{
gridIndex
:
3
,
type
:
'category'
,
boundaryGap
:
false
,
data
:
_this
.
dateList
,
position
:
'bottom'
,
"show"
:
false
,
},
{
gridIndex
:
4
,
type
:
'category'
,
boundaryGap
:
false
,
data
:
_this
.
dateList
,
position
:
'bottom'
,
"show"
:
false
,
},
{
gridIndex
:
5
,
type
:
'category'
,
boundaryGap
:
false
,
data
:
_this
.
dateList
,
position
:
'bottom'
,
"show"
:
true
,
axisLabel
:
{
color
:
'#fff'
,
},
}
],
yAxis
:
[
{
gridIndex
:
0
,
name
:
'名单开发 ¥'
+
_this
.
day_total_guestprice
.
PreferPrice
+
'元'
,
type
:
'value'
,
inverse
:
false
,
splitLine
:
{
lineStyle
:
{
color
:
'#30374E'
,
type
:
'dashed'
}
},
nameTextStyle
:
{
color
:
'#ffffff'
,
padding
:
[
0
,
0
,
0
,
160
],
fontSize
:
18
},
axisLabel
:
{
color
:
'#F5AF19'
,
}
},
{
gridIndex
:
1
,
name
:
'约访 '
+
_this
.
day_total_guestprice
.
OrderCount
,
type
:
'value'
,
inverse
:
false
,
splitLine
:
{
lineStyle
:
{
color
:
'#30374E'
,
type
:
'dashed'
}
},
nameTextStyle
:
{
color
:
'#ffffff'
,
padding
:
[
0
,
0
,
0
,
80
],
fontSize
:
18
},
axisLabel
:
{
color
:
'#3FD2F3'
,
}
},
{
gridIndex
:
2
,
name
:
'探寻需求 '
+
_this
.
day_total_guestprice
.
GuestNum
,
type
:
'value'
,
inverse
:
false
,
splitLine
:
{
lineStyle
:
{
color
:
'#30374E'
,
type
:
'dashed'
}
},
nameTextStyle
:
{
color
:
'#ffffff'
,
padding
:
[
0
,
0
,
0
,
80
],
fontSize
:
18
},
axisLabel
:
{
color
:
'#32ff7e'
,
}
},
{
gridIndex
:
3
,
name
:
'解决需求 '
+
_this
.
day_total_guestprice
.
GuestNum
,
type
:
'value'
,
inverse
:
false
,
splitLine
:
{
lineStyle
:
{
color
:
'#30374E'
,
type
:
'dashed'
}
},
nameTextStyle
:
{
color
:
'#ffffff'
,
padding
:
[
0
,
0
,
0
,
80
],
fontSize
:
18
},
axisLabel
:
{
color
:
'#32ff7e'
,
}
},
{
gridIndex
:
4
,
name
:
'说明成交 '
+
_this
.
day_total_guestprice
.
GuestNum
,
type
:
'value'
,
inverse
:
false
,
splitLine
:
{
lineStyle
:
{
color
:
'#30374E'
,
type
:
'dashed'
}
},
nameTextStyle
:
{
color
:
'#ffffff'
,
padding
:
[
0
,
0
,
0
,
80
],
fontSize
:
18
},
axisLabel
:
{
color
:
'#32ff7e'
,
}
},
{
gridIndex
:
5
,
name
:
'售后服务 '
+
_this
.
day_total_guestprice
.
ClickCount
,
type
:
'value'
,
inverse
:
false
,
splitLine
:
{
lineStyle
:
{
color
:
'#30374E'
,
type
:
'dashed'
}
},
nameTextStyle
:
{
color
:
'#ffffff'
,
padding
:
[
10
,
0
,
0
,
110
],
fontSize
:
18
},
axisLabel
:
{
color
:
'#EE4454'
,
}
}
],
series
:
[
{
name
:
'明单开发'
,
type
:
'line'
,
xAxisIndex
:
0
,
yAxisIndex
:
0
,
symbolSize
:
2
,
hoverAnimation
:
true
,
smooth
:
true
,
showSymbol
:
false
,
data
:
_this
.
preferpriceList
,
itemStyle
:
{
borderWidth
:
2
,
color
:
'#F5AF19'
,
shadowBlur
:
5
,
shadowColor
:
'rgba(255,250,0,1)'
},
lineStyle
:
{
color
:
"#F5AF19"
,
shadowBlur
:
5
,
width
:
3
,
shadowColor
:
"#F5AF19"
},
areaStyle
:
{
normal
:
{
color
:
new
this
.
$echarts
.
graphic
.
LinearGradient
(
0
,
0
,
0
,
1
,
[
{
offset
:
0
,
color
:
"rgba(245,175,25,1)"
},
{
offset
:
.
8
,
color
:
"rgba(245,175,25,0)"
}
])
}
},
}
,
{
name
:
'约访'
,
type
:
'line'
,
xAxisIndex
:
1
,
yAxisIndex
:
1
,
symbolSize
:
2
,
hoverAnimation
:
true
,
smooth
:
true
,
showSymbol
:
false
,
data
:
_this
.
ordercountList
,
itemStyle
:
{
borderWidth
:
2
,
color
:
'#3FD2F3'
,
shadowBlur
:
5
,
shadowColor
:
'rgba(255,250,0,1)'
},
lineStyle
:
{
color
:
"#9345F8"
,
shadowBlur
:
5
,
width
:
3
,
shadowColor
:
"#3FD2F3"
},
areaStyle
:
{
normal
:
{
color
:
new
this
.
$echarts
.
graphic
.
LinearGradient
(
0
,
0
,
0
,
1
,
[
{
offset
:
0
,
color
:
"rgba(147,69,248,1)"
},
{
offset
:
.
8
,
color
:
"rgba(147,69,248,0)"
}
])
}
},
}
,
{
name
:
'探寻需求'
,
type
:
'line'
,
xAxisIndex
:
2
,
yAxisIndex
:
2
,
symbolSize
:
2
,
hoverAnimation
:
true
,
smooth
:
true
,
showSymbol
:
false
,
data
:
_this
.
guestnumList
,
itemStyle
:
{
borderWidth
:
2
,
color
:
'#3FD2F3'
,
shadowBlur
:
5
,
shadowColor
:
'rgba(255,250,0,1)'
},
lineStyle
:
{
color
:
"#32ff7e"
,
shadowBlur
:
5
,
width
:
3
,
shadowColor
:
"#3ae374"
},
areaStyle
:
{
normal
:
{
color
:
new
this
.
$echarts
.
graphic
.
LinearGradient
(
0
,
0
,
0
,
1
,
[
{
offset
:
0
,
color
:
"rgba(50, 255, 126,1)"
},
{
offset
:
.
8
,
color
:
"rgba(50, 255, 126,0)"
}
])
}
},
},
{
name
:
'解决需求'
,
type
:
'line'
,
xAxisIndex
:
3
,
yAxisIndex
:
3
,
symbolSize
:
2
,
hoverAnimation
:
true
,
smooth
:
true
,
showSymbol
:
false
,
data
:
_this
.
guestnumList
,
itemStyle
:
{
borderWidth
:
2
,
color
:
'rgb(103, 230, 220)'
,
shadowBlur
:
5
,
shadowColor
:
'rgba(255,250,0,1)'
},
lineStyle
:
{
color
:
"rgb(103, 230, 220)"
,
shadowBlur
:
5
,
width
:
3
,
shadowColor
:
"#3ae374"
},
areaStyle
:
{
normal
:
{
color
:
new
this
.
$echarts
.
graphic
.
LinearGradient
(
0
,
0
,
0
,
1
,
[
{
offset
:
0
,
color
:
"rgba(103, 230, 220,1)"
},
{
offset
:
.
8
,
color
:
"rgba(103, 230, 220,0)"
}
])
}
},
},
{
name
:
'说明成交'
,
type
:
'line'
,
xAxisIndex
:
4
,
yAxisIndex
:
4
,
symbolSize
:
2
,
hoverAnimation
:
true
,
smooth
:
true
,
showSymbol
:
false
,
data
:
_this
.
guestnumList
,
itemStyle
:
{
borderWidth
:
2
,
color
:
'#3FD2F3'
,
shadowBlur
:
5
,
shadowColor
:
'rgba(255,250,0,1)'
},
lineStyle
:
{
color
:
"rgb(255, 184, 184)"
,
shadowBlur
:
5
,
width
:
3
,
shadowColor
:
"rgb(255, 184, 184)"
},
areaStyle
:
{
normal
:
{
color
:
new
this
.
$echarts
.
graphic
.
LinearGradient
(
0
,
0
,
0
,
1
,
[
{
offset
:
0
,
color
:
"rgba(255, 184, 184,1)"
},
{
offset
:
.
8
,
color
:
"rgba(255, 184, 184,0)"
}
])
}
},
},
{
name
:
'售后服务'
,
type
:
'line'
,
xAxisIndex
:
5
,
yAxisIndex
:
5
,
symbolSize
:
2
,
hoverAnimation
:
true
,
smooth
:
true
,
showSymbol
:
false
,
data
:
_this
.
clickcountList
,
itemStyle
:
{
borderWidth
:
2
,
color
:
'#EE4454'
,
shadowBlur
:
5
,
shadowColor
:
'rgba(255,250,0,1)'
},
lineStyle
:
{
color
:
"#FFAA85"
,
width
:
3
,
shadowBlur
:
5
,
shadowColor
:
"#EE4454"
},
areaStyle
:
{
normal
:
{
color
:
new
this
.
$echarts
.
graphic
.
LinearGradient
(
0
,
0
,
0
,
1
,
[
{
offset
:
0
,
color
:
"rgba(239,71,86,1)"
},
{
offset
:
.
8
,
color
:
"rgba(239,71,86,0)"
}
])
}
},
}
]
}
myChart
.
setOption
(
option
);
},
}
}
</
script
>
\ No newline at end of file
src/router.js
View file @
2c383fd7
...
...
@@ -5,6 +5,7 @@ import index from './views/index'
import
viittoData
from
'./components/viitto/viittoData'
import
viittoData2
from
'./components/viitto/viittoData2'
import
dataLook
from
'./components/viitto/dataLook'
import
saleDataLook
from
'./components/viitto/saleDataLook'
import
PerCompetition
from
'./components/viitto/PerCompetition'
Vue
.
use
(
Router
)
...
...
@@ -43,6 +44,11 @@ export default new Router({
name
:
'dataLook'
,
component
:
dataLook
,
},
{
path
:
'/saleDataLook'
,
name
:
'saleDataLook'
,
component
:
saleDataLook
,
},
{
path
:
'/PerCompetition'
,
name
:
'PerCompetition'
,
...
...
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