Jelajahi Sumber

'改报表分析'

魏志佳 4 tahun lalu
induk
melakukan
db7288808d
1 mengubah file dengan 317 tambahan dan 75 penghapusan
  1. 317 75
      src/views/modules/autoLaunch/autoLaunchReport.vue

+ 317 - 75
src/views/modules/autoLaunch/autoLaunchReport.vue

@@ -98,9 +98,9 @@
                     <a-radio :value="4">
                         素材曝光数
                     </a-radio>
-                    <a-radio :value="5">
-                        转化数
-                    </a-radio>
+                    <!-- <a-radio :value="5">
+                        转化数@
+                    </a-radio> -->
                 </a-radio-group>
             </div>
             <a-spin :spinning="spinning">
@@ -136,13 +136,13 @@
                     size="middle"
                     :columns="columns"
                     :dataSource="tableData"
-                    :pagination='ipagination'
+                    :pagination='true'
                     bordered
                     id="outTable"       
                     :loading="loading"
                     style="word-break: break-all;font-size:16px;font-weight:600"
                     :scroll="{'x':scrollX}"
-                     @change="sort"
+                     
                     >
                         <span slot="ctr" slot-scope="ctr">{{ ctr | toPercentage }}</span>
                         <span slot="cost" slot-scope="cost">{{ cost | decimalsHandle }}</span>
