魏志佳 преди 5 години
родител
ревизия
4735af4803
променени са 3 файла, в които са добавени 409 реда и са изтрити 230 реда
  1. 399 220
      src/views/modules/Statistics/mediaReport.vue
  2. 7 7
      src/views/modules/Statistics/performanceRelated/performanceRelated.vue
  3. 3 3
      vue.config.js

+ 399 - 220
src/views/modules/Statistics/mediaReport.vue

@@ -3,88 +3,124 @@
         <div class="mediaReport_header">
             <div class="option-top">
                 <span class="item">
+                    <span class="title">
+                         公司
+                        <a-tooltip class="tipinfo">
+                            <template slot="title">
+                                不选时,默认查询全部公司(包括渠道)。
+                            </template>
+                           
+                            <a-icon type="question-circle" />
+                        </a-tooltip>              
+                    </span>
+                    <span>:</span>
                     <a-select placeholder="请选择公司" style="width: 120px" v-model="company" @change="companyChange">
                         <a-select-option value="">全部</a-select-option>
-                        <a-select-option v-for="(item,index) in companyArr" :key="index">
-                            {{item}}
+                        <a-select-option v-for="item in companyArr" :key="item.companyId" :value='item.companyId'>
+                            {{item.area}}
                         </a-select-option>
                     </a-select>
-                    <a-tooltip class="tipinfo">
-                        <template slot="title">
-                            不选时,默认查询全部公司(包括渠道)。
-                        </template>
-                        <a-icon type="question-circle" />
-                    </a-tooltip>
+                    
                 </span>
                 <span class="item">
+                    <span class="title">
+                        广告主
+                       <a-tooltip class="tipinfo">
+                            <template slot="title">
+                                不选时,默认查询全部广告主。不选择公司时,不可选择广告主。
+                            </template>
+                            <a-icon type="question-circle" />
+                        </a-tooltip> 
+                       
+                    </span>
+                    <span>:</span>
                     <a-select
-                        mode="multiple"
+                        show-search
                         placeholder='请选择或搜索广告主'
-                        style="width: 300px"                        
-                        @change="advertisersChange"
-                        v-model="advertiser"
-                        :maxTagCount='1'
-                    >
+                        option-filter-prop="children"
+                         style="width: 300px"     
+                        :filter-option="filterOption"
+                        @focus="handleFocus"
+                        @blur="handleBlur"
+                        @change="advertisersChange"                                                       
+                        v-model="advertiser"                       
+                        >
                         <a-select-option value="">全部</a-select-option>
-                        <a-select-option v-for="(item,index) in advertisersArr" :key="index">
-                            {{item}}
+                        <a-select-option v-for="item in advertisersArr" :key="item.id" :value='item.id'>
+                            {{item.name}}
                         </a-select-option>
                     </a-select>
-                    <a-tooltip class="tipinfo">
-                        <template slot="title">
-                            不选时,默认查询全部广告主。不选择公司时,不可选择广告主。
-                        </template>
-                        <a-icon type="question-circle" />
-                    </a-tooltip>
+                    
                 </span>
                 <span class="item">
+                     <span class="title">
+                         项目
+                        <a-tooltip class="tipinfo">
+                            <template slot="title">
+                                不选时,默认查询全部项目。不选广告主时,不可选择项目
+                            </template>
+                            <a-icon type="question-circle" />
+                        </a-tooltip>            
+                    </span>
+                    <span>:</span>
                     <a-select
-                        mode="multiple"
+                        show-search                        
+                        option-filter-prop="children"   
+                        :filter-option="filterOption"
+                        @focus="handleFocus"
+                        @blur="handleBlur"
                         placeholder='请选择或搜索项目'
                         style="width: 200px"                        
                         @change="projectChange"
                         v-model="project"
-                        :maxTagCount='1'
-                    >
+                        
+                        >
                         <a-select-option value="">全部</a-select-option>
-                        <a-select-option v-for="(item,index) in projectArr" :key="index">
-                            {{item}}
+                        <a-select-option v-for="item in projectArr" :key="item.id" :value='item.id'>
+                            {{item.project_name}}
                         </a-select-option>
                     </a-select>
