xiaoyu
472 lines
11 KiB
JavaScript
472 lines
11 KiB
JavaScript
import _ from '../../commons/js/commons';
|
|
import popularData from '../../commons/js/lib/popularData';
|
|
import * as echarts from '../../ecCanvas/components/ec-canvas/echarts';
|
|
const app = getApp()
|
|
|
|
let lineChartData;
|
|
let FunnelChartData;
|
|
function lineChart(canvas, width, height, dpr) {
|
|
const chart = echarts.init(canvas, null, {
|
|
width: width,
|
|
height: height,
|
|
devicePixelRatio: dpr // new
|
|
});
|
|
canvas.setChart(chart);
|
|
let option = lineChartData
|
|
chart.setOption(option);
|
|
return chart;
|
|
}
|
|
function FunnelChart(canvas, width, height, dpr) {
|
|
const chart = echarts.init(canvas, null, {
|
|
width: width,
|
|
height: height,
|
|
devicePixelRatio: dpr // new
|
|
});
|
|
canvas.setChart(chart);
|
|
let option = FunnelChartData
|
|
chart.setOption(option);
|
|
return chart;
|
|
}
|
|
|
|
Page({
|
|
data: {
|
|
imgUrl: _.config.imgUrl,//静态图片路径
|
|
showFunnelChart:false,//是否显示Funnel图表
|
|
ecFunnel:{},
|
|
showLineChart:false,//是否显示Line图表
|
|
ecLine:{},
|
|
daysIndex:0,
|
|
daysArray:['近一周','近30日'],
|
|
isShowTip:false,
|
|
tipIndex:0,
|
|
},
|
|
|
|
onLoad: function (options) {
|
|
for (let key in options) {
|
|
this.setData({
|
|
[key]: options[key]
|
|
})
|
|
}
|
|
|
|
popularData.getDateLater(0,0).then(res => {
|
|
let s_date = res[0]
|
|
s_date= s_date.split('-')[0]+'-'+s_date.split('-')[1]+'-01'
|
|
this.setData({
|
|
s_date,
|
|
e_date:res[1],
|
|
current_date:res[1],
|
|
})
|
|
|
|
this.getAppArea()
|
|
})
|
|
|
|
},
|
|
|
|
//20240526 获取系统配置城市省市
|
|
getAppArea(){
|
|
_.apiQuery.getAppCityLists().then(res => {
|
|
let area_list = res.data.area_list
|
|
let area_id = res.data.default_area_id
|
|
let areaArr = []
|
|
// let cur_index = []
|
|
area_list.forEach((item,index) => {
|
|
if(item.province_id==area_id[0]){
|
|
item.children.forEach((it,idx)=>{
|
|
if(it.city_id==area_id[1]){
|
|
// cur_index = [item.province_id,it.city_id]
|
|
this.setData({
|
|
areaIndex: [index,idx]
|
|
})
|
|
areaArr = [area_list,area_list[index].children]
|
|
return;
|
|
}
|
|
})
|
|
}
|
|
});
|
|
|
|
this.setData({
|
|
area_id: area_id,
|
|
area_list: area_list,
|
|
areaArr: areaArr,
|
|
province_id:area_id[0],
|
|
city_id:area_id[1]
|
|
})
|
|
this.getAppStatisticsStats()
|
|
this.getAppStatisticsStats_days()
|
|
});
|
|
},
|
|
|
|
//20240526地区联动
|
|
columnChangeArea(e){
|
|
let multiData = this.data.area_list;
|
|
let multiIndex = this.data.areaIndex;
|
|
let columnIndex = e.detail.column;
|
|
let columnValue = e.detail.value;
|
|
|
|
multiIndex[columnIndex] = columnValue;
|
|
|
|
this.setData({
|
|
areaArr: [
|
|
multiData,
|
|
multiData[multiIndex[0]].children
|
|
],
|
|
})
|
|
},
|
|
|
|
//选择日期
|
|
changeDate(e){
|
|
if(e.currentTarget.dataset.type=="s_date"){
|
|
let begin = new Date(e.detail.value).getTime();
|
|
let end = new Date(this.data.e_date).getTime();
|
|
let day = 0
|
|
if(end>=begin){
|
|
day = (end - begin)/(24*60*60*1000);
|
|
this.setData({
|
|
s_date: e.detail.value,
|
|
})
|
|
}
|
|
else{
|
|
day = (begin - end)/(24*60*60*1000);
|
|
let s_date = this.data.e_date
|
|
let e_date = e.detail.value
|
|
this.setData({
|
|
s_date,
|
|
e_date,
|
|
})
|
|
}
|
|
if (day > 365) {
|
|
wx.showToast({
|
|
title: '请选择一年时间内',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
else{
|
|
this.getAppStatisticsStats()
|
|
}
|
|
}
|
|
if(e.currentTarget.dataset.type=="e_date"){
|
|
let begin = new Date(this.data.s_date).getTime();
|
|
let end = new Date(e.detail.value).getTime();
|
|
let day = 0
|
|
if(end>=begin){
|
|
day = (end - begin)/(24*60*60*1000);
|
|
this.setData({
|
|
e_date: e.detail.value,
|
|
})
|
|
}
|
|
else{
|
|
day = (begin - end)/(24*60*60*1000);
|
|
let e_date = this.data.s_date
|
|
let s_date = e.detail.value
|
|
this.setData({
|
|
s_date,
|
|
e_date,
|
|
})
|
|
}
|
|
if (day > 365) {
|
|
wx.showToast({
|
|
title: '请选择一年时间内',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
else{
|
|
this.getAppStatisticsStats()
|
|
}
|
|
}
|
|
|
|
},
|
|
|
|
//数据看板-漏斗
|
|
getAppStatisticsStats(){
|
|
this.setData({
|
|
showFunnelChart:false,
|
|
})
|
|
|
|
let params = {};
|
|
params['province_id'] = this.data.province_id;
|
|
params['city_id'] = this.data.city_id;
|
|
params['s_time'] = this.data.s_date;
|
|
params['e_time'] = this.data.e_date;
|
|
|
|
_.apiQuery.getAppStatisticsStats(params).then(res => {
|
|
|
|
wx.setNavigationBarTitle({
|
|
title: res.data.title
|
|
})
|
|
|
|
this.setData({
|
|
tabs:res.data.tabs,
|
|
})
|
|
|
|
//FunnelChartData = getFunnelOption()
|
|
FunnelChartData = {
|
|
series: [
|
|
{
|
|
name: 'Expected',
|
|
type: 'funnel',
|
|
top: '1%',
|
|
bottom:'5%',
|
|
left: '2%',
|
|
width: '72%',
|
|
label: {
|
|
position: 'right',
|
|
formatter: '{b}'
|
|
},
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
itemStyle: {
|
|
opacity: 0.7
|
|
},
|
|
data: []
|
|
},
|
|
{
|
|
name: 'Actual',
|
|
type: 'funnel',
|
|
top:'1%',
|
|
bottom:'5%',
|
|
left: '7%',
|
|
width: '62%',
|
|
maxSize: '62%',
|
|
label: {
|
|
position: 'inside',
|
|
formatter: '{c}',
|
|
color: '#000'
|
|
},
|
|
itemStyle: {
|
|
opacity: 0.4,
|
|
borderColor: '#fff',
|
|
borderWidth:1
|
|
},
|
|
data: [],
|
|
z: 100
|
|
}
|
|
]
|
|
};
|
|
if(res.data.funnel.actual_data[0].value==0&&res.data.funnel.actual_data[1].value==0&&res.data.funnel.actual_data[2].value==0){
|
|
FunnelChartData.series[1].itemStyle.opacity = 0
|
|
}
|
|
|
|
FunnelChartData.series[0].data = res.data.funnel.expected_data
|
|
FunnelChartData.series[1].data = res.data.funnel.actual_data
|
|
this.setData({
|
|
funneltitle:res.data.funnel.title,
|
|
showFunnelChart:true,
|
|
['ecFunnel.onInit']:FunnelChart,
|
|
})
|
|
|
|
wx.stopPullDownRefresh()
|
|
|
|
});
|
|
},
|
|
|
|
//客户/订单走势图
|
|
getAppStatisticsStats_days(){
|
|
this.setData({
|
|
showLineChart:false,
|
|
})
|
|
|
|
let params = {};
|
|
params['province_id'] = this.data.province_id;
|
|
params['city_id'] = this.data.city_id;
|
|
params['days'] = this.data.daysIndex == 0?'7':'30';
|
|
_.apiQuery.getAppStatisticsStats_days(params).then(res => {
|
|
|
|
//lineChartData = getLineOption()
|
|
lineChartData = {
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
top: 'bottom',
|
|
data: []
|
|
},
|
|
grid: {
|
|
top: '3%',
|
|
left: '2%',
|
|
right: '5%',
|
|
bottom: '20%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: []
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
series: []
|
|
};
|
|
|
|
lineChartData.legend.data = res.data.legend_data
|
|
lineChartData.xAxis.data = res.data.xAxis
|
|
lineChartData.series = res.data.series
|
|
this.setData({
|
|
linetitle:res.data.title,
|
|
showLineChart:true,
|
|
['ecLine.onInit']:lineChart,
|
|
})
|
|
|
|
wx.stopPullDownRefresh()
|
|
|
|
});
|
|
},
|
|
|
|
|
|
|
|
//选择天数
|
|
changeDays(e) {
|
|
this.setData({
|
|
daysIndex: e.detail.value
|
|
})
|
|
this.getAppStatisticsStats_days()
|
|
},
|
|
|
|
//显示隐藏提示
|
|
optShowTip(e) {
|
|
this.setData({
|
|
isShowTip:!this.data.isShowTip,
|
|
})
|
|
if(e.currentTarget.dataset.index){
|
|
this.setData({
|
|
tipIndex:e.currentTarget.dataset.index
|
|
})
|
|
}
|
|
},
|
|
|
|
|
|
//推送链接
|
|
pushLink(e) {
|
|
if(e.currentTarget.dataset.url){
|
|
_.$router.openUrlScheme(e.currentTarget.dataset.url)
|
|
}
|
|
},
|
|
|
|
//选择城市
|
|
changeArea(e) {
|
|
this.setData({
|
|
province_id:this.data.area_list[e.detail.value[0]]['province_id'],
|
|
city_id:this.data.area_list[e.detail.value[0]].children[e.detail.value[1]].city_id,
|
|
areaIndex: e.detail.value,
|
|
})
|
|
this.getAppStatisticsStats()
|
|
this.getAppStatisticsStats_days()
|
|
},
|
|
|
|
//页面相关事件处理函数--监听用户下拉动作
|
|
onPullDownRefresh: function () {
|
|
this.getAppStatisticsStats()
|
|
this.getAppStatisticsStats_days()
|
|
},
|
|
|
|
})
|
|
|
|
function getFunnelOption() {
|
|
return {
|
|
// legend: {
|
|
// top: 'bottom',
|
|
// data: ['客户量', '到店数', '成交数']
|
|
// },
|
|
series: [
|
|
{
|
|
name: 'Expected',
|
|
type: 'funnel',
|
|
top: '1%',
|
|
bottom:'5%',
|
|
left: '2%',
|
|
width: '72%',
|
|
label: {
|
|
position: 'right',
|
|
formatter: '{b}'
|
|
},
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
itemStyle: {
|
|
opacity: 0.7
|
|
},
|
|
data: [
|
|
{ value: 33.3, name: '成交数(10%)' },
|
|
{ value: 66.6, name: '到店数(25%)' },
|
|
{ value: 100, name: '客户数(100%)' }
|
|
]
|
|
},
|
|
{
|
|
name: 'Actual',
|
|
type: 'funnel',
|
|
top:'1%',
|
|
bottom:'5%',
|
|
left: '7%',
|
|
width: '62%',
|
|
maxSize: '62%',
|
|
label: {
|
|
position: 'inside',
|
|
formatter: '{c}',
|
|
color: '#000'
|
|
},
|
|
itemStyle: {
|
|
opacity: 0.4,
|
|
borderColor: '#fff',
|
|
borderWidth:1
|
|
},
|
|
// emphasis: {
|
|
// label: {
|
|
// position: 'inside',
|
|
// formatter: '{b}: {c}'
|
|
// }
|
|
// },
|
|
data: [
|
|
{ value: 20, name: '成交数' },
|
|
{ value: 50, name: '到店数' },
|
|
{ value:200, name: '客户量' }
|
|
],
|
|
z: 100
|
|
}
|
|
]
|
|
};
|
|
}
|
|
|
|
function getLineOption() {
|
|
|
|
return{
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
top: 'bottom',
|
|
data: ['客户数', '订单数',]
|
|
},
|
|
grid: {
|
|
top: '3%',
|
|
left: '2%',
|
|
right: '5%',
|
|
bottom: '20%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: ['1', '2', '3','4','5','6','7',]
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
series: [
|
|
{
|
|
name: '客户数',
|
|
type: 'line',
|
|
//stack: '总量',//累加
|
|
data: [20, 30, 50, 60, 66, 70, 73, ],
|
|
smooth: true,
|
|
},
|
|
{
|
|
name: '订单数',
|
|
type: 'line',
|
|
//stack: '总量',//累加
|
|
data: [10, 10, 10,1, 1, 1, 1,],
|
|
smooth: true,
|
|
},
|
|
]
|
|
};
|
|
} |