Skip to content
Toggle navigation
Projects
Groups
Snippets
Help
Toggle navigation
This project
Loading...
Sign in
蒋秀川
/
miniProject
Go to a project
Project
Repository
Issues
0
Merge Requests
0
Pipelines
Wiki
Settings
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Commit 7427b7a8
authored
Jun 14, 2023
by
tianlonglong
Browse Files
Options
Browse Files
Tag
Download
Email Patches
Plain Diff
店铺首页
1 parent
c5b4129e
Show whitespace changes
Inline
Side-by-side
Showing
6 changed files
with
1038 additions
and
16 deletions
miniProject/api/shop.js
miniProject/index/index2.js
miniProject/index/index2.json
miniProject/index/index2.wxml
miniProject/index/index2.wxss
miniProject/project.config.json
miniProject/api/shop.js
View file @
7427b7a
let
http
=
require
(
'../utils/request'
);
let
http
=
require
(
'../utils/request'
);
module
.
exports
=
{
module
.
exports
=
{
// 获取卡片数据
// 获取卡片数据
getCardData
(
userId
,
params
)
{
getCardData
(
params
)
{
return
http
.
get
(
`/report/
users/
${
userId
}
`
,
params
);
return
http
.
get
(
`/report/
wechat/mall/index/trafficOverview
`
,
params
);
},
},
// 获取业态客流趋势
// 获取业态客流趋势
getTrendData
(
userId
,
params
)
{
getTrendData
(
params
)
{
return
http
.
get
(
`/report/
users/
${
userId
}
`
,
params
);
return
http
.
get
(
`/report/
wechat/mall/index/trafficTrend
`
,
params
);
},
},
// 获取停留时长统计
// 获取停留时长统计
getStopTimeData
(
userId
,
params
)
{
getStopTimeData
(
params
)
{
return
http
.
get
(
`/report/
users/
${
userId
}
`
,
params
);
return
http
.
get
(
`/report/
wechat/mall/index/residenceTime
`
,
params
);
},
},
// 获取客群性别和年龄
// 获取客群性别和年龄
getAgeSexData
(
userId
,
params
)
{
getAgeSexData
(
params
)
{
return
http
.
get
(
`/report/users/
${
userId
}
`
,
params
);
return
http
.
get
(
`/report/wechat/mall/index/faceGender`
,
params
);
},
getAgeData
(
params
)
{
return
http
.
get
(
`/report/wechat/mall/index/faceAge`
,
params
);
},
},
// 获取店铺位置,面积,天气
// 获取店铺位置,面积,天气
getShopDetailData
(
userId
,
params
)
{
getShopDetailData
(
params
)
{
return
http
.
get
(
`/report/
users/
${
userId
}
`
,
params
);
return
http
.
get
(
`/report/
wechat/mall/index/info
`
,
params
);
},
},
getPermission
(
id
)
{
getPermission
(
id
)
{
return
http
.
get
(
`/report/auth/api/v1/auth/users/
${
id
}
`
);
return
http
.
get
(
`/report/auth/api/v1/auth/users/
${
id
}
`
);
...
...
miniProject/index/index2.js
View file @
7427b7a
import
moment
from
'moment'
import
{
getMalls
,
}
from
"../api/login"
;
import
{
getCardData
,
getShopDetailData
,
getStopTimeData
,
getTrendData
,
getAgeSexData
,
getAgeData
}
from
"../api/shop"
;
Component
({
Component
({
pageLifetimes
:
{
pageLifetimes
:
{
show
()
{
show
()
{
...
@@ -7,6 +19,735 @@ Component({
...
@@ -7,6 +19,735 @@ Component({
curClick
:
2
curClick
:
2
})
})
}
}
if
(
wx
.
getStorageSync
(
'shopName'
)
&&
this
.
data
.
shopList
.
length
>
0
)
{
let
selectId
=
this
.
data
.
shopList
.
find
(
item
=>
item
.
name
==
wx
.
getStorageSync
(
'shopName'
)).
id
this
.
setData
({
selectName
:
wx
.
getStorageSync
(
'shopName'
),
selectId
},
()
=>
{
this
.
loadData
()
getShopDetailData
({
id
:
this
.
data
.
selectId
}).
then
(
res
=>
{
if
(
res
.
code
==
200
)
{
this
.
setData
({
info
:
res
.
data
})
}
})
})
}
else
{
getMalls
({
url
:
'/report/malls'
,
accountId
:
wx
.
getStorageSync
(
'accountId'
)
}).
then
((
res
)
=>
{
this
.
setData
({
shopList
:
res
.
data
,
selectName
:
res
.
data
[
0
]
&&
res
.
data
[
0
].
name
,
selectId
:
res
.
data
[
0
]
&&
res
.
data
[
0
].
id
,
columnsListName
:
res
.
data
&&
res
.
data
.
map
(
item
=>
item
.
name
)
},
()
=>
{
wx
.
setStorageSync
(
'shopName'
,
res
.
data
[
0
]
&&
res
.
data
[
0
].
name
)
this
.
loadData
()
// let params={id:this.selectId}
getShopDetailData
({
id
:
this
.
data
.
selectId
}).
then
(
res
=>
{
if
(
res
.
code
==
200
)
{
this
.
setData
({
info
:
res
.
data
})
}
})
})
})
}
}
},
/**
* 组件的初始数据
*/
data
:
{
currentTime
:
moment
().
format
(
"YYYY-MM-DD"
),
types
:
1
,
//选中的时间类型
trendtypes
:
1
,
//选中的业态趋势类型
chartData
:
{},
//客流趋势分析数据
chartDatastop
:
{},
//停留时长统计
chartDataSex
:
{},
//客群性别占比
chartDataAge
:
{},
//客群年龄占比
show
:
false
,
//显示日期自定义选择
minDate
:
new
Date
(
2022
,
0
,
1
).
getTime
(),
//自定义时间的开始日期
// maxDate: new Date(2022, 11, 31).getTime(), //自定义时间的结束日期
maxDate
:
new
Date
(
2025
,
11
,
31
).
getTime
(),
//自定义时间的结束日期
shopList
:
[
// {
// id: 1,
// name: '小米'
// }, {
// id: 2,
// name: '华为'
// }
],
//店铺列表数据
selectId
:
''
,
//选中的店铺id
selectName
:
''
,
//选中店铺名字
columnsListName
:
[],
//店铺的名字下拉列表
exposure
:
0
,
traffic
:
0
,
customer
:
0
,
entryRate
:
0
,
info
:
{}
},
methods
:
{
// 关闭自定义日期选择
onClose
()
{
this
.
setData
({
show
:
false
});
},
// 跳转到店铺选择
selectContent
()
{
wx
.
navigateTo
({
url
:
'/pages/shopSelect/index?current='
+
JSON
.
stringify
(
this
.
data
.
columnsListName
),
})
},
// 点击自定义日期选择器的确定
onConfirm
(
event
)
{
const
[
start
,
end
]
=
event
.
detail
;
let
startDate
=
moment
(
start
).
format
(
"YYYY-MM-DD"
)
let
endDate
=
moment
(
end
).
format
(
"YYYY-MM-DD"
)
this
.
setData
({
show
:
false
,
currentTime
:
startDate
+
'至'
+
endDate
},
()
=>
{
this
.
loadData
()
});
},
// 点击时间选择类型触发
ClickTab
(
e
)
{
let
dateType
=
e
.
target
.
dataset
.
type
,
time
switch
(
dateType
)
{
case
'1'
:
time
=
moment
().
format
(
"YYYY-MM-DD"
)
break
;
case
'2'
:
time
=
moment
().
subtract
(
1
,
"days"
).
format
(
"YYYY-MM-DD"
)
break
;
case
'3'
:
time
=
moment
().
subtract
(
6
,
"days"
).
format
(
"YYYY-MM-DD"
)
+
'至'
+
moment
().
format
(
"YYYY-MM-DD"
)
break
;
case
'4'
:
time
=
moment
().
subtract
(
29
,
"days"
).
format
(
"YYYY-MM-DD"
)
+
'至'
+
moment
().
format
(
"YYYY-MM-DD"
)
break
;
default
:
this
.
setData
({
show
:
true
,
types
:
e
.
target
.
dataset
.
type
,
})
break
;
}
if
(
dateType
!=
5
)
{
this
.
setData
({
types
:
e
.
target
.
dataset
.
type
,
currentTime
:
time
},
()
=>
{
this
.
loadData
()
})
}
},
// 获取卡片数据
getCardList
()
{
// console.log(this.data.currentTime,this.data.selectId,this.data.selectName)
let
startTime
=
this
.
data
.
currentTime
,
endTime
=
this
.
data
.
currentTime
if
(
this
.
data
.
currentTime
.
includes
(
'至'
))
{
let
timeArr
=
this
.
data
.
currentTime
.
split
(
'至'
)
startTime
=
timeArr
[
0
]
endTime
=
timeArr
[
1
]
}
getCardData
({
mallId
:
this
.
data
.
selectId
,
// mallId: 9300,
startDate
:
startTime
,
endDate
:
endTime
}).
then
(
res
=>
{
if
(
res
.
code
==
200
)
{
let
data
=
res
.
data
this
.
setData
({
exposure
:
data
.
exposure
,
traffic
:
data
.
traffic
,
customer
:
data
.
customer
,
entryRate
:
data
.
entryRate
&&
data
.
entryRate
.
toFixed
(
2
)
})
}
})
},
// 获取业态客流趋势
getTrendList
()
{
let
startTime
=
this
.
data
.
currentTime
,
endTime
=
this
.
data
.
currentTime
if
(
this
.
data
.
currentTime
.
includes
(
'至'
))
{
let
timeArr
=
this
.
data
.
currentTime
.
split
(
'至'
)
startTime
=
timeArr
[
0
]
endTime
=
timeArr
[
1
]
}
let
dataIndex
,
dataLevel
=
'day'
if
(
this
.
data
.
trendtypes
==
1
)
{
dataIndex
=
'Exposure'
}
else
if
(
this
.
data
.
trendtypes
==
2
)
{
dataIndex
=
'PassengerFlow'
}
else
if
(
this
.
data
.
trendtypes
==
3
)
{
dataIndex
=
'CustomerNum'
}
else
if
(
this
.
data
.
trendtypes
==
4
)
{
dataIndex
=
'IntoStoreRate'
}
if
(
startTime
==
endTime
)
{
dataLevel
=
'hour'
}
getTrendData
({
// mallId: 9300,
mallId
:
this
.
data
.
selectId
,
startDate
:
startTime
,
endDate
:
endTime
,
dataIndex
,
dataLevel
}).
then
(
res
=>
{
if
(
res
.
code
==
200
)
{
this
.
setData
({
chartData
:
this
.
getLineConfig
(
res
.
data
),
//客流趋势分析数据
})
}
})
},
// 获取停留时长统计
getStopTimeList
()
{
let
startTime
=
this
.
data
.
currentTime
,
endTime
=
this
.
data
.
currentTime
if
(
this
.
data
.
currentTime
.
includes
(
'至'
))
{
let
timeArr
=
this
.
data
.
currentTime
.
split
(
'至'
)
startTime
=
timeArr
[
0
]
endTime
=
timeArr
[
1
]
}
getStopTimeData
({
mallId
:
this
.
data
.
selectId
,
// mallId: 9300,
startDate
:
startTime
,
endDate
:
endTime
}).
then
(
res
=>
{
if
(
res
.
code
==
200
)
{
this
.
setData
({
chartDatastop
:
this
.
getStopTimeConfig
(
res
.
data
),
})
}
})
},
// 获取性别和年龄
getAgeSexList
()
{
let
startTime
=
this
.
data
.
currentTime
,
endTime
=
this
.
data
.
currentTime
if
(
this
.
data
.
currentTime
.
includes
(
'至'
))
{
let
timeArr
=
this
.
data
.
currentTime
.
split
(
'至'
)
startTime
=
timeArr
[
0
]
endTime
=
timeArr
[
1
]
}
getAgeSexData
({
mallId
:
this
.
data
.
selectId
,
// mallId: 9300,
startDate
:
startTime
,
endDate
:
endTime
}).
then
(
res
=>
{
if
(
res
.
code
==
200
)
{
this
.
setData
({
chartDataSex
:
this
.
getGroupSexConfig
(
res
.
data
),
})
}
})
getAgeData
({
mallId
:
this
.
data
.
selectId
,
// mallId: 9300,
startDate
:
startTime
,
endDate
:
endTime
}).
then
(
res
=>
{
console
.
log
(
res
,
'7777'
)
if
(
res
.
code
==
200
)
{
this
.
setData
({
chartDataAge
:
this
.
getAgeConfig
(
res
.
data
)
})
}
})
},
// 获取性别和年龄
getShopDetailList
()
{
// getShopDetailData().then(res => {})
},
// 获取所有数据
loadData
()
{
this
.
getCardList
()
this
.
getTrendList
()
this
.
getStopTimeList
()
this
.
getAgeSexList
()
this
.
getShopDetailList
()
},
//点击业态客流趋势top5中的tab触发
ClickPassageFlow
(
e
)
{
this
.
setData
({
trendtypes
:
e
.
target
.
dataset
.
type
},
()
=>
{
this
.
getTrendList
()
})
},
// 返回趋势图配置项
getLineConfig
(
res
)
{
let
xasix
=
res
.
xaxis
.
data
// let legendList = res.series.map(item => item.name)
let
seriesList
=
res
.
series
return
{
grid
:
{
top
:
30
,
right
:
20
,
bottom
:
20
,
left
:
5
,
containLabel
:
true
},
tooltip
:
{
trigger
:
'axis'
,
axisPointer
:
{
type
:
"line"
,
lineStyle
:
{
color
:
"#444"
,
},
},
formatter
:
function
(
params
)
{
let
html
=
''
params
.
forEach
(
item
=>
{
html
+=
item
.
axisValue
+
'\n'
+
item
.
seriesName
+
': '
+
item
.
value
})
return
html
}
},
xAxis
:
{
axisLabel
:
{
color
:
'#8C8D95'
},
boundaryGap
:
false
,
axisTick
:
{
show
:
true
},
axisLine
:
{
lineStyle
:
{
color
:
'rgba(140,141,149,0.35)'
,
width
:
1
}
},
data
:
xasix
},
yAxis
:
{
type
:
'value'
,
axisLabel
:
{
color
:
'#8C8D95'
,
formatter
:
function
(
value
,
index
)
{
if
(
value
>=
10000
&&
value
<
1000000
)
{
value
=
value
/
10000
+
"万"
;
}
else
if
(
value
>=
1000000
)
{
value
=
value
/
1000000
+
"百万"
;
}
return
value
;
},
},
axisTick
:
{
show
:
true
,
},
axisLine
:
{
show
:
false
,
},
splitLine
:
{
show
:
false
}
},
color
:
[
'#FD8C5E'
,
'#6FD3FF'
,
'#BC7FF8'
,
'#4F75FF'
,
'#FF9AC1'
],
// series:seriesList.map(item=>({...item,symbol: 'none',smooth: true,}))
series
:
[{
name
:
res
.
series
[
0
]
&&
res
.
series
[
0
].
name
,
smooth
:
true
,
lineStyle
:
{
color
:
'#34BFFF'
},
areaStyle
:
{
// 区域颜色
color
:
{
type
:
'linear'
,
x
:
0
,
//右
y
:
0
,
//下
x2
:
0
,
//左
y2
:
1
,
//上
colorStops
:
[{
offset
:
0.1
,
color
:
'#EAF3FF'
// 0% 处的颜色
},
{
offset
:
1
,
color
:
'#FFFFFF'
// 100% 处的颜色
}
]
},
},
data
:
res
.
series
[
0
]
&&
res
.
series
[
0
].
data
,
type
:
"line"
,
symbol
:
"none"
,
showSymbol
:
false
,
symbolSize
:
20
,
}]
}
},
// 返回停留时长配置
getStopTimeConfig
(
confingData
)
{
// let data_sample = [
// ["type", "停留时长", ''],
// ["进样", 50, 200],
// ["离心", 10, 200],
// ["去盖", 30, 200],
// ["侧轨", 15, 200],
// ["侧轨1", 15, 200],
// ["侧轨2", 15, 200],
// ["侧轨3", 15, 200],
// ["出样", 18, 200]
// ];
let
data_sample
=
[];
confingData
.
xaxis
.
data
.
forEach
((
item
,
i
)
=>
{
let
arr
=
[];
arr
[
0
]
=
item
;
arr
[
1
]
=
confingData
.
series
[
0
].
data
[
i
];
arr
[
2
]
=
100
;
data_sample
.
push
(
arr
);
});
data_sample
.
unshift
([
"type"
,
confingData
.
title
,
""
]);
return
{
color
:
[
"#33CCFF"
,
"#CCEEFF"
],
legend
:
{
show
:
false
},
grid
:
{
left
:
"3%"
,
right
:
"4%"
,
bottom
:
"3%"
,
top
:
"10px"
,
containLabel
:
true
},
xAxis
:
{
type
:
"value"
,
// boundaryGap: [0, 0.01],
axisLine
:
{
show
:
false
},
splitLine
:
{
show
:
false
},
axisTick
:
{
show
:
false
},
axisLabel
:
{
show
:
false
}
},
yAxis
:
{
type
:
"category"
,
inverse
:
true
,
axisLine
:
{
show
:
false
},
splitLine
:
{
show
:
false
},
axisTick
:
{
show
:
false
}
},
dataset
:
{
source
:
data_sample
},
series
:
[{
name
:
"停留时长"
,
type
:
"bar"
,
barWidth
:
"40%"
,
label
:
{
show
:
true
,
formatter
:
function
(
params
)
{
return
params
.
data
[
1
]
+
"%"
;
},
position
:
[
"102%"
,
"0%"
]
},
itemStyle
:
{
color
:
"#679BFF"
},
z
:
3
//让实时在总计上面
},
{
name
:
""
,
type
:
"bar"
,
barWidth
:
"40%"
,
itemStyle
:
{
color
:
"#F5F7F9"
},
barGap
:
"-100%"
}
]
};
},
// 返回客群性别占比配置
getGroupSexConfig
(
faceGender
)
{
// let faceGender = {
// "title": "人脸性别统计",
// "series": [{
// "name": "人脸性别统计",
// "data": [{
// "name": "男",
// "value": 85
// },
// {
// "name": "女",
// "value": 262
// }
// ],
// "type": "pie"
// }]
// }
let
seriesData
=
faceGender
.
series
[
0
].
data
;
let
sexLabel
=
faceGender
.
series
[
0
].
data
.
map
(
item
=>
item
.
name
);
let
number
=
faceGender
.
series
[
0
].
data
.
map
(
item
=>
item
.
value
);
let
sum
=
number
[
0
]
*
1
+
number
[
1
]
*
1
;
let
rate
=
faceGender
.
series
[
0
].
data
.
map
(
item
=>
((
item
.
value
/
sum
)
*
100
).
toFixed
(
2
)
);
if
(
rate
[
0
]
==
"NaN"
||
rate
[
1
]
==
"NaN"
)
{
rate
=
[
0
,
0
];
}
return
{
color
:
[
"#FF8383"
,
"#70AAFB"
],
grid
:
{
top
:
"15%"
,
left
:
20
,
right
:
"1%"
,
bottom
:
5
},
legend
:
[{
orient
:
"vertical"
,
top
:
"center"
,
icon
:
"circle"
,
right
:
10
,
textStyle
:
{
color
:
"#000"
,
fontSize
:
14
},
data
:
sexLabel
,
formatter
:
function
(
name
)
{
for
(
var
i
=
0
;
i
<
sexLabel
.
length
;
i
++
)
{
if
(
sexLabel
[
i
]
==
name
)
{
return
name
+
" "
+
" "
+
rate
[
i
]
+
"%"
;
}
}
}
}],
series
:
[{
name
:
"需求类型占比"
,
type
:
"pie"
,
center
:
[
"30%"
,
"50%"
],
radius
:
[
"36%"
,
"70%"
],
showEmptyCircle
:
true
,
itemStyle
:
{
// normal: {
// borderColor: "#050e31",
// borderWidth: 2
// }
},
label
:
{
normal
:
{
show
:
false
,
position
:
"inside"
,
// color: "rgba(255, 255, 255, 0.8)",
color
:
"#000"
,
// formatter: "{value|{c}}",
formatter
:
function
(
params
)
{
return
params
.
name
+
"\n"
+
params
.
percent
+
"%"
;
}
// rich: {
// value: {
// fontSize: 20,
// color: "#000",
// },
// },
}
},
labelLine
:
{
show
:
false
,
length
:
0
,
length2
:
0
},
data
:
seriesData
}]
};
},
// 返回客群年龄占比
getAgeConfig
(
faceAge
)
{
// let faceAge = {
// "title": "人脸年龄统计",
// "series": [{
// "name": "少年(18岁以内)",
// "data": [
// 7,
// 21
// ],
// "type": "bar"
// },
// {
// "name": "青年(19-35岁)",
// "data": [
// 54,
// 193
// ],
// "type": "bar"
// },
// {
// "name": "中年(36-55岁)",
// "data": [
// 20,
// 45
// ],
// "type": "bar"
// },
// {
// "name": "老年(55岁以上)",
// "data": [
// 4,
// 3
// ],
// "type": "bar"
// }
// ],
// "xaxis": {
// "data": [
// "男",
// "女"
// ]
// }
// }
let
xdata
=
faceAge
.
series
.
map
(
item
=>
item
.
name
);
let
ydatas
=
faceAge
.
series
.
map
(
item
=>
{
return
item
.
data
[
0
]
*
1
+
item
.
data
[
1
]
*
1
;
});
let
sums
=
ydatas
.
reduce
((
pre
,
item
)
=>
pre
+
item
,
0
);
let
ydata
=
ydatas
.
map
(
item
=>
((
item
/
sums
)
*
100
).
toFixed
(
2
));
return
{
tooltip
:
{
trigger
:
"axis"
,
axisPointer
:
{
type
:
"shadow"
},
formatter
:
function
(
params
)
{
let
html
=
''
params
.
forEach
(
item
=>
{
html
+=
item
.
axisValue
+
'\n'
+
' '
+
item
.
value
})
return
html
},
transitionDuration
:
0
},
grid
:
{
top
:
"10%"
,
right
:
"5%"
,
left
:
"10%"
,
bottom
:
"15%"
},
xAxis
:
[{
type
:
"category"
,
axisLabel
:
{
color
:
"#8C8D95"
,
},
axisLine
:
{
show
:
true
,
lineStyle
:
{
color
:
"#0a3e98"
}
},
axisTick
:
{
show
:
true
},
splitLine
:
{
show
:
false
,
lineStyle
:
{
color
:
"#195384"
,
type
:
"dotted"
}
},
// data: ["小西关村", "谢家井社区", "石家庄村", "大东关社区"],
data
:
xdata
}],
yAxis
:
[{
type
:
"value"
,
name
:
""
,
min
:
0
,
position
:
"left"
,
nameTextStyle
:
{
color
:
"#fff"
,
fontSize
:
11
},
axisLine
:
{
show
:
false
,
lineStyle
:
{
color
:
"#0a3e98"
}
},
axisTick
:
{
show
:
true
},
splitLine
:
{
show
:
false
,
lineStyle
:
{
color
:
"#0a3e98"
,
type
:
"dotted"
}
},
axisLabel
:
{
formatter
:
"{value}"
,
textStyle
:
{
color
:
"#8C8D95"
}
}
}],
series
:
[{
name
:
""
,
type
:
"bar"
,
barWidth
:
25
,
//柱子宽度
barGap
:
0.3
,
//柱子之间间距
itemStyle
:
{
normal
:
{
color
:
'#70AAFB'
,
opacity
:
1
,
},
},
label
:
{
normal
:
{
show
:
true
,
position
:
"top"
,
formatter
:
"{c}%"
,
color
:
"#8C8D95"
}
}
},
// data: ["104", "60", "145", "328"],
data
:
ydata
// animationDuration: function (idx) {
// return idx * 1500 + 1000;
// }
}]
};
},
}
}
})
})
\ No newline at end of file
\ No newline at end of file
miniProject/index/index2.json
View file @
7427b7a
{
{
"usingComponents"
:
{}
"usingComponents"
:
{
"basic"
:
"/components/echart/basic/index"
,
"van-calendar"
:
"@vant/weapp/calendar/index"
}
}
}
\ No newline at end of file
\ No newline at end of file
miniProject/index/index2.wxml
View file @
7427b7a
<view class="intro">接口</view>
\ No newline at end of file
\ No newline at end of file
<!--pages/homes/index.wxml-->
<view class="title">店铺首页</view>
<view class="container">
<!-- 名称 -->
<view class="contianer_shop">
<image src="../images/back.svg" class='images'></image>
<view class="shop_name" bindtap="selectContent">{{selectName}}</view>
<view class="shop_time">
<text>营业时间:{{info.startTime}}至{{info.endTime}}</text>
<text style="margin:0 10rpx"> 面积:{{info.area}}㎡ </text>
<text> {{info.weather}}</text>
</view>
</view>
<!-- 选择时间 -->
<view class="tab_tll">
<text class="text_tltle {{types==1?'actives':'defaults'}}" bindtap="ClickTab" data-type='1'>当日</text>
<text class="text_tltle {{types==2?'actives':'defaults'}}" bindtap="ClickTab" data-type='2'>昨日</text>
<text class="text_tltle {{types==3?'actives':'defaults'}}" bindtap="ClickTab" data-type='3'>近7日</text>
<text class="text_tltle {{types==4?'actives':'defaults'}}" bindtap="ClickTab" data-type='4'>近30日</text>
<text class="text_tltle {{types==5?'actives':'defaults'}}" bindtap="ClickTab" data-type='5'>自定义</text>
</view>
<view class="time_input">
<image src="../images/rili.png" style="width:20px;height:20px;margin-right:20rpx"></image>
<text>{{currentTime}}</text>
</view>
<!-- 卡片 -->
<view class="card">
<view class="card_passage">
<image src="../images/keliulaing.png" class="card_image"></image>
<view class="er"> 客流量</view>
<view class="er"> {{traffic}}</view>
</view>
<view class="card_passage">
<image src="../images/keliuliangyellow.png" class="card_image"></image>
<view class="er"> 曝光量</view>
<view class="er"> {{exposure}}</view>
</view>
<view class="card_passage">
<image src="../images/customer.png" class="card_image"></image>
<view class="er"> 顾客人数</view>
<view class="er"> {{customer}}</view>
</view>
<view class="card_passage">
<image src="../images/jindianlv.png" class="card_image"></image>
<view class="er"> 进店率</view>
<view class="er"> {{entryRate}}%</view>
</view>
</view>
<!-- 客流趋势分析 -->
<view class="keliuliang" style="margin-top:30rpx">
<text class="title_chart">业态客流TOP5走势</text>
<view class="tab_tll">
<text class="text_tltle {{trendtypes==1?'actives':'defaults'}}" bindtap="ClickPassageFlow" data-type='1'>过店客流</text>
<text class="text_tltle {{trendtypes==2?'actives':'defaults'}}" bindtap="ClickPassageFlow" data-type='2'>进店客流</text>
<text class="text_tltle {{trendtypes==3?'actives':'defaults'}}" bindtap="ClickPassageFlow" data-type='3'>顾客人数</text>
<text class="text_tltle {{trendtypes==4?'actives':'defaults'}}" bindtap="ClickPassageFlow" data-type='4'>进店率</text>
</view>
<basic chartId='chartDatatrend' chartData="{{chartData}}" height="500rpx"></basic>
</view>
<!-- 停留时长统计 -->
<view class="keliuliang" style="margin-top:30rpx">
<text class="title_chart">停留时长统计</text>
<!-- <view class="stome_time">
人均停留时长 <text>31</text> 分
</view> -->
<basic chartId='chartDatastop' chartData="{{chartDatastop}}" height="500rpx"></basic>
</view>
<!-- 客群性别占比 -->
<view class="keliuliang" style="margin-top:30rpx">
<text class="title_chart">客群性别占比</text>
<basic chartId='chartDataSex' chartData="{{chartDataSex}}" height="500rpx"></basic>
</view>
<!--客群年龄占比 -->
<view class="keliuliang" style="margin-top:30rpx">
<text class="title_chart">客群年龄占比</text>
<basic chartId='chartDataAge' chartData="{{chartDataAge}}" height="500rpx"></basic>
</view>
<!-- 自定义时间选择器 -->
<van-calendar show="{{ show }}" min-date="{{ minDate }}" max-date="{{ maxDate }}" bind:close="onClose" color="#447bff" bind:confirm="onConfirm" type='range' />
</view>
\ No newline at end of file
\ No newline at end of file
miniProject/index/index2.wxss
View file @
7427b7a
.intro {
/* pages/homes/index.wxss */
margin: 30px;
.title {
text-align: center;
box-sizing: border-box;
padding-top: 60px
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: 99;
display: flex;
align-items: center;
justify-content: center;
background-color: #D5E2FF;
height: 160rpx;
font-size: 34rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
padding-top: 40rpx;
color: #000000;
}
.container {
margin-top: 160rpx;
padding: 10rpx 20rpx;
background: linear-gradient(154deg, #C7D3FF 0%, #E9F9FF 48%, #FFFFFF 100%);
}
.contianer_shop {
width: 100%;
height: 168rpx;
position: relative;
}
.images {
position: absolute;
left: 0;
top: 0;
z-index: 0;
width: 100%;
height: 100%;
}
.shop_name {
margin: 20rpx 0 10rpx 20rpx;
font-size: 34rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
display: flex;
align-items: flex-end;
position: relative;
z-index: 1;
}
.shop_name::after {
content: '';
width: 0;
height: 0;
margin-left: 10rpx;
border: 20rpx solid #fff;
border-color: transparent;
border-top-color: #fff;
}
.shop_time {
margin-left: 20rpx;
font-size: 26rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(255, 255, 255, 0.65);
position: relative;
}
.tab_tll {
padding: 0 10rpx;
width: 100%;
margin-top: 30rpx;
position: relative;
display: flex;
justify-content: space-between;
}
.tab_tll .text_tltle {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
}
.actives {
color: #000000;
border-bottom: 4px solid #447BFF;
}
.defaults {
color: rgba(0, 0, 0, 0.65);
}
.time_input {
margin-top: 30rpx;
width: 100%;
height: 80rpx;
background-color: rgba(131, 164, 255, 0.39);
border-radius: 40rpx;
display: flex;
align-items: center;
padding: 0 0 0 50rpx;
}
.card {
width: 100%;
margin-top: 30rpx;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.card>view {
width: 48%;
height: 148rpx;
/* background-color: red; */
position: relative;
padding: 10rpx 20rpx;
}
.card>view:nth-child(n+3) {
margin-top: 30rpx;
}
.card_image {
position: absolute;
left: 0;
top: 0;
z-index: 0;
width: 100%;
height: 148rpx;
}
.er{
position: relative;
z-index: 1;
}
.card_passage {
display: flex;
flex-direction: column;
justify-content: space-between;
font-size: 40rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
}
.keliuliang {
width: 100%;
padding: 20rpx;
border-radius: 20rpx;
background-color: #fff;
}
.keliuliang>text {
height: 44rpx;
font-size: 32rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
line-height: 44rpx;
display: flex;
align-items: center;
}
.keliuliang>text::before {
content: '';
width: 6rpx;
height: 30rpx;
margin-right: 10rpx;
background: #5889FF;
border-radius: 3rpx;
}
.title_chart {
font-size: 32rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: rgba(0, 0, 0, 0.85);
}
.stome_time {
margin-top: 20rpx;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(0, 0, 0, 0.65);
}
.stome_time text {
font-size: 30rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #5A95EC;
}
}
\ No newline at end of file
\ No newline at end of file
miniProject/project.config.json
View file @
7427b7a
Write
Preview
Markdown
is supported
Attach a file
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 post a comment