-                    <a-tooltip class="tipinfo">
-                        <template slot="title">
-                            不选时,默认查询全部项目。不选广告主时,不可选择项目
-                        </template>
-                        <a-icon type="question-circle" />
-                    </a-tooltip>
+                    
                 </span>
                 
             </div>
             <div class="option-bot">
-                <span class="item">
-                        <a-date-picker @change="onChange" v-model="dateValue" placeholder='请选择日期' />
-
+                 <span class="item">
+                    <span class="title">
+                        媒体
                         <a-tooltip class="tipinfo">
                             <template slot="title">
-                                将以选择的日期为准,做前一天和选择当天的消耗差
+                                不选时,默认查询全部媒介。
                             </template>
                             <a-icon type="question-circle" />
                         </a-tooltip>
+                    </span>
+                    <span>:</span>
+                    <a-select placeholder="请选择媒体" style="width: 120px" v-model="mediaType" >
+                        <a-select-option value="">全部</a-select-option>
+                        <a-select-option :value='1'>头条</a-select-option>
+                        <a-select-option :value='3'>头条内广</a-select-option>
+                        <a-select-option :value='2'>快手</a-select-option>
+                        <a-select-option :value='4'>快手内广</a-select-option>
+                    </a-select>                   
                 </span>
+
                 <span class="item">
-                    <a-select placeholder="请选择媒体" style="width: 120px" v-model="mediaType">
-                        <a-select-option value="">全部</a-select-option>
-                        <a-select-option v-for="(item,index) in mediaTypeArr" :key="index">
-                            {{item}}
-                        </a-select-option>
-                    </a-select>
-                    <a-tooltip class="tipinfo">
-                        <template slot="title">
-                            不选时,默认查询全部媒介。
-                        </template>
-                        <a-icon type="question-circle" />
-                    </a-tooltip>
+                    <span class="title">
+                        日期
+                        <a-tooltip class="tipinfo">
+                            <template slot="title">
+                                将以选择的日期为准,做前一天和选择当天的消耗差
+                            </template>
+                            <a-icon type="question-circle" />
+                        </a-tooltip>
+                       
+                    </span>
+                    <span>:</span>
+                        <a-date-picker @change="onChange" v-model="dateValue" placeholder='请选择日期'  :disabled-date="disabledDate" />
+                        
                 </span>
+               
             </div>
             <a-button type='primary' class="option-btn" @click="searchHandle">搜索</a-button>
         </div>
@@ -99,12 +135,28 @@
                     :dataSource="tableData"
                     bordered
                     id="outTable"
-                    :pagination="false"
+                    :pagination="ipagination"
                     :loading="loading"
                     ref="accountTable"
-                    @change="sort"
+                    @change="tableChange"                   
                     style="word-break: break-all;font-size:16px;font-weight:600"
                 >
+                    <span slot="mediaType" slot-scope="text">
+                        <span v-if="text==1">头条</span>
+                        <span v-if="text==2">快手</span>
+                        <span v-if="text==3">头条内广</span>
+                        <span v-if="text==4">快手内广</span>
+                        <span v-if="text==0">-</span>
+                    </span>
+                     <span slot="cost" slot-scope="yesterdayCost">{{yesterdayCost | decimalsHandle}}</span>
+                     <span slot="cost" slot-scope="todayCost">{{todayCost | decimalsHandle}}</span>
+                     <span slot="cost" slot-scope="diffCost">{{diffCost | decimalsHandle}}</span>
+                     <span slot="operatorManger" slot-scope="operatorManger">{{operatorManger | blankHandle}}</span>
+                     <span slot="operator" slot-scope="operator">{{operator | blankHandle}}</span>
+                     <span slot="sale" slot-scope="sale">{{sale | blankHandle}}</span>
+                     <span slot="plan" slot-scope="plan">{{plan | blankHandle}}</span>
+                     <span slot="shot" slot-scope="shot">{{shot | blankHandle}}</span>
+                     <span slot="clip" slot-scope="clip">{{clip | blankHandle}}</span>
                 </a-table>
             </div>
         </div>
@@ -114,196 +166,279 @@
 <script>
 import moment from 'moment';
 import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
+import { JeecgListMixin } from '@/mixins/ipagination'
 