@@ -835,6 +835,10 @@ const publicColumns = [
                 materialtableData:[],
                 materialloading:false,
                 materialscrollX:4000,
+
+                age:[],
+                gender:[],
+                region:[],
             }
         },
         methods: {
@@ -1102,7 +1106,7 @@ const publicColumns = [
                 
             },
             disabledDate(current) {           
-                return current && current < moment().subtract(1, 'day')
+                return current && current > moment()
             }, 
             dateChange(date, dateString) {
                 // console.log(date,dateString)               
@@ -1115,13 +1119,17 @@ const publicColumns = [
                 console.log('radio checked', e.target.value);
                 if(e.target.value==2){
                     this.columns=[...sexColumns,...publicColumns];
-                    
+                    this.tableData=this.gender
                 }else if(e.target.value==1){
                     this.columns=[...regionColumns,...publicColumns]
+                    this.tableData=this.region
                 }else if(e.target.value==3){
                     this.columns=[...ageColumns,...publicColumns]
+                    this.tableData=this.age
                 }
                 this.getDetailTableData()
+
+                
             },
 
             // directionalTableHttp(){
@@ -1311,7 +1319,7 @@ const publicColumns = [
                        
                         type:"scroll",
                         orient: 'vertical',
-                        left:'10%',
+                        left:'2%',
                         align:'left',
                         top:'middle',
                         textStyle: {
@@ -1337,7 +1345,12 @@ const publicColumns = [
                 const colorList = ['#58D5FF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A','#9E87FF']
                 var option = {
                     tooltip: {
-                        trigger: 'item'
+                        trigger: 'item',
+                        formatter: "{a} <br/>{b} : {c} ({d}%)"
+                    },
+                    toolbox: {
+                        show : true,
+                    
                     },
                     title: {
                         text: '年龄分布',
@@ -1345,6 +1358,25 @@ const publicColumns = [
                         left: 'left',
 
                     },
+                    // grid: {
+                    //     right: '5%',
+                    //     top: '20%',
+                    //     left:'15%',
+                    //     bottom: '10%',
+                    //     width: '20%'
+                    // },
+                    legend: {
+                       
+                        type:"scroll",
+                        orient: 'vertical',
+                        left:'2%',
+                        align:'left',
+                        top:'middle',
+                        textStyle: {
+                            color:'#8C8C8C'
+                        },
+                        height:200
+                    },
                     series: [{
                         type: 'pie',
                         // center: ['30%', '30%'],
@@ -1392,12 +1424,12 @@ const publicColumns = [
                 return option
             },
             //点击分页
-            sort(pagination, filters, sorter, { currentDataSource }){
-                console.log(pagination)
-                this.ipagination.current=pagination.current;
-                this.ipagination.pageSize=pagination.pageSize;
-                this.getDetailTableData()
-            },
+            // sort(pagination, filters, sorter, { currentDataSource }){
+            //     console.log(pagination)
+            //     this.ipagination.current=pagination.current;
+            //     this.ipagination.pageSize=pagination.pageSize;
+            //     this.getEchartData()
+            // },
             materialTableChange(pagination, filters, sorter, { currentDataSource }){
                 console.log(pagination)
                 this.materialipagination.current=pagination.current;
@@ -1415,104 +1447,314 @@ const publicColumns = [
                 }else{
                     this.materialColumns=[...directional,...publicColumns]
                 }
-                this.getRelativeData()
+                // this.getRelativeData()
             },  
 
             getEchartData(){
                 this.spinning=true;
+                 this.loading=true
                 let params=this.handlerParams();
                 params.dataType=this.value
-                postAction('',params).then(res=>{
+                postAction('/ai/analyze/chart/targetOrMaterial',params).then(res=>{
                     console.log(res)
+                    this.spinning=false;
+                     this.loading=false
+                    if(res.success){
 
-                    var province = ['北京', '广东', '浙江', '湖南', '河南', '安徽', '重庆', '山东', '江西', '四川', '江苏', '湖北', '福建', '上海', '广西', '河北', '陕西', '云南', '海南', '黑龙江', '辽宁', '山西', '天津', '甘肃', '内蒙古', '新疆', '宁夏', '吉林', '贵州', '青海', '西藏', '澳门', '香港', '台湾'];
-                    var data = [3554, 241, 296, 221, 206, 152, 147, 121, 109, 108, 99, 91, 80, 80, 58, 48, 56, 51, 43, 37, 34, 27, 24, 24, 16, 13, 12, 9, 9, 6, 0, 7, 8, 8]
-                    this.initEchart('mapEchart',this.handlerMapEchartOption(province,data))
-
-                    var data1=[
-                        {value:20, name:'男'},
-                        {value:30, name:'女'},
-                        {value:25, name:'其他'},
+                        this.age=res.result.age
+                        this.gender=res.result.gender
+                        this.region=res.result.region
+                        var province = ['北京', '广东', '浙江', '湖南', '河南', '安徽', '重庆', '山东', '江西', '四川', '江苏', '湖北', '福建', '上海', '广西', '河北', '陕西', '云南', '海南', '黑龙江', '辽宁', '山西', '天津', '甘肃', '内蒙古', '新疆', '宁夏', '吉林', '贵州', '青海', '西藏', '澳门', '香港', '台湾'];
                         
-                    ]
+                        let params=this.handlerRegion(province,this.region)
+                        console.log(params)
+                        this.initEchart('mapEchart',this.handlerMapEchartOption(province,params))
+                        
+                        
+                        let genderData=this.handlerGender(this.gender)
+                        this.initEchart('sexEchart',this.handlerSexOption(ageData))
 
-                    this.initEchart('sexEchart',this.handlerSexOption(data1))
+                        
+                        let   ageData=this.handlerAge(this.age)
+                        this.initEchart('ageEchart',this.handlerAgeOption(ageData))
+                        this.spinning=false
 
-                    var data2= [
-                        {
-                            name: 'first',
-                            value: 1
-                        }, {
-                            name: 'second',
-                            value: 2
-                        }, {
-                            name: 'third',
-                            value: 3
-                        }, {
-                            name: 'fourth',
-                            value: 4
-                        }, {
-                            name: 'fifth',
-                            value: 5
-                        }, {
-                            name: 'sixth',
-                            value: 6
-                        }]
-                    this.initEchart('ageEchart',this.handlerAgeOption(data2))
-                    this.spinning=false
+                        if(this.tableValue==1){
+                            this.tableData=res.result.region
+                        }else if(this.tableValue==2){
+                            this.tableData=res.result.gender
+                        }else if(this.tableValue==3){
+                            this.tableData=res.result.age
+                        }
+                    }
                 })
                 
 
             },
 
+            handlerRegion(province,data){
+                
+                let value=[];
+                switch (this.value) {
+                    case 1:
+                        province.forEach((ele,index)=>{
+                            value=data.map(item=>{
+                                if(item.province==ele){
+                                    if(item.cost){
+                                        return item.cost
+                                    }else{
+                                        return 0
+                                    }
+                                }
+                                
+                            })
+                        })
+                        
+                        break;
+                    case 2:
+                        province.forEach((ele,index)=>{
+                            value=data.map(item=>{
+                                if(item.province==ele){
+                                    
+                                    if(item.photoShow){
+                                        return item.photoShow
+                                    }else{
+                                        return 0
+                                    }
+                                }
+                                 
+                            })
+                        })
+                        break;
+                    case 3:
+                        province.forEach((ele,index)=>{
+                            value=data.map(item=>{
+                                if(item.province==ele){
+                                    if(item.photoClick){
+                                        return item.photoClick
+                                    }else{
+                                        return 0
+                                    }
+                                    
+                                }
+                                
+                            })
+                        })
+                        break;
+                    case 4:
+                        province.forEach((ele,index)=>{
+                            value=data.map(item=>{
+                                if(item.province==ele){
+                                   if(item.aclick){
+                                        return item.aclick
+                                    }else{
+                                        return 0
+                                    }
+                                }
+                                
+                            })
+                        })
+                        break;
+                
+                    default:
+                        break;
+                }
+                return value
+            },
+            handlerGender(data){
+                let value=[];
+                switch (this.value) {
+                    case 1:
+                        
+                        value=data.map(item=>{
+                            
+                            if(item.cost){
+                                return {
+                                    value:item.cost,
+                                    name:item.gender
+                                }
+                            }
+                            
+                        })
+                        
+                        
+                        break;
+                    case 2:
+                        value=data.map(item=>{
+                            
+                            if(item.cost){
+                                return {
+                                    value:item.photoShow,
+                                    name:item.gender
+                                }
+                            }
+                            
+                        })
+                        
+                        break;
+                    case 3:
+                        value=data.map(item=>{
+                            
+                            if(item.cost){
+                                return {
+                                    value:item.photoClick,
+                                    name:item.gender
+                                }
+                            }
+                            
+                        })
+                        break;
+                    case 4:
+                        value=data.map(item=>{
+                            
+                            if(item.cost){
+                                return {
+                                    value:item.aclick,
+                                    name:item.gender
+                                }
+                            }
+                            
+                        })
+                        break;
+                
+                    default:
+                        break;
+                }
+                return value
+            },
+            handlerAge(data){
+                let value=[];
+                switch (this.value) {
+                    case 1:
+                        
+                        value=data.map(item=>{
+                            
+                            if(item.cost){
+                                return {
+                                    value:item.cost,
+                                    name:item.ageSegment
+                                }
+                            }
+                            
+                        })
+                        
+                        
+                        break;
+                    case 2:
+                        value=data.map(item=>{
+                            
+                            if(item.cost){
+                                return {
+                                    value:item.photoShow,
+                                    name:item.ageSegment
+                                }
+                            }
+                            
+                        })
+                        
+                        break;
+                    case 3:
+                        value=data.map(item=>{
+                            
+                            if(item.cost){
+                                return {
+                                    value:item.photoClick,
+                                    name:item.ageSegment
+                                }
+                            }
+                            
+                        })
+                        break;
+                    case 4:
+                        value=data.map(item=>{
+                            
+                            if(item.cost){
+                                return {
+                                    value:item.aclick,
+                                    name:item.ageSegment
+                                }
+                            }
+                            
+                        })
+                        break;
+                
+                    default:
+                        break;
+                }
+                return value
+            },
+
+
+
+
             getDetailTableData(){
-                this.loading=true
+                
                 let params=this.handlerParams();
-                params.dataType=this.tableValue
-                postAction('',params).then(res=>{
-                    console.log(res)
-                    this.loading=false
-                    this.tableData=res.result.list
-                })
+                if(params.accountId&&(params.targetIds||params.codes)){
+                    params.dataType=this.tableValue
+                    this.loading=true
+                    postAction('',params).then(res=>{
+                        console.log(res)
+                        this.loading=false
+                        this.tableData=res.result.list
+                    })
+                }else{
+                   
+                }
             },
 
             getRelativeData(){
-                this.materialloading=true
+                
                 let params=this.handlerParams();
                 // params.dataType=this.tableValue
-                postAction('/ai/analyze/report/targetOrMaterial',params).then(res=>{
+                if(params.accountId&&(params.targetIds||params.codes)){
+                    this.materialloading=true
+                    postAction('/ai/analyze/report/targetOrMaterial',params).then(res=>{
                     console.log(res)
                     this.materialloading=false
-                    if(res.success){
-                        this.materialtableData=res.result.list
-                        this.ipagination.total=res.result.total;
-                    }else{
-                        this.$message.error('出错了')
-                    }
-                    
+                        if(res.success){
+                            this.materialtableData=res.result.list
+                            this.ipagination.total=res.result.total;
+                        }else{
+                            this.$message.error('出错了')
+                        }
+                        
 
-                })
+                    })
+                }else{
+                    this.$message.error('请选择账户、策略等信息')
+                }
+                
             },
 
             search(){
+                
                 this.getRelativeData()
+                // this.getDetailTableData()
+                this.getEchartData()
             },
 
             handlerParams(){
                 let params={};
                 params.accountId=this.accountIds
                 if(this.tabKey==1){
-                    params.type='target'
-                    params.strategyId=this.directionalId[0].split('_')[0]
-                    params.targetIds=this.directionalId.map(item=>{
-                        return item.split('_')[1]
-                    })
+                    if(this.directionalId&&this.directionalId.length){
+                        params.type='target'
+                        params.strategyId=this.directionalId[0].split('_')[0]
+                        params.targetIds=this.directionalId.map(item=>{
+                            return item.split('_')[1]
+                        })
+                    }
+                    
                 }else{
                     params.type='material'
-                    params.strategyId=this.materialId[0].split('_')[0]
-                    params.codes=this.materialId.map(item=>{
-                        return item.split('_')[1]
-                    })
+                    if(this.materialId&&this.materialId.length){
+                        params.strategyId=this.materialId[0].split('_')[0]
+                        params.codes=this.materialId.map(item=>{
+                            return item.split('_')[1]
+                        })
+                    }
+                    
                 }
                 if(this.dateRange&&this.dateRange.length>0){
                     params.startDate=this.dateRange[0].format('YYYY-MM-DD')