-const columns=[
-    {
-        title: '媒体',
-        dataIndex: 'mediaType',
-        align: 'center',        
-        scopedSlots: { customRender: 'accountId' }
-    },
-    {
-        title: '广告主ID',
-        dataIndex: 'adverId',
-        align: 'center',       
-        scopedSlots: { customRender: 'adverId' }
-    },
-    {
-        title: '广告主',
-        dataIndex: 'adver',
-        align: 'center',       
-        scopedSlots: { customRender: 'accountId' }
-    },
-    {
-        title: '项目',
-        dataIndex: 'projectName',
-        align: 'center',
-        scopedSlots: { customRender: 'accountId' }
-    },
-    {
-        title: '运营经理',
-        dataIndex: 'projectName',
-        align: 'center',
-        scopedSlots: { customRender: 'accountId' }
-    },
-    {
-        title: '运营',
-        dataIndex: 'projectName',
-        align: 'center',
-        scopedSlots: { customRender: 'accountId' }
-    },
-    {
-        title: '销售',
-        dataIndex: 'projectName',
-        align: 'center',
-        scopedSlots: { customRender: 'accountId' }
-    },
-    {
-        title: '策划',
-        dataIndex: 'projectName',
-        align: 'center',
-        scopedSlots: { customRender: 'accountId' }
-    },
-    {
-        title: '拍摄',
-        dataIndex: 'projectName',
-        align: 'center',
-        scopedSlots: { customRender: 'accountId' }
-    },
-    {
-        title: '剪辑',
-        dataIndex: 'projectName',
-        align: 'center',
-        scopedSlots: { customRender: 'accountId' }
-    },
-    {
-        title: '日期1',
-        dataIndex: 'projectName',
-        align: 'center',
-        scopedSlots: { customRender: 'accountId' }
-    },
-    {
-        title: '日期2',
-        dataIndex: 'projectName',
-        align: 'center',
-        scopedSlots: { customRender: 'accountId' }
-    },
-    {
-        title: '消耗差值',
-        dataIndex: 'projectName',
-        align: 'center',
-        scopedSlots: { customRender: 'accountId' }
-    },
-]
 export default {
+    mixins:[JeecgListMixin],
     data() {
         return {
+            moment,
             company:undefined,//公司的默认值
             mediaType:undefined,// 媒体类型
             advertiser:undefined,//广告主
             project:undefined,//项目
-            dateValue:moment().format('YYYY-MM-DD'),//
+            dateValue:moment(),//
             advertisersArr:[],//广告主数组
             projectArr:[],//项目数组
             companyArr:[],//公司数组
-            mediaTypeArr:[],
-
-            columns,
+            mediaTypeArr:[],           
             tableData:[],
             loading:false,
+            dateString1:moment().subtract(1,'days').format('YYYY-MM-DD'),
+            dateString2:moment().format('YYYY-MM-DD'),
+            columns:[
+                {
+                    title: '媒体',
+                    dataIndex: 'mediaType',
+                    align: 'center',        
+                    scopedSlots: { customRender: 'mediaType' },
+                    width:50
+                },
+                {
+                    title: '广告主',
+                    dataIndex: 'advertiserName',
+                    align: 'center',       
+                    scopedSlots: { customRender: 'advertiserName' }
+                },
+                {
+                    title: '项目',
+                    dataIndex: 'projectName',
+                    align: 'center',
+                    scopedSlots: { customRender: 'projectName' },
+                    width:80
+                },
+                {
+                    title:moment().subtract(1,'days').format('YYYY-MM-DD'),
+                    dataIndex: 'yesterdayCost',
+                    align: 'center',
+                    scopedSlots: { customRender: 'accountId' }
+                },
+                {
+                    title:moment().format('YYYY-MM-DD'),
+                    dataIndex: 'todayCost',
+                    align: 'center',
+                    scopedSlots: { customRender: 'accountId' }
+                },
+                {
+                    title: '消耗差值',
+                    dataIndex: 'diffCost',
+                    align: 'center',
+                    scopedSlots: { customRender: 'diffCost' }
+                },
+                {
+                    title: '运营经理',
+                    dataIndex: 'operatorManger',
+                    align: 'center',
+                    scopedSlots: { customRender: 'operatorManger' },
+                    width:80
+                },
+                {
+                    title: '运营',
+                    dataIndex: 'operator',
+                    align: 'center',
+                    scopedSlots: { customRender: 'operator' },
+                    width:200
+                },
+                {
+                    title: '销售',
+                    dataIndex: 'sale',
+                    align: 'center',
+                    scopedSlots: { customRender: 'sale' },
+                    width:80
+                },
+                {
+                    title: '策划',
+                    dataIndex: 'plan',
+                    align: 'center',
+                    scopedSlots: { customRender: 'plan' },
+                    width:200
+                },
+                {
+                    title: '拍摄',
+                    dataIndex: 'shot',
+                    align: 'center',
+                    scopedSlots: { customRender: 'shot' },
+                    width:200
+                },
+                {
+                    title: '剪辑',
+                    dataIndex: 'clip',
+                    align: 'center',
+                    scopedSlots: { customRender: 'clip' },
+                    width:200
+                },
+                
+            ]
         }
     },
     methods: {
-        moment,
+       
         companyChange(value){
             if(this.company=='' || this.company==undefined){
-                this.company=undefined;
                 this.advertisersArr=[];
                 this.projectArr=[];
                 this.advertiser=undefined;
                 this.project=undefined;
             }else{
                 //网络请求获取广告主数据
+                this.advertisersArr=[];
+                this.projectArr=[];
+                this.advertiser=undefined;
+                this.project=undefined;
+                getAction('/ctop/media/report/getAdvertiser', { 
+                    companyId:this.company              
+                }).then(res => {
+                    if(res.success){
+                        console.log(res)
+                        this.advertisersArr=res.result
+                    }
+                })
             }
         },
         //广告主改变
         advertisersChange(value){
             console.log(`selected ${value}`);
             if(this.advertiser=='' || this.advertiser==undefined){
-                this.advertiser=undefined;
+                
                 this.project=undefined;
                 this.projectArr=[];
+            }else{
+                this.project=undefined;
+                this.projectArr=[];
+                getAction('/ctop/media/report/getProject', { 
+                    companyId:this.company,
+                    advertiserId:this.advertiser           
+                }).then(res => {
+                    if(res.success){                       
+                        console.log(res)
+                        this.projectArr=res.result
+                    }
+                })
             }
         },
         projectChange(value){
             console.log(`selected ${value}`);
             if(this.project==''){
-                this.project=undefined
+                // this.project=undefined
             }
         },
         //日期改变
         onChange(date, dateString) {
-            console.log(date, dateString);
+            // console.log(date, dateString,this.dateValue);
+            let addCol=[
+                {
+                    title:moment(date).subtract(1,'days').format('YYYY-MM-DD'),
+                    dataIndex: 'yesterdayCost',
+                    align: 'center',
+                    scopedSlots: { customRender: 'accountId' }
+                },
+                {
+                    title:dateString,
+                    dataIndex: 'todayCost',
+                    align: 'center',
+                    scopedSlots: { customRender: 'accountId' }
+                },
+            ];
+
+            this.columns.splice(3,2,addCol[0],addCol[1]);
+            this.searchHandle();
         },
 
         //搜索
         searchHandle(){
-
-        },
-        //table的排序
-        sort(pagination, filters, sorter, { currentDataSource }){
-            console.log(pagination, filters, sorter)
-            if(sorter.order == 'ascend'){            
-                this.order='asc'
-                this.target=sorter.columnKey;
-            }else if(sorter.order == 'descend'){
-                this.order='desc'    
-                this.target=sorter.columnKey;
+            let company='';
+            let advertiser='';
+            let project='';
+            let mediaType=''
+            if(this.company==undefined){
+                company=''
             }else{
-                if(this.accountId.length==1  &&  this.dateValue[0].format('YYYY.MM.DD')!=this.dateValue[1].format('YYYY.MM.DD')){
-                    this.target='stat_Datetime',
-                    this.order='asc'
-                }else{
-                    this.target='cost',
-                    this.order='desc'
-                } 
-                
+                company=this.company
+            }
+            if(this.advertiser==undefined){
+                advertiser=''
+            }else{
+                advertiser=this.advertiser
             }
+            if(this.project==undefined){
+                project=''
+            }else{
+                project=this.project
+            }
+            if(this.mediaType==undefined){
+                mediaType=''
+            }else{
+                mediaType=this.mediaType
+            }
+
+            this.tableHttp({
+                companyId:company,
+                advertiserId:advertiser,
+                projectId:project,
+                mediaType,
+                todayDate:this.dateValue.format('YYYY-MM-DD'),
+                yesterdayDate:moment(this.dateValue).subtract(1,"days").format('YYYY-MM-DD'),
+            })
+        },
+        //table的改变(页码改变请求数据,也可以写排序)
+        tableChange(pagination, filters, sorter, { currentDataSource }){
+         
             
-            this.tableHttp();
+            this.searchHandle();
         },
         //table的网络请求
-        tableHttp(){
+        tableHttp(params){
             this.loading=true;
-            postAction('/ctop/byteDance/dailyPage/report/list', {
-                
-            }).then(res => {
+            this.tableData=[]
+            postAction(`/ctop/media/report/${this.ipagination.current}/${this.ipagination.pageSize}`, params).then(res => {
                 if(res.success){
+                    // console.log(res)
                     this.loading=false;
-
+                    this.ipagination.total = res.result.total 
+                    if(res.success){
+                        res.result.list.map((item,index)=>{
+                            item.key=index
+                        })
+                        this.tableData=res.result.list
+                    } 
                 }
             })
         },
          //导出报表
         exportExcel() {
-            
-            let column = this.columns.map((item, index) => {        
-                    return item.dataIndex                         
-            })
-            let columns=column.splice(3)
-                console.log(columns)
-            downFilePost('/ctop/byteDance/dailyPage/report/excel', {
-                
-                mediaId:this.mediaId,
-                discount:this.discount,
-                accountIds:this.accountId,
-                startDate:this.dateValue[0].format('YYYY-MM-DD'),
-                endDate:this.dateValue[1].format('YYYY-MM-DD'),
-                hour:this.timeSelectValue,
-                target:this.target,
-                order:this.order,
-                columns,
-                
+            let company='';
+            let advertiser='';
+            let project='';
+            let mediaType=''
+            if(this.company==undefined){
+                company=''
+            }else{
+                company=this.company
+            }
+            if(this.advertiser==undefined){
+                advertiser=''
+            }else{
+                advertiser=this.advertiser
+            }
+            if(this.project==undefined){
+                project=''
+            }else{
+                project=this.project
+            }
+            if(this.mediaType==undefined){
+                mediaType=''
+            }else{
+                mediaType=this.mediaType
+            }
+
+
+            downFilePost('/ctop/media/report/excel', {
+                companyId:company,
+                advertiserId:advertiser,
+                projectId:project,
+                mediaType,
+                todayDate:this.dateValue.format('YYYY-MM-DD'),
+                yesterdayDate:this.dateValue.subtract(1,"days").format('YYYY-MM-DD'),               
             }).then(res => {
                 let blob = new Blob([res], {
                 type:'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
@@ -311,7 +446,7 @@ export default {
                 let downloadElement = document.createElement('a')
                 let href = window.URL.createObjectURL(blob) //创建下载的链接
                 downloadElement.href = href
-                downloadElement.download = moment().format('YYYY-MM-DD') + '账户报表.xlsx' //下载后文件名
+                downloadElement.download = moment().format('YYYY-MM-DD') + '媒介报表.xlsx' //下载后文件名
                 document.body.appendChild(downloadElement)
                 downloadElement.click() //点击下载
                 document.body.removeChild(downloadElement) //下载完成移除元素
@@ -319,31 +454,56 @@ export default {
             })
         },
 
+        handleBlur() {
+            // console.log('blur');
+        },
+        handleFocus() {
+            // console.log('focus');
+        },
+        filterOption(input, option) {
+            return (
+                option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            );
+        },
+        disabledDate(current) {
+            // console.log(current)
+            // return  current &&current > moment()
+        },
+
     },
     mounted() {
-        postAction('/ctop/media/report/getCompany', {
-                
+        getAction('/ctop/media/report/getCompany', {               
         }).then(res => {
             if(res.success){
-                this.loading=false;
-
+                this.companyArr=res.result
             }
+        });
+
+        this.tableHttp({
+            companyId:'',
+            advertiserId:'',
+            projectId:'',
+            mediaType:'',
+            todayDate:this.dateValue.format('YYYY-MM-DD'),
+            yesterdayDate:this.dateValue.subtract(1,'days').format('YYYY-MM-DD'),
         })
+       
+       
     },
     filters: {
         toPercentage(val) {
-        if(val){
-            if(typeof val != 'string'){
-                return (val * 100).toFixed(2) + '%'
-            }else{
-                return val
-            }
-        }else if(typeof val =='string'){
-                return val
-            }
-        else{
-            return 0
-        }    
+            if(val){
+                if(typeof val != 'string'){
+                    return (val * 100).toFixed(2) + '%'
+                }else{
+                    return val
+                }
+            }else if(typeof val =='string'){
+                    return val
+                }
+            else{
+                return 0
+            }    
         },
         //保留两位小数并且变成货币格式
         decimalsHandle(val){
@@ -377,27 +537,36 @@ export default {
         },
         //变成货币格式
         formatCurrency(val){
-        if((val||val==0)&& typeof val !='string'){
-            let numberStr = val.toString()
-            let str = numberStr.split('').reverse()
-            for (let i = 0; i < str.length; i++) {
-                if ((i + 1) % 4 === 0) {
-                str.splice(i, 0, ',')
+            if((val||val==0)&& typeof val !='string'){
+                let numberStr = val.toString()
+                let str = numberStr.split('').reverse()
+                for (let i = 0; i < str.length; i++) {
+                    if ((i + 1) % 4 === 0) {
+                    str.splice(i, 0, ',')
+                    }
                 }
+                str.reverse()
+                let handleResult = ''
+                for (let j = 0; j < str.length; j++) {
+                    handleResult += str[j]
+                }
+                return handleResult
+            }else if(typeof val =='string'){
+                    return val
             }
-            str.reverse()
-            let handleResult = ''
-            for (let j = 0; j < str.length; j++) {
-                handleResult += str[j]
+            else{
+                return '-'
             }
-            return handleResult
-        }else if(typeof val =='string'){
+                
+        },
+
+        //处理空白为 --
+        blankHandle(val){
+            if(val){
                 return val
-        }
-        else{
-            return '-'
-        }
-            
+            }else{
+                return '-'
+            }
         }
     }
 }
@@ -414,10 +583,20 @@ export default {
                 .item{
                     margin-right: 20px;
                     display: inline-block;
+                    .title{
+                        display: inline-block;
+                        position: relative;
+                        padding-right: 15px;
+                        margin-right: 5px;
+                    }
+                    .tipinfo{
+                        position: absolute;
+                        font-size: 12px;
+                        right: 0px;
+                        top: 0;
+                    }
                 }
-                .tipinfo{
-                    margin-left: 8px;
-                }
+                
             }
             .option-top{
                 margin-bottom: 15px;

+ 7 - 7
src/views/modules/Statistics/performanceRelated/performanceRelated.vue

@@ -779,13 +779,13 @@ export default {
         },
 
         onVisibleChange (key) { //Tooltip 显示隐藏的回调,类似onmouseenter 进入离开事件,用来显示我们不同的信息提醒
-        console.log(key)
-            let str = '';
-            switch (key) {
-                case 1:
-                str = '你的姓名';
-                default:
-                break;
+            console.log(key)
+                let str = '';
+                switch (key) {
+                    case 1:
+                    str = '你的姓名';
+                    default:
+                    break;
             }
 
             // this.filterTitleKey=str        

+ 3 - 3
vue.config.js

@@ -82,9 +82,9 @@ module.exports = {
 
         ws: false,
         changeOrigin: true,
-        pathRewrite: {
-            '/jeecg-boot': ''  //默认所有请求都加了jeecg-boot前缀,需要去掉
-        }
+        // pathRewrite: {
+        //     '/jeecg-boot': ''  //默认所有请求都加了jeecg-boot前缀,需要去掉
+        // }
       },
     },
     // before(app